LWUIT M3DD Tutorial 1.0 Important

1

LWUIT TutorialJonathan KnudsenChen FishbeinAriel LevinSun Microsystems, Inc.

1

2Copyright © 2009 Sun Microsystems, Inc. All rights reserved.

Goals• Learn about LWUIT’s capabilities• Working practical knowledge of LWUIT• Fun!


Outline• The Big Fly-In• User Interface Choices• Ta-Dum!• On-Device Portal• LWUIT on Whatever• Show Me the Code!• Working With Forms• Component Tour

• Lists• Working with Threads• Dialogs• Working with Containers• Styles, Themes, Resources• Animation and Transitions• Stuff That Just Wouldn’t Fit

4

The Big Fly-In

4


Java Technology is Everywhere

Java EE Java SE Java ME Java Card

...and more!

The Big Fly-in


Java ME, Big to Small• CDC

> Most JVM features> Add UI and other APIs to make a complete stack> Set-top boxes, car computers, toasters

• CLDC> Includes trimmed JVM> Usually has MIDP on top to make a stack

• Java Card> Java technology on a smart card> Very widely deployed

The Big Fly-in


A Very Brief History• 1999: KVM / DoJa• September 2000: MIDP 1.0• November 2002: MIDP 2.0• July 2003: JTWI 1.0• September 2006: MSA 1.0• Feburary 2008: MSA 1.1• On deck: MIDP 3.0

The Big Fly-in


The Big Fly-inMSA 1.0 1.1

9

User Interface ChoicesBesides LWUIT

9


The Menu• SVG• 3D Graphics• OpenGL ES• LCDUI

and...• LWUIT

User Interface Choices: LCDUI


Scalable Vector Graphics (SVG)• XML dialect for describing images• A subset, SVG Tiny, is good for mobile devices• Excellent choice for variable screen sizes• Attractive user interfaces• Good separation between programmer and artist

roles

User Interface Choices: SVG


JSR 226 SVG API• Play animations• Interactive• Can also create elements at runtime

User Interface Choices: SVG


JSR 184 Mobile 3D Graphics (M3G)• Render canned content

> Good separation between programmer and artist roles> Known as retained mode

• Create 3D content at runtime> Good for visualizations> Known as immediate mode

• Uses available device 3D engine

User Interface Choices: 3D Graphics


OpenGL ES• JSR 239, not part of

MSA 1.0• OpenGL is a standard

API for 2D and 3D graphics

• OpenGL ES is a subset for mobile devices

• Close to the metal

User Interface Choices: OpenGL ES


LCDUI• MIDP's user interface toolkit• User interface from a can

> TextBox, Alert, List, Form> Easy to use> Generalized across devices, but...> ...no guarantees about consistent user experience

• Do your own drawing with Canvas> Caramba! Back to square one!> Tricky to get this right



A Full Form

Nokia Series 40Nokia Series 40 3rd ed.Sun Java Wireless Toolkit



Command Examples



You Say To-may-to, I Say To-mah-to

Nokia Series 40 Motorola RAZRSun Java Wireless Toolkit



Command Placement

Sun toolkit RAZR Series 40 3rd edition



Canvas• Do your own drawing• Lines, rectangles, ellipses• Limited fonts• Limited image control• It is possible to roll your own UI

toolkit this way• Many application developers

take this route, but it’s tough



GameCanvas• Extensions to Canvas for 2D games• Streamlined animation pipeline

> Synchronous repainting> Key polling

• Layers• Sprites

> Animation> Collisions


22

Ta-Dum!Here’s LWUIT!

22


Overview of LWUIT• LightWeight User Interface Toolkit• Looks great• Highly portable• Open source library

> GPL v2 with classpath exception> http://lwuit.dev.java.net/

• Best of Swing• Familiar APIs• Built on MIDP 2.0, atop Canvas

Ta-Dum!

http://lwuit.dev.java.net/


Clinchers• Runs on many devices• Transitions• Layouts• Fonts• Themes• Touch support• Thriving community• Can’t beat the price

Ta-Dum!

LWUITDemo

25

On-Device PortalThe original challenge

25


What is the ODP?• Think Facebook Apps, Konfabulator/Dashboard• Peers: Yahoo! Go, WidSets• ODP application contains mobile Java widgets,

something like mini-applications, representing services

• Superpowered idle screen> User-customized> Current from the network> Seamless installation> Interactive, links to full applications

On-Device Portal


FX W

idget

Feed Widget

Java Widget

Java ODP Client Overview

