©1996-2001 Alex Chaffee

Building Wireless Applications Using Java and XML

Alex Chaffee, alex@jguru.com

http://www.purpletech.com

WAP Architecture

Cell phone / PDA

WAPGateway

HTTPServerWAP HTTP

Which Gateway?

• Europe: whichever – Cell phone contains modem, signal carries PPP connection to any

cell ISP

• U.S.: hardcoded to carrier– Same technology (?)– IP address of ISP hardcoded by vendor

• Security– If I make a secure connection to my bank, maybe I don't trust my

carrier's gateway not to snoop

• Choice– Inhibits competition among wireless ISPs

• Privacy– My carrier can monitor my behavior (traffic, email)

Wireless Client Types

• Physical Devices– PC, Cellphone, Palmtop, Minilaptop– HTML, WML, HDML, iMode, etc.– J2ME-compliant or not– many versions

• WAP Gateways– proxy to WML browsers

• Or to HDML etc. browsers

– many versions

On J2ME

• Client-side Java– Flexible– Powerful– Not yet ubiquitous

• Server-side Java– Direct access to data– Click and wait– WML/WAP much more widespread at present

• Very analogous to applet vs. servlet• This talk: all about server-side

Developing Wireless Applications

• Get a web server– Apache– Tomcat– Add WML mime-type

• text/vnd.wap.wml

• Get an emulator/SDK– Phone.com– Ericsson.com– Nokia.com

• Learn WML– Phone.com SDK has good docs/specs

WML

• XML-compliant language• Similar to HTML

– Defines display, input, links for small devices

• Central concept is not page but card and deck– Allows many cards (pages) to be downloaded

simultaneously

• WMLScript– Allows more client-side interactivity, like JavaScript– Not widely supported (phone.com browsers only)

WML 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>

<p>Hello Wireless World!

</p></card>

</wml>

» Thanks, Chad

WML Example 2<wml>

<card><p>

Computing Central <br/><a href="#java_card" title="Java tips, tricks">Java News</a><a href="#cpp_card" title="C++ news, jobs">C++ News</a>

</p></card>

<card id="java_card"><p>

Welcome to the world of Java, the daily tip is ...</p>

</card>

<card id="cpp_card"><p>

Hot jobs in the C++ community...</p>

</card></wml>

Wireless application = Web application

• Since WAP gateways call regular HTTP servers

• Developing wireless apps is identical to developing web apps– Except for a few small details

Server-Side Java-XML Architecture

Java UI Java Business

Logic

XML Processors

XML Data Sources

HTML/WML

JSP JavaBeans

Servlet EJB

DOM, SAX,JDOM

XPath

XSL

Filesystem

XML-savvyRDBMS

XMLData Feed

WAP/HTTPRequest

Server-Side Architecture Notes

• Note that you can skip any layer, and/or call within layers– e.g. XML->XSL->DOM->JSP, or– JSP->Servlet->DOM->XML

Cache as Cache Can

• Caching is essential

• Whatever its advantages, XML is slow

• Cache results on disk and/or in memory

• See www.purpletech.com for a cache class

• Also org.jdom.contrib.beans.JDOMBean

Data Sources

• XML files

• Databases

• XML database wrappers

• Binary data feeds

• XML data feeds

Data Flow

• request-driven

• data-driven

Request-driven flow

Java Layer Data Layer

HTML/WML

Java Logic

Java UI

XMLProcessor

XML DataSource

Databaseor

Filesystem

WAP/HTTPRequest

Request-Driven Flow (Context-Driven)

• client makes WAP request

• gateway makes HTTP request

• JSP examines context– request/device/variables/time of day/...

• JSP/Servlet acquires correct XML

• JSP parses XML, extracts data

• JSP outputs WML

Data-driven flow

HTML/WML

XSLTProcessor

XML DataSource

Databaseor

Filesystem

WAP/HTTPRequest

XMLWrapper

XSLStylesheet?

Data-Driven Flow

• XML data source

• XSL transformation into WML or HTML

• How to choose…– Which XSL stylesheet to use?– Where to get the data?– How to invoke the XML wrapper?

Mixed Flow

• client makes request

• servlet/jsp – identifies client browser– examines request– acquires XML data– acquires XSL file– invokes XSL processor– Postprocesses XML– outputs WML/HTML/HDML/...

XMLC

• Separates presentation template from presentation formatting code

• See xmlc.enhydra.org

HTML(with ID tags)

Java Class(e.g. Servlet)

HTML Object(automatically

generated)

XMLC

HTML (dynamically-generated)

Settingvalues Data

Readingdata

XMLC + WML + HTML

WML Source:<?xml version="1.0"?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml"><wml> <card> <p>Date: <SPAN id="date">some date</SPAN></p> <p id="motd">some message</p></card></wml>

HTML Source:<HTML><TITLE><HEAD>Message of the Day</HEAD></TITLE><BODY><B>Date:</B> <SPAN id="date">some date</SPAN></p> <p id="motd">some message</p></BODY></HTML>

Java source:obj.setElementDate( new Date().toString() );obj.setElementMotd( "You are in a maze of twisty little passages" );out.print(obj.toDocument());

Wireless Development Problems (with solutions)

• Missing HTTP features

• Response size

• Identifying the Client Browser

• Images

• Languages/Locales

• Which output format (wml/html/…)?– WML Incompatibilities

• Screen Scraping

Missing HTTP features

• Not supported by all gateways/browsers• Redirects

– most do– some don't

• Cookies– most gateways don't support cookies– must use URL Rewriting

