Radical GUI Makeover with Ajax Mashup - oracle.com · Vector graphics, animations and events in XML W3C standards: SVG Tiny 1.1, 1.1+, and 1.2 150+ device types on the market, > 225

Radical GUI Makeover with Ajax Mashup

Terrence BarrSenior Technologist and Community AmbassadorJava Mobile & Embedded Community

TS-5733

2008 JavaOneSM Conference | java.sun.com/javaone | 2

Learn how to turn a 'plain old' Java Platform, Micro Edition (Java™ ME) application environment based on LCDUI into a slick-looking and engaging applicationLearn about SVG (scalable vector graphics), JSR-226, and Mobile Ajax along the wayKnow where to get the code that you can copy & paste ;-)


Agenda

Meet the Java Mobile & Embedded Community and the ME Application Developers Project Mobile Ajax for Java ME PlatformOriginal LCDUI-based Ajax ApplicationScalable Vector Graphics (SVG) and JSR 226“Radical Makeover” in 5 Steps + Device DemoSummary, Resources, Q & A


The Java Mobile & Embedded Communityhttp://www.mobileandembedded.org


The Java Mobile & Embedded Communityhttp://meapplicationdevelopers.dev.java.net


Current Sub-Projects in ME App. Developer

Sun Wireless Toolkit 2.5 demo sources• 25 demo applications covering most Mobile Service Architecture

(MSA) features• Copy & paste into your app as a starting point

phoneME UI Labs• SVG tutorial and JSR 226 tutorial• Live demos, code snippets, links• MobileAerith demo and code• Radical SVG GUI Makeover project and code• Great starting point for all things SVG and UI


Current Sub-Projects in ME App. Developer (2)

Mobile Ajax for Java ME Platform• Libraries and sample code for building your own mobile

Ajax/web 2.0 application• Libraries:

• Streaming Atom, JavaScript™ Object Notation (JSON), expression language, async I/O, blog publishing, and web services

• Sample applications: • GPS mapping, Flickr client,

Yahoo! local business search, blog reader, twitter.com client

And more ...


Agenda

Meet the Java Mobile & Embedded Community and the ME Application Developers Project Mobile Ajax for Java ME PlatformOriginal LCDUI-based Ajax ApplicationScalable Vector Graphics (SVG) and SJR 226“Radical Makeover” in 5 Steps + Device DemoSummary, Resources, Q & A


IntroductionWhat is 'Mobile Ajax'?

Traditional definition in the browser world:• XmlHttpRequest + XML/JSON + JavaScript technology +

DOM in a browserA more generic definition for Java ME platform:• Asynchronous call to the network (GCF in MIDP)

• Can do much more than HTTP—SMS, Bluetooth...• A data serialization format (XML, JSON, etc.)

• Flexibility to roll your own format• Presentation—Traditional or Rich UI

• LCDUI or DOM based UI (SVG)


An 'Ajax'-y Interaction

DOM Rendering

Rendering

GCF ApplicationMobileAjax

Library


Asynchronous RequestsBuilding upon GCF for 'Web 2.0'

Asynchronous versions of HTTP Get and PostProgress callbacksHTTP Basic/Digest AuthenticationURL-encodingMulti-part MIME (sender-side)


Asynchronous Get RequestsCall Sequence

get(...)

readProgress()

....

readProgress()

done()


// asynchronous versionsstatic void get(String url, Arg[] inputArgs, Arg[] httpArgs, RequestListener listener, Object context)static void post(String url, Arg[] inputArgs, Arg[] httpArgs, RequestListener listener, PostData data, Object context)String url = "http://host.com/web-api";Arg[] args = { new Arg(“arg1”, “val1”), new Arg(“arg2”, “val2”) };• URL becomes "http://host.com/web-api?arg1=val1&arg2=val2"

Request methods and arguments