On-Device Portal


ODP Screen Shots

On-Device Portal

29

LWUIT on WhateverTV, desktop, toasters...

29


ARIB B.23OCAP

ACAP

DVB-MHP

Digital TV Standards Worldwide

DVB-GEM GEM-IPTV

DTMSCDC,PBP

LWUIT on Whatever


CDC/PBP is Standard for TV

CDC,FP,PBP

CDC Market CoverageBlu-ray DTV/IPTV Cable

LWUIT on Whatever


LWUIT Everywhere• LWUIT’s platform interface is thin

LWUIT on Whatever

33

Show Me the Code!A Quick Start with Form

33


Hello, LWUIT!• Initialize LWUITDisplay.init(this);

• Load a theme> Sets colors, images, fonts> More on this magic later

• Create a formForm f = new Form("Hello, LWUIT!");

• Show the formf.show();

HelloLWUIT

Show Me the Code!

35

Working With Forms

35


Using Form• Create a formForm f = new Form("Labels");

• Add some stuffLabel label = new Label("Baldy");f.addComponent(label);

• Slap it up on the screenf.show();

Working with Forms


Layout Managers• Remember Swing?• Six supported layout managers

> BorderLayout> BoxLayout> FlowLayout> GridLayout> CoordinateLayout> GroupLayout

Working with Forms


Layout Manager Family Album

Working with Forms


Working With a Layout Manager• Create a form as usualForm f = new Form("Layouts");

• Set a layout managerf.setLayout(new BorderLayout());

• Add components with constraints//Label label = ...//Container buttonBar = ...f.addComponent( BorderLayout.CENTER, label);f.addComponent( BorderLayout.SOUTH, buttonBar); ComponentMIDlet

showLayout()

Working with Forms

40

Component Tour

40


Partial Component HierarchyComponent

List Container TextArea Label

ComboBox Form TabbedPane Button

Dialog RadioButton CheckBox

Component Tour


Label• Text• Image• Text plus image• Horizontal alignment• Vertical alignment

Label label = new Label("Baldy");Image image = Image.createImage("/baldy.png");

Label picLabel = new Label(image);ComponentMIDlet

showLabels()

Component Tour


Button• Inherits from Label• Can receive focus• Use select key or pointer to

click it• Add an ActionListener

to find out when it’s clicked

ComponentMIDletshowButtons()showEvents()

Component Tour


RadioButton• Inherits from Button• Adds a boolean state• Not much good by itself• Use ButtonGroup

ComponentMIDletshowMoreButtons()

Component Tour


CheckBox• Inherits from Button• Adds a boolean state• Find out with isSelected()

ComponentMIDletshowMoreButtons()

Component Tour


TextArea• Specify rows and columns• Displays text• Constraints: URL, EMAILADDR, NUMERIC, etc.

• Editing is done in a platform-specific text box

• Multiline TextAreas can grow as needed.

ComponentMIDletshowText()

Component Tour


TextField• Subclass of TextArea• Single line• In situ editing• Native editing is also available

ComponentMIDletshowText()

Component Tour

48

Lists

48


Lists• Crucial for mobile applications• MVC separation model• Plenty of useful modes

> FIXED_NONE> FIXED_NONE_CYCLIC> FIXED_NONE_ONE_ELEMENT_MARGIN_FROM_EDGE> FIXED_LEAD> FIXED_TRAIL> FIXED_CENTER

Lists


Using List• Create a listList list = new List();

• Add items to the default modellist.addItem("Item1");list.addItem("Item2");list.addItem("Item3");

ListDemolist1()

Lists


ListModel• Encapsulates list data• Fires data events to the view• Allows the list to show unlimited size of data• List has a default model, DefaultModel• Create your own by implementing ListModel• Then set the list’s model

list.setModel(new RMSListModel());

ListDemolist5()

Lists


List Cell Rendering• A cell renderer displays data from the model• Rubber stamp• Animating focus

public interface ListCellRenderer {

public Component getListCellRendererComponent(List list, Object value, int index, boolean isSelected);

public Component getListFocusComponent(List list);

} ListDemolist4()

Lists


List Events• Action Events – when user clicks select on the listlist.addActionListener(al);

• Selection Events – when user navigate list itemslist.addSelectionListener(sl);

• Data Events – from the list modellist.getModel().addDataChangedListener();

ListDemolist6()

Lists


ComboBox• Yes, it is a kind of list

> Has a model> Can use a custom cell renderer

• Shows current selection• Pops up list of choices