• Some servlet engines are bad at this– Anecdotally

• 25-50% of requests don't support cookies• same model, same provider, one phone works, one doesn't

Response Size

• There is a hard limit on size of response• Dependent on gateway and browser/device• About 1.5 K

– After response is compressed and encoded by WAP gateway

• Therefore, it's impossible to know if you've reached the limit, unless you fail– "cache 22"

• Solution: stay below 2K uncompressed and you should be fine

Identifying the Client Browser

• Hard problem, unfortunately

• User-Agent header not always sufficient

• Accept header not always accurate

• (But those are the only headers you can use)

• Also, device browser, and sometimes they provide different functions

One Solution:

• Allow user to set browser preference on login

• Chicken-and-egg problem– Which browser do you pick first?– Make best guess: usually not unintelligible

Better Solution: Capabilities

• Apply rules to identify browser based on headers

• Mapping from browser to capabilities• Make decisions based on capabilities, not

browser– Allows migration, forward compatibility with new

browsers, and making use of previously unknown features

– Not tied down to what you know (or what you think you know) about a specific browser

More About Capabilites

• Note: be fuzzy in matching, to catch future versions of same device (hopefully)

• Note: Store device in session, so you don't have to keep determining it

• Yes, there are a lot of devices to keep track of– Morphis has a list, keeping it updated

Example:<device id="sam-sch6100">

<name>Samsung SCH-6100</name><imgext>bmp</imgext><capabilities>

<capability name="languages" value="English, Spanish"/><capability name="allow_images" value="1"/><capability name="resolution_height" value="32"/><capability name="resolution_width" value="96"/><capability name="max_num_lines" value="4"/><capability name="UP_designation" value="SC03"/><capability name="locations" value="US"/><capability name="network" value="CDMA"/>

</capabilities><rules> <headerrule name="User-Agent" type="regexp">UP\.Browser/3.*SC03 .* </headerrule></rules><xsl name="wmltransform.xsl" mime="text/vnd.wap.wml"/>

</device>

Other Capabilities Initiatives

• CC/PP– W3C

• UAProf– WAP Forum

• Not widely supported (yet?)

• Also related to Personalization

Open-SourceContent Management Frameworks

• Lutris Enhydra

• Kargo Morphis

• Cocoon

• IBM

One URL Fits All

• Want to be able to – Email a URL to someone with a different device– Synchronize wireless/wired bookmarks

• Good:– http://www.foo.com/thing.jsp

• Bad:– http://www.foo.com/cellphone/nokia/9100/thing.jsp

• (TM Bluestone) "Total-E-Mobile"

Images

• Different browsers: different…• Screen size (resolution)

– 28x20, 65x25, 91x50, 96x24, 96x32, 96x44, 96x64, 101x80, 128x64, 134x60, 160x160, 160x200, 240x160, 240x320, 310x100, 480x160, 640x240, 640x480, 800x600, ...

• Image types accepted– GIF, JPEG, BMP, WBMP

• Color depth– B/W, grayscale, 8-bit color, ...

Images: Solution

• Create several base images– different sizes/colors/formats– e.g. logo.32x32.bw.wbmp, logo.96x96.col.gif

• Write matching/transforming algorithm– look for closest fit– transform (scale/dither/reformat) as necessary

• What if an image cannot be legibly shrunk smaller than a certain size?– May be necessary to split image across several

cards

One More Thing About Images

• Some browsers have trouble loading more than one image per page

• D'oh!

Morphis Images

• <wax:img srcid="foo"/> • Matches

– foo.gif– foo_Gnok-7110.gif– foo_Gwml.gif– foo_Len.gif

Languages/Locales/Encoding

• Accept-Language header should be canonical• Once you determine language, store it in the

session and/or a cookie• Should also allow override with a a "lang"

parameter or persistent user preference• Language may need to be ID'd before loading data• WML supports xml:lang attribute

– Usage is ambiguous– Results in large response pages (containing all languages)

Java Localization Tricks

• Store strings etc. in ResourceBundle object– Substitute in correct version at runtime

• XMLC– Elements tagged with id attribute– Runtime substitution of element content

Character encoding

• Default: UTF8

• By device - some are only able to support certain encodings– iMode requires Shift-JIS

• Should store as browser capability

WML Incompatibilities

• Really irritating• Different implementations/interpretations of

WML spec• Need to tailor output to browser (not just

capability) • Example: wml:select

– Selectable bullet-list– UP browsers: looks nice– Nokia browser: looks ugly

One solution to WML Incompatibilities

• Intermediate markup language• Write your apps in this language• Provide transformations • Intermediate language

– <fooml:choice>…

• Transform source– phone.com (up) -> <wml:select>– nokia -> list of <wml:a> (link)

• E.g. WAX (part of Morphis)

Screen Scraping

• Some systems accept HTML and strip/parse– Avant Go, etc.

• If you depend on these, don't need to learn WML

• Still need to deal with browser issues– Not a panacea

• When it works, it works great– But most of the time it doesn't work

Morphis Overview

• Dispatching

• Translating (based on XSLT / Xalan)

• Caching

• WAX (an abstract markup language)

• device.x ml (catalog of wireless devices)

Conclusion

• Wireless apps have growing pains• Some problems with the WWW were solved,

many were not, plus many new ones• Be patient:

– devices are getting better all the time– HTML is becoming XML

• My prediction: within a few years the platforms will converge, and WML will be supplanted by HTML

For More Information

• www.purpletech.com

• www.morphis.org

• xmlc.enhydra.org