WAP and WML DBI – Representation and Management of Data on the Internet
Jan 15, 2016
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 example -->
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
<?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=“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
<?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=“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
<?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=“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
<?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=“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
<?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="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"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<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"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<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"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<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"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<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="card2" title="Card 2"> <p> <a href="#card3">Go to Card 3</a> </p> </card>
<card id="card3" title="Card 3"> <p> Hello World! </p> </card>
</wml>
Another Template Example<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<template>
<onevent type="onenterbackward">
<go href="#card1"/>
</onevent> </template>
<card id="card1" title="Card 1"> <p> <a href="#card2">Go to Card 2</a> </p> </card>
<card id="card2" title="Card 2"> <p> <a href="#card3">Go to Card 3</a> </p> </card>
<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"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<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