Schepis UI JMDF Flash Lite vs. JavaME

Slide 1: Java ME User Interface Development User Interface Development - “Flash Lite vs. JavaME”, Bologna 29-01-2007 - http://www.jmdf.org

Slide 2: Agenda • Netbeans support for High level UI – Visual Designer – Fragmentation – Localization Support • Graphics APIs CLDC based – LCDUI – Mobile 3D Graphics – SVG Support • References User Interface Development - “Flash Lite vs. JavaME”, Bologna 29-01-2007 - http://www.jmdf.org

Slide 3: User Interface APIs - Today User Interface Development - “Flash Lite vs. JavaME”, Bologna 29-01-2007 - http://www.jmdf.org

Slide 4: Netbeans Mobile Visual Designer High Level UI • Flow Designer – Map out navigation – Visually represents the different paths that can be taken between your application’s different screens – You can add or remove screens, as well as the transitions between them • Screen Designer – Simulates how the screen will appear on a real device • Corresponding code automatically generated – Hint: Plan out your entire application flow before diving into the code manually User Interface Development - “Flash Lite vs. JavaME”, Bologna 29-01-2007 - http://www.jmdf.org

Slide 5: Layout with Mobile Visual Designer • The Component Palette – Screens – Commands – Form Items – Elements – Resources – Custom Components • Special Components – Splash Screen – Table – Wait Screen • Inspector and Properties Windows User Interface Development - “Flash Lite vs. JavaME”, Bologna 29-01-2007 - http://www.jmdf.org

Slide 6: Netbeans Mobile Visual Designer User Interface Development - “Flash Lite vs. JavaME”, Bologna 29-01-2007 - http://www.jmdf.org

Slide 7: Demo • Visual Designer Demonstration: – creating Mobile Splash Screens – using the TableItem User Interface Development - “Flash Lite vs. JavaME”, Bologna 29-01-2007 - http://www.jmdf.org

Slide 8: Optimize The Application For Different Devices - Configuration Manager • Writing a single application that will run on disparate platforms can be challenging: – screen size – free memory – software issues – available API’s • One configuration for each distribution JAR file you plan on building for your project • Existing configuration template • Customizable User Interface Development - “Flash Lite vs. JavaME”, Bologna 29-01-2007 - http://www.jmdf.org

Slide 9: Example of APIs support on Nokia Devices User Interface Development - “Flash Lite vs. JavaME”, Bologna 29-01-2007 - http://www.jmdf.org

Slide 10: Multiple Device Configurations User Interface Development - “Flash Lite vs. JavaME”, Bologna 29-01-2007 - http://www.jmdf.org

Slide 11: Optimize The Application For Different Devices - Resource Locations • Handling Project Resources – Use Different Resource Locations and match the resources to the configurations in Libraries & Resource panel /res/small/splashScreen.png /res/medium/splashScreen.png /res/large/splashScreen.png Image splashScreen = Image.createImage("splashScreen.png"); – Using Configuration-Specific Code Blocks and Abilities User Interface Development - “Flash Lite vs. JavaME”, Bologna 29-01-2007 - http://www.jmdf.org

Slide 12: Defining and Using Preprocessor Directives • Using Preprocessor Directives • Directive Syntax and Functions – Identifiers – Variables – Operators – Expressions • Compilation Based on Device Platform Versioning User Interface Development - “Flash Lite vs. JavaME”, Bologna 29-01-2007 - http://www.jmdf.org

Slide 13: Optimize The Application For Different Devices - Preprocessor • Using the Preprocessor – CPP-like syntax – Example: //#if mmedia //#if nokia //#if s60_ver=="1.0" import com.nokia.mmapi.v1 //#elif s60_ver=="2.0" import com.nokia.mmapi.v2 //#else import com.nokia.mmapi.def //#endif //#else import javax.microedition.mmapi //#endif //#endif User Interface Development - “Flash Lite vs. JavaME”, Bologna 29-01-2007 - http://www.jmdf.org

Slide 14: Optimize The Application For Different Devices - Preprocessor User Interface Development - “Flash Lite vs. JavaME”, Bologna 29-01-2007 - http://www.jmdf.org

Slide 15: Abilities User Interface Development - “Flash Lite vs. JavaME”, Bologna 29-01-2007 - http://www.jmdf.org

Slide 16: Optimize The Application For Different Users - Localization • Using the Localization Support Class LocalizationSupport.getMessage("PROPERTY_NAME") • The message.properties file PROPERTY_NAME=My Translatable Text String • This technique uses the microedition.locale property of the phone to determine which version of the message.properties file should be used • You can force a particular region to be used LocalizationSupport.initLocalizationSupport("en_US") User Interface Development - “Flash Lite vs. JavaME”, Bologna 29-01-2007 - http://www.jmdf.org

Slide 17: Overview of Graphics APIs • LCDUI for MIDP • JSR 184 - Mobile 3D Graphics API for J2ME • JSR 226 - Scalable 2D Vector Graphics API for J2ME User Interface Development - “Flash Lite vs. JavaME”, Bologna 29-01-2007 - http://www.jmdf.org

Slide 18: LCDUI for MIDP - Canvas Immediate mode API • All drawing done within a paint() callback • Can also draw to an off screen mutable image • Suited for event based interaction • High performance, low system overhead • User Interface Development - “Flash Lite vs. JavaME”, Bologna 29-01-2007 - http://www.jmdf.org

