Customizing for mobile devices (lập TRÌNH WEB SLIDE)

– Must customize to device screen width • Example: 3 column table on wide screen 2 column table on small screen... Need for Customization• Image types – Not all image types supported by

Server-side Web Programming

Lecture 16:

Customizing for Mobile Devices

• WML (wireless markup language)

• Problem: These characteristics are

very different for different devices

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

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

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

Need for Customization

• Wireless markup language types:

– WML (Wireless Markup Language)

– Very different syntax from HTML

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

Server-side Customization

• Customization can only be done at server side

– No client-side scripting on mobile devices!

“I am a Motorola E398”

Response page with appropriate markup for this device

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>

<% } %>

• No information about capabilities of device

• Would need a giant table of device capabilities to look this up in for thousands of devices!

Device Markup Screen Width

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:

The WURFL Project

• Examples:

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

…

<br>

…CHTML device

WALL Tags

tag library

Required initialization, including loading the capabilities from

WALL Form Tags

WALL Form Tags

Note that forms

rendered differently

on different devices

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

WALL-Specific Tags

• Tomcat translates into a simple HTML table

– CSS used to set line colors

Phone Emulators

Testing mobile web sites:

• Emulators

– Programs that simulate operation of browser or phone type

– Often available from company

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

Openwave Browser Emulator

• Usually display html

received by device

• Important since this is

not the same as the

WALL tags on the

server!

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

ID using UAmanager

Use CapabilityMatrixobject to getspecific capabilitesfor that device

Must import net.sourceforge.wurfl.wurflapi.* librariesFull API at http://wurfl.sourceforge.net/java/api2docs/index.html

JSP and WURFL

• Example: Displaying brand name

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

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

WURFL Capabilities

• Complete list at

http://wurfl.sourceforge.net/help_doc.php

Cool Menu Example

• WALL supports “cool menu” tag

– Table of icons for links

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

Cool Menu Example

Use it to set a gridsize variableExtract the resolution_width property

Insert that gridsize value into the tag