Building Wireless Applications Using Java and XML

Wireless Java

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 + HTMLWML 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