wml ii (“son of wml”)

WML II (“Son of WML”)

WMLWMLScript

WML - A Quick Review

Document structure <wml>, <card id=“...”>...

Text and image controls <p>..., <br/>, <table>..., <img src=“...” alt=“...”/>

Navigation controls <go>, <prev>, <noop>, <refresh>

Events onenterforward, onenterback, ontimer <timer value=“...”> <do ...>..., <onevent ...>...

Variables <setvar>, $(foo)

WML - Examples

A minimal WML file

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN” "http://www.wapforum.org/DTD/wml13.dtd">

<wml>

<card id="card1" title="Card #1">

<p> Hello world! </p>

</card>

</wml>

WML - Examples

Loading an image--

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN" "http://www.wapforum.org/DTD/wml13.dtd">

<wml>



<p> <img src="sunny.wbmp" alt="image"/> </p>

</card>

</wml>

WML - Examples

Using a softkey--

<wml>


<do type="accept">

<go href="#card2" />

</do>


</card>




</card>

</wml>

WML - Examples

Using a link--

<wml>



<p> Link to <a href="#card2">Card 2</a> </p>

</card>




</card>

</wml>

WML - Examples

Using a timer--

<wml>

<card id="card1" title="Card #1" ontimer="#card2">

<timer value="30"/>


</card>




</card>

</wml>

WML - Examples

Table layout--<wml> <card id="card1" title="Card #1">

<p> Hello world! </p><p> <table columns=“2"> <tr> <td><img src="rainy.wbmp" alt="img"/></td> <td><img src="cloudy.wbmp" alt="img"/></td>

</tr> <tr>

<td><img src="partcldy.wbmp" alt="img"/></td> <td><img src="sunny.wbmp" alt="img"/></td> </tr> </table></p>

</card></wml>

WML - Input Revisited

<wml>


<p>

Last name : <input name=”name"/><br/>

Gender :

<select name=”salutation">

<option value="Ms.">Female</option>

<option value="Mr.">Male</option>

</select>

<a href="#card2">Display</a>

</p>

</card>


<p>

Welcome, $(salutation) $(name), to my

wireless underground volcano lair.

</p>

</card>

</wml>


The <input> tag: Use to record variable user input name="variable" : required Can specify format

ex: “NNNNN” maps to exactly five digits. “NNaaaa” maps to two digits followed by four letters. The phone won’t accept anything else.

Can specify type=“password” for secure (ie hidden) entry Can specify maxlength=“...” for the max number of characters

of data the user can enter

How the phone chooses to render the input box is up to the phone. Don’t depend on there being, say, a little black box.


The <select> tag: Use to limit user entry between several possible options Can be used for links, as well name="variable” is optional; can just use onpick (below). multiple=“true” or “false” : allow multiple selections.

In the case of multiple selections, the values are stored as a semicolon-delimited list.

value=“...” : sets the default value of the tag’s variable

The <option> tag: Defines a single entry in a <select> value=“...” determines the value that this option sets for the variable

named by the enclosing <select> tag onpick=“url” : when the user selects this option, links directly to another

card or page. You can also catch “onpick” events from the <onevent> tag.

WML - Input as Navigation

<wml>


<p>

Choose a lair:<br/>

<select>

<option onpick="#card2">Volcano</option>

<option onpick="#card3">Underground</option>

</select>

</p>

</card>


<p>Welcome to my wireless volcano lair.</p>

</card>


<p>Welcome to my wireless underground lair.</p>

</card>

</wml>

WMLScript

WMLScript is similiar to JavaScript in function; it allows a more powerful and controllable degree of scripting control than offered by simple WML.

WMLScript offers a decent range of string-manipulating and mathematical functions.

Each WMLScript file is full of functions. Each function is either local--used only within the file--or external--accessible from other WMLS and WML files. To declare a function extern, put the word extern before its

declaration.

WMLScript - Functions

Within each function, you’ll write WMLScript code. Syntax:

var n = 1; // Declares a variable named ‘n’ n = 2; // Assigns n the value 2 if (n==3) ... // Test if n equals 3.

// Note that ‘=‘, assignment, is not the

// same as ‘==‘, which tests equality. You’ve got the full set of if-then tests, loops and so on...

for (var index = 0; index < 100; index++) {

myFunc(index);

};


Declaring a function of your own: Ex:

extern function getHello()

{

return “hello!”;

}

Ex:extern function addOne(n)

{

return n+1;

}

Ex:extern function addVals(n, m)

{

return n+m;

}


When you declare a function, it can call other functions:extern function myFunc()

{

var n = 2; // Initialise n to 2

n = myOtherFunc(n); // Call myOtherFunc()

return n; // n is now 4 (n * n)

}

function myOtherFunc(n) // Note--not extern

{

return n * n; // Take n and return n squared

}


