| 2004 JavaOne SM Conference | BOF 2796 1 JAVAONE 2004 Joe Bowbeer Software Designer UIEvolution, Inc. Cris Cook Graphic Designer UIEvolution, Inc

| 2004 JavaOneSM Conference | BOF 2796 1

JAVAONE 2004

Joe BowbeerSoftware Designer

UIEvolution, Inc.

Cris CookGraphic DesignerUIEvolution, Inc.

java.sun.com/javaone/sf


Pervasive J2ME™ in Practice

Joe BowbeerSoftware DesignerUIEvolution, Inc.


A Cookbook for Developers and Designers

http://uievolution.com/javaone/


Delivering on J2ME™

Learn from two different perspectives:

Programmer's and Designer's

Practical aspects & Design considerations


Agenda

Programmer's perspectiveAPIs (and more APIs)ConstraintsBugs

Designer's perspectiveDeconstructing mobile designFrom PC to mobileFrom Browser to mobileFrom Flash to mobile

Q & A


Programmer's Perspective

APIs and more APIs

Constraints

Bugs


API Fragmentation

• Configuration:─ CLDC

• Profiles:─ DoJa-1.5oe, DoJa-2.0, DoJa-3.0, DoJa-3.5─ MIDP-1.0, Motorola, Nokia, Sprint, Vodafone, ...─ MIDP-2.0

(CDC & Personal Profiles not shown...)

One configuration, a multitude of profiles


DoJa

• Connect to original host only

• 30KB application code

