Wireless Markup Language

1. Wireless Markup Language

2. Introduction • Wireless Markup Language (WML), based on XML, is a markup language intended for devices that implement the Wireless Application Protocol (WAP) specification, such as mobile phones. It provides navigational support, data input, hyperlinks, text and image presentation, and forms, much like HTML (HyperText Markup Language). It preceded the use of other markup languages now used with WAP, such as HTML itselfA WML document is known as a “deck”. Data in the deck is structured into one or more “cards” (pages) – each of which represents a single interaction with the user.

3. Introduction • WML decks are stored on an ordinary web server configured to serve the text/vnd.wap.wml MIME type in addition to plain HTML and variants. The WML cards when requested by a device are accessed by a bridge WAP gateway, which sits between mobile devices and the World Wide Web, passing pages from one to the other much like a proxy. The gateways send the WML pages on in a form suitable for mobile device reception (WAP Binary XML). This process is hidden from the phone, so it may access the page in the same way as a browser accesses HTML, using a URL. • WML has a scaled down set of procedural elements which can be used by the author to control navigation to other cards.

4. WML • WML Inherits From XML • WML Extends Interactivity to Cell Phones, Pagers, PDAs • Display Varies Widely From Device to Device • WML tags lack consistency across different manufacturers

5. WML Coding • WML Based on a Deck of Cards -- the device only shows 1 card at a time • Cards in a Deck can Interact with other Cards in Deck and Cards in External Decks

6. WML Coding • All WML documents MUST have a specific header • The Deck is delimited by the <wml> . . . </wml> tag <?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="main" title="First Example"> <p>Hello World!</p></card> </wml>

7. Entering Text • Cards are delimited by the <card> . . . </card> tags • All Text within a card must be placed in <p> . . . </p> tags <wml> <card id="main" title="Hello World"> <p> My First WML Card! (a.k.a. Hello World!) </p> </card> </wml>

8. WML Anchors (links) • Similar to HTML links • <a href=“address”> text </a> • Use # to reference a card (e.g. href = “#myCard”). Otherwise, will go to the first card in a deck <wml> <card id="main" title=“Link Example"> <p> <a href="#anotherCard"> My First link </a> </p> </card> </wml>

9. WML sample Site <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <template> <do type="accept" label="Find a Person"> <go href="#search" /> </do> <do type="accept" label="School Info"> <go href="#schools" /> </do> <do type="accept" label="My CMU email"> <go href="#login" /> </do> </template>

10. WML sample site (cont.) <card id="main" title="Welcome to CMU"> <p> Welcome to CMU <br/> <a href="#search">Find a Person</a> <br/> <a href="#schools">School Info</a> <br/> <a href="#login">My CMU email</a> </p> </card>

11. WML Sample Site (cont.) <card id="search" title="Find Someone at CMU"> <p> Find Someone at CMU <br/> First Name: <input name="f_name" /> <br/> Last Name: <input name="l_name" /> </p> <p> <anchor> Submit <go method="post" href="http://www.cmu.edu/search.jsp"> <postfield name="f_name" value="$(f_name)" /> <postfield name="l_name" value="$(l_name)" /> </go> </anchor> </p> </card>

12. WML Sample Site (cont.) <card id="schools" title="Info on the Schools"> <p> Select the School: <select title="school"> <option>CFA</option> <option>GSIA</option> <option>Heinz</option> <option>HSS</option> <option>MISM</option> </select> <anchor> Get Info <go method="post" href="http://www.cmu.edu/school.jsp"> <postfield name="school" value="$(school)" /> </go> </anchor> </p> </card>

13. WML Sample Site (cont.) <card id="login" title="Login to Check Mail"> <p> Login to Check eMail <br/> User ID: <input name="user_id" /> <br/> Pass: <input name="passw" /> <br/> <anchor> Login <go method="post" href="http://www.cmu.edu/login.jsp"> <postfield name="user_id" value="$(user_id)" /> <postfield name="passw" value="$(passw)" /> </go> </anchor> </p> </card> </wml>

14. XSL Processor WML Stylesheet HTML StyleSheet HTTP Browser WML Browsers WML: Wireless Markup Language Content (XML) • Tag-based browsing language: • Screen management (text, images) • Data input (text, selection lists, etc.) • Hyperlinks & navigation support • Takes into account limited display, navigation capabilities of devices • XML-based language • describes only intent of interaction in an abstract manner • presentation depends upon device capabilities • Cards and Decks • document consists of many cards • User interactions are split into cards • Explicit navigation between cards • cards are grouped to decks • deck is similar to HTML page, unit of content transmission • Events, variables and state mgmt

15. <?xml version="1.0"?> <!DOCTYPE WML PUBLIC "-//WAPFORUM//DTD WML 1.0//EN" "http://www.wapforum.org/DTD/wml.xml"> <WML> ... </WML> WML • The basic unit is a card. Cards are grouped together into Decks Document ~ Deck (unit of transfer) • All decks must contain • Document prologue • XML & document type declaration • <WML> element • Must contain one or more cards WML File Structure

16. Navigation Card Variables Deck Input Elements WML Example <WML> <CARD> <DO TYPE=“ACCEPT”> <GO URL=“#eCard”/> </DO Welcome! </CARD> <CARD NAME=“eCard”> <DO TYPE=“ACCEPT”> <GO URL=“/submit?N=$(N)&S=$(S)”/> </DO> Enter name: <INPUT KEY=“N”/> Choose speed: <SELECT KEY=“S”> <OPTION VALUE=“0”>Fast</OPTION> <OPTION VALUE=“1”>Slow</OPTION> <SELECT> </CARD> </WML>