The WMLScript Libraries: Lang (miscellaneous routines) Float (real numbers) String (character string manipulation) URL (HTTP string routines) WMLBrowser (browser interraction) Dialogs (user interraction) Console (debug output)

Each library defines a set of functions that can be called from your code.

For details on each library, consult the reference materials online.


A few common standard library routines: WMLBrowser.getVar(<name>) // gets a var’s value WMLBrowser.setVar(<name>, <value>) // sets a var’s value WMLBrowser.refresh() // reload this page WMLBrowser.go(url) // go to a url

Lang.isInt(<value>) // Test for a number Lang.parseInt(<value>) // Convert to a number

Some common language statements: if (<condition>) <then clause> else <else clause> for (<init>; <test>; <advance counter>) ... while (<condition>) ... return <value>; // Sets the value of

// a function call

WMLScript - Calling WMLS from WML

<wml>

<card id="card1">

<p>

Value : $(myVar)<br/>

Click <a href="HelloWorld8.wmls#increment()">here</a> to increment the value.

</p>

</card>

</wml>

extern function increment() {

var myVar = WMLBrowser.getVar("myVar");

WMLBrowser.setVar("myVar", myVar + 1);

WMLBrowser.refresh();

}

What will this code do?

WMLScript - Calling WMLS from WML

extern function increment() {


WMLBrowser.setVar("myVar", myVar + 1); WMLBrowser.refresh();

}

What’s going on here?

WMLScript - What happened back there?

Variable types The problem was that variables in WMLScript don’t have a type

associated with them. WMLS doesn’t know whether they’re character strings or numbers.

Since “+” will add two numbers or glue together two strings (1+1=2, but ‘abc’+’def’=‘abcdef’), WMLS just assumed we wanted string concatenation.

To make sure we use integer math, use the Lang library’s toInt() function to force the variable type to an integer:extern function increment() {


if (!Lang.isInt(myVar))

myVar = 0;

WMLBrowser.setVar("myVar", Lang.parseInt(myVar) + 1);


}

WMLScript - Initialisation and conditions

Initialising a variable in WML:<wml>

<card id="card1">

<onevent type=”onenterforward">

<refresh>

<setvar name="myOddity" value="untested" />

</refresh>

</onevent>

<p>

Value : <input name="myVar" format="N*N"/><br/>

Click <a href="HelloWorld9.wmls#testValue()">here</a> to test the value.<br/>

The value is $(myOddity).

</p>

</card>

</wml>

WMLScript - Initialisation and conditions

Testing a value in WMLS:extern function testValue() {

var myVar = Lang.parseInt(WMLBrowser.getVar("myVar"));

if (((myVar / 2) * 2) == myVar)

WMLBrowser.setVar("myOddity", "even");

else

WMLBrowser.setVar("myOddity", "odd");


}

And the result:

WMLScript - Recursion

“Recursion” Recursion is the term for when a function calls itself. When

you write recursive code, take care : make sure that there’s always a way out!

Ex:

In mathematics, the phrase “N factorial” means “if N is some number, then multiply all of the numbers from 1 to N together”. You could say that a little more easily as “if N is some number, then multiply N times N minus one, factorial”. You’ve defined factorial in terms of itself.

The shorthand for factorial is !. “N!” is “N factorial”.

In other words, N!= N * (N-1)!.


Recursion - N Factorial (example) N!:

extern function recurseFactorial(n) {

if (n > 1)

return n * recurseFactorial(n-1);

else

return n;

}

This defines N! in code. When you call recurseFactorial(n), it checks n; if n is greater than one, it calculates (n-1)! and then multiplies n onto the total. Since n-1 must eventually reach 1, eventually we’ll fall out of the loop.

Of course, that’s only true if n >= 1, right?


<wml>

<card id="card1">

<onevent type="onenterforward">

<refresh>

<setvar name="nFact" value="<untested>" />

</refresh>

</onevent>

<p>

Enter N : <input name="n" format="N*N"/><br/>

Click <a href="HelloWorld10.wmls#factorial()">here</a> to find N! ("N factorial").<br/>

<br/>

N! = $(nFact).

</p>

</card>

</wml>

extern function factorial() {

var n = Lang.parseInt(WMLBrowser.getVar("n"));

if (n < 0)

n = 0;

WMLBrowser.setVar("nFact", recurseFactorial(n));


}

extern function recurseFactorial(n)

{

if (n > 1)

return n * recurseFactorial(n-1);

else

return n;

}

Bibliography

WML Language Reference: http://devgate2.phone.com/htmldoc/41/wmlref/

WMLScript Reference: http://developer.openwave.com/htmldoc/41/wmlscript/

All code used is available on the J: drive. No variables were harmed in the making of this lecture.

wml ii (“son of wml”)

Documents