WML II Son of WML n WMLScript WML

  • Slides: 27
Download presentation
WML II (“Son of WML”) n. WMLScript

WML II (“Son of WML”) n. WMLScript

WML - A Quick Review n Document structure <wml>, <card id=“. . . ”>.

WML - A Quick Review n Document structure <wml>, <card id=“. . . ”>. . . n Text and image controls <p>. . . , <br/>, <table>. . . , <img src=“. . . ” alt=“. . . ”/> n Navigation controls <go>, <prev>, <noop>, <refresh> n Events onenterforward, onenterback, ontimer <timer value=“. . . ”> <do. . . >. . . , <onevent. . . >. . . n Variables <setvar>, $(foo)

WML - Examples n A minimal WML file <? xml version="1. 0"? > <!DOCTYPE

WML - Examples n A minimal WML file <? xml version="1. 0"? > <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1. 3//EN” "http: //www. wapforum. org/DTD/wml 13. dtd"> <wml> <card id="card 1" title="Card #1"> <p> Hello world! </p> </card> </wml>

WML - Examples n Loading an image-- <? xml version="1. 0"? > <!DOCTYPE wml

WML - Examples n Loading an image-- <? xml version="1. 0"? > <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1. 3//EN" "http: //www. wapforum. org/DTD/wml 13. dtd"> <wml> <card id="card 1" title="Card #1"> <p> Hello world! </p> <img src="sunny. wbmp" alt="image"/> </p> </card> </wml>

WML - Examples n Using a softkey-- <wml> <card id="card 1" title="Card #1"> <do

WML - Examples n Using a softkey-- <wml> <card id="card 1" title="Card #1"> <do type="accept"> <go href="#card 2" /> </do> <p> Hello world! </p> </card> <card id="card 2" title="Card #2"> <p> Hello world! </p> <img src="sunny. wbmp" alt="image"/> </p> </card> </wml>

WML - Examples n Using a link-- <wml> <card id="card 1" title="Card #1"> <p>

WML - Examples n Using a link-- <wml> <card id="card 1" title="Card #1"> <p> Hello world! </p> <p> Link to <a href="#card 2">Card 2</a> </p> </card> <card id="card 2" title="Card #2"> <p> Hello world! </p> <img src="sunny. wbmp" alt="image"/> </p> </card> </wml>

WML - Examples n Using a timer-- <wml> <card id="card 1" title="Card #1" ontimer="#card

WML - Examples n Using a timer-- <wml> <card id="card 1" title="Card #1" ontimer="#card 2"> <timer value="30"/> <p> Hello world! </p> </card> <card id="card 2" title="Card #2"> <p> Hello world! </p> <img src="sunny. wbmp" alt="image"/> </p> </card> </wml>

WML - Examples n Table layout-- <wml> <card id="card 1" title="Card #1"> <p> Hello

WML - Examples n Table layout-- <wml> <card id="card 1" title="Card #1"> <p> Hello world! </p> <table columns=“ 2"> <tr> <td><img src="rainy. wbmp" alt="img"/></td> <td><img src="cloudy. wbmp" alt="img"/></td> </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> <card id="card 1" title="Card #1"> <p> Last name :

WML - Input Revisited <wml> <card id="card 1" title="Card #1"> <p> Last name : <input name=”name"/><br/> Gender : <select name=”salutation"> <option value="Ms. ">Female</option> <option value="Mr. ">Male</option> </select> <a href="#card 2">Display</a> </p> </card> <card id="card 2" title="Card #2"> <p> Welcome, $(salutation) $(name), to my wireless underground volcano lair. </p> </card> </wml>

WML - Input Revisited n The <input> tag: Use to record variable user input

WML - Input Revisited n 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.

WML - Input Revisited n The <select> tag: Use to limit user entry between

WML - Input Revisited n 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 n 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> <card id="card 1" title="Card #1"> <p> Choose a

WML - Input as Navigation <wml> <card id="card 1" title="Card #1"> <p> Choose a lair: <br/> <select> <option onpick="#card 2">Volcano</option> <option onpick="#card 3">Underground</option> </select> </p> </card> <card id="card 2" title="Card #2"> <p>Welcome to my wireless volcano lair. </p> </card> <card id="card 3" title="Card #3"> <p>Welcome to my wireless underground lair. </p> </card> </wml>

WMLScript n n n WMLScript is similiar to Java. Script in function; it allows

WMLScript n n n WMLScript is similiar to Java. Script in function; it allows a more powerful and controllable degree of scripting control than offered by simple WMLScript offers a decent range of stringmanipulating 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 n n Within each function, you’ll write WMLScript code. Syntax: var

WMLScript - Functions n n 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++) { my. Func(index); };

WMLScript - Functions n Declaring a function of your own: Ex: extern function get.

WMLScript - Functions n Declaring a function of your own: Ex: extern function get. Hello() { return “hello!”; } Ex: extern function add. One(n) { return n+1; } Ex: extern function add. Vals(n, m) { return n+m; }