17. A Deck of Cards <WML> <CARD> <DO TYPE="ACCEPT" LABEL="Next"> <GO URL="#card2"/> </DO> Acme Inc.<BR/>Directory </CARD> <CARD NAME="card2"> <DO TYPE="ACCEPT"> <GO URL="?send=$type"/> </DO> Services <SELECT KEY="type"> <OPTION VALUE="em">Email</OPTION> <OPTION VALUE="ph">Phone</OPTION> <OPTION VALUE="fx">Fax</OPTION> </SELECT> </CARD> </WML> Acme Inc. Directory _____________ Next Services 1>Email 2 Phone ____________ OK

18. The DO Element • Binds a task to a user action • Action type:ACCEPT, OPTIONS, HELPPREV, DELETE, RESET • Label:Text string or image (optional) • Task:GOPREV,REFRESH, NOOP • Destination:URL • Post data: if METHOD=POST <DO TYPE="ACCEPT" LABEL="Next"> <GO URL="http://www.mysite.com/myapp.wml"/> </DO>

19. Anchored Links • Bind a task to the ACCEPT action, when cursor points to a link • TITLE= sets the label string (default = “Link”) • Links are not allowed in select list options <CARD> Please visit our <A TITLE="Visit"> <GO URL="home.wml"/>home page</A> for details. </CARD> Please visit our homepage for ____________ Visit Source: WAP Forum

20. The TEMPLATE Element • Defines actions & events for all cards in a deck <WML> <TEMPLATE> <DO TYPE="OPTIONS" LABEL="Main"> <GO URL="main_menu.wml"/> </DO> </TEMPLATE> <CARD NAME="msg1"> <DO TYPE="ACCEPT" LABEL="Next"> <GO URL="#msg2"/> </DO> First story </CARD> <CARD NAME="msg2"> Second story </CARD> </WML> First story … _____________ Next Main Second story ... _____________ OK Main

21. Handling User Input • Select lists • Choose from a list of options • Input fields • Enter a string of text or numbers • KEY variables • Set by SELECT and INPUT elements • How user input is passed to other cards and the application server

22. The SELECT Element • Display a list of options • Each option may set the KEY variable and/or bind a task to the ACCEPT key • TITLE= dynamically sets the label string • MULTIPLE=“TRUE”: Allows user to pick multiple items <CARD> <DO TYPE="ACCEPT" LABEL="View"> <GO URL="getcity.cgi?location=$city"/> </DO> Forecast <SELECT KEY="city"> <OPTION VALUE="ber">Berlin</OPTION> <OPTION VALUE="rom">Rome</OPTION> <OPTION TITLE="Find" ONCLICK="find.cgi">New City</OPTION> </SELECT> </CARD> Forecast 1 Berlin 2 Rome 3>New City ____________ Find

23. The INPUT Element • Prompts user to enter a string of text • DEFAULT=key_value; Default KEY variable (displayed to user) • FORMAT=format_specifier; If omitted, free-form entry is allowed • EMPTYOK="TRUE“; Browser will accept null input • TYPE="PASSWORD“; Special entry mode handled by the browser • MAXLENGTH=number; Maximum number of allowed characters Soc. Security: 287-33- _ ____________ NUM <CARD> <DO TYPE="ACCEPT"> <GO URL="?get=person" METHOD="POST" POSTDATA="userid=$ssn"/> </DO> Soc Security: <INPUT KEY="ssn" FORMAT="NNN\-NN\-NNNN"/> </CARD> Soc. Security: 287-33- 7629 ____________ OK

24. WML Content Formats • Common interchange formats, for interoperability • Formats: • Business cards: IMC vCard standard • Calendar: IMC vCalendar standard • Images: WBMP (Wireless BitMaP) • Compiled WML, WMLScript • Newly defined formats: • WML text and tokenized format • WMLScript text and bytecode format • WBMP image format • Binary format for size reduction • Bytecodes/tokens for common values and operators • Compressed headers • Data compression (e.g. images) • General-purpose transport compression can still be applied

25. Displaying Images • Insert app images or local icons within display text • 1-bit BMP format • Images are ignored by non-bitmapped devices • Check HTTP_ACCEPT for “image/bmp” <CARD> <DO TYPE="ACCEPT"> <GO URL="#c2"/> </DO> Continue <IMG LOCALSRC="righthand" ALT="forward..."/> </CARD> <CARD NAME="c2"> <IMG SRC="../images/logo.wbmp" ALT="Unwired Planet"/> <BR/>Welcome! </CARD>

26. WML (other features) • Setting card styles to create forms • Using variables to cache user data • Using card intrinsic events to trigger transparent tasks • Using timers • Securing WML decks • Bookmarking decks

27. WMLScript • Complement to WML • Derived from JavaScript™ • Provides general scripting capabilities • Procedural logic, loops, conditionals, etc. • Optimized for small-memory, small-cpu devices • Features • local user interaction, validity check of user input • access to device facilities (phone call, address book etc.) • extensions to the device software • configure device, download new functionality after deployment • Bytecode-based virtual machine • Stack-oriented design, ROM-able • Designed for simple, low-impact implementation • WMLScript compiler resides in the network

28. WMLScript Libraries • Lang - VM constants, general-purpose math functionality, etc. • String - string processing functions • URL - URL processing • Browser - WML browser interface • Dialog - simple user interface • Float - floating point functions

29. Functions Variables Programming Constructs WML Script Example function currencyConvertor(currency, exchRate) { return currency*exchangeRate; } function myDay(sunShines) { var myDay; if (sunShines) { myDay = “Good”; } else { myDay = “Not so good”; }; return myDay; }