Slide 19: LCDUI for MIDP - Game Canvas Immediate mode synchronous drawing • Ideal for “platformer” games • Sprite and tiled background • Well suited for games • Only on MIDP 2.0 • User Interface Development - “Flash Lite vs. JavaME”, Bologna 29-01-2007 - http://www.jmdf.org

Slide 20: JSR 184 - Mobile 3D Graphics API for J2ME • 3D retained mode and immediate mode API • Focus is retained mode (display list, scene graph) • Defines standard file format—m3g • Tools available to export graphics models in m3g format • Easier to develop using 3D authoring tools • Some animation support • HW acceleration likely to be through OpenGL User Interface Development - “Flash Lite vs. JavaME”, Bologna 29-01-2007 - http://www.jmdf.org

Slide 21: JSR 184 – Mobile 3-D Graphics API • Description: – Provide an efficient 3D Graphics API suitable for the J2ME platform, in particular CLDC/MIDP • Key Features: – Scene graph API (high-level) – Immediate API (low-level, subset of OpenGL) – Importer functions for textures, meshes, animations, and scene hierarchies – Tight integration with MIDP User Interface Development - “Flash Lite vs. JavaME”, Bologna 29-01-2007 - http://www.jmdf.org

Slide 22: JSR 184 – Mobile 3-D Graphics API • Dependencies: – CLDC 1.1 (requires floating point support) • Resources: – http://developer.sonyericsson.com/site/global/newsande vents/campaigns/java_3d/p_java3d.jsp User Interface Development - “Flash Lite vs. JavaME”, Bologna 29-01-2007 - http://www.jmdf.org

Slide 23: Scalable Vector Graphics W3C recommendation on vector graphics ● ● Scalable ● Animated ● Interactive ● Lossless ● Compact User Interface Development - “Flash Lite vs. JavaME”, Bologna 29-01-2007 - http://www.jmdf.org

Slide 24: JSR 226 • SVG provides functionality handsets need • JSR 226 brings scalability to Java ME apps • JSR 226 allows creation of programmable, dynamic SVG content – User interaction – Real time network data (traffic, weather) – Location-based information • JSR 226 unleashes the power of Java and SVG User Interface Development - “Flash Lite vs. JavaME”, Bologna 29-01-2007 - http://www.jmdf.org

Slide 25: JSR 226 Background and motivation • Increasing demand for mobile multimedia (vector graphics) applications • Mobile devices are diverse • Different screen sizes • Want to avoid re-authoring content • Use cases • Map visualization • Rich animations • Simple UI applications • Enterprise applications User Interface Development - “Flash Lite vs. JavaME”, Bologna 29-01-2007 - http://www.jmdf.org

Slide 26: Simple SVG Application - 1 import javax.microedition.lcdui.Canvas; import javax.microedition.lcdui.Graphics; import javax.microedition.m2g.*; class MapApplication extends Canvas { private ScalableImage myMap; private ScalableGraphics gc; public MapApplication(InputStream stream) { myMap = ScalableImage.createImage(stream, null); gc = ScalableGraphics.createInstance(); } public void paint(Graphics g) { gc.bindTarget(g); //Bind Target gc.render(0, 0, myMap); //Render SVG document gc.releaseTarget(); //Release target } } User Interface Development - “Flash Lite vs. JavaME”, Bologna 29-01-2007 - http://www.jmdf.org

Slide 27: Simple SVG Application - 2 // Create empty SVG Image, get root <svg> Element SVGImage myImage = SVGImage.createEmptyImage(); Document myDoc = myImage.getDocument(); SVGSVGElement root = (SVGSVGElement) myDoc.getDocumentElement(); // Create new SVGElement SVGElement myRect = myDoc.createElementNS(SVGNS, "rect"); // Set attributes and properties myRect.setId("button"); myRect.setFloatTrait("x", 30.0f); myRect.setFloatTrait("y", 50.0f); // Also width, height SVGRGBColor myColor = root.createSVGRGBColor(100, 0, 0); myRect.setRGBColorTrait("fill", myColor); // Append to document root.appendChild(myRect); User Interface Development - “Flash Lite vs. JavaME”, Bologna 29-01-2007 - http://www.jmdf.org

Slide 28: References • Netbeans: http://www.netbeans.org • Sony-Ericsson 3D: http://developer.sonyericsson.com/site/global/newsandevents/campai gns/java_3d/p_java3d.jsp • JSR 184: http://jcp.org/en/jsr/detail?id=184 • JSR 226: http://jcp.org/en/jsr/detail?id=226 User Interface Development - “Flash Lite vs. JavaME”, Bologna 29-01-2007 - http://www.jmdf.org

Slide 29: Java ME User Interface Development User Interface Development - “Flash Lite vs. JavaME”, Bologna 29-01-2007 - http://www.jmdf.org

Slide 30: Speaker Edoardo Schepis Java ME Tech Lead at Funambol JMDF Founder email: edoardo.schepis@funambol.com weblog: http://www.edschepis.net Java Mobile Developers Forum: http://www.jmdf.org User Interface Development - “Flash Lite vs. JavaME”, Bologna 29-01-2007 - http://www.jmdf.org