WAP and WML

WAP and WML

DBI – Representation and Management of Data on the Internet

Millions

1996 1997 1998 1999 2000 2001 2002 2003 2004 2005

1,400

1,200

1,000

800

600

400

200

0

ProjectedcellularsubscribersMore handsets than PCs

connected to the Internet bythe end of 2003!

'putting the Internet in everyone's pocket'

Internet Connectivity Outlook

Projected PCsconnected tothe Internet(Dataquest 10/98)

Projected Webhandsets

WAP

• WAP = Wireless Application Protocol

• A protocol and set of specifications to connect wireless applications to the Web

Needs for WAP

• Wireless networks and phones – have specific needs and requirements– not addressed by existing Internet technologies

• WAP enables any data transport – TCP/IP, UDP/IP, GUTS (IS-135/6), SMS, or USSD

• The WAP architecture – several modular entities– together form a fully compliant Internet entity– all WML content is accessed via HTTP 1.1 requests

Advantages of WAP

• WAP utilizes standard Internet markup language technology (XML)

• Optimizing the content and airlink protocols• The WML UI components map well onto existing

mobile phone user interfaces– no re-education of the end-users– leveraging market penetration of mobile devices

• WAP utilizes plain Web HTTP 1.1 servers– CGI, ASP, NSAPI, JAVA, Servlets, etc.

The Specification Includes

• WAP Architecture

• Wireless Application Environment

• Protocol Layers

• Interoperability

• Security

WAP Architecture

Web Server

Content

CGIScripts

etc.

WM

L D

ecks

wit

h W

ML

-Scr

ipt

WAP Gateway

WML Encoder

WMLScriptCompiler

Protocol Adapters

Client

WML

WML-Script

WTAI

Etc.

HTTPWSP/WTP

Internet vs. WAPInternet

HTMLJavaScript

HTTP

TLS - SSL

TCP/IPUDP/IP

SMS USSD CSD IS-136 CDMA CDPD PDC-P Etc..

Bearers:

Wireless Application Protocol

Wireless ApplicationEnvironment (WAE)

Session Layer (WSP)

Security Layer (WTLS)

Transport Layer (WDP)

Transaction Layer (WTP)

Other Services andApplications

Big Pipe - Small Pipe Syndrome

Wireless network<HTML><HEAD><TITLE>NNN Interactive</TITLE><META HTTP-EQUIV="Refresh" CONTENT="1800, URL=/index.html"></HEAD><BODY BGCOLOR="#FFFFFF" BACKGROUND="/images/9607/bgbar5.gif" LINK="#0A3990" ALINK="#FF0000" VLINK="#FF0000" TEXT="000000" ONLOAD="if(parent.frames.length!=0)top.location='http://nnn.com';"> <A NAME="#top"></A><TABLE WIDTH=599 BORDER="0"><TR ALIGN=LEFT><TD WIDTH=117 VALIGN=TOP ALIGN=LEFT>

<HTML><HEAD><TITLE>NNN Interactive</TITLE><META HTTP-EQUIV="Refresh" CONTENT="1800, URL=/index.html">

Internet<WML><CARD><DO TYPE="ACCEPT"><GO URL="/submit?Name=$N"/></DO>Enter name:<INPUT TYPE="TEXT" KEY="N"/></CARD></WML>

010011010011110110010011011011011101010010011010

Content encoding

HTTP/HTML WAP

WAP Application Environment Goals

• Network- neutral application environment

• For narrowband wireless devices

• With an Internet/WWW programming model

• And a high degree of interoperability

Device-Side Problems

• Device Independent• Network Independent• Different vendors – requires interfaces• Initial focus on phones

– Slow reactions– Small memory– Limited CPU– Small screen– Limited input model

WML

Wireless Markup Language

WML

• Tag-based browsing language:– Screen management (text, images)– Data input (text, selection lists, etc.)– Hyperlinks & navigation support

• Based on XML

WML (cont.)• Card metaphor

– User interactions are split into cards– Navigation occurs between cards– Cards are put in to decks

• Explicit inter-card navigation model– Hyperlinks– User interface Event handling– History

• State management and variables– Reduce network traffic– Results in better caching

All Decks Must Contain…

• Document prologue– XML & document type declaration

• <WML> element– Must contain one or more cards

<?xml version="1.0“?><!DOCTYPE WML PUBLIC "-//WAPFORUM//DTD WML 1.0//EN"

"http://www.wapforum.org/DTD/wml.xml">

<WML> ... </WML>

Hello World Example

<?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="Card1" title="The dbi Course">

<p>



Hello World

