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:  All WML documents contain one or more cards. Each card contains the content for a single page of display. The tag is the root of the deck.  Within the tag, you’ll one or more ’s and perhaps a tag.

7. WML Syntax   title=“…”  id =“…”  newcontext =“true”, “false”  onenterbackward =“[url]”  onenterforward =“[url]”  ontimer =“[url]”

8. WML Syntax - Layout  align=“left”, “right”, center”  mode=“wrap”, “nowrap”  columns=“…”  align=“l”, “c”, “r”  Cell 1 Cell 2 Cell 3

9. WML Syntax - Text Formatting - bold text - big text - emphasized text - italicised text - small text - strong text -underlined text

10. WML Syntax - Images - Render a WBMP file  src=“…”  align = “top”, “middle”, “bottom”  alt=“…”  height=“…”, width=“…”  hspace=“…”, vspace=“…” An image:

11. WML Syntax - Navigation As in HTML, you link from page to page explicitly with anchors. This is a link WML offers the tag and the tag - the simple anchor tag  href=“…” - more powerful anchor tag ,,,,...

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. - 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 - Navigate to a new card - Back up one on the card stack - Reloads the current page - Do nothing - Sets a variable - Sends a post (or get) field value to the server

14. WML Syntax - Events is the softkey event handler. 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 tag to initialise a timer.  The timer’s value field specifies 1/10’th’s of a second. The tag defines an ontimer event, whose value is a URL. When the times out, the ’s ontimer URL is loaded. Here by timer!

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 tag. Variables, once set, take effect when the page is next reloaded. Unfortunately, since runs when an event triggers it, you can’t initialise variables cleanly.

18. WML Syntax - Variables Variables can also be set through user input with the 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 ’s WML syntax  Basic document syntax -,,...  Layout -,,,...  Text formatting -,,,,,...  Images - - WBMPs only.  Navigation -,,  Events - ontimer, onenterforward, onenterbackward,...  Variables -,, $(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.