You are on page 1of 16

COMPSCI 734 April 7, 2008

New Zealand WML (Wireless Markup Language)

WML and WML Script WML is a DTD of XML


Developped from an earlier language called HDML (Handheld
Devices Markup Language) from a company called Unwired
Planet
This is “HTML” for wireless devices that are usually resource
limited

New Zealand
The University of Auckland

The University of Auckland


WML Structure WML: A Deck of Cards

WML applications use a card and deck metaphor


A user interaction is represented
p by
y a card,, while a Card
complete task is represented by a deck Card
A deck is the smallest unit of WML a web server can send Card
to a WAP browser, and it contains one or more cards New Zealand Card
New Zealand

The browser displays one card at a time


The University of Auckland

The University of Auckland

© Manoharan 1
COMPSCI 734 April 7, 2008

Hello World! Hello World!

<?xml version="1.0"?> <?xml version="1.0"?>


<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD
//WAPFORUM//DTD WML 1.1//EN
1 1//EN" <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD
//WAPFORUM//DTD WML 1.3//EN
1 3//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml"> "http://www.wapforum.org/DTD/wml13.dtd">

<wml> <wml>
New Zealand

New Zealand
<card id="MainCard" title="My First WML Card"> <card id="MainCard" title="My First WML Card">
<p> <p>
<img
img src="hello.wbmp"
src hello.wbmp alt
alt="Hello"/>
Hello / <br/>
br/ <img
img src="hello.wbmp"
src hello.wbmp alt
alt="Hello"/>
Hello / <br/>
br/
Hello World! <br/> Hello World! <br/>
The University of Auckland

The University of Auckland


<a href="click.wml">Click Me here…</a><br/> <a href="click.wml">Click Me here…</a><br/>
</p> </p>
</card> </card>
</wml> </wml>

WML Example #1 WML Example #1: Splash

Splash Deck <card id="Splash" title="Uni Wap Server">


<p align="center">
Index
<img src=“ClockTower.wbmp"
alt="Welcome"/>
New Zealand

New Zealand

<br/>
Courses People <b><big>Uni Wap Server</big></b>
<br/>
<a href="#Index">Enter the Uni</a>
The University of Auckland

The University of Auckland

c334 c734
</p>
c335
</card>

© Manoharan 2
COMPSCI 734 April 7, 2008

WML Example #1: Index WML Example #1: Courses

<card id="Index" title="Main index"> <card id="Courses" title="Course List">


<p>
<p> <a href="#c334">Internet Programming</a>
Choose the info type: <br/>
<a href="#c335">Distributed Objects &amp; Web Services</a>
<select> <br/>
New Zealand

New Zealand
<option title="Courses" onpick="#Courses"> <a href="#c734">Pervasive Computing &amp; the Enterprise</a>
Course Information</option> </p>
</card>
<option title="People"
title= People onpick=
onpick="#People">
#People >
People Information</option>
The University of Auckland

The University of Auckland


</select>
</p>
</card>

WML Example #1: c334 WML Example #1: c335

<card id="c334" title="Internet Programming"> <card id="c335" title="Distributed Objects


<p> &amp; Web Services">
Internet Programming <p>
Currently on. Distributed Objects &amp; Web Services
New Zealand

New Zealand

</p> Next Semester.


</card> </p>
</card>
The University of Auckland

The University of Auckland

© Manoharan 3
COMPSCI 734 April 7, 2008

WML Example #1: c734 WML Example #1: People

<card id="c734" title="Pervasive Computing <card id="People" title="People Information">


&amp; the Enterprise"> <p>
<p> Work in progress. Please visit later.
Pervasive Computing &amp; the Enterprise </p>
New Zealand

New Zealand
Currently on. </card>
</p>
</card>
The University of Auckland

The University of Auckland


WML Example #2: Basic Animation WML Example #2: Splash

<card id="Splash" title="Uni Wap Services">


Splash Deck
<onevent type="ontimer">
type= ontimer >
<go href="#Splash1"/>
</onevent>
Splash1 <timer value="10"/>
<p align="center">
New Zealand

