1 / 77

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.

prue
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 applications 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. <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

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

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

  12. WML Wireless Markup Language

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

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

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

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

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

  18. The Result on Different Phones

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

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

  21. 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/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>

  22. Text Formats <?xmlversion="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN“ "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <cardtitle=“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>

  23. deckit

  24. Tables <?xmlversion="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN“ "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <cardtitle=“Table"> <p> <tablecolumns="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>

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

  26. A Tag • The <a> tag always performs a "go" task, with no variables • For example, <a href=“login.wml">Login page</a>

  27. Example <?xmlversion="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN“ "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <cardtitle=“Using A Tag"> <p> <ahref=“hello.wml">To Hello World</a> </p></card> </wml>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  43. After 15 seconds

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

  45. 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=“iname"/> </p> </card> <cardid="wel" title="Welcome"> <dotype="prev" label="Back"> <prev/> </do> <p> Your name is $(iname). Click Back to go to previous page. </p> </card> </wml>

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

More Related