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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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