JavaME UI - JMDF 2007

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 APIs - Today


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


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


Netbeans Mobile Visual Designer


Demo

• Visual Designer Demonstration:
– creating Mobile Splash Screens
– using the TableItem


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


Example of APIs support on Nokia
Devices


Multiple Device Configurations


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


Defining and Using Preprocessor
Directives

• Using Preprocessor Directives
• Directive Syntax and Functions
– Identifiers
– Variables
– Operators
– Expressions
• Compilation Based on Device Platform Versioning


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


Preprocessor


Abilities


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")


Overview of Graphics APIs

• LCDUI for MIDP
• JSR 184 - Mobile 3D Graphics API for J2ME
• JSR 226 - Scalable 2D Vector Graphics API for
J2ME


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


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


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


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


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


Scalable Vector Graphics

● W3C recommendation on vector graphics
● Scalable

● Animated

● Interactive

● Lossless

● Compact


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


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


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
}
}


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);


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


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


JavaME UI - JMDF 2007

More Related Content

What's hot

Viewers also liked

Similar to JavaME UI - JMDF 2007

More from Edoardo Schepis

Recently uploaded

JavaME UI - JMDF 2007