WAP and WML
advertisement
WAP and WML The Wireless Application Protocol WAP architecture WML document structure WML syntax •Basic document syntax •Layout •Text formatting •Images •Navigation •Events •Variables WAP and WML WAP Architecture Client Any WAP-enabled phone, ie any phone which runs the Wireless Application Protocol browser software No unique hardware is required There are at least 158 different models today, according to developer.openwave.com WAP Gateway This is a service provided by your mobile service carrier There are at least 51 carriers worldwide who offer WAP gateways (developer.openwave.com) The WAP gateway serves several purposes: • Serve WML, WMLS, and WBMP content • Compile WMLScript • Compress all content into binary form WAP Architecture Do you still need a web server? Early WAP server designs included an HTML-to-WML converter. The theory was that you could serve your original content, just reformulate the tags into WML in an automated manner. Your web server became a back end behind your WAP server; the WAP server would translate requests from the Gateway, through to the web server, and back. This failed painfully. It’s clear now that your content needs to either be in WML, or you need to design for a one-inch-square screen in your HTML. So, if not a web server, then--? Your WAP server is the web server. You can serve both types of content from one system. WAP Architecture Follow the request: Client establishes a data connection to WAP Gateway Client sends WTAI (“Wireless Telephony Application Interface”--HTTP for phones) request for URL entered WAP Gateway receives request, decodes it WAP Gateway sends HTTP request to Web Server Web Server replies with content WAP Gateway re-encodes content and sends it back to client Client renders content locally WML : Documents, Decks and Cards Every WML document must begin with an XML declaration and a DTD: <? xml version=“1.0”?> <!DOCTYPE wml PUBLIC “-//WAPFORUM//DTD WML 1.1//EN” “http://www.wapforum.org/DTD/wml_1.1.xml”> All WML documents contain one or more cards. Each card contains the content for a single page of display. The <WML> tag is the root of the deck. Within the <WML> tag, you’ll one or more <card>’s and perhaps a <head> tag. WML Syntax <wml> <head> <card> <card> title=“…” id =“…” newcontext =“true”, “false” onenterbackward =“[url]” onenterforward =“[url]” ontimer =“[url]” WML Syntax - Layout <p> align=“left”, “right”, center” <p> <table columns="3"> <tr> mode=“wrap”, “nowrap” <td>Cell 1</td> <br /> <td>Cell 2</td> <table> <td>Cell 3</td> columns=“…” align=“l”, “c”, “r” <tr> <td> </tr> </table> </p> WML Syntax - Text Formatting <b> - bold text <big> - big text <em> - emphasized text <i> - italicised text <small> - small text <strong> - strong text <u> -underlined text WML Syntax - Images <img> - Render a WBMP file src=“…” align = “top”, “middle”, “bottom” alt=“…” height=“…”, width=“…” hspace=“…”, vspace=“…” <p> An image: <img src="stickman.wbmp” alt="Stickman"/> </p> WML Syntax - Navigation As in HTML, you link from page to page explicitly with anchors. <p> This is a <a href=“foo.wml”>link</a> </p> WML offers the <a> tag and the <anchor> tag <a> - the simple anchor tag href=“…” <anchor> - more powerful anchor tag <go>, <prev>, <refresh>, <noop>, ... WML Syntax - Navigation A softkey on a mobile phone is a button whose function can be set by the software. Most phone buttons are softkeys. <do> - Map a user softkey to an action; similar to an anchor tag. label=“…” type=“accept”, “prev”, “help”, “reset”, “options”, “delete”, “unknown”, “x-*”, “vnd.*” “accept” is the “YES” button on most phones; “prev” is the “NO” button. When using softkeys, be careful to respect common usage rules. WML Syntax - Navigation <go> - Navigate to a new card <prev> - Back up one on the card stack <refresh> - Reloads the current page <noop> - Do nothing <setvar> - Sets a variable <postfield> - Sends a post (or get) field value to the server WML Syntax - Events <do> is the softkey event handler. <onevent> is a more generalised events handler. type=“onenterbackward”, “onenterforward”, “onpick”, “ontimer” Use onevent to process data differently depending on the action of the user. For example, you might want to initialise a variable to zero with onenterforward, but then incremement it to track user returns in onenterback. Onenterback will fire whenever the user uses the prev softkey to return to the page. WML Syntax - Timer Events Use the <timer> tag to initialise a timer. The timer’s value field specifies 1/10’th’s of a second. The <card> tag defines an ontimer event, whose value is a URL. When the <timer> times out, the <card>’s ontimer URL is loaded. <card id=“card1” ontimer=“#card2”> <timer value=“30”> </card> <card id=“card2”> <p>Here by timer!</p> </card> WML Syntax - Variables A variable in a WML script is a data field whose value can be changed before the next update. This is a divergence from HTML. HTML does not have the concept of variables, because HTML has inline JavaScript instead. Variable names, like all concepts in XML, are case-sensitive. To refer to a variable in your code, use a dollar sign ($) followed by the name of the variable, optionally enclosed in parentheses. $foo $(foo) WML Syntax - Variables Variables are set with the <setvar> tag. Variables, once set, take effect when the page is next reloaded. Unfortunately, since <setvar> runs when an event triggers it, you can’t initialise variables cleanly. <card id=“Bob The Card”> <onevent type="onenterforward"> <refresh> <setvar name=“Fred” value=“Barney” /> </refresh> </onevent> WML Syntax - Variables Variables can also be set through user input with the <input> tag name=“…” type=“text”, “password”, emptyok=“true”, “false” maxlength=“…”, size=“…” format = [*|n][AaNXxMm] A / a : Uppercase / lowercase alphabetic or punctuation N : numeric X / x : Uppercase / lowercase alphabetic M / m : all characters * : arbitrary number of characters n : set number of characters WAP and WML - Recap WAP architecture Client, WAP Gateway, Web Server WML document structure DTDs, decks and <card>’s WML syntax Basic document syntax - <wml>, <card>, ... Layout - <p>, <br>, <table>, ... Text formatting - <b>, <i>, <u>, <big>, <em>, ... Images - <img> - WBMPs only. Navigation - <a>, <anchor>, <do> Events - ontimer, onenterforward, onenterbackward, ... Variables - <setvar>, <input>, $(foo) WAP and WML - Bibliography WAP in Easy Steps, by Mike McGrath. (C)2000 published by ComputerStep, Warwickshire http://www.w3schools.com/wap/wml_reference.asp - a really well-done WML reference http://developer.openwave.com/ - OpenWave are the folks who’re defining the WAP gateway standards. They also make a mobile device SDK. http://www.openmobilealliance.org/documents.html Technical specifications page for the Open Mobile Alliance, the public body which binds the many corporations investing in WAP and related technologies. Note: site can be a bit thick.
