Your SlideShare is downloading. ×
Lecture16
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Lecture16

537
views

Published on

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
537
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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