New Zealand

<br/>
Splash2
*
<br/>
Splash3 <b><big>Uni Wap Services</big></b>
The University of Auckland

The University of Auckland

</p>
</card>
Index

© Manoharan 4
COMPSCI 734 April 7, 2008

WML Example #2: Splash1 WML Example #2: Splash2

<card id="Splash1" title="Uni Wap Services"> <card id="Splash2" title="Uni Wap Services">
<onevent type="ontimer"> <onevent type="ontimer">
<go href="#Splash2"/>
h f "#S l h2"/ <go href=
href="#Splash3"/>
#Splash3 />
</onevent>
</onevent>
<timer value="10"/>
<timer value="10"/>
<p align="center">
<p align="center"> <br/>
New Zealand

New Zealand
<br/> \ | /
\|/ <br/>
<br/> <br/>
-- -- -- --
<br/> <br/>
The University of Auckland

The University of Auckland


/|\ <br/>
/ | \
<br/>
<br/>
<b><big>Uni Wap Services</big></b>
<b><big>Uni Wap Services</big></b>
</p> </p>
</card> </card>

WML Example #2: Splash3 WML Example #3: Softkeys

<card id="Splash3" title="Uni Wap Server"> <card id="Splash3" title="Uni Wap Server">
<p align="center">
li " t " <p align=
align="center">
center >
<img src=“ClockTower.wbmp" alt="Welcome"/> <img src= "ClockTower.wbmp" alt="Welcome"/>
<br/> <br/>
<b><big>Uni Wap Server</big></b> <b><big>Uni Wap Server</big></b>
New Zealand

New Zealand

<a href="#Index">"Enter the Uni"</a> <do type="accept" label="Enter the Uni">


</p> <go href="#Index"/>
</card> </do>
</p>
The University of Auckland

The University of Auckland

</card>

© Manoharan 5
COMPSCI 734 April 7, 2008

WML Example #4 WML Example #4a: InputNumbers

<card id="InputNumbers" title="Add2 Tool">


Deck <p align=
align="center">
center >
<b>Enter Two Numbers to Add</b>
<br/>
InputNumbers n1: <input name="n1" title="" format="*N"/>
New Zealand

New Zealand
<br/>
Result n2: <input name="n2" title="" format="*N"/>
</p>
/p
<do type="accept" label="Add">
The University of Auckland

The University of Auckland


<go href="#Result"/>
InputNumbers asks for two numbers, and Result displays the sum </do>
</card>
Link using soft keys

WML Example #4b: InputNumbers WML Example #4: Result

<card id="InputNumbers"
p title="Add2 Tool">
<p align="center"> <card
d id
id="Result"
"R lt" title="Add2
titl "Add2 RResults">
lt "
<b>Enter Two Numbers to Add</b> <p align="center">
<br/> <b>Thanks for using the Add2 Tool</b>
<br/>
New Zealand

New Zealand
n1: <input name="n1" title="" format="*N"/>
<br/> You wanted to add $(n1) and $(n2)
n2: <input name="n2" title="" format="*N"/> </p>
<br/> </card>
The University of Auckland

The University of Auckland

<a href="#Result">Get Results</a>


</p>
</card>
To use $ as part of the text, one must use $$
Link using anchor

© Manoharan 6
COMPSCI 734 April 7, 2008

WML Example #4c: InputNumbers WML Example #4d: InputNumbers

<card id="InputNumbers" title="Add2 Tool">


<p align="center"> <card id="InputNumbers" title="Add2 Tool">
<b>Enter Two Numbers to Add</b> <onevent type="onenterbackward">
type= onenterbackward >
<br/> <refresh>
<setvar name="n1" value=""/> EnterBackward event clears input
n1: <input name="n1" title="" format="*N"/>
<setvar name="n2" value=""/> fields
<br/> </refresh>
n2: <input name="n2" title="" format="*N"/> </onevent>
New Zealand

