1 / 73

WAP and WML

WAP and WML. DBI – Representation and Management of Data on the Internet. Millions. 1,400 1,200 1,000 800 600 400 200 0. 1996. 1997. 1998. 1999. 2000. 2001. 2002. 2003. 2004. 2005. Internet Connectivity Outlook. Projected cellular subscribers.

yeriel
Download Presentation

WAP and WML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. WAP and WML DBI – Representation and Management of Data on the Internet

  2. Millions 1,400 1,200 1,000 800 600 400 200 0 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 Internet Connectivity Outlook Projected cellular subscribers More handsets than PCs connected to the Internet bythe end of 2003! Projected Web handsets Projected PCs connected to the Internet (Dataquest 10/98) 'putting the Internet in everyone's pocket'

  3. WAP • WAP = Wireless Application Protocol • A protocol and set of specifications to connect wireless aplications to the Web

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

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

  6. The Specification Includes • WAP Architecture • Wireless Application Environment • Protocol Layers • Interoperability • Security

  7. Client Web Server WAP Gateway WML CGI Scripts etc. WML Encoder WML-Script WSP/WTP HTTP WML Decks with WML-Script WMLScript Compiler WTAI Protocol Adapters Content Etc. WAP Architecture

  8. Wireless Application Protocol Internet HTML JavaScript Other Services and Applications Wireless ApplicationEnvironment (WAE) Transaction Layer (WTP) Session Layer (WSP) HTTP Security Layer (WTLS) TLS - SSL Transport Layer (WDP) TCP/IP UDP/IP Bearers: IS-136 CDPD PDC-P CDMA Etc.. SMS USSD CSD Internet vs. WAP

  9. WML WAP Specifies • Wireless Application Environment • WML Microbrowser • WMLScript Virtual Machine • WMLScript Standard Library • Wireless Telephony Application Interface • WAP Content Types • Wireless Protocols • Wireless Session Protocol (WSP) • Wireless Transport Layer Security (WTLS) • Wireless Transaction Protocol (WTP) • Wireless Datagram Protocol (WDP) • Wireless network interface definitions

  10. <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> <WML> <CARD> <DO TYPE="ACCEPT"> <GO URL="/submit?Name=$N"/> </DO> Enter name: <INPUT TYPE="TEXT" KEY="N"/> </CARD> </WML> <HTML> <HEAD> <TITLE>NNN Interactive</TITLE> <META HTTP-EQUIV="Refresh" CONTENT="1800, URL=/index.html"> 010011010011110110010011011011011101010010011010 Big Pipe - Small Pipe Syndrome Internet Wireless network HTTP/HTML WAP Content encoding

  11. WAP Application Environment Goals • Network- neutral application environment • For narrowband wireless devices • With an Internet/WWW programming model • And a high degree of interoperability

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

  13. WML Wireless Markup Language

  14. WML • Tag-based browsing language: • Screen management (text, images) • Data input (text, selection lists, etc.) • Hyperlinks & navigation support • W3C XML-based language • Inherits technology from HDML (Handheld Device Markup Language) and HTML

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

  16. All Decs 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>

  17. Hello World Example <?xmlversion="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <cardid="Card1" title="The dbi Course"> <p> <!-- Hello World example --> Hello World </p> </card> </wml> <wml> </wml> - It defines the beginning and the ending of the page, like <html> </html> <card> </card> - It defines the beginning and the ending of a card

  18. == The DBI Course ==Hello World__________________________________________ Back

  19. The Result On a Different Device

  20. Detecting a Click <?xmlversion="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <cardid=“Card1”title=“The DBI Course”> <do type=“accept”label=“Next”> <gohref=“#Card2”/> </do> <p> Select Next to go to Card 2. </p> </card> <cardid=“Card2”title=“The DBI Course”> <p> I'm Card 2. </p> </card> </wml>

  21. == The DBI Course == Select Next to go to Card 2.__________________________________________Next Back == The DBI Course == I am Card 2.__________________________________________Next Back

  22. Timer <?xmlversion="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <cardid="Intro" ontimer="#Main" title=“DBICourse"> <timervalue="150"/> <p> Welcome to the dbi site!! We will bring you to our main page after 15 seconds. </p> </card> <cardid="Main" title="Menu"> <p> This is our main page. Under construction. </p> </card> </wml>

  23. After 15 seconds

  24. == 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

  25. Input <?xmlversion="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <cardid="main" title=“DBI Example"> <dotype="accept" label="Next"> <gohref="#wel"/> </do> <p> Please enter your name: <inputtype="text" name="name"/> </p> </card> <cardid="wel" title="Welcome"> <dotype="prev" label="Back"> <prev/> </do> <p> Your name is $(name). Click Back to go to previous page. </p> </card> </wml>

  26. Choosing the “Next” Entering a name Choosing the “Options”

  27. Sending Data to the Server <?xmlversion="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <cardid="main" title=“DBI Example"> <dotype="accept" label=“Send"> <gomethod="post" href="www.cs.huji.ac.il/register.cgi"> <postfieldname="firstname" value="$(first)"/> <postfieldname=“course" value=“dbi"/> </go> </do> <p> Please enter your first name: <inputtype="text" name="first"/> </p> </card> </wml>

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

  29. A Deck of Cards <WML> <CARD> <DO TYPE="ACCEPT" LABEL="Next"> <GO URL="#card2"/> </DO> DBI Portal.<BR/>Directory </CARD> <CARD NAME="card2"> <DO TYPE="ACCEPT"> <GO URL="?send=$type"/> </DO> Services <SELECT KEY="type"> <OPTION VALUE="em">Email</OPTION> <OPTION VALUE="ph">Phone</OPTION> <OPTION VALUE="fx">Fax</OPTION> </SELECT> </CARD> </WML> DBI Portal. Directory _____________ Next Services 1>Email 2 Phone ____________ OK

  30. <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="?get=person" METHOD="POST" POSTDATA="first=$fname&amp;last=$lname"/> </DO> Last name: <INPUT KEY="lname"/> </CARD> Defining the Navigation Path

  31. 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/myapp.wml"/> </DO>

  32. 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 homepage for ____________ Visit

  33. 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 ActionTask ACCEPT, PREV PREV Others NOOP

  34. 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"/> </DO> First story </CARD> <CARD NAME="msg2"> Second story </CARD> </WML> First story … _____________ Next Main Second story ... _____________ OK Main

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

  36. 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 <CARD> <DO TYPE="ACCEPT" LABEL="View"> <GO URL="getcity.cgi?location=$city"/> </DO> Forecast <SELECT KEY="city"> <OPTION VALUE=“jer">Jerusalem</OPTION> <OPTION VALUE=“TA">Tel-Aviv</OPTION> <OPTION TITLE="Find" ONCLICK="find.cgi">New City</OPTION> </SELECT> </CARD> Forecast 1 Jerusalem 2 Tel-Aviv 3>New City ____________ Find

  37. A Long Select ListMULTIPLE and DEFAULT Attributes <CARD> <DO TYPE="ACCEPT"> <GO URL="get_addr.cgi?id=$recid"/> </DO> Addr [1..9] <SELECT KEY="recid" 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>

  38. The INPUT Element • Prompts user to enter a string of text • Use FORMAT= to constrain input • UP.Browser reserves soft key fortext entry mode, if necessary Soc. Security: 287-33- _ ____________ 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: 287-33- 7629 ____________ OK

  39. 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="PASSWORD" • Special entry mode handled by the browser • MAXLENGTH=number • Maximum number of allowed characters

  40. 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”

  41. Displaying Images • Insert app images or local icons within display text • 1-bit BMP format • Images are ignored by non-bitmapped devices <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>

  42. 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)

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

  44. <?xmlversion="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <cardid="main" title="Where are you?"> <timervalue="10"/> <imgsrc="snail2.wbmp" alt="A search snail"/> </card> <cardid="look" title="I found you"> <imgsrc="snail3.wbmp" alt="A looking snail"/> </card> </wml>

  45. Adding Images

  46. Special WML Characters • Use character entities in display text&quot; " &amp; & &apos; ' &lt; < &gt; > &nbsp; Blank space &shy; Soft hyphen (discretionary line break) • Replace the “&” character in URL stringsURL="query.cgi?first=$fname&amp;last=$lname" • Use “$$” to display a single “$” character

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

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

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

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

More Related