WMLScript Versus JavaScript
JavaScript is a rich, full-featured language that offers almost complete control over the entire user interface on a WWW browser. WMLScript is designed to operate within the context of portable, narrowband devices, and while WMLScript is a member of the same programming language family as JavaScript, you don't need to be a JavaScript guru to program WMLScript. For that matter, no JavaScript knowledge is required at all. However, a general knowledge of object-oriented programming will help you get started, since the methods and function calls available in WMLScript are object oriented.
A significant advantage of using WMLScript is its ability to bypass the need to make continuous calls to your content server or application server. You can perform a number of basic string and arithmetic functions by executing client-side WMLScript functions. This can help reduce the impact your WAP applications will have on your server load. For example, if you want to make sure users don't input an empty string as part of a login routine, you can detect whether the string is empty or not using WMLScript instead of using your application server to do the work.
For the purpose of comparing JavaScript and WMLScript, Listing 9.1 presents an input validation application in the two languages for you to compare. For now, just observe the similarities and differences; we'll cover the technical details in a little bit.
Listing 9.1 Input Validation Application in JavaScript
<!--- validate.html --->
1 <HTML>
2 <HEAD>
3 <TITLE>Javascript Validation Example</TITLE>
4 <SCRIPT LANGUAGE="JavaScript">
5 function validator() {
6 if (document.questionnaire.login.value.length < 1) {
7 alert("Your login is required.");
8 return false;
9 }
10 if (document.questionnaire.password.value.length < 1) {
11 alert("Your password is required.");
12 return false;
13 }
14 return true;
15 }
16 </SCRIPT>
17 </HEAD>
18 <BODY BGCOLOR="#FFFFFF">
19 Enter your login and password where indicated below. When you press the submit button,
20 the form will check for valid content.
21 <FORM NAME="questionnaire" ACTION="mailto:[email protected]"
22 onSubmit="validator()";>
23 Login: <INPUT TYPE="text" NAME="login" SIZE="30">
24 <BR>
25 Password: <INPUT TYPE="text" NAME="password" SIZE="30">
26 <BR>
27 <INPUT TYPE="submit" VALUE="Submit">
28 </FORM>
29 </BODY>
30 </HTML>
|
The portion of the code to note in Listing 9.1 is lines 4–17, which represent the JavaScript function validator().
Line 20 contains the <FORM> element, which is the action that executes the JavaScript upon form submission. In this case, the form <input> elements are referenced in the JavaScript code by a combination of the <form> element's name attribute and the <input> elements'name attributes. The value.length object is an inherent property of the <input> elements.
Let's compare the preceding JavaScript with Listing 9.2, which contains the WML/WMLScript equivalent to the preceding code. It will prompt the user for a login name and password, and if they are non-empty, the user will be presented with a success screen.
Listing 9.2 Input Validation Application in WML and WMLScript
There are several ways to design the WML validator, all with the same basic purpose of ensuring non-empty fields to be passed. Just like with the JavaScript example, there is a function defined to be the destination of the submit action. This function checks the values that are posted to see if they contain data. Also like the JavaScript example, there is a single function that first checks the login value and then the pass value. The first difference to notice is that unlike the JavaScript example, the WML and WMLScript reside in two separate files, and the entry point is only through the WML file. The other major difference is that the JavaScript has direct access to the value of the posted data, where as the WMLScript file must explicitly grab the values out of the browser with a call to WMLBrowser.getVar.
What follows is a step-by-step walkthrough of how the WML and WMLScript interact.
The Login card is loaded first since it is the default card.
After the login is entered (or not) the pass card is displayed, which asks the user for a password. When the user presses the accept key on the device, the valiate.wmls file is loaded, and the validate function is called.
Line 1 of validate.wmls begins the validate function.
Line 2 uses the getVar function of the WMLBrowser library to assign the value of login from the WML card to the WMLS variable login. Line 3 does the same for the variable named pass.
Line 4 uses the isEmpty function of the String library to determine whether or not login is an empty string. If login is an empty string, the function returns true and line 5 sends the user back to the login card of the WML deck.
If isEmpty returned false, the same test is preformed with the pass variable. If this resolves to true, the user is sent back to the pass card in the WML deck (line 8).
If neither the login nor the password are empty, the user is sent to the success card with the code in line 10.
Tip
Notice that in validate.wml there is a card with id="pass" as well as an input element with a name="pass". These two namespaces do not collide with each other.
Tip
For more detailed information about the WMLScript specification (and for more information about WAP technology in general), you can find PDF versions of each component of the WAP specification at the following URL:
Now that we've looked at some similarities of WMLScript and JavaScript, let's look at the structure of WMLScript and walk through why and how you might incorporate it into your WAP applications.
WMLScript Syntax and Conventions
Configuring your Web server to serve WMLScript files is almost identical to the configuration for serving WML. The MIME type associated with the .wmls file extension should be
text/vnd.wap.wmlscript
Assuming you've correctly configured your server for WML files, here's a sample application you can use to see if your server is successfully rendering WMLScript.
Save the snippet in Listing 9.3 as config_test.wml in a directory on your Web server.
Listing 9.3 Testing Mime-Type Configuration
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN"
"http://www.wapforum.org/DTD/wml12.dtd">
<wml>
<card id="step1">
<p>
Select OK to test configuration.
<do type="accept">
<go href="config_test.wmls#testscript()"/>
</do>
</p>
</card>
<card id="step2">
<p>
$(result)
</p>
</card>
</wml>
|
You'll also need to save the following snippet as config_test.wmls in the same directory:
extern function testscript() {
WMLBrowser.setVar("result","WMLScript is configured!");
WMLBrowser.go("config_test.wml#step2");
}
Next, load config_test.wml in your WAP emulator of choice or your WAP-compliant device. When you press the accept soft key, you should see the message "WMLScript is configured!". If you don't see this message, you might have incorrectly set the MIME type for WMLScript.
Tip
In some instances, your server may need to be rebooted for the MIME type to be properly set.
It's important to take note of how the WMLScript file was called from the WML deck in the preceding example. You can define one or more functions in one file, but you need to specify the filename and the function name according to the format
filename#function(param 1, param 2, ... param n)
The syntax of a basic WMLScript function is as follows:
extern function foo() {
}
The name of this function is foo, but it doesn't do anything since we haven't specified arguments or statements within the open and close brackets.
If we wanted to use the function foo to set a variable in the WML deck, we might construct it as
extern function foo() {
WMLBrowser.setVar("test", "value");
}
In this example, the setVar function of the WMLBrowser library sets the variable test to value. We'll discuss libraries and their functions later in the chapter.
You can construct statements in WMLScript in the same way you would in JavaScript or C. You can declare variables and control application flow with if, while, and for statements.
Building on our foo() function above, let's declare some variables and introduce some logic into the application. See Listing 9.4.
Listing 9.4 Using Control Statements in WMLScript
In this example, we've embodied a number of concepts we just covered, so I'll step through the code:
Line 1 names the function foo.
Line 2 sets the variable myNumber to a random number greater than or equal to 0 and less than or equal to 10.
Line 3 sets the variable myResult to the specified string.
Line 4 checks to see if myNumber is greater than or equal to 6 (we used the >= operator). If the result is true, the setVar() and go() functions in lines 5 and 6 are executed.
Line 7 begins the else statement. If myNumber is less than 6, lines 8 and 9 are executed.
The overall result will be either "Your number is greater than 5." Or "Your number is less than 6."
Note in lines 5 and 8 we used the + operator to concatenate two strings.
Tip
Unlike JavaScript, WMLScript functions must be contained in an external file. If you're used to programming JavaScript, you may recall you can either place your script within an HTML file within the <HEAD> element or reference the script as an external .js file. WMLScript files are called by a WML action that specifies a URL-formatted value such as <go>, which can exist within the context of the elements <do>, <onevent>, and so on.
This next section will outline the current WMLScript specification and provide you with examples of how to use each function, library, and so on. The goal of this section is to provide you with a working reference guide to the WMLS language as well as give you the tools you need to solve application design needs using WMLS.
WMLScript Operators
Table 9.1 shows some common WMLScript operators. These operators will look very familiar if you've spent time with common programming languages such as JavaScript, Java, ASP, PERL, or others.
| Operator | Operation |
|---|---|
| + | add/concatenate |
| - | subtract |
| * | multiply |
| % | remainder |
| — | pre or post decrement |
| ++ | pre or post increment |
| += | add and assign |
| -= | subtract and assign |
| *= | multiply and assign |
| < | less than |
| > | greater than |
| <= | less than or equal to |
| >= | greater than or equal to |
| == | equal |
| != | not equal to |
| / | divide |
| div | integer division |
| /= | divide and assign |
| div= | divide using integer division and assign |
| %= | remainder and assign |
Using Operators
Now that you're familiar with what types of operators are available in WMLScript, I'll show you some examples of how you might use them.
Increment a Variable On-the-Fly
The following example sets myNumber to 6, then increases it by 2 and reassigns the new value of 8.
function example(){
var myNumber = 6;
var myNumber += 2;
}
Concatenate Two or More Strings
The following example combines two strings to form a new string.
function example(){
var sentenceA = "My name is ";
var sentenceB = "Diego Montoya";
var mySentence = sentenceA + sentenceB;
}
Conditional Expressions
The following example is processed based on the value of myCar.
function example(){
var myCar = WMLBrowser.getVar("car");
if (mycar = "honda"){
var mpg = 32;
}
else if (mycar = "Chevy"){
var mpg = 19;
}
}