WAP and WML DBI Representation and Management of
WAP and WML DBI – Representation and Management of Data on the Internet
Internet Connectivity Outlook Millions 1, 400 1, 200 1, 000 More handsets than PCs connected to the Internet by the end of 2003! Projected cellular subscribers Projected Web handsets 800 600 Projected PCs connected to the Internet 400 (Dataquest 10/98) 200 0 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 'putting the Internet in everyone's pocket'
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 WAP Gateway WMLScript WTAI Etc. Web Server WML Encoder WSP/WTP WMLScript Compiler Protocol Adapters HTTP CGI Scripts etc. Content WML Decks with WML-Script Client
Internet vs. WAP Wireless Application Protocol Internet HTML Java. Script Other Services and Applications Wireless Application Environment (WAE) Session Layer (WSP) HTTP Transaction Layer (WTP) Security Layer (WTLS) TLS - SSL TCP/IP UDP/IP Transport Layer (WDP) Bearers: SMS USSD CSD IS-136 CDMA CDPD PDC-P Etc. .
Big Pipe - Small Pipe Syndrome Internet HTTP/HTML <HTML> <HEAD> <TITLE>NNN Interactive</TITLE> <META HTTP-EQUIV="Refresh" CONTENT="1800, URL=/index. html"> </HEAD> <BODY BGCOLOR="#FFFFFF" BACKGROUND="/images/9607/bgbar 5. gif" LINK="#0 A 3990" ALINK="#FF 0000" VLINK="#FF 0000" 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 Interac tive</T ITLE> <META HTTPEQUIV=" Refresh " CONTENT ="1800, URL=/in dex. htm l"> Wireless network <WML> WAP <CARD> <DO TYPE="ACCEPT"> <GO URL="/submit? Name=$N"/> </DO> Enter name: <INPUT TYPE="TEXT" KEY="N"/> </CARD> </WML> Content encoding 0100110 1001111 0110010 0110110 1101110 1010010 011010
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="Card 1" 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 set. Content. Type(“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-app PUBLIC "-//Sun Microsystems, Inc. //DTD Web Application 2. 2//EN“ "http: //java. sun. com/j 2 ee/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<
<? 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>very big</big>, <small>small</small> <br/> </p> </card> </wml> Text Formats
deckit
<? 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> Tables
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 A, a X, x M, m Numeric character Alphabetic character Numeric or alphabetic character 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-4 N”
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> Overrides the Back link to </wml> noop
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="http: //www. mysite. com/file. wml"/> </DO>
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 bindings User Action Task ACCEPT, PREV Others NOOP PREV
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=“card 1"> <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 Get the value of i <card id="card 2"> <p>You selected: $(i)</p> </card>
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=“Card 1” title=“The DBI Course”> <do type=“accept” label=“Next”> <go href=“#Card 2”/> </do> <p> Select Next to go to Card 2. </p> </card> <card id=“Card 2” 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
<? 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> Timer
After 15 seconds
== DBI Course == === Menu to === Welcome the dbi This our main page. site!!is. We will bring you Under construction. to our main page after 15 seconds. ___________________________ Back
<? 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> Input
Choosing the “Next” Entering a name Choosing the “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 id="main" title=“DBI Example"> <do type="accept" label=“Send"> <go method=“POST" href=“dbi/register. Servlet"> <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
Sending Data to the Server <CARD> <DO TYPE="ACCEPT"> <GO URL=“dbi/my. Servlet? 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="#card 2">More. . . </OPTION> </SELECT> </CARD>
Collecting Data from More Than One Card <CARD> <DO TYPE="ACCEPT" LABEL="Next"> <GO URL="#card 2"/> </DO> First name: <INPUT KEY="fname"/> </CARD> <CARD NAME="card 2"> <DO TYPE="ACCEPT" LABEL="Done"> <GO URL=“dbi/my. Servlet" 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
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="msg 1"> <DO TYPE="ACCEPT" LABEL="Next"> <GO URL="#msg 2"/> </DO> First story </CARD> <CARD NAME="msg 2"> Second story </CARD> </WML> First story … _______ Next Main Second story. . . _______ OK Main
Another Template <? xml version="1. 0"? > Example <!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="card 1" title="Card 1"> <p> <a href="#card 2">Go to Card 2</a> </p> </card> <card id="card 2" title="Card 2"> <p> <a href="#card 3">Go to Card 3</a> </p> </card> <card id="card 3" title="Card 3"> <p> Hello World! </p> </card> </wml>
Another Template <? xml version="1. 0"? > Example <!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="#card 1"/> </onevent> </template> <card id="card 1" title="Card 1"> <p> <a href="#card 2">Go to Card 2</a> </p> </card> <card id="card 2" title="Card 2"> <p> <a href="#card 3">Go to Card 3</a> </p> </card> <card id="card 3" title="Card 3"> <p> Hello World! </p> </card> </wml>
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 <CARD> <DO TYPE="ACCEPT"> <GO URL="#c 2"/> </DO> Continue <IMG LOCALSRC="righthand" ALT="forward. . . "/> </CARD> <CARD NAME="c 2"> <IMG SRC=". . /images/logo. bmp" ALT="Unwired Planet"/> <BR/>Welcome! </CARD>
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="snail 2. wbmp" alt="A search snail"/> </card> <card id="look" title="I found you"> <img src="snail 3. 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=“my. Servlet? 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 Java. Script™ • 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 formatting, input ranges, etc. • Device extensions – Access device or vendor-specific API • Conditional logic – Download intelligence into the device
WMLScript Example Functions Variables Programming Constructs function currency. Convertor(currency, exch. Rate) { return currency*exch. Rate; } function my. Day(sun. Shines) { var my. Day; if (sun. Shines) { my. Day = “Good”; } else { my. Day = “Not so good”; }; return my. Day; }
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=“card 1" 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
WTA Example Placing an outgoing call with WTAI: WTAI Call Input Element <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: WTAI Call function check. Number(N) { if (Lang. is. Int(N)) WTAI. make. Call(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. html • Motorola “Wireless Application Development” PDF File http: //www. mot. com/MIMS/MSPG/spin/library_files/wad. pdf
- Slides: 77