New Zealand
</p> <p align="center">
<do type="accept" label="Add"> <b>Enter Two Numbers to Add</b>
<go href="#Result"/> An extra button to clear <br/>
</do> n1: <input name="n1" title="" format="*N"/>
input fields <br/>
<do type="reset" label="Clear">
n2: <input name="n2" title="" format="*N"/>
The University of Auckland

The University of Auckland


<refresh>
</p>
<setvar name="n1" value=""/> <do type="accept" label="Add">
<setvar name="n2" value=""/> <go href="#Result"/>
</refresh> </do>
</do> </card>
</card>

Soft keys WML Script

User-interface for soft keys differ from phone to phone. Based on ECMA Script, a derivative of JavaScript
Some phones do not even support soft keys. Allows defining
g functions that can be called from WML,, in
Avoid using soft keys. Use anchors instead. much the same way as calling JavaScript functions in
HTML
The main difference between JavaScript and WML Script is that
WML Script functions are contained in a separate file and WML
New Zealand

New Zealand

contains references to the URL address of the file, whereas


JavaScript functions are normally embedded in the HTML code.
The University of Auckland

The University of Auckland

© Manoharan 7
COMPSCI 734 April 7, 2008

WML Script WML Script

Reduces network round-trips and enhance functionality. Not object-oriented, or even object-based.
Example
p usages
g New variables are decalred using g the var keyword
y (e.g.
( g var
Field validation x;)
• Check for formatting, input ranges, etc.
Types aren’t explicitly declared, so there is no need to do
Conditional logic type checking
• Download some intelligence into the device
New Zealand

New Zealand
Device extensions
• Access device or vendor-specific API
The University of Auckland

The University of Auckland


WML Script Referencing Variables

WML Script units have to be compiled into binary WML


Variable reference Description
Script code before they can be executed in a WAP device.
The WAP gateway normally does the compilation $(myvar:e) Forces escaping of symbolic characters.
WML Script Virtual Machine (VM) has to be included on the $(myvar:n) Forces no escaping of symbolic characters.
browser that executes the script. New Zealand $(myvar:u) Forces removal of symbolic character escaping.
New Zealand
The University of Auckland

The University of Auckland

© Manoharan 8
COMPSCI 734 April 7, 2008

Referencing Variables Referencing Variables

<card id="MainCard" title="My First WML Card">


<onevent type="onenterforward">
yp Reference outside a URL
<refresh>
<setvar name="urlA" value="file nameA.wml"/> $(urlA) file nameA.wml
<setvar name="urlB" value="file%20nameB.wml"/>
</refresh>
$(urlB) file%20nameB.wml
</onevent> $(urlA:n) file nameA.wml
New Zealand

New Zealand
<p>
<a href="$(urlA)">urlA $(urlA)</a><br/> $(urlB:n) file%20nameB.wml
<a href="$(urlB)">urlB $(urlB)</a><br/>
<a href="$(urlA:n)">urlA:n $(urlA:n)</a><br/> $(urlA:u) file nameA.wml
<a href="$(urlB:n)">urlB:n
h f "$( lB )" lB $(urlB:n)</a><br/>
$( lB ) / b/
<a href="$(urlA:u)">urlA:u $(urlA:u)</a><br/> $(urlB:u) file nameB.wml
The University of Auckland

The University of Auckland


<a href="$(urlB:u)">urlB:u $(urlB:u)</a><br/>
<a href="$(urlA:e)">urlA:e $(urlA:e)</a><br/> $(urlA:e) file%20nameA.wml
<a href="$(urlB:e)">urlB:e $(urlB:e)</a><br/>
$(urlB:e) file%2520nameB.wml
</p>
</card>

Referencing Variables WML Example #5

Reference within a URL


D k
Deck
$(urlA) file%20nameA.wml
$(urlB) file%2520nameB.wml
InputNumbers
$(urlA:n) file%20nameA.wml
New Zealand

New Zealand

$(urlB:n) file%20nameB.wml
Result
$(urlA:u) file%20nameA.wml
$(urlB:u) file%20nameB.wml
The University of Auckland

The University of Auckland

$(urlA:e) file%20nameA.wml
$(urlB:e) file%2520nameB.wml InputNumbers asks for two numbers, and Result displays the sum

© Manoharan 9
COMPSCI 734 April 7, 2008

WML Example #5: InputNumbers WML Example #5: Result

<card id="InputNumbers"
p title="Add2 Tool">
<p align="center"> <card id="Result" title="Add2 Results">
<b>Enter Two Numbers to Add</b> <p align="center">
<br/> <b>Thanks for using the Add2 Tool</b>
New Zealand

New Zealand
n1: <input name="n1" title="" format="*N"/> <br/>
<br/> You wanted to add $(n1) and $(n2)
n2: <input name="n2" title="" format="*N"/> <br/>
</p> The result you require is $(reslt)
The University of Auckland

The University of Auckland


<do type="accept" label="Add"> </p>
<go href="add2.wmls#add2()"/> </card>
</do>
</card>

WMLS Example #5 WMLS Example #6

extern function add2() { extern function add2() {


var n1 = Lang.parseInt(WMLBrowser.getVar("n1")); var n1 = Lang.parseInt(WMLBrowser.getVar("n1"));
var n2 = Lang.parseInt(WMLBrowser.getVar("n2")); var n2 = Lang.parseInt(WMLBrowser.getVar("n2"));
New Zealand

New Zealand

var sum = n1 + n2; var sum = n1 + n2;


var sumStr = String.format("%d", sum); var sumStr = String.format("%d", sum);
WMLBrowser.setVar("reslt",
WMLBrowser.setVar( reslt , sumStr); Dialogs alert("The res
Dialogs.alert("The result
lt is
is: " + ssumStr);
mStr)
WMLBrowser.go( "add2.wml#Result" ); }
The University of Auckland

The University of Auckland

© Manoharan 10
COMPSCI 734 April 7, 2008

WML Script WML Script Libraries

Literals can be of the following types: boolean, integer, Lang


string, floating point, and invalids Lang library includes functions for data type manipulations, absolute
value
l calculations,
l l ti general-purpose
l mathth ffunctionality,
ti lit and
d random
d
number generation
Float
var mString = “hello world”; Optional Float library includes functions such as pow(), round(), etc, but
New Zealand

New Zealand
var myInteger = 34; only supported on devices with floating point capabilities
var myFloat = 3.142; String
var d; The String library contains methods such as length(), charAt(), find(),
etc.
etc
The University of Auckland

The University of Auckland


d = myFloat / 0;
if ( d == invalid ) {
// divide by zero error
}

WML Script Libraries The Dialogs Library

URL Dialogs.alert(text)
The URL library contains functions such as getPath(), Dialogs.alert(“The parameter is: “ + parameter);
getReferer(), getHost(), etc. Dialogs.confirm(text, ok, cancel)
Browser Dialogs.confirm(“The parameter is: “ + parameter, “OK”,
WML browser interface “NOTOK”);
New Zealand

New Zealand
Provides interaction with the browser Dialogs.prompt(text, default)
Dialog Dialogs.prompt(“Who are you?”, “James Bond”);
Provides a set of typical user-interface functions such as
prompt(), confirm(), and alert()
The University of Auckland
The University of Auckland

© Manoharan 11
COMPSCI 734 April 7, 2008

Standard Library Functions Standard Library Functions

Lang.max(myVal1, myVal2); Lang.random(parameter)


Lang.min(myVal1,
g ( y , myVal2);
y ); Lang.maxInt()
g ()
Lang.abs(myVal) Lang.minInt()
Float.int(myVal) Float.maxFloat()
Float.floor(myVal) Float.minFloat()
New Zealand

New Zealand
Float.ceil(myVal) Float.pow(number, power);
Float.round(myVal) Float.sqrt()
The University of Auckland

The University of Auckland


Basic String Manipulation Basic String Manipulation

The String library offers all manner of functionality for Substrings


handling and processing strings. String.substring(string, position, length);
Example String.find(string, substring);
String.isEmpty(string)
String.length(string) White Space
New Zealand

New Zealand
String.charAt(string, position) String.squeeze()
String.trim()
The University of Auckland

The University of Auckland

© Manoharan 12
COMPSCI 734 April 7, 2008

String Formatting Strings as Arrays

String.format(template, value); Standard Library String-Access Fuctions


The formatting template is similar to the format specification used string.elements()
in C’s printf. string.elementAt()
• d for integer
string.removeAt()
• f for float
• s for string string.replaceAt()
New Zealand

New Zealand
string.insertAt()
The University of Auckland

The University of Auckland


WTAI WTAI

Wireless Telephony Application Interface is a means to WTAI includes:


create telephony applications using a WTA user-agent with Call control
appropriate libraries Network text messaging
Calling a number using WML Script Phone book interface
WTAPublic.makeCall("777"); Indicator control
Calling a number through URL reference
New Zealand

New Zealand
Event processing
wtai://wp/mc;777
WTAI available in WML and WML Script
The University of Auckland

The University of Auckland

Not all phones support WTAI. Check if your phone does!

© Manoharan 13
COMPSCI 734 April 7, 2008

Sample Application #1 Sample Application #1 (2)

<wml>
<card id=
id="Top"
Top title=
title="Dialler">
Dialler > extern
t function
f ti dial()
di l() {
<p align="center"> var n1 = Lang.parseInt(WMLBrowser.getVar("n"));
<b>Enter the number to call:</b> WTAPublic.makeCall(n1);
<br/> }
New Zealand

New Zealand
<input name="n" title="" format="*N"/>
<br/>
</p>
/p
<do type="accept" label="Dial number">
The University of Auckland

The University of Auckland


<go href="dial.wmls#dial()"/>
</do>
</card>
</wml>

Sample Application #2 WTAI

Other useful WTAI functions include


<wml>
WTAPublic.addPBEntry, WTAPublic.sendDTMF,
<card id=
id="Top"
Top title=
title="Dialler">
Dialler > WTAPhoneBook.write, and WTAPhoneBook.search.
<p align="center">
Refer to the specification for details.
<b>Enter a number to call:</b>
<br/>
New Zealand

New Zealand

<input name="n" title="" format="*N"/>


<br/>
</p>
/p
<do type="accept" label="Dial number">
The University of Auckland

The University of Auckland

<go href="wtai://wp/mc;$(n)"/>
</do>
</card>
</wml>

© Manoharan 14
COMPSCI 734 April 7, 2008

Limits Limits

There is a limit on the maximum compiled deck size, and The history buffer is also limited. Explicit “back” links may
this varies from device to device be required rather than relying on the history buffer to go
Nokia 7110’s is 1397 bytes while Alcatel 525’s is 6656 bytes back.
The contents will not be loaded, if the maximum size is E.g., Alcatel 525 has a history buffer of size 10.
exceeded. The maximum size of a WBMP image too is limited.
New Zealand

New Zealand
Maximum number of cards within a deck and the maximum E.g., Alcatel 525 has a limit of 784 bytes.
size of a card are bounded by the maximum size of the
deck.
The University of Auckland

The University of Auckland


Further Reading Exercises

Wireless Markup Language Specification. Write a WML application for English dictionary lookup.
www.WAPForum.org. Use a web service for the actual dictionary lookup.
WML Script Specification. Write an MCQ Testing suite using WML.
WML Script Standard Libraries Specification. Use questions from COMPSCI 334-35 as sample data.
WAP Wireless Telephony Application Interface.
New Zealand

New Zealand
The University of Auckland

The University of Auckland

© Manoharan 15
COMPSCI 734 April 7, 2008

Exercises

Find out an approximate maximum deck size supported a


mobile phone of your choice.
Describe the card-and-deck metaphor used by WML
applications, and discuss why such a metaphor is chosen.
New Zealand
The University of Auckland

© Manoharan 16