Connecting to the Web Using Mobile Devices

1. Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web

2. What are Mobile Devices?

3. Buy it How Much is Harry Potter (5)? 25.95 Web Book Store Harry Potter (5) Price: 25.95 Copies in Stock: 3 Hmm.. Harry Potter (5) costs $30.00 here… Example Scenario Harry Potter (5) Price: 25.95 Copies in Stock: 2

4. Characteristics of Mobile Devices • Small screen • Difficult to type in data • Slow connection • Small bandwidth • Small memory • Limited CPU • Speech capability • Unsecure line • Devices are very different one from another

5. Millions 1,400 1,200 1,000 800 600 400 200 0 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 Statistics about Mobile Devices 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'

6. Standards Evolution http://www.littlespringsdesign.com/design/xhtmlinfo.html

7. WAP: Wireless Application Protocol

8. What is WAP? • WAP is used to access services and information • WAP is inherited from Internet standards • WAP is for handheld devices such as mobile phones • WAP is a protocol designed for micro browsers • WAP enables the creating of web applications for mobile devices. • WAP uses the mark-up language WML • WML is defined as an XML 1.0 application

9. More about WAP • Developed by the WAP Forum • The WAP Forum represents over 90% of the global handset market • Based on Internet standards (HTML, XML and TCP/IP) • Consists of • A WML language specification • A WMLScript specification • A Wireless Telephony Application Interface (WTAI) specification

10. What is a Micro Browser? • A small piece of software that makes minimal demands on hardware, memory and CPU. • Can display information written in a restricted mark-up language called WML. • Can also interpret a reduced version of JavaScript called WMLScript.

11. Examples of WAP Use • Checking train table information • Ticket purchase • Viewing traffic information • Checking weather conditions • Looking up stock values • Looking up phone numbers • Looking up addresses • Looking up sport results

12. Architecture

13. Phone Actually Sends HTTP Request!! • Observe that you phone is "sending" and HTTP request • Request may be to any page • Important to distinguish between requests originating from phone vs from browser. • Solution: Use User-Agent header

14. public class BookStoreServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String agent = request.getHeader("User-Agent"); // you have to write the isMobilePhoneAgent method if (isMobilePhoneAgent(agent)) { RequestDispatcher dispatcher = getServletContext().getRequestDispatcher("Store.wml"); dispatcher.forward(request, response); } .... } }

15. public class XSQLProcessorServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String agent = request.getHeader("User-Agent"); String styleSheet = ""; if (isMobilePhoneAgent(agent)) { styleSheet = "phone-version.xsl"; } else styleSheet = "computer-version.xsl"; .... } }

16. WML: Wireless Markup Language

17. WML Basics • Tag-based browsing language, which contains: • Text, images • User input via forms • Hyperlinks & navigation support • Based on XML

18. WML Basics (cont.) • Screen views are split into cards • Several cards can be put in a wml documents • Navigation occurs between cards (in the same or different wml document) • One card is display at a time! • Note: Several "pages" are downloaded at once

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

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

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

22. The Result on Different "Phones"

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

24. 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></p> </card> </wml>

25. deckit

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

28. Anchors • The <anchor> tag defines a link and what to do when a user chooses it • Possible tasks: go, prev, refresh • Example: <anchor>Login page <go href=“login.wml"/> </anchor> • The <a> tag always performs a "go" task <a href=“login.wml">Login page</a>

29. 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 the variables defined on the page • The <noop> task says that nothing should be done

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

31. Handling User Input • Select lists to choose from a list of options • Input fields to enter text or numbers • Values are put into variables defined by the attribute key • Values are available to all cards in the deck • Values can be explicitly sent in an HTTP request for a different URL

32. 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 key="choice"> <option value="htm">HTML Tutorial</option> <option value="xml">XML Tutorial</option> <option value="wap">WAP Tutorial</option> </select> </p> </card> </wml>

33. 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 key="Name" size="15"/><br/> Age: <input key="Age" size="15" format="*N"/><br/> Sex: <input key="Sex" size="15"/> </p> </card> </wml>

34. FORMAT Control Characters • N Numeric character • A, a Alphabetic character • X, x Numeric or alphabetic character • M, m Any character • Leading * specifies 0 or more characters (*N) • Leading number specifies number of characters (4N)

35. The do Action • The anchor tag allowed us to make text on the screen into a link • The <do> tag is similar. However, the linked word does not appear within the text of the screen, but rather in a special place (e.g., bottom left and right)

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

38. Do Tag Syntax • Attribute type with value ACCEPT, OPTIONS, HELP, PREV, DELETE, or RESET • Attribute label is the text to appear • Contains a Task as a subelement (recall that this is one of GO, PREV, REFRESH, NOOP)

39. Variables • Variables can be defined to store data • Variables are available in all cards of a deck • Can be defined explicitly, or defined by input from the user • Setting a value to a variable: <setvar name="i" value="500"/>

40. Setting Variables From Input <card id=“card1"> <select key=“i"> <option value=“500">The Number 500</option> <option value=“Five Hundred">500 in Text</option> </select> </card> <card id="card2"> <p>You selected: $(i)</p> </card>

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

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

45. Sending Data to the Server <CARD> <DO TYPE="ACCEPT"> <GO URL=“dbi/myServlet?id=$(sno)"/> </DO> <SELECT KEY=“sno” > <OPTION VALUE="1">Bart</OPTION> <OPTION VALUE="2">Lisa</OPTION> <OPTION VALUE="3">Homer</OPTION> <OPTION ONCLICK="#card2">More...</OPTION> </SELECT> </CARD>

46. 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&amp;last=$lname"/> </DO> Last name: <INPUT KEY="lname"/> </CARD>

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

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

49. After 15 seconds

50. Template Element • The <template> tag defines a template for all the cards in a deck • The contents of 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