Quick Referance to WML


Published on

Its provide Quick reference to the Wireless Markup Language.

Published in: Education, Technology, Business
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • The anchor element specifies the head of a link.
  • Quick Referance to WML

    1. 2. <ul><li>Topic : </li></ul><ul><li>Introduction </li></ul><ul><li>Header </li></ul><ul><li>Decks and cards </li></ul><ul><li>Events </li></ul><ul><li>Tasks </li></ul><ul><li>User input </li></ul><ul><li>Anchors </li></ul><ul><li>Images </li></ul><ul><li>Timers </li></ul><ul><li>Variables </li></ul><ul><li>Layout and formatting </li></ul><ul><li>Special characters </li></ul>
    2. 3. <ul><li>WML has been designed to display mainly text-based pages. </li></ul><ul><li>WML is tag-based, shares elements of HTML4 and HDML2, and is defined as an </li></ul><ul><li>XML document type. </li></ul><ul><li>Each WML document is a single deck, which is made up of one or more cards. </li></ul><ul><li>Introduction </li></ul><ul><li>When the user accesses site, it sends back a </li></ul><ul><li>deck; the user is shown the first card, reads the </li></ul><ul><li>content, possibly can enter some information, </li></ul><ul><li>and then moves to another card, the choice of </li></ul><ul><li>which is dependent on the user’s action. </li></ul><ul><li>Characteristics : </li></ul><ul><li>Support for texts: </li></ul><ul><li>Support for images: </li></ul><ul><li>User input: </li></ul><ul><li>Navigation and history stack: </li></ul><ul><li>International support: </li></ul><ul><li>Optimization for narrow-band : </li></ul>
    3. 4. WAP CLIENT APPLICATION SERVER WML File Request WML File Received WML Script File Request WML Script File Received WML File Request received WML File Sent WML Script File Req received WML Script File sent Through the Gateway Through the Gateway Through the Gateway Through the Gateway WML Script WML script is a lightweight procedural scripting language, which is based on ECMAScript, the standardized version of JavaScript
    4. 5. <ul><li>Decks and cards </li></ul><ul><li><wm l> <wml xml:lang=&quot; lang&quot; > </li></ul><ul><li>content </li></ul><ul><li></wml> </li></ul><ul><li><car d> <card id=&quot; name” title=&quot; label” newcontext=&quot; boolean” style=&quot; style” onenterforward=&quot; url&quot;onenterbackward=&quot; url” ontimer=&quot; url&quot; > content </li></ul><ul><li></card> </li></ul><ul><li><templat e> <template onenterforward=&quot; url” onenterbackward=&quot; url” </li></ul><ul><li>ontimer=&quot; url&quot; > content </li></ul><ul><li></template> </li></ul><ul><li><hea d> <head>content </li></ul><ul><li></head> </li></ul><ul><li><acces s> <access domain=&quot; domain” path=&quot; path&quot; /> <met a> <meta name=&quot; name &quot;| http-equiv=&quot; name &quot;| user-agent=&quot; agent” content=&quot; value&quot; </li></ul><ul><li>scheme=&quot; format&quot; /> </li></ul><ul><li>Header </li></ul><ul><li><?xml version=&quot;1.0&quot;?> </li></ul>
    5. 6. <?xml version=&quot;1.0&quot;?> <!DOCTYPE wml PUBLIC &quot;-//WAPFORUM//DTD WML 1.1//EN&quot; &quot;http://www.wapforum.org/DTD/wml_1.1.xml&quot;> First Example : <wml> <card id=&quot;First_Card&quot;> <do type=&quot;accept&quot; label=&quot;Next&quot;> <go href=&quot;#Second_Card&quot;/> </do> <p> Select <b>Next</b> to display the next card. </p> </card> <card id=&quot;Second_Card&quot;> <p> This card contains the following:... </p> </card> </wml> The first two lines define the document prologue that identifies the XML subset. The Next line defines the header of the WML deck. This line of the deck specifies the header of the first card. This line defines an action, which specifies what the user agent should do when the user presses a specified function key. This line specifies the action related to the specified key. Next Back
    6. 7. Example : The following example demonstrates a DO element that includes a go task for the ACCEPT key . The first card in the deck specifies a <do> statement with the same type attribute, so the card-level binding overrides the deck-level binding for that car d. The deck-level binding still applies to the second and third cards in the deck. <wml> <template> <do type=&quot;accept&quot; label=&quot;Pick&quot;> <prev/> </do> </template> <card id=&quot;card1&quot;> <do type=&quot;accept&quot; label=&quot;Black&quot;> <go href=&quot;#card2&quot;/> </do> <do type=&quot;options&quot; label=&quot;White&quot;> <go href=&quot;#card3&quot;/> </do> <p> Pick a color: </p> </card> <card id=&quot;card2&quot;> <p> You picked black.</p> </card> <card id=&quot;card3&quot;> <p> You picked white. </p></card> </wml> <ul><li>Events </li></ul><do type=&quot; typ e&quot; label=&quot; labe l&quot; name=&quot; nam e&quot; optional=&quot; boolea n&quot;> task </do> <onevent type=&quot; typ e &quot;> task </onevent> <postfield name=&quot; valu e&quot; value=&quot; valu e&quot;>
    7. 8. In the following example, the onenterbackward event causes the user agent to navigate to card2 when the user enters this card using a prev task or navigating backwards in the history stack. This means that card2 is displayed to the user instead of card1. Note that if the user navigates forward to this card by using the go task, for example, card1 is displayed. <card id=&quot;card1&quot;> <onevent type=&quot;onenterbackward&quot;> <go href=&quot;#card2&quot;/> </onevent> <p> Hello World! </p> </card> <card id=&quot;card2&quot;> <p> You came back!</p> </card> The following example posts three name values to the web server, letting you send data back from the client . HTTP POST method is used to send the data. <go method=&quot;post&quot; href=&quot;http://hostname/servlet/bank&quot;> <postfield name=&quot;money&quot; value=&quot;100&quot;/> <postfield name=&quot;account&quot; value=&quot;12345&quot;/> <postfield name=&quot;operation&quot; value=&quot;deposit&quot;/> </go>
    8. 9. Example : The following WML lets the user enter a stock symbol and then generates a URL request with the stock symbol specified in an argument. <wml> <card> <do type=&quot;accept&quot;> <go href=&quot;http://foo.com/servlet/stock&quot; method=&quot;post&quot;> postfield name=&quot;stk” value=&quot;$(stock)&quot;> </do> <p> Enter stock: <input name=&quot;stock&quot; format=&quot;4A&quot;/> </p> </card> </wml> URL Request: http://foo.com/servlet/stock postfield: stock=“gm” <ul><li>Tasks </li></ul><go href=&quot; hre f&quot; sendreferer=&quot; boolea n&quot; method=&quot; metho d” accept-charset=&quot; charse t&quot; > content </go> <pre v> content </prev> <noo p/> <refres h> content </refresh>
    9. 10. <ul><li>User Input </li></ul><input name=&quot; variabl e&quot; title=&quot; labe l&quot; type=&quot; typ e&quot; value=&quot; valu e” value=&quot; defaul t&quot; format=&quot; mas k&quot; emptyok=&quot; boolea n&quot; size=&quot;n” maxlength=&quot;n&quot; tabindex=&quot;n&quot;/> Example : The following deck defines a card requesting the user to enter a name and a card displaying the name entered. <wml> <card id=&quot;Card_1&quot; title=&quot;Card 1&quot;> <do type=&quot;accept&quot;> <go href=&quot;#Card_2&quot;/> </do> <p> Enter your name: <input name=&quot;username&quot;/> </p> </card> <card id=&quot;Card_2&quot; title=&quot;Card 2&quot;> <p> Hello $(username)! </p> </card> </wml>
    10. 11. <ul><li>User Input </li></ul><select title=&quot; labe l&quot; multiple=&quot; boolea n&quot; name=&quot; variabl e&quot; value=&quot; defaul t&quot; iname=&quot; index_va r&quot; ivalue=&quot; defaul t&quot; tabindex=&quot;n&quot;> content </select> <option title=&quot; labe l&quot; value=&quot; valu e&quot; onpick=&quot; hre f&quot;> content </option> <optgroup title=&quot; labe l&quot;> content </optgroup> <fieldset title=&quot; labe l&quot;> content </fieldset> Example : Single-choice list : The following example illustrates a simple single-choice list with a default value. <wml> <card> <p> Please choose your favorite animal: <select iname=&quot;I&quot; ivalue=&quot;1&quot;> <option value=&quot;D&quot;>Dog</option> <option value=&quot;C&quot;>Cat</option> </select> </p> </card> </wml>
    11. 12. <ul><li>User Input </li></ul>Option groups list: The following example demonstrates the use of option groups.. <wml> <card id=&quot;card1&quot; title=&quot;Country&quot;> <p> Select a country: <select name=&quot;country&quot; multiple=&quot;true&quot; tabindex=&quot;2&quot;> <optgroup title=&quot;Scandinavia&quot;> <option value=&quot;den&quot;>Denmark</option> <option value=&quot;fin&quot;>Finland</option> <option value=&quot;nor&quot;>Norway </option> <option value=&quot;swe&quot;>Sweden </option> </optgroup> <optgroup title=&quot;Europe&quot;> <option value =&quot;fra&quot;>France </option> <option value =&quot;ger&quot;>Germany</option> <option value =&quot;ita&quot;>Italy </option> <option value =&quot;spa&quot;>Spain </option> </optgroup> </select></p> </card> </wml>
    12. 13. <ul><li>Anchors </li></ul><anchor title=&quot; labe l&quot;> task tex t</anchor> <a title=&quot; labe l&quot;> href =&quot;href&quot; text </a> Example : The following WML deck includes a link to the file.wml. When the user activates the link, the user agent navigates to the file.wml and sets the specified variable . <wml> <card id=&quot;links&quot; title=&quot;Links&quot;> <p> This is normat text, but here is a <anchor title=&quot;LINK&quot;>link! <go href=&quot;dir/file.wml&quot;> <setvar name=&quot;var_name&quot; value=&quot;var_value&quot;/> </go> </anchor> </p> </card> </wml> Dir/file.wml
    13. 14. <ul><li>Images </li></ul><img alt=&quot; tex t&quot; src=&quot; ur l&quot; localsrc=&quot; ico n&quot; align=&quot; alignmen t&quot; height=&quot;n&quot; width=&quot;n&quot; vspace=&quot;n&quot; hspace=&quot;n&quot;/> Example : <?xml version=&quot;1.0&quot;?> <!DOCTYPE wml PUBLIC &quot;-//WAPFORUM//DTD WML 1.1//EN&quot; &quot;http://www.wapforum.org/DTD/wml_1.1.xml&quot;> <wml> <card id=&quot;mycard&quot; title=&quot;My girlfriend&quot;> <p><img src=&quot;testimage.wbmp&quot; alt=&quot;Pretty girl&quot;/></p> <p>Check out my girlfriend!<br/>(I wish :-)</p> </card> </wml> Only support images in a special wireless image format called WBMP. Not GIF, not JPEG's
    14. 15. <ul><li>Timers </li></ul><timer name=&quot; variabl e&quot; value=&quot; valu e &quot;/> Example :
    15. 16. <ul><li>Variables </li></ul><setvar name=&quot; nam e&quot; value=&quot; valu e &quot;/> Naming variables : WML variable names consist of an US-ASCII letter or underscore followed by a zero or more letters, digits or underscores. Any other characters are illegal. Variable names are case-sensitive. Setting variables : There are a number of ways to set the value of a variable. When a variable is set and already defined in the browser context, the current value is updated The VAR element specifies a variable name and value, for example: <setvar name=&quot;location&quot; value=&quot;$(X)&quot;/> Substituting variables: Variable values can be substituted into formatted text, option values and URL attributes in WML elements. However, note that only textual information can be substituted, that is, no substitution of elements or attributes is possible. The substitution of variable values happens at runtime in the user agent . Variable example The following example demonstrates the use of tasks and variables in WML decks and cards. Note that the variables will not be set until the user navigates to the second card of the deck.
    16. 17. <ul><li>Variables </li></ul><wml> <card id=&quot;card1&quot; title=&quot;First Card&quot; newcontext=&quot;true&quot;> <p> Card 1 Contents... <br/> <!-- The follw. variables will not be defined until the other card in this deck is entered. --> card1 var1 = $(card1_var1) <br/> card2 var1 = $(card2_var1) <br/> </p> <do type=&quot;accept&quot; label=&quot;Next&quot;> <go href=&quot;#card2&quot;> <setvar name=&quot;card1_var1&quot; value=&quot;val_1&quot;/> </go> </do> </card> <card id=&quot;card2&quot; title=&quot;Second Card&quot;> <onevent type=&quot;onenterforward&quot;> <refresh> <setvar name=&quot;card2_var1&quot; value=&quot;val_2&quot;/> </refresh> </onevent> <p> Card 2 Contents... <br/> card1 var1 = $(card1_var1) <br/> card2 var1 = $(card2_var1) <br/> </p> <do type=&quot;prev&quot; label=&quot;Previous&quot;> <prev/> </do> </card> </wml> Press Upon entry to the second card, the variable card2_var1 is set and the browsercontext is refreshed. The variables have not yet been set.
    17. 18. <ul><li>Layout and formatting </li></ul>Tag Explanation <br> <p align=&quot; alignmen t&quot; mode=&quot; wrapmod e&quot;/> Establishes the line wrap and alignment f or a paragraph. <e m> text </em> Render with emphasis. <stron g> text </strong> Render with strong emphasis. < b> text </b> < i> text </i> Render with Bold & Italic. < u> text </u> Render with underline. <bi g> text </big> Render with a large font. <smal l> text </small> Render with a small font The following WML illustrates the use of text emphasis tags . <wml> <card id=&quot;card1&quot;> <p><em> A <u> Demonstration </u> of Nokia’s <i> <strong> Wireless Application Protocol <br/> </strong></i> <b> Toolkit</b> </em> </p></card> </wml>
    18. 19. <table title=&quot; valu e&quot; align=&quot; alignmen t&quot; columns=&quot; numbe r&quot;/> <t r> </tr> <t d> text layout img anchor a </td> <ul><li>Layout and formatting </li></ul>Example : The following example contains a card with a table that has six rows and three cells of data in each row. On rows two through 6, the second cell contains a wireless bitmap. <wml> <card id=&quot;card1&quot; title=&quot;Weather Forecast&quot;> <p> <table columns=&quot;3&quot;> <tr><td>Day</td><td>Wthr</td><td>Temp</td></tr> <tr> <td>M 6/7</td> <td><img src=&quot;rainy.wbmp&quot; alt=&quot;rain&quot;/></td> <td>25' C</td></tr> <tr> <td>T 6/8</td> <td><img src=&quot;partcldy.wbmp&quot; alt=&quot;partcldy&quot;/></td><td>27' C</td></tr> <tr><td>W 6/9</td><td><img src=&quot;cloudy.wbmp” alt=&quot;cloudy&quot;/></td><td>24' C</td></tr> <tr><td>T 6/10</td><td><img src=&quot;rainy.wbmp&quot; alt=&quot;rainy&quot;/></td><td>28' C</td></tr> <tr><td>F 6/11</td><td><img src=&quot;sunny.wbmp&quot; alt=&quot;sunny&quot;/></td><td>29' C</td></tr> </table> </p> </card> </wml>
    19. 20. <ul><li>Special characters </li></ul>Entity Notation Explanation quot " quotation mark amp & ampersand apos ' apostrophe lt < less than gt > greater than nbsp   non-breaking space shy ­ soft hyphen (discretionary hyphen ) Example : The following code includes a less than character (<) in the escaped form &#60. <wml> <card id=&quot;Card_1&quot;> <p> Numerically 5 < 10 </p> </card> </wml>
    20. 21. <ul><li>Special characters </li></ul>Example: <wml> <card id=&quot;card1&quot;> <p> Ampersand = &amp; <br/> Quote = &quot; <br/> Less than = &lt; <br/> </p> </card> <wml>