• 100KB scratchpad (“scratchpad:///0;pos=nn”)

• JAM not JAD

• GIF not PNG

• MLD not MIDI

• SoftKey not Command

• No drawArc or fillArc

• No clipRect (DoJa-1.5oe)

DoJa Profile requires special treatment


MIDP

• Missing in MIDP-1.0─ Sound, Video─ Full screen─ browse(url), call(telno), send(sms)

• MIDP-2.0 and JTWI do consolidate

• Unresolved:─ Detecting presence of optional APIs─ Detecting support for platform requests

Evolution of MIDP


API Fragmentation

void browseTo(String url) throws Exception{//#sprint{ System.setExitURI(url); notifyDestroyed();//#sprint}//#midp2{ if (platformRequest(url)) { notifyDestroyed(); }//#midp2} }

Strategy: Conditional Compilation


API Fragmentation

Preprocessors

http://antenna.sourceforge.net

http://sosnoski.com/opensrc/jenable

Strategy: Conditional Compilation


Constraints

• Lower bounds:─ 200KB heap─ 30KB code─ 20KB record store─ 12KB network request─ 120x120 screen─ Slow processor

• Most constrained: DoJa and Nokia Series 40

Varied and sometimes incompatible


Constraints

• Lowest common denominator?

• Load code and content OTA

Strategies


Bugs

• Detecting end of input stream

• Font metrics

• Graphics clipping

• Record stores

A select few – from a large collection


Bug: InputStream End Test

byte[] readFromStream(InputStream in)throws IOException { byte[] buf = new byte[100]; ByteArrayOutputStream out = new ByteArrayOutputStream(); int n;// while ((n = in.read(buf)) != -1) { while ((n = in.read(buf)) > 0) { // FIXED out.write(buf, 0, n)); return out.toByteArray();}

EOF (-1) is never returned


Bug: Inaccurate Font Metrics

g.drawString(“Qwerty”, x, y, g.TOP | g.LEFT);

Precise control of text layout is tricky


Bug: Clipping Problems

protected void paint(Graphics g) { int w = getWidth(); int h = getHeight(); g.setColor(0xFF0000); g.translate(-w/2, -h/2); g.fillRect(w/2, h/2, w, h); g.setColor(0x0000FF); g.clipRect(w - w/4, h - h/4, w/2, h/2); g.fillArc(w - w/4, h - h/4, w/2, h/2, 0, 360);}

Graphics translate vs. clipRect


Bug: Clipping Problems

g.fillArc(w/4, h/4, w/2, h/2, 0, 360);

Strategy: Don't use g.translate


Bug: Record Stores

• Complex DB-style API

• Many bugs in MIDP-1.0 RI

• Wide range in limits and performance

• Easy to corrupt

• No way to read or write a partial record

RMS is complex and fragile


Bug: Record Store Corruption

void replace(String name, byte[] data)throws RecordStoreException { try { RecordStore.deleteRecordStore(name); } catch (RecordStoreNotFoundException ex) { } RecordStore rs = RecordStore.openRecordStore(name, true); boolean done = false; try { rs.addRecord(data, 0, data.length); done = true; } finally { rs.closeRecordStore(); if (!done) RecordStore.deleteRecordStore(name); }}

Strategy: Never modify, completely replace


Unusual Features

• Absolute URL in JAD:─ MIDlet-Jar-URL: http://host.net/path/app.jar

• Gateway transformations─ Accept: */*─ Cache-Control: No-Transform

• Paintable canvas overlaps command labels

Or bugs?


Overlapping Command Labels


Agenda

Programmer's perspectiveAPIs (and more APIs)ConstraintsBugs

Designer's perspectiveWhat is mobile design?From PC to mobileFrom Browser to mobileFrom Flash to mobile

Q & A


Explore Solutions for Wireless J2ME Applications from the Designers Perspective

UI Design Challenges and Solution


UI Design Challenges and Solution for J2ME

• Deconstructing mobile design

• PC to Mobile: ESPN Bottomline

• Web to Mobile: Movies.com

• Flash to Mobile: ESPN Baseball Gamecast


Deconstructing Mobile Design

Size Limitations Everywhere-Screens-File Sizes-Heap

Customer Considerations-Existing Brand Continuity-Features -What do users expect?

Mobile User Interface Model-Input Controls-Usage Patterns-Feedback / Responsiveness -Cost



PC Application to Mobile: ESPN Bottomline



PC Application to Mobile: ESPN Bottomline



PC Application: ESPN Bottomline

Considerations-Real-time Sports News Ticker -Large amount of data displayed-Links to ESPN Website for further information.-Desktop Application has ”Always On” Experience



Mobile: ESPN Bottomline

UI Controls and Focus: Auto-scroll




The Translation: Passive to Active




UI Controls and Focus




Dynamic Screen Layout


Standard Phone

Small (Sanyo 8100)

Wide (RIM Blackberry)



Application State Persistence


End Application Locked…

Restart Application

Return to Locked Game!


Web to Mobile: Movies.com



Web to Wireless: Movies.com




Considerations- Website holds large amount of data- Many paths to find information- User customization features for

ZIP code& Favorite theater



Web to Mobile: Movies.comConsistent Branding and custom UI elements



ZIP SearchNavigate

Web to Mobile: Movies.comTop Level Accessibility


What’s New?


Web to Mobile: Movies.comQuick Access to ZIP codes…





Favorite Theaters

My Movies


FLASH to Mobile: ESPN Baseball Gamecast







Considerations- Connected application with real time information- Large Immersive Data application- Progress, stats, scores and player information all on one

screen poses interesting layout problems






FLASH to Mobile: ESPN Baseball GamecastDividing the Information



FLASH to Mobile: ESPN Baseball GamecastMobile Specific Feature: User alerts



Summary

Some of the items we think about when designing these applications:

• Determine which controls make sense for the application and for mobile.

• Dividing the data and decision process into usable pieces for mobile.

• Focus on features that make sense to the mobile experience.


For More Information

http://www.uievolution.com/javaone/


Q&A


49

java.sun.com/javaone/sf



Joe BowbeerSoftware DesignerUIEvolution, Inc.


A Cookbook for Developers and Designers

http://uievolution.com/javaone/

Documents

| 2004 JavaOne SM Conference | BOF 2796 1 JAVAONE 2004 Joe Bowbeer Software Designer UIEvolution, Inc. Cris Cook Graphic Designer UIEvolution, Inc