340 likes | 676 Views
WML & WML Script. Presented by Kelvin Liu 01/06/2000. Agenda. Explain what is WML & WMLScripts. Explain the concept how WML “pages” are organized. How to create a WML “deck” from scratch. Integrate WML scripts functions into WML decks. What Is WML ? .
E N D
WML & WML Script Presented by Kelvin Liu 01/06/2000
Agenda • Explain what is WML & WMLScripts. • Explain the concept how WML “pages” are organized. • How to create a WML “deck” from scratch. • Integrate WML scripts functions into WML decks.
What Is WML ? • Wireless Markup Language (WML) version 1.1 is designed for creating applications that run on small, mobile devices such as cellular phones and personal digital assistants.
WML Features • WML looks somewhat like Hyper Text Markup Language (HTML). • WML is a formally defined XML application. It inherits most of its syntactic constructs from extensible markup language (XML). • WML has support for text and image.
WML Features • User input support • Text entry, options selections and task invocation • Support Unicode • Narrow-band optimization
Decks and Cards • WML data is structured as a collection of “Cards”. • A Single collection of cards is referred to as a WML “Decks”.
Decks and Cards Card A Card D Card B Card E Card C Card F Deck 1 Deck 2
Decks and Cards • HTML Vs WML HTMLWML html pages = wml decks html bookmarks = wml cards
WML Basics Syntax • WML is case sensitive • WML is markup language, uses tags < > <tag> - Starts of an element </tag> - Ends of an element <tag/> - An empty element e.g. <br/> Line Break <tag attribute=“value”>
WML Basics Syntax • Document header must be present <?xml version=“1.0”?> <!DOCTYPE wml PUBLIC “-//WAPFORUM/DTD WML 1.1//EN” “http://www.wapforum.org/DTD/wml_1.1.xml”> • <wml> tag defines the deck. • <head> tag provide access control and metadata for the deck. • <card> tag defines different cards in a deck.
Example One <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card id="card1" title="Example 1"> <p> <br/> Hello World!!! </p> </card> </wml>
Navigation in WML • Creating a link in WML is just like creating a link in HTML Long Format<anchor>Sample Link<go href=“http://www.some.where”/> </anchor> Short Format <a href=http://www.some.where/>Sample Link</a>
Example Two <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card id="card1" title="First Card"> <p> This card has two links to the second card.<br/> <a href="#card2">Short Form Link</a><br/> <anchor>Long Form Link<go href="#card2"/></anchor> </p> </card> <card id="card2" title="Second Card"> <p> This is the second card. </p> </card> </wml>
Images • WAP 1.1 standard specifies a new and only supported picture format, WBMP. • It is a B/W image format without compression. • Syntax <img src=“image.wbmp” alt=“sample”/>
Events and Tasks • Events are used to handle navigation and events by specifying the processing of user agent events Events: • do – gives the user a general mechanism for performing actions on the current card. • ontimer – The event occurs when a timer expires. • onenterforward – The event occurs when the user enters a card using a go task or any method with identical semantics. • onenterbackward – The event occurs when the user navigates into a card using a prev task or any method with identical semantics. • onpick – The events occurs when the user select or deselects the item in which the event is specified. ETC………….
Events and Tasks • Tasks defines the action to be performed when a certain event occurs. Tasks: • go – It declares a go task, indicating navigation to an URL. • prev – It declares a prev task, indicating navigation to the previous URL in the history stack. • refresh – It declares a refresh task, indicating an update of the specified card variables. • setvar – It specifies the variable to set in the current browser context as a side effect of executing a task. • noop – It specifies that nothing should be done, that is, “no operation.” ETC…….
What is WMLScript? • WMLScript was designed to provide general scripting capabilities to the WAP architecture. • You can use WMLSctipt to complement WML, such as: • Checking the validity of user input • Accessing facilities of the user agent • Generating messages and dialogs locally • Allowing extensions to the user agent software and configuring a user agent after it has been deployed • WMLScript has the same base as JavaScript, but some advanced features have been dropped.
WMLScript Syntax • Syntax very similar to JavaScript. • Case Sensitive Case != case • Semicolons end most statement variable = value; • Line or block comments //this OR /* this */ • Basic operations +,-,*,/,=,==,!=,&&,< • String operations “string text” + string_variable • Blocks of statement {} while(somethings) {do this} • Functions and parameters function function_name (p1,p2)
Calling functions from WML • WML cards refer to WMLScript functions with URL calls • <a href=http://www.some.where/script.wmls#function1 (‘$(wml_var)’,10)> • Function must be specified as an externally callable function with extern • Extern function func1(param1, param2) {…..}
WMLScript Libraries • Standard libraries make WMLScript more efficient. • Stored in client’s scripting environment. • Libraries • Lang (e.g. abs, min, max, etc.) • Float (e.g. int, roung, sqrt, etc.) • String (e.g. length, subString, find, etc.) • URL (e.g. getHost, getPort, getPath, etc.) • WMLBrowser (e.g. getVar, setVar, go, etc.) • Dialogs (e.g. prompt,confirm, alert, etc.)
Example Three <wml> <card id="c1" title="Example 3" newcontext="true"> <onevent type="onenterforward"> <refresh> <setvar name="result" value="??"/> </refresh> </onevent> <p> <input name="num1" format="*N"/> <input name="num2" format="*N"/> $num1 + $num2 = $result <br/> <a href="example3.wmls#add('$(num1)','$(num2)')">Calculate</a> </p> </card> <card id="c2" title="Calculation Result"> <p><br/> $num1 + $num2 = $result <br/> <a href="#c1">Calculate Again</a> </p> </card> </wml> extern function add(x,y) { var res = Lang.parseInt(x)+Lang.parseInt(y); WMLBrowser.setVar("result",res); WMLBrowser.refresh(); WMLBrowser.go("example3.wml#c2"); } Example Provided by NOKIA