1 / 20

WAP and WML

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

lila-le
Download Presentation

WAP and 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. WAP and WML The Wireless Application Protocol WAP architecture WML document structure WML syntax Basic document syntax Layout Text formatting Images Navigation Events Variables

  2. WAP and WML

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

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

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

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

  7. WML Syntax • <wml> • <head> • <card> • <card> • title=“…” • id =“…” • newcontext =“true”, “false” • onenterbackward =“[url]” • onenterforward =“[url]” • ontimer =“[url]”

  8. WML Syntax - Layout • <p> • align=“left”, “right”, center” • mode=“wrap”, “nowrap” • <br /> • <table> • columns=“…” • align=“l”, “c”, “r” • <tr> • <td> <p> <table columns="3"> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> </table> </p>

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

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

  11. 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>, ...

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

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

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

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

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

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

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

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

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

More Related