Radical GUI Makeover with Ajax Mashup

Transcription

1 Radical GUI Makeover with Ajax Mashup Terrence Barr Senior Technologist and Community Ambassador Java Mobile & Embedded Community TS-5733

2 Learn how to turn a 'plain old' Java Platform, Micro Edition (Java ME) application environment based on LCDUI into a slicklooking and engaging application Learn about SVG (scalable vector graphics), JSR-226, and Mobile Ajax along the way Know where to get the code that you can copy & paste ;-) 2008 JavaOneSM Conference java.sun.com/javaone 2

3 Agenda Meet the Java Mobile & Embedded Community and the ME Application Developers Project Mobile Ajax for Java ME Platform Original LCDUI-based Ajax Application Scalable Vector Graphics (SVG) and JSR 226 Radical Makeover in 5 Steps + Device Demo Summary, Resources, Q & A 2008 JavaOneSM Conference java.sun.com/javaone 3

4 The Java Mobile & Embedded Community JavaOneSM Conference java.sun.com/javaone 4

5 The Java Mobile & Embedded Community JavaOneSM Conference java.sun.com/javaone 5

6 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 2008 JavaOneSM Conference java.sun.com/javaone 6

7 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 JavaOneSM Conference java.sun.com/javaone 7

8 Agenda Meet the Java Mobile & Embedded Community and the ME Application Developers Project Mobile Ajax for Java ME Platform Original LCDUI-based Ajax Application Scalable Vector Graphics (SVG) and SJR 226 Radical Makeover in 5 Steps + Device Demo Summary, Resources, Q & A 2008 JavaOneSM Conference java.sun.com/javaone 8

9 Introduction What is 'Mobile Ajax'? Traditional definition in the browser world: XmlHttpRequest + XML/JSON + JavaScript technology + DOM in a browser A 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) 2008 JavaOneSM Conference java.sun.com/javaone 9

10 An 'Ajax'-y Interaction Rendering GCF Mobile Ajax Library Application DOM Rendering 2008 JavaOneSM Conference java.sun.com/javaone 10

11 Asynchronous Requests Building upon GCF for 'Web 2.0' Asynchronous versions of HTTP Get and Post Progress callbacks HTTP Basic/Digest Authentication URL-encoding Multi-part MIME (sender-side) 2008 JavaOneSM Conference java.sun.com/javaone 11

12 Asynchronous Get Requests Call Sequence get(...) readprogress()... readprogress() done() 2008 JavaOneSM Conference java.sun.com/javaone 12

13 Request methods and arguments // asynchronous versions static 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 = " Arg[] args = { new Arg( arg1, val1 ), new Arg( arg2, val2 ) }; URL becomes " JavaOneSM Conference java.sun.com/javaone 13

14 RequestListener and Response interface 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(); } 2008 JavaOneSM Conference java.sun.com/javaone 14

15 Accessing data in Result // accessors for primitive types boolean 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 2008 JavaOneSM Conference java.sun.com/javaone 15

16 Agenda Meet the Java Mobile & Embedded Community and the ME Application Developers Project Mobile Ajax for Java ME Platform Original LCDUI-based Ajax Application Scalable Vector Graphics (SVG) and JSR 226 Radical Makeover in 5 Steps + Device Demo Summary, Resources, Q & A 2008 JavaOneSM Conference java.sun.com/javaone 16

17 Original Application 2008 JavaOneSM Conference java.sun.com/javaone 17

18 2008 JavaOneSM Conference java.sun.com/javaone 18

19 Agenda Meet the Java Mobile & Embedded Community and the ME Application Developers Project Mobile Ajax for Java ME Platform Original LCDUI-based Ajax Application Scalable Vector Graphics (SVG) and JSR 226 Radical Makeover in 5 Steps + Device Demo Summary, Resources, Q & A 2008 JavaOneSM Conference java.sun.com/javaone 19

20 SVG: Key Features Dynamic & interactive content Scalable without loss of quality Basic & complex shapes Rich text & embedded fonts Searchable Document Object Model API Opacity and rich paint styles (in SVG Tiny 1.2) Highly portable and platform independent Animations and interactivity provided by SVG viewer 2008 JavaOneSM Conference java.sun.com/javaone 20