</p>

</card>

</wml>

Basic Tags

• <wml> </wml> defines the beginning and the ending of the ‘deck’, like <html> </html>

• <card> </card> defines the beginning and the ending of a card

The Result on Different Phones

Seeing the Result

• The content type of a WML text is text/vnd.wap.wml

• You can send a created WML file with a correct content type by– Using setContentType(“text/vnd.wap.wml”) in a servlet

– By configuring Tomcat to return the right content type for WML pages

Configuring Tomcat

• Due to a bug in Tomcat we will not use /conf/web.xml

• We set the content type in the local web.xml file

• For example, if the files are under a directory webapps/dbi then we change the file webapps/dbi/WEB-INF/web.xml

Setting the Content Type

<?xml version="1.0" encoding="ISO-8859-1"?>

<!DOCTYPE web-appPUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.2//EN“ "http://java.sun.com/j2ee/dtds/web-app_2_2.dtd">

<web-app> <mime-mapping> <extension> wml </extension> <mime-type> text/vnd.wap.wml </mime-type> </mime-mapping></web-app>

Text Formats

<?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN“

"http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card title=“Text Formats"> <p> normal,

<strong>strong</strong>, <em>emphasized</em>, <b>bold</b>, <i>italic</i>, <u>underline</u>, <big>big</big> and<big><big>very big</big></big>, <small>small</small><br/>

</p> </card>

</wml>

deckit

Tables



<wml>

<card title=“Table">

<p>

<table columns="2">

<tr><th><b>Name</b></th>

<th><b>Phone</b></th></tr>

<tr><td>Bart</td><td>123</td></tr>

<tr><td>Lisa</td><td>321</td></tr>

</table>

</p>

</card>

</wml>

Anchors

• The <anchor> tag defines what to do when a user choose a link– Comes with a task: go, pre, refresh– For example, <anchor>Login page

<go href=“login.wml"/> </anchor>

A Tag

• The <a> tag always performs a "go" task, with no variables

• For example,

<a href=“login.wml">Login page</a>

Example



<wml>

<card title=“Using A Tag">

<p>

<a href=“hello.wml">To Hello World</a>

</p></card>

</wml>

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

Select From Options


"http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card title=“Tutorials"> <p>

<select> <option value="htm">HTML Tutorial</option> <option value="xml">XML Tutorial</option> <option value="wap">WAP Tutorial</option> </select>

</p> </card> </wml>

Select From Options


"http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card title=“Tutorials"> <p>

<select multiple="true“ default=“htm; xml”> <option value="htm">HTML Tutorial</option> <option value="xml">XML Tutorial</option> <option value="wap">WAP Tutorial</option> </select>

</p> </card> </wml>

Input Fields


"http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card title="Input"> <p>

Name: <input name="Name" size="15"/><br/> Age: <input name="Age" size="15" format="*N"/><br/> Sex: <input name="Sex" size="15"/> </p>

</card> </wml>

Other INPUT Attributes• 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, even with format

• TYPE=TEXT | PASSWORD

– Special entry mode handled by the browser

• MAXLENGTH=number

– Maximum number of allowed characters

FORMAT Control Characters– N Numeric character

– A, a Alphabetic character

– X, x Numeric or alphabetic character

– M, m Any character

• Leading backslash specifies forced characters• Forced characters included in KEY variable value

• Leading * specifies 0 or more characters• Password: FORMAT=“mmmm*m”

• Leading number specifies 0..N characters• Zipcode: FORMAT=“NNNNN\-4N”

Tasks

• The <go> task represents the action of switching to a new card

• The <prev> task represents the action of going back to the previous card

• The <refresh> task refreshes some specified card variables– If any of the variables are shown on the screen, this

task also refreshes the screen

• The <noop> task says that nothing should be done

The do Action

• The <do> tag can be used to activate a task when the user chooses a word/phrase on the screen<?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card> <p>

<do name="back" type="prev" label="Back"> <noop/> </do>

</p> </card> </wml> Overrides the Back link to noop

<DO TYPE="ACCEPT" LABEL="Next"> <GO URL="http://www.mysite.com/file.wml"/></DO>

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

Task Binding Rules• User actions are scoped at three levels

• Deck • Card • Anchored links & select list options (ACCEPT)– When tasks are bound to an action at different levels,

the action with narrower scope takes precedence

• Default task bindingsUser Action TaskACCEPT, PREV PREV Others NOOP

Variables

• Variables store data when a user switches from card to card in a deck

• WML variables are case sensitive

• Setting a value to a variable:<setvar name="i" value="500"/>

Set a value to i