ComponentDemoshowListAndComboBox()

Lists

55

Working with Threads

55


About the Event Dispatch Thread• LWUIT uses the Event Dispatch Thread (EDT) for

its work:> Painting components> Delivering events> Animation

• Avoids multithreading trouble• You must use the EDT too• You must use the EDT correctly



Using the EDT• For component updates, you must also use the EDT

> Same principle: avoid multiple threads working with the same stuff at the same time

> Just like Swing• Useful methods in Display

public void callSerially(Runnable r)public void callSeriallyAndWait(Runnable r)

• The EDT is not your thread> Don’t hog it> Do long stuff in your own thread



Typical Usage• In your ActionListener implementation:

public void actionPerformed(ActionEvent ae) { Runnable r = new LongOperationRunnable(); Thread t = new Thread(r); t.start();}


59

Dialogs

59


Dialog• A Dialog is a Form that occupies a part of the

screen as a top component.• Dialog can be modal/modeless• Use show() or dispose() methods• Two ways to create:

> Static factory methodsDialog.show(.....);

> Create a new objectDialog dialog = new Dialog();dialog.show();

Dialogs


More about Dialogs• Dialog type indicates an associated sound and icon• Types:

> ALARM> CONFIRMATION> ERROR> INFO> WARNING

DialogDemo

Dialogs

62

Working with Containers

62


Nesting Containers• Container is a Component • Container.addComponent(...) accept Components• Each Container has its own layout

DialogDemonesting()



TabbedPane• Each contained component has a

labeled tab• Also can use images for tabs• Put tabs on any side: top, bottom,

left, right• Pass a component to addTab()

and specify tab label or image

ComponentDemoshowTabbedPane()


65

Styles, Themes,and ResourcesOh My!

65


Style• Component attributes

> Colors - – Normal: bgColor, fgColor– Focus: bgSelectionColor, fgSelectionColor

> Font> Transparency> Image> Margin, Padding> Border> Painter

• Store defaults in a .res file (a theme)ComponentMIDlet

showStyle()

Styles, Themes, and Resources


Themes• Collection of style attributes• Declared in .res file• Create using:

> Resource Editor> Ant task

• Can be replaced at runtimeResources r = Resources.open("/javaTheme.res");UIManager.getInstance().setThemeProps( r.getTheme("javaTheme"));





Resources• LWUIT Binary file

> Themes> Fonts> Images> Animations> Localization

• Create> Ant> Resource Editor



Resource Editor

Resource Editor



Using Painters• Insert paint code to any Component• No need to override paint()• Reusable (green!)• Painters chain• Inspired by swingx project

public interface Painter { public void paint(Graphics g, Rectangle rect);}

Style.setBgPainter(Painter bgPainter);ComponentMIDlet

showPainter()


72

Animation and TransitionsSwoosh!

72


Animation• Simple interface

> animate() - if returns 'true', paint will be called> paint()

• Executed on the EDT• Activate

> form.registerAnimated(AnimatedComponent);

• De-activate> form.deregisterAnimated(AnimatedComponent);

Animation and Transitions


Transitions• Ready-made transitions

> Slide, Fade> 3D! Cube , Rotate, Fly-in

• Extendable• Applicable for

> Forms> Dialogs> Menu> Components ComponentMIDlet

showPainter()



Working with Transitions• Forms and Dialogs

> setTransitionInAnimator(Transition t)> setTransitionOutAnimator(Transition t)

• Form menus> setMenuTransitions(Transition tIn, Transition tOut)

• Components in a container> replace(Component current, Component next, final Transition t)

> replaceAndWait(...)

DialogDemodialog3()


76

Stuff That Just Wouldn’t Fit

76


Mobile 3D Graphics (M3G, JSR 184)• M3G class is a bridge to JSR 184• Use renderM3G() to invoke your callback to

render 3D graphics• See LWUIT’s own Transition3D for an example



Scalable Vector Graphics (JSR 226)• Bridge between SVG Tiny content and LWUIT• Create LWUIT Image from URL or InputStream• Access to document model• Convenience methods for scaling and rotating



Creating Your Own Components• Define familiar behavior

> Paint> Sizing> Key and pointer events> Focus

• See Developer’s Guide, Chapter 13



Look and Feel• Pluggable Look and Feel (PlaF)• In case styles, painters, and themes weren’t good

enough for you• com.sun.lwuit.plaf


81

The EndThank [email protected]@[email protected]

81

Documents

LWUIT M3DD Tutorial 1.0 Important