Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.



Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this


  1. 1. Server-side Web Programming Lecture 16: Customizing for Mobile Devices
  2. 2. Mobile Devices <ul><li>Web access increasingly performed on mobile devices </li></ul><ul><li>Characteristics: </li></ul><ul><ul><li>Small screens </li></ul></ul><ul><ul><li>Limited power </li></ul></ul><ul><ul><li>Different markup languages </li></ul></ul><ul><ul><ul><li>XHTML MP (current standard) </li></ul></ul></ul><ul><ul><ul><li>CHTML (compact HTML) </li></ul></ul></ul><ul><ul><ul><li>WML (wireless markup language) </li></ul></ul></ul><ul><li>Problem: These characteristics are very different for different devices </li></ul>
  3. 3. Need for Customization <ul><li>Screen sizes </li></ul><ul><ul><li>Width may vary between 100 and 200 pixels </li></ul></ul><ul><ul><li>No horizontal scroll bar </li></ul></ul><ul><ul><ul><li>Content outside of range may not be visible! </li></ul></ul></ul><ul><ul><li>Could just restrict all pages to no more than 100 pixels in width </li></ul></ul><ul><ul><ul><li>Would waste the little screen area available! </li></ul></ul></ul><ul><ul><li>Must customize to device screen width </li></ul></ul><ul><ul><ul><li>Example: 3 column table on wide screen 2 column table on small screen </li></ul></ul></ul>
  4. 4. Need for Customization <ul><li>Image types </li></ul><ul><ul><li>Not all image types supported by all devices </li></ul></ul><ul><ul><ul><li>Unlike screen browsers which all support .jpg, .gif </li></ul></ul></ul><ul><ul><li>Only common format: .wbmp (wireless bitmap) </li></ul></ul><ul><ul><ul><li>Binary black/white </li></ul></ul></ul><ul><ul><ul><li>Very low resolution </li></ul></ul></ul><ul><ul><li>Unacceptable for color devices with more powerful screens </li></ul></ul>
  5. 5. Need for Customization <ul><li>Markup language </li></ul><ul><ul><li>All screen-based browsers understand HTML </li></ul></ul><ul><ul><li>Most are tolerant of minor syntax errors </li></ul></ul><ul><ul><li>Not true for mobile devices! </li></ul></ul><ul><li>Wireless markup language types: </li></ul><ul><ul><li>XHTML MP </li></ul></ul><ul><ul><ul><li>“ Mobile Profile” HTML </li></ul></ul></ul><ul><ul><ul><li>Current standard for new devices </li></ul></ul></ul><ul><ul><ul><li>Not present on most older devices </li></ul></ul></ul><ul><ul><ul><ul><li>Unlike normal computer, no way to load a new browser! </li></ul></ul></ul></ul><ul><ul><li>CHTML (Compact HTML) </li></ul></ul><ul><ul><ul><li>Simplified HTML developed in Japan </li></ul></ul></ul>
  6. 6. Need for Customization <ul><li>Wireless markup language types: </li></ul><ul><ul><li>WML (Wireless Markup Language) </li></ul></ul><ul><ul><li>Very different syntax from HTML </li></ul></ul>
  7. 7. Need for Customization <ul><li>Not possible to create single page understood by all devices! </li></ul><ul><li>Simple example: break tag </li></ul><ul><ul><li>XHTML MP: <br/> </li></ul></ul><ul><ul><li>CHTML: <br> </li></ul></ul><ul><ul><ul><li>XHTML browsers don’t render <br> </li></ul></ul></ul><ul><ul><ul><li>CHTML browsers don’t render <br/> </li></ul></ul></ul><ul><ul><li>No way to do a simple break tag understood by all devices! </li></ul></ul><ul><li>Not a problem for screen based browsers </li></ul><ul><ul><li>All work in HTML </li></ul></ul><ul><ul><li>All are tolerant of syntax variations </li></ul></ul><ul><ul><ul><li>Both <br> and <br/> understood </li></ul></ul></ul>
  8. 8. Server-side Customization <ul><li>Customization can only be done at server side </li></ul><ul><ul><li>No client-side scripting on mobile devices! </li></ul></ul><ul><li>Server </li></ul><ul><li>Detects device properties </li></ul><ul><ul><li>Screen size </li></ul></ul><ul><ul><li>Markup language </li></ul></ul><ul><ul><li>Etc. </li></ul></ul><ul><li>Generates appropriate response page for device </li></ul>“I am a Motorola E398” Response page with appropriate markup for this device
  9. 9. Server-side Customization <ul><li>Goal: Write JSP code that renders markup based on specific properties </li></ul><ul><li>Example: Generating either <br/> or <br/> based on what type of markup language the device supports <% if (markup_language.equals(“xhtml”)) { %> <br/> <% } %> <% else if (markup_language.equals(“chtml”)) { %> <br> <% } %> </li></ul>
  10. 10. Server-side Customization <ul><li>Problem: Only device type ID sent over with request </li></ul><ul><ul><li>SEC-SGHV200 </li></ul></ul><ul><ul><li>BlackBerry/2 </li></ul></ul><ul><ul><li>Nokia6590 </li></ul></ul><ul><li>No information about capabilities of device </li></ul><ul><li>Would need a giant table of device capabilities to look this up in for thousands of devices! </li></ul>162 XHTML MP Nokia6590 160 WML BlackBerry/2 128 WML SEC-SGHV200 Screen Width Markup Device
  11. 11. The WURFL Project <ul><li>WURFL project (wireless universal resource file) </li></ul><ul><ul><li>Public file created by thousands of volunteers </li></ul></ul><ul><ul><li>XML-based file containing device capbilites </li></ul></ul><ul><ul><li>Can be downloaded from </li></ul></ul><ul><ul><li>wurfl.xml file installed in WEB-INF directory (with web.xml ) </li></ul></ul><ul><ul><ul><li>Currently not supported by NetBeans </li></ul></ul></ul><ul><li>Examples: </li></ul>
  12. 12. The WURFL Project <ul><li>Examples: </li></ul>
  13. 13. WALL Tags <ul><li>WALL: Wireless Access Library </li></ul><ul><li>Set of built-in tags that are automatically translated by Tomcat to the actual tag appropriate for the device </li></ul><ul><li>Basic XML syntax: <wall: tagname > </li></ul><ul><li>Example: <wall:br/> </li></ul>Usually same as standard HTML tag … <wall:br/> … JSP document on server Tomcat … <br/> … XHTML MP device … <br> … CHTML device
  14. 14. WALL Tags <ul><li>Simple “hello world” example: </li></ul>Use WALL tag library Required initialization, including loading the capabilities from wurfl.xml Must start and end with document tag Main body inside block tags
  15. 15. WALL Tags How this page appears on two different emulators
  16. 16. WALL Form Tags <ul><li>Standard form tags: </li></ul><ul><ul><li>text </li></ul></ul><ul><ul><li>checkbox </li></ul></ul><ul><ul><li>radio </li></ul></ul><ul><ul><li>hidden </li></ul></ul><ul><ul><li>select/ option </li></ul></ul>
  17. 17. WALL Form Tags Note that forms rendered differently on different devices
  18. 18. WALL-Specific Tags <ul><li>Designed specifically for mobile devices </li></ul><ul><ul><li>No analogous tag in HTML </li></ul></ul><ul><li>Example: Menu tag </li></ul><ul><ul><li>Usually list of URLs between <wall:menu> and </wall:menu> tags </li></ul></ul>Special CSS for menus
  19. 19. WALL-Specific Tags <ul><li>Tomcat translates into a simple HTML table </li></ul><ul><ul><li>CSS used to set line colors </li></ul></ul>
  20. 20. WALL-Specific Tags Note that use of different colors on different lines very important for readability on small devices
  21. 21. Phone Emulators <ul><li>Testing mobile web sites: </li></ul><ul><li>Emulators </li></ul><ul><ul><li>Programs that simulate operation of browser or phone type </li></ul></ul><ul><ul><li>Often available from company </li></ul></ul><ul><ul><ul><li>Openwave browser </li></ul></ul></ul><ul><ul><ul><li>Motorola devices </li></ul></ul></ul><ul><ul><ul><li>Nokia devices </li></ul></ul></ul><ul><li>Actual phones </li></ul><ul><ul><li>Most reliable way for final testing </li></ul></ul>
  22. 22. Openwave Browser Emulator Can direct to specific web page to test Displays appearance of page on this device Working controls for phone (to test scrolling, autonumbering, etc.)
  23. 23. Openwave Browser Emulator <ul><li>Usually display html received by device </li></ul><ul><li>Important since this is not the same as the WALL tags on the server! </li></ul>
  24. 24. JSP and WURFL <ul><li>What if WALL tags not powerful enough </li></ul><ul><ul><li>Example: Need to base number of columns in table on screen width </li></ul></ul><ul><ul><li>Need to get screen width and use in conditional statement </li></ul></ul><ul><li>Can directly access device capabilities from WURFL file </li></ul><ul><ul><li>Use in JSP code </li></ul></ul>Get user-agent ID from request object Translate to WURFL device ID using UA manager Use CapabilityMatrix object to get specific capabilites for that device Must import net.sourceforge.wurfl.wurflapi.* libraries Full API at
  25. 25. JSP and WURFL <ul><li>Example: Displaying brand name </li></ul>
  26. 26. JSP and WURFL <ul><li>Import WURFL classes: </li></ul><ul><li>Get the user-agent from the header of the request: </li></ul><ul><li>Create a UAManager and a CapabilityMatrix as objects </li></ul><ul><ul><li>UAManager translates user-agents into WURFL device IDs </li></ul></ul><ul><ul><li>CapabilityMatrix = table of device capabilities usable by JSP </li></ul></ul>
  27. 27. JSP and WURFL <ul><li>Get Device ID from user-agent: </li></ul><ul><li>Get the desired capability from the CapabilityMatrix: </li></ul><ul><ul><li>Need device ID, capability name </li></ul></ul><ul><li>Use the information in the JSP </li></ul>
  28. 28. WURFL Capabilities <ul><li>Complete list at </li></ul>
  29. 29. Cool Menu Example <ul><li>WALL supports “cool menu” tag </li></ul><ul><ul><li>Table of icons for links </li></ul></ul><ul><li>Syntax: <wall:cool_menu colnum =“cols ”> <wall:cell> image/text for link </wall:cell> <wall:cell> image/text for link </wall:cell> … </wall:cool_menu> </li></ul>
  30. 30. Cool Menu Example <ul><li>Goal: Have number of columns depend on screen width </li></ul><ul><ul><li>Width < 110 pixels  1 column </li></ul></ul><ul><ul><li>Width >= 110 and < 160  2 columns </li></ul></ul><ul><ul><li>Width >= 160  3 columns </li></ul></ul><ul><li>Will need to extract resolution_width property for device </li></ul>
  31. 31. Cool Menu Example Use it to set a gridsize variable Extract the resolution_width property Insert that gridsize value into the tag