21 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 JavaOneSM Conference java.sun.com/javaone 21

22 Introduction to SVG Vector graphics, animations and events in XML W3C standards: SVG Tiny 1.1, 1.1+, and device types on the market, > 225 million devices Designers 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) 2008 JavaOneSM Conference java.sun.com/javaone 22

23 SVG Development Workflow Java code rich structured UI resources Integration tool Graphics Auth. IDE MIDlet SVG-based Application SVG APIs (226 / 287 / 290) JVM Development and Authoring SVG engine Target Device 2008 JavaOneSM Conference java.sun.com/javaone 23

24 JSR 226 Application Model SVG Document <svg width="2cm" height="3cm" viewbox=" "> <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> load Rendering and Interactivity Document Object Model svg g rect image text circ manipulate render Java Application UI events 2008 JavaOneSM Conference java.sun.com/javaone 24

25 JSR 226 Example: Load and render image // load image SVGImage svgimage = (SVGImage)ScalableImage.createImage(SVGDemo.\ class.getresourceasstream("/simple.svg"), null); // create animator SVGAnimator animator = SVGAnimator.createAnimator(svgImage); // get display component (Canvas) Canvas canvas = (Canvas)animator.getTargetComponent(); // display the component display.setcurrent(canvas); // play the animation animator.play(); 2008 JavaOneSM Conference java.sun.com/javaone 25

26 Agenda Meet the Java Mobile & Embedded Community and the ME Application Developers Project Mobile Ajax for Java ME Platform Original LCDUI-based Ajax Application Scalable Vector Graphics (SVG) and JSR 226 Radical Makeover in 5 Steps + Device Demo Summary, Resources, Q & A 2008 JavaOneSM Conference java.sun.com/javaone 26

27 The Approach Don't change application business logic and flow UI 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 credit Result: Looks & feels like a brand-new application! Work in progress : More radical UI redesign eyed for next versions 2008 JavaOneSM Conference java.sun.com/javaone 27

28 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! 2008 JavaOneSM Conference java.sun.com/javaone 28

29 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 widgets Solution: Create custom widgets from SVG elements and process key presses to add interactive functionality as needed This 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 2008 JavaOneSM Conference java.sun.com/javaone 29

30 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! 2008 JavaOneSM Conference java.sun.com/javaone 30

31 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! 2008 JavaOneSM Conference java.sun.com/javaone 31

32 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 2008 JavaOneSM Conference java.sun.com/javaone 32

33 Old vs. New void 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; } 2008 JavaOneSM Conference java.sun.com/javaone 33

34 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) } 2008 JavaOneSM Conference java.sun.com/javaone 34

35 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()); } 2008 JavaOneSM Conference java.sun.com/javaone 35

36 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()); } 2008 JavaOneSM Conference java.sun.com/javaone 36

37 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 model Run it! 2008 JavaOneSM Conference java.sun.com/javaone 37

38 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! 2008 JavaOneSM Conference java.sun.com/javaone 38

39 Final Result 2008 JavaOneSM Conference java.sun.com/javaone 39

40 Agenda Meet the Java Mobile & Embedded Community and the ME Application Developers Project Mobile Ajax for Java ME Platform Original LCDUI-based Ajax Application Scalable Vector Graphics (SVG) and JSR 226 Radical Makeover in 5 Steps + Device Demo Summary, Resources, Q & A 2008 JavaOneSM Conference java.sun.com/javaone 40

41 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 code SVG and JSR 226 are here today and give you exciting new possibilities for rich graphics and UIs The ME Application Developer Project in the Mobile & Embedded Community is a great starting point 2008 JavaOneSM Conference java.sun.com/javaone 41

42 For More Information ME Application Developers Project: Complete Radical SVG GUI Makeover code at SVG home page and specification: JSR 226 and 287 (SVG Tiny 1.1 and 1.2) (search for 226 and 287) NetBeans Software IDE + Mobility, with tutorials JavaOneSM Conference java.sun.com/javaone 42

43 Radical GUI Makeover with Ajax Mashup Terrence Barr TS-5733