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

Server-side
Web Programming
Lecture 16:
Customizing for Mobile Devices


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


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:

– CHTML:

• XHTML browsers don’t render

• CHTML browsers don’t render


– 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
and
understood

Server-side Customization
•

Customization can only be done at server side
– No client-side scripting on mobile devices!

“I am a Motorola E398”

Server
• Detects device properties
•Screen size
•Markup language
•Etc.

Response page with
appropriate markup for
this device

• Generates appropriate response

page for device


Server-side Customization
•

Goal:
Write JSP code that renders markup based on specific properties
• Example:

Generating either
or
based on what type of markup
language the device supports
<% if (markup_language.equals(“xhtml”)) { %>


<% } %>
<% else if (markup_language.equals(“chtml”)) { %>


<% } %>


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!
Device

Markup

Screen Width

SEC-SGHV200

WML

128

BlackBerry/2

WML

160

Nokia6590

XHTML MP

162


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 />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>
•

Usually same
as standard
HTML tag

Example: <wall:br/>
Tomcat

…
<wall:br/>
…

JSP document on server

XHTML MP
device

CHTML device

…


…
…


…


WALL Tags
•

Simple “hello world” example:

Use WALL
tag library

Required initialization,
including loading the
capabilities from

wurfl.xml
Main body inside block
tags

Must start and end with
document tag


WALL Tags
How this page
appears on two
different emulators


WALL Form Tags
• Standard
form tags:
–
–
–
–
–

text
checkbox
radio
hidden
select/
option

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


WALL-Specific Tags

Note that use of
different colors on
different lines very
important for
readability on small
devices


Phone Emulators
Testing mobile web sites:
•

Emulators
– Programs that simulate operation of browser or phone type
– Often available from company
• Openwave browser
/>
• Motorola devices
/>
• Nokia devices
/>
•

Actual phones
– Most reliable way for final testing


Openwave Browser Emulator

Displays appearance of
page on this device
Can direct to
specific web page
to test

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
– 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 />

JSP and WURFL
•

Example: Displaying brand name