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"
"
<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"
"
<wml>
<template>
<do type="accept" label="Find a Person">
<go href="#search" />
</do>
<do type="accept" label="School Info">
<go href="#schools" />
<do type="accept" label="My CMU ">
<go href="#login" />
</template>

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

11. <card id="search" title="Find Someone at CMU">
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>
<anchor>
Submit
<go method="post" href="
<postfield name="f_name" value="$(f_name)" />
<postfield name="l_name" value="$(l_name)" />
</go>
</anchor>
</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="
<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 <br/>
User ID: <input name="user_id" /> <br/>
Pass: <input name="passw" /> <br/>
<anchor>
Login
<go method="post" href="
<postfield name="user_id" value="$(user_id)" />
<postfield name="passw" value="$(passw)" />
</go>
</anchor>
</p>
</card>
</wml>

14. 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
XSL Processor
WML Browsers
WML Stylesheet
HTTP Browser
HTML StyleSheet

15. 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
<?xml version="1.0"?>
<!DOCTYPE WML PUBLIC "-//WAPFORUM//DTD WML 1.0//EN"
"
<WML>
...
</WML>

16. WML Example Card Deck Navigation Variables Input Elements <WML>
<DO TYPE=“ACCEPT”>
<GO URL=“#eCard”/>
</DO
Welcome!
</CARD>
<CARD NAME=“eCard”>
<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>
</WML>
Navigation
Variables
Input
Elements

17. A Deck of Cards Acme Inc. Directory _____________ Next Services
<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"/>
Services
<SELECT KEY="type">
<OPTION VALUE="em"> </OPTION>
<OPTION VALUE="ph">Phone</OPTION>
<OPTION VALUE="fx">Fax</OPTION>
</SELECT>
</WML>
Acme Inc.
Directory
_____________
Next
Services
1>
2 Phone
____________ OK

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

19. Bind a task to the ACCEPT action, when cursor points to a link
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 home page 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"/>
First story
</CARD>
<CARD NAME="msg2">
Second story
</WML>
First story …
_____________
Next Main
Second story
...
_____________
OK Main

21. Handling User Input Select lists Input fields KEY variables
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 <CARD>
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: _
____________
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:
____________ OK

24. WML Content Formats Common interchange formats, for interoperability
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!

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 Provides general scripting capabilities
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. WML Script Example Functions Variables Programming Constructs
function currencyConvertor(currency, exchRate) {
return currency*exchangeRate; }
function myDay(sunShines) {
var myDay;
if (sunShines) {
myDay = “Good”;
} else {
myDay = “Not so good”; };
return myDay;
Variables
Programming
Constructs