RequestListener and Responseinterface RequestListener extends ProgressListener { void done(Object context, Response result);}class Response { // Result contains parsed returned data Result getResult(); // HTTP response code int getCode(); // HTTP response headers Arg[] getHeaders(); // Exception, if any Exception getException();}


Accessing data in Result// accessors for primitive typesboolean getAsBoolean(String pathToElement);int getAsInteger(String pathToElement);long getAsLong(String pathToElement);double getAsDouble(String pathToElement);String getAsString(String pathToElement);

Data formats and parsing• Return data can be XML, JSON, or plain text• Ajax library contains parsing functionality for all three• Invisible to caller, “just works”


Agenda



Original Application



Agenda



SVG: Key Features

Dynamic & interactive contentScalable without loss of qualityBasic & complex shapesRich text & embedded fontsSearchableDocument Object Model APIOpacity and rich paint styles (in SVG Tiny 1.2)Highly portable and platform independentAnimations and interactivity provided by SVG viewer


JSR 226 Devices Available Today

JSR 226 is mandatory part of MSA 248• As MSA becomes more widespread, so will 226

SonyEricsson JP8 platform (MSA 248)• Z750, K630, W910i, K850i, and more

Nokia• 6131• Nokia Series 40 5th edition

more ...


Introduction to SVG

Vector graphics, animations and events in XMLW3C standards: SVG Tiny 1.1, 1.1+, and 1.2150+ device types on the market, > 225 million devicesDesigners produce SVG graphics with familiar tools • Easily modify animation, interactivity & graphical effects

Developers use NetBeans™ software to generate code and use Java APIs for rendering & interacting with the UI• JSR 226 (SVG Tiny 1.1 – included in MSA 248)• JSR 287 (SVG Tiny 1.2)


SVG Development Workflow

Development and Authoring Target Device

IDE

Gra

phic

s A

uth. In

tegr

atio

nto

ol

MIDlet

JVM™ SVG engine

SVG APIs (226 / 287 / 290)

Java code

rich structured UI resources

SVG-basedApplication


JSR 226 Application Model

svg

imageg text

rect circ

Document Object Model

Java Application

<svg width="2cm" height="3cm" viewBox="0 0 200 300"> <g> <rect x="10" y="10" width="180" height="280" fill="none" stroke="black"/> <circle cx="100" cy="150" r="100" fill="rgb(255,209,31)"/> </g> <image xlink:href="duke.svg" x="40" y="40" width="120" height="220" /> <text x="100" y="280" font-size="30" text-anchor="middle"> Hello SVG! </text> </svg>

SVG Document Renderingand Interactivity

load rendermanipulate

UI events


JSR 226 Example: Load and render image// load imageSVGImage svgImage =

(SVGImage)ScalableImage.createImage(SVGDemo.\class.getResourceAsStream("/simple.svg"), null);

// create animatorSVGAnimator animator =

SVGAnimator.createAnimator(svgImage);// get display component (Canvas)Canvas canvas = (Canvas)animator.getTargetComponent();// display the componentdisplay.setCurrent(canvas);// play the animationanimator.play();


Agenda



The Approach

Don't change application business logic and flowUI elements• Original application was created using NetBeans

Software Mobile Visual Designer (MVD) and NetBeans Software MIDP components

• Replace original MIDP components with NetBeans Software SVG components and updating the glue code appropriately

• Add splash screen and loading animation for extra creditResult:• Looks & feels like a brand-new application!

“Work in progress”: More radical UI redesign eyed for next versions


Step 1: Add a Splash Screen

Turn on SVG support in the platform• Project Properties->Emulator Platform->Check Optional

Package 'SVG1.0'Insert a splash screen before the query screen via Mobile Visual Designer Run it!


Step 2.1: Replace the Query Screen

Original application uses LCDUI Form with TextField and pop-up ChoiceGroup widgets• Current limitations of SVG Tiny: No pre-defined widget set to

replace standard LCDUI menus and widgetsSolution: • Create custom widgets from SVG elements and process key

presses to add interactive functionality as neededThis is fairly easy• Compositional behavior provided by DOM of SVG and

rendering implemented by the SVG engine• No code needed for rendering, updates, and animations


Step 2.2: Replace the Query Screen

Replace the query screen via Mobile Visual Designer • SVG file contains four text elements• QueryScreen code implements

handling of key presses, highlighting of fields, and inserting/removing characters

• Replace original query screen with new query screen animator

Run it!


Step 3: Replace Alert Screen with Loading Screen

Replace the simple LCDUI Alert screen with a loading screen animation • SVG file contains complete screen and

animation (no code needed)• Insert the loading screen before

the result screen as well as the map screen

Run it!


Step 4.1: Replace the Result Screen

Use animation capability of SVG to enhance usability• Scrolling list with “magnification” effect (up/down keys)• Detail view with animation effect (left/right)

All animations are embedded in SVG image• No coding needed for these effects

Reuse generic SVGList in WTK SVGDemo sample • A scrollable list using a list model providing the data• Replace the SVG text elements and add your own list model


Old vs. Newvoid initialize() { getDisplay().setCurrent(get_queryForm()); getDisplay().setCurrent(get_splashScreen(). getSvgCanvas()); queryScreen = new QueryScreen(get_queryForm(), get_queryFormImage()); resultScreen = new ResultScreen(get_resultForm(), get_resultFormImage()); }SVGAnimatorWrapper get_resultForm() { resultForm = new org.netbeans.microedition.svg.SVGAnimatorWrapper( get_resultFormImage(), getDisplay()); ... (add commands, e.g. addCommand(...)) resultForm.setCommandListener(this); return resultForm; }


Old vs. New (2)SVGImage get_resultFormImage() { resultFormImage = (SVGImage)createImage(LocalSearchMidlet. class.getResourceAsStream("/res/ResultForm.svg"), null); return resultFormImage; }void commandAction(Command command, ...) { ... (other commands) if ((displayable == queryForm) && (command == searchCommand)) { updateWaitScreen(“...”); getDisplay().setCurrent(get_alert(), get_queryForm()); getDisplay().setCurrent(get_waitScreen().getSvgCanvas()); search(); } ... (other commands)}


Old vs. New (3)void updateWaitScreen(String msg) { Document doc = get_loadImage().getDocument(); SVGElement progress = (SVGElement) doc.getElementById("loadProgress.text"); progress.setTrait("#text", "loading: " + msg); } void search() { // set request args: output type, appid, query, // location, sort, start. E.g.: new Arg(“location”, location.getString()) new Arg(“location”, queryScreen.getLocation()); // send request Request.get(BASE_URL, args, null, this, get_resultForm());}


Old vs. New (4)void searchResponse(Response response) { Result result = response.getResult(); resultCount = result.getSizeOfArray("ResultSet.Result"); // create array or list model to hold results links = new Links[resultCount]; links = new LinkListSource(resultCount); // retrieve results over i, e.g: String title = result.getAsString(“ResultSet.Result[“ + i + “].Title”); ... (store in links) // attach list model to result screen resultScreen.setListSource(links); getDisplay().setCurrent(get_resultForm()); getDisplay().setCurrent(get_resultForm().getSvgCanvas());}


Step 4.2: Replace the Result Screen

Replace the Result Screen via Mobile Visual Designer • Update the glue code in the application to correctly pass data

into and out of new list modelRun it!


Step 5: Add Loading Screen before Map

The map screen remains an LCDUI Form• No SVG features needed in this UI design• Add a progress screen to replace the Alert screen

Run it!


Final Result


Agenda



Summary

Creating rich, interactive, and great-looking Java ME platform applications has never been easier!Mobile Ajax enables you to integrate and leverage a wide range of existing web-based services into your app with only a few lines of codeSVG and JSR 226 are here today and give you exciting new possibilities for rich graphics and UIsThe ME Application Developer Project in the Mobile & Embedded Community is a great starting point


For More Information

ME Application Developers Project:• https://meapplicationdevelopers.dev.java.net/

Complete “Radical SVG GUI Makeover” code athttps://meapplicationdevelopers.dev.java.net

SVG home page and specification:• http://www.w3.org/TR/SVG/• http://www.svg.org

JSR 226 and 287 (SVG Tiny 1.1 and 1.2) • www.jcp.org (search for 226 and 287)

NetBeans Software IDE + Mobility, with tutorials• http://mobility.netbeans.org

https://meapplicationdevelopers.dev.java.net/

http://www.w3.org/TR/SVG/

http://www.jcp.org/

Radical GUI Makeover with Ajax MashupTerrence Barr

TS-5733

Documents

Radical GUI Makeover with Ajax Mashup - oracle.com · Vector graphics, animations and events in XML W3C standards: SVG Tiny 1.1, 1.1+, and 1.2 150+ device types on the market, > 225