WMLScript - Functions n When you declare a function, it can call other functions:

WMLScript - Functions n When you declare a function, it can call other functions: extern function my. Func() { var n = 2; n = my. Other. Func(n); return n; // Initialise n to 2 // Call my. Other. Func() // n is now 4 (n * n) } function my. Other. Func(n) { return n * n; } // Note--not extern // Take n and return n squared

WMLScript - Functions n The WMLScript Libraries: n n Lang (miscellaneous routines) Float (real

WMLScript - Functions n The WMLScript Libraries: n n 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.

WMLScript - Functions n n A few common standard library routines: WMLBrowser. get. Var(<name>)

WMLScript - Functions n n A few common standard library routines: WMLBrowser. get. Var(<name>) WMLBrowser. set. Var(<name>, <value>) WMLBrowser. refresh() WMLBrowser. go(url) // // Lang. is. Int(<value>) Lang. parse. Int(<value>) // Test for a number // Convert to a number gets a var’s value sets a var’s value reload this page go to a url 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="card 1"> <p> Value : $(my.

WMLScript - Calling WMLS from WML <wml> <card id="card 1"> <p> Value : $(my. Var)<br/> Click <a href="Hello. World 8. wmls#increment()">here</a> to increment the value. </p> </card> </wml> extern function increment() { var my. Var = WMLBrowser. get. Var("my. Var"); WMLBrowser. set. Var("my. Var", my. Var + 1); WMLBrowser. refresh(); } What will this code do?

WMLScript - Calling WMLS from WML extern function increment() { var my. Var =

WMLScript - Calling WMLS from WML extern function increment() { var my. Var = WMLBrowser. get. Var("my. Var"); WMLBrowser. set. Var("my. Var", WMLBrowser. refresh(); } my. Var + 1); What’s going on here?

WMLScript - What happened back there? n Variable types The problem was that variables

WMLScript - What happened back there? n 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 to. Int() function to force the variable type to an integer: extern function increment() { var my. Var = WMLBrowser. get. Var("my. Var"); if (!Lang. is. Int(my. Var)) my. Var = 0; WMLBrowser. set. Var("my. Var", Lang. parse. Int(my. Var) + 1); WMLBrowser. refresh(); }

WMLScript - Initialisation and conditions n Initialising a variable in WML: <wml> <card id="card

WMLScript - Initialisation and conditions n Initialising a variable in WML: <wml> <card id="card 1"> <onevent type=”onenterforward"> <refresh> <setvar name="my. Oddity" value="untested" /> </refresh> </onevent> <p> Value : <input name=" my. Var" format="N*N"/><br/> Click <a href="Hello. World 9. wmls#test. Value()">here</a> to test the value. <br/> The value is $(my. Oddity). </p> </card> </wml>

WMLScript - Initialisation and conditions n Testing a value in WMLS: extern function test.

WMLScript - Initialisation and conditions n Testing a value in WMLS: extern function test. Value() { var my. Var = Lang. parse. Int(WMLBrowser. get. Var("my. Var")); if (((my. Var / 2) * 2) == my. Var) WMLBrowser. set. Var("my. Oddity", "even"); else WMLBrowser. set. Var("my. Oddity", "odd"); WMLBrowser. refresh(); } n And the result:

WMLScript - Recursion n “Recursion” Recursion is the term for when a function calls

WMLScript - Recursion n “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)!.

WMLScript - Recursion n Recursion - N Factorial (example) N!: extern function recurse. Factorial(n)

WMLScript - Recursion n Recursion - N Factorial (example) N!: extern function recurse. Factorial(n) { if (n > 1) return n * recurse. Factorial(n-1); else return n; } This defines N! in code. When you call recurse. Factorial(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?

WMLScript - Recursion <wml> <card id="card 1"> <onevent type="onenterforward"> <refresh> <setvar name="n. Fact" value="<

WMLScript - Recursion <wml> <card id="card 1"> <onevent type="onenterforward"> <refresh> <setvar name="n. Fact" value="< untested> " /> </refresh> </onevent> <p> Enter N : <input name="n" format="N*N"/><br/> Click <a href="Hello. World 10. wmls#factorial ()">here</a> to find N! ("N factorial"). <br/> N! = $(n. Fact). </p> </card> </wml> extern function factorial() { var n = Lang. parse. Int(WMLBrowser. get. Var(" n")); if (n < 0) n = 0; WMLBrowser. set. Var("n. Fact", recurse. Factorial(n)); WMLBrowser. refresh(); } extern function recurse. Factorial(n) { if (n > 1) return n * recurse. Factorial(n-1); else return n; }

Bibliography n WML Language Reference: http: //devgate 2. phone. com/htmldoc/41/wmlref/ n WMLScript Reference: http:

Bibliography n WML Language Reference: http: //devgate 2. phone. com/htmldoc/41/wmlref/ n WMLScript Reference: http: //developer. openwave. com/htmldoc/41/wmlscript/ n All code used is available on the J: drive. n No variables were harmed in the making of this lecture.