Webmaster''''s Guide to the Wireless Internet part 19 potx

152 Chapter 4 • Enhancing Client-Side Functionality with WMLScript
Figure 4.7 Example2.wmls—WMLScript Program to Calculate the Factorial of
a Number
extern function Calculate(num){
var result = 1;
for (var i=1; i<=num; i++)
result *= i;
WMLBrowser.setVar("result", result);
WMLBrowser.go("Example2.wml#card2");
}
Dissecting the Code
In this example, we want the WMLScript (see Figure 4.7) to calculate the facto-
rial of a number and display the result in a card.This example illustrates several
different features of the WMLScript language.
Let’s take a closer look at the WML deck (see Figure 4.6):
<input type="text" name="num" />
The user enters a number through the use of the <input> element.
<go href="Example2.wmls#Calculate($(num))" />
The Calculate() function within the Example2.wmls file is called.The
number entered by the user (num) is passed to the function.
<card id="card2" title="Card 2">
<p>
$num ! is $(result)
</p>
</card>
Card2 will display the result of the operation performed by the WMLScript.
The value of result is set by the WMLScript function.
Within the WMLScript function, we have the function declaration of
Calculate():
extern function Calculate(num){
var result = 1;

www.syngress.com
159_wg_wi_04 10/22/01 4:34 PM Page 152
Enhancing Client-Side Functionality with WMLScript • Chapter 4 153
A new variable result is defined with the var keyword and set to a value of 1.
for (var i=1; i<=num; i++)
result *= i;
The for loop repeatedly executes a set of instructions. In this case, it multiplies
all the numbers from 1 to num.
WMLBrowser.setVar("result", result);
The result is stored into the WML variable result using the setVar() function
from the WMLBrowser library. Notice that a pair of double quotes encloses the
WML variable result.
WMLBrowser.go("Example2.wml#card2");
}
Once the result is stored, #card2 from the WML deck is loaded using the
go() function from the WMLBrowser library. Figure 4.8 displays the resulting
screens on the WAP Toolkit.
Using WMLScript for Input Validation
The next example illustrates a very common usage of WMLScript—input valida-
tion. Input validation is a very common task performed by Web applications.
Imagine asking the user for his or her birth date. If the user enters 13 for month,
the error could be detected early by client-side input validation, rather than
posting the input to the server and causing a round-trip delay only to realize that
the input is erroneous.This is especially important for WAP application, as the
connection is inherently slow and therefore there is a necessity to reduce the
number of connections to the server.
www.syngress.com
Figure 4.8 Performing Mathematical Operations Using WMLScript
159_wg_wi_04 10/22/01 4:34 PM Page 153
154 Chapter 4 • Enhancing Client-Side Functionality with WMLScript

In this application, we have a user registering using a WAP browser.The user
keys in his or her userID and enters a password twice for confirmation.The
WMLScript will compare the two passwords to ensure that they are identical
before proceeding to register the user. (The WML deck is shown in Figure 4.9
and the WMLScript is shown in Figure 4.10.)
Figure 4.9
Example3.wml—WML Deck to Prompt Users to Enter a UserID
and Password
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
" /><wml>
<card id="card1" title="Registration" newcontext="true">
<p>
UserID : <input type="text" name="userID"/>
Password: <input type="password" name="password1"/>
Confirm Password: <input type="password" name="password2"/>
<do type="accept" label="Register!">
<go href="Example3.wmls#verifyPassword('$password1',
'$password2')"/>
</do>
</p>
</card>
</wml>
Figure 4.10 Example3.wmls—WMLScript Program to Perform Input Validation
extern function verifyPassword (Password1, Password2)
{
var URL;
if (String.compare(Password1, Password2) == 0) {
URL = "register.asp?userID=" + WMLBrowser.getVar("userID") +
"&password=" + Password1;

WMLBrowser.go(URL);
}
www.syngress.com
Continued
159_wg_wi_04 10/22/01 4:34 PM Page 154
Enhancing Client-Side Functionality with WMLScript • Chapter 4 155
else {
DisplayMessage("Passwords do not match! Please retry ");
WMLBrowser.go("Example3.wml");
}
}
function DisplayMessage(message) {
Dialogs.alert(message);
return ;
}
Dissecting the Code
Again, let’s start with the WML deck shown in Figure 4.9:
UserID : <input type="text" name="userID"/>
Password: <input type="password" name="password1"/>
User enters a userID and password
Confirm Password: <input type="password" name="password2"/>
The user re-enters the password:
<go href="Example3.wmls#verifyPassword('$password1', '$password2')"/>
The verifyPassword() function in Example3.wmls is called.The two pass-
words are passed to this function. Notice the pair of double quotes surrounding
the two input parameters.
At the WMLScript end, shown in Figure 4.10, is:
extern function verifyPassword (Password1, Password2)
The first function in this file, verifyPassword(), has two input parameters:
Password1 and Password2.

var URL;
if (String.compare(Password1, Password2) == 0) {
www.syngress.com
Figure 4.10 Continued
159_wg_wi_04 10/22/01 4:34 PM Page 155
156 Chapter 4 • Enhancing Client-Side Functionality with WMLScript
The compare() function in the String library is used to compare the two
strings. If they are identical, the function will return a value of 0. If the two pass-
words were identical, an ASP file would be called.
URL = "register.asp?userID=" + WMLBrowser.getVar("userID") +
"&password=" + Password1;
The URL for the ASP file is created with the query string containing the
userID and password.
WMLBrowser.go(URL);
The browser is then redirected to the ASP file:
else {
DisplayMessage("Passwords do not match! Please retry ");
If the two passwords are not identical, the DisplayMessage() function is
then called.This function takes in a single input parameter:
WMLBrowser.go("Example3.wml");
Once the message is displayed, we reload the Example3.wml deck:
function DisplayMessage(message) {
Dialogs.alert(message);
return ;
}
Notice that the DisplayMessage() function does not have the extern key-
word.This function can be used only within the WMLScript file and is not
callable from a WML deck directly.The output of Example3.wml and
Example3.wmls are shown in Figure 4.11.
www.syngress.com

Figure 4.11 Comparing User Inputs Using WMLScript
159_wg_wi_04 10/22/01 4:34 PM Page 156
Enhancing Client-Side Functionality with WMLScript • Chapter 4 157
NOTE
Functions that only are used internally do not require the extern keyword.
Credit Card Validation
Another common use for WMLScript is in validating credit card numbers.This
example illustrates several WMLScript language constructs by checking the
validity of a credit card number.
The Credit Card Validating Algorithm
Depending on the credit card type, most credit card numbers are encoded with a
check digit. By running the credit number through some algorithms, a check
digit is often appended to the end of the credit card number.To validate that the
number is a valid credit card number, the numbers are applied the same algo-
rithm in the reverse manner.The following illustrates the LUHN Formula (Mod
10) for validating a credit card number.
1. Multiply the value of alternate digits by 2, starting from the second
rightmost digit.
2. Add all the individual digits derived from step 1.
3. If the sum of all the digits is divisible by 10, the card number is valid;
otherwise it is invalid.
Let us demonstrate this algorithm’s use with an example. In this example we will
attempt to validate a credit card with the number 123467890123456.
1. First, multiply the value of the alternate digits by 2 starting from the
second rightmost digit as described previously.
Digit 1234567 8 9 0 1 2 3 456
Multipler x2 x2 x2 x2 x2 x2 x2 x2
Result 2 6 10 14 18 2 6 10
2. Next, add the individual digits derived from the previous step.
2 + 2 + 6 + 4 + ( 1 + 0 ) + 6 + ( 1 + 4 ) + 8 + ( 1 + 8 ) +

0 + 2 + 2 + 6 + 4 + ( 1 + 0 ) + 6 = 64
www.syngress.com
159_wg_wi_04 10/22/01 4:34 PM Page 157
158 Chapter 4 • Enhancing Client-Side Functionality with WMLScript
3. Finally, attempt to divide the resultant sum from step 2 by a value of 10.
Sum=64
Sixty-four is not divisible by 10; therefore the card number is invalid! Our
implementation of this algorithm using WMLScript is shown in Figure 4.12 and
Figure 4.13.
Figure 4.12
Example4.wml—WML Deck to Prompt the User to Enter a Credit
Card Number
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
" /><wml>
<template>
<do type="options" label="Main">
<go href="#card1"/>
</do>
</template>
<card id="card1" title="Card 1">
<p>
Please enter credit card number:
<input type="text" format="*N" name="num"/>
<do type="accept" label="Validate!">
<go href="Example4.wmls#Validate('$(num)')" />
</do>
</p>
</card>
<card id="card2" title="Invalid">

<p>
Credit number not correct.
</p>
</card>
<card id="card3" title="Valid">
<p>
Credit number correct.
www.syngress.com
Continued
159_wg_wi_04 10/22/01 4:34 PM Page 158
Enhancing Client-Side Functionality with WMLScript • Chapter 4 159
</p>
</card>
</wml>
Figure 4.13 Example4.wmls—WMLScript Program to Validate the
Authenticity of a Credit Card Number
extern function Validate(num) {
var sum = 0;
var temp, length;
length = String.length(num);
for (var i=length-1; i>=0; —i) { //start with rightmost
digit
if (i % 2 == 0) {
temp = Lang.parseInt(String.charAt(num,i)) * 2; //multiply the
//number by 2
sum += Lang.parseInt(String.charAt(temp,0)); //sum up the
// first digit
if (String.length(temp) > 1) //if more than 1
//digit
sum += Lang.parseInt(String.charAt(temp,1));// sum up the

// second digit
} else {
sum += Lang.parseInt(String.charAt(num,i)); // simply sum up
// the number
}
}
if (sum % 10 != 0) // if not divisible
// by 10
WMLBrowser.go("#card2"); // card number
// not valid
else // else
www.syngress.com
Figure 4.12 Continued
Continued
159_wg_wi_04 10/22/01 4:34 PM Page 159
160 Chapter 4 • Enhancing Client-Side Functionality with WMLScript
WMLBrowser.go("#card3"); // card number
// is valid
}
Dissecting the Code
We start with the <template> element of the WML deck shown in Figure 4.12:
<template>
<do type="options" label="Main">
<go href="#card1"/>
</do>
</template>
The <template> element defines deck-level event binding. In this case, the
<do> element is applicable to all the cards in the deck.
Because WMLScript does not support the use of array, we have to improvise
the use of array using a string. Since a string supports element indexing, we can

manipulate the digits as though we are using an array (this can be seen in Figure
4.13). For example, if we have 1234567890123456, we can manipulate it as a
string (see Figure 4.14).
Given the following statement:
length = String.length(num);
We will first want to know the length of the number:
for (var i=length-1; i>=0; —i) { //start with rightmost digit
We will then use a for loop to cycle through all the digits in the number:
www.syngress.com
Figure 4.13 Continued
Figure 4.14 Manipulating a String Much Like an Array
1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6
Position 0 Position 15
159_wg_wi_04 10/22/01 4:34 PM Page 160
Enhancing Client-Side Functionality with WMLScript • Chapter 4 161
if (i % 2 == 0) {
temp = Lang.parseInt(String.charAt(num,i)) * 2; //multiply the
//number by 2
If the position is an even number (the % is the modulus operator), multiply
the digit at that position by 2:
sum += Lang.parseInt(String.charAt(temp,0)); //sum up the first digit
and sum up the result digit-by-digit.
if (String.length(temp) > 1) //if more than 1
//digit
sum += Lang.parseInt(String.charAt(temp,1));// sum up the
// second digit
If the result contains more than a digit, sum up the second digit.
} else {
sum += Lang.parseInt(String.charAt(num,i)); //simply sum up the number
}

If the position number is not an even number, simply sum up the number.
if (sum % 10 != 0) //if not divisible by 10
WMLBrowser.go("#card2"); //card number not valid
else //else
WMLBrowser.go("#card3"); //card number is valid
Finally, take the result and perform a modulus 10 operation. If there is no
remainder the card is valid; otherwise it is invalid. Figure 4.15 shows the resulting
screens on the WAP Toolkit.
www.syngress.com
Figure 4.15 Validating Credit Card Numbers Using WMLScript
159_wg_wi_04 10/22/01 4:34 PM Page 161