Setting Variables From Input

<card id=“card1"> <select name=“i"> <option value=“500">The Number

500</option> <option value=“Five Hundred">500 in Text</option> </select>

</card>

Set a value to i <card id="card2"> <p>You selected: $(i)</p> </card>Get the value of i

Detecting a Click<?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"


<wml>

<card id=“Card1” title=“The DBI Course”>

<do type=“accept” label=“Next”>

<go href=“#Card2”/>

</do>

<p> Select Next to go to Card 2. </p>

</card>

<card id=“Card2” title=“The DBI Course”>

<p> I'm Card 2. </p>

</card>

</wml>

Events

• There are three types of events:– onenterbackward – Occurs when the user

navigates into a card using a “prev” task– onenterforward – Occurs when the user

navigates into a card using a “go” task– ontimer – Occurs when the "timer" expires

Timer

<?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="Intro" ontimer="#Main" title=“DBI Course"> <timer value="150"/> <p> Welcome to the dbi site!! We will bring you to our main page after 15 seconds. </p> </card> <card id="Main" title="Menu"> <p> This is our main page. Under construction. </p> </card>

</wml>

After 15 seconds

== DBI Course ==Welcome to the dbi site!! We will bring you to our main page after 15 seconds.

___________________________ Back

== DBI Course ==Welcome to the dbi site!! We will bring you to our main page after 15 seconds.

___________________________ Back

=== Menu ===This is our main page. Under construction.

___________________________ Back

=== Menu ===This is our main page. Under construction.

___________________________ Back

Input

<?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"


<wml>

<card id="main" title=“DBI Example">

<do type="accept" label="Next">

<go href="#wel"/> </do>

<p> Please enter your name:

<input type="text" name=“iname"/> </p> </card>

<card id="wel" title="Welcome">

<do type="prev" label="Back"> <prev/> </do>

<p> Your name is $(iname).

Click Back to go to previous page.

</p> </card> </wml>

Entering a name Choosing the “Options”

Choosing the “Next”

Sending Data to the Server

<?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"


<wml>

<card id="main" title=“DBI Example">

<do type="accept" label=“Send">

<go method=“POST"

href=“dbi/registerServlet">

<postfield name="firstname"

value="$(first)"/>

<postfield name=“course" value=“dbi"/>

</go> </do>

<p> Please enter your first name:

<input type="text" name="first"/> </p>

</card>

</wml>

Sending Data to the Server

<CARD> <DO TYPE="ACCEPT"> <GO URL=“dbi/myServlet?id=$(sno)"/> </DO> <SELECT KEY=“sno” MULTIPLE="TRUE"

DEFAULT="1;3;5"> <OPTION VALUE="1">Bart</OPTION> <OPTION VALUE="2">Lisa</OPTION> <OPTION VALUE="3">Homer</OPTION> <OPTION VALUE="4">Marge</OPTION> <OPTION VALUE="5">Milhouse</OPTION> <OPTION VALUE="6">Nelson</OPTION> <OPTION VALUE="7">Smithers</OPTION> <OPTION VALUE="8">Maggie</OPTION> <OPTION VALUE="9">Burns</OPTION> <OPTION ONCLICK="#card2">More...</OPTION> </SELECT></CARD>

Collecting Data from More Than One Card

<CARD> <DO TYPE="ACCEPT" LABEL="Next"> <GO URL="#card2"/> </DO> First name: <INPUT KEY="fname"/></CARD>

<CARD NAME="card2"> <DO TYPE="ACCEPT" LABEL="Done"> <GO URL=“dbi/myServlet" METHOD="POST" POSTDATA="first=$fname&last=$lname"/> </DO> Last name: <INPUT KEY="lname"/></CARD>

Template Element

• The <template> tag defines a template for all the cards in a deck

• The "code" in the <template> tag is added to each card in the deck

• You can specify only one <template> tag for each deck

• A template tag can only contain <do> and <onevent> tags

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

The TEMPLATE Element• Defines actions & events for all cards in a deck

First story…

_____________Next Main

Second story...

_____________OK Main

Another Template Example<?xml version="1.0"?>



<wml>

<template>

<do type="prev" label="Back">

<prev/>

</do>

</template>

<card id="card1" title="Card 1"> <p> <a href="#card2">Go to Card 2</a> </p> </card>


<card id="card3" title="Card 3"> <p> Hello World! </p> </card>

</wml>

Another Template Example<?xml version="1.0"?>



<wml>

<template>

<onevent type="onenterbackward">

<go href="#card1"/>

</onevent> </template>



