1 / 27

WML II (“Son of WML”)

WML II (“Son of WML”). WML WMLScript. 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

julio
Download Presentation

WML II (“Son of WML”)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. 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)

  3. 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>

  4. 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> <card id="card1" title="Card #1"> <p> Hello world! </p> <p> <img src="sunny.wbmp" alt="image"/> </p> </card> </wml>

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

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

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

  8. 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>

  9. WML - Input Revisited <wml> <card id="card1" 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="#card2">Display</a> </p> </card> <card id="card2" title="Card #2"> <p> Welcome, $(salutation) $(name), to my wireless underground volcano lair. </p> </card> </wml>

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

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

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

  13. 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.

  14. 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); • };

  15. WMLScript - Functions • 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; • }

  16. WMLScript - Functions • 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 }

  17. WMLScript - Functions • 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.

  18. WMLScript - Functions • 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

  19. 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?

  20. WMLScript - Calling WMLS from WML extern function increment() { var myVar = WMLBrowser.getVar("myVar"); WMLBrowser.setVar("myVar", myVar + 1); WMLBrowser.refresh(); } What’s going on here?

  21. 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() { • var myVar = WMLBrowser.getVar("myVar"); • if (!Lang.isInt(myVar)) • myVar = 0; • WMLBrowser.setVar("myVar", Lang.parseInt(myVar) + 1); • WMLBrowser.refresh(); • }

  22. 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>

  23. 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"); WMLBrowser.refresh(); } • And the result:

  24. 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)!.

  25. WMLScript - Recursion • 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?

  26. WMLScript - Recursion <wml> <card id="card1"> <onevent type="onenterforward"> <refresh> <setvar name="nFact" value="&lt;untested&gt;" /> </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)); WMLBrowser.refresh(); } extern function recurseFactorial(n) { if (n > 1) return n * recurseFactorial(n-1); else return n; }

  27. 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.

More Related