<card id="card3" title="Card 3"> <p> Hello World! </p> </card>

</wml>

<CARD> <DO TYPE="ACCEPT"> <GO URL="#c2"/> </DO> Continue <IMG LOCALSRC="righthand" ALT="forward..."/></CARD>

<CARD NAME="c2"> <IMG SRC="../images/logo.bmp" ALT="Unwired Planet"/> <BR/>Welcome!</CARD>

Displaying Images• It is possible to insert images or local icons

within display text– 1-bit BMP format

• Images are ignored by non-bitmapped devices

Image Attributes• alt=“..”

– ‘Names’ the image – If the image is not displayed by the browser

the label is displayed instead

• src=".. – Image source - where the image is located

• width=".. • height="..

– Sets the dimensions of the image. – For example, the screen sizes of the devices

is Nokia 7110 (48 x 96 pixels)

WBMP

• Wap supports WBMP (Wireless Bitmap Picture) 2 bit images

• It is possible to convert existing images to wbmp

• The MIME type of the images is declered with the following header:

Content-type: image/vnd.wap.wbmp

<?xml version="1.0"?>



<wml>

<card id="main" title="Where are you?">

<timer value="10"/>

<img src="snail2.wbmp" alt="A search snail"/>

</card>

<card id="look" title="I found you">

<img src="snail3.wbmp" alt="A looking snail"/>

</card>

</wml>

Adding Images

Special WML Characters• Use character entities in display text

" "& &' '< <> > Blank space Soft hyphen (discretionary line break)

• Replace the “&” character in URL strings URL=“myServlet?first=$fname&last=$lname”

• Use “$$” to display a single “$” character

The <head> Tag

• The <head> tag contains information about the document

<?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"><wml> <head> <access domain="www.cs.huji.ac.il"/> <meta name="keyword" content="WAP"/> </head>.... .... </wml>

Doing more with WML• 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

WMLScript

• Scripting language:– Procedural logic, loops, conditionals, etc.– Optimized for small-memory, small-cpu devices

• Derived from JavaScript™• Integrated with WML

– Reduces overall network traffic

• Bytecode-based virtual machine– Stack-oriented design– ROM-able

WMLScript Standard 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

WMLScript Example Uses

• Reduce network round-trips and enhance functionality

• Field validation– Check for formatting, input ranges, etc.

• Device extensions– Access device or vendor-specific API

• Conditional logic– Download intelligence into the device

Functions

WMLScript Example

ProgrammingConstructs

Variables

function currencyConvertor(currency, exchRate) { return currency*exchRate; }

function myDay(sunShines) { var myDay; if (sunShines) { myDay = “Good”; } else { myDay = “Not so good”; }; return myDay;}

WMLScript Example

<?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=“card1" title="Go to URL"> <do type="options" label="Go"> <go href="check.wmls#go_url(‘abc’)"/> </do> </card> </wml>

WMLScript Example

extern function go_url(val){

if (val==“abc") { WMLBrowser.go("http://wap.google.com/start.wml")

} }

Wireless Telephony Applications

• Tools for building telephony applications

• Designed primarily for:– Network Operators / Carriers– Equipment Vendors

• Network security and reliability a major consideration

WTA (cont.)• WTA Browser

– Extensions added to standard WML/WMLScript browser

– Exposes additional API (WTAI)

• WTAI includes:– Call control– Network text messaging– Phone book interface– Indicator control– Event processing

WTA (cont.)

• Network model for client/server interaction– Event signaling– Client requests to server

• Security model: segregation– Separate WTA browser– Separate WTA port

• WTAI available in WML & WMLScript

Placing an outgoing call with WTAI:

Input Element

WTAI Call

<WML><CARD> <DO TYPE=“ACCEPT”> <GO URL=“wtai:cc/mc;$(N)”/> </DO> Enter phone number: <INPUT TYPE=“TEXT” KEY=“N”/></CARD></WML>

WTA Example

Placing an outgoing call with WTAI:

WTA Example

WTAI Call

function checkNumber(N) { if (Lang.isInt(N)) WTAI.makeCall(N); else Dialog.alert(“Bad phone number”);}

References• WAP Forum. http://www.wapforum.org/

• Unwired Planet, Inc. “Wireless Internet Today.” PDF File. February 1999. http://www.phone.com/industry/wap.html

• Nokia Wireless Data Forum. “ Wireless Application Protocol.” Web Page. http://www.forum.nokia.com/developers/wap/wap.html

• Motorola “Wireless Application Development” PDF File http://www.mot.com/MIMS/MSPG/spin/library_files/wad.pdf

Documents

WAP and WML