LWUIT Tutorial

慕 睿 涛 (Max.Mu@sun.com)
Sun Microsystems, Inc.

1
Goal
• Working practical knowledge of LWUIT
• Fun

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

Outline
• The Big Fly-In • Lists
• User Interface Choices • Dialogs
• Ta-Dum! • Working with Containers
• LWUIT on Whatever • Styles, Themes, Resources
• Show Me the Code! • Animation and Transitions
• Working With Forms • Stuff That Just Wouldn’t Fit
• Component Tour

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

The Big Fly-In

4
The Big Fly-in

Java Technology is Everywhere

Java EE Java SE Java ME Java Card

...and more!
Copyright © 2009 Sun Microsystems, Inc. All rights reserved. 5
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

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

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

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

The Big Fly-in
MSA 1.0 1.1

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

User Interface Choices
Besides LWUIT

9
User Interface Choices: LCDUI

The Menu
• SVG
• 3D Graphics
• OpenGL ES
• LCDUI
and...
• LWUIT

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

User Interface Choices: SVG

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

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

User Interface Choices: SVG

JSR 226 SVG API

• Play animations
• Interactive
• Can also create elements at runtime

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

User Interface Choices: 3D Graphics

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

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

User Interface Choices: OpenGL ES

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

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

User Interface Choices: LCDUI

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

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

User Interface Choices: LCDUI

A Full Form

Sun Java Wireless Toolkit Nokia Series 40 3rd ed.

Nokia Series 40

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

User Interface Choices: LCDUI

Command Examples

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

User Interface Choices: LCDUI

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

Sun Java Wireless Toolkit
Nokia Series 40 Motorola RAZR

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

User Interface Choices: LCDUI

Command Placement
Sun toolkit RAZR Series 40 3rd edition

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

User Interface Choices: LCDUI

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

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

User Interface Choices: LCDUI

GameCanvas
• Extensions to Canvas for 2D games
• Streamlined animation pipeline
> Synchronous repainting
> Key polling
• Layers
• Sprites
> Animation
> Collisions

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

Ta-Dum!
Here’s LWUIT!

22
Ta-Dum!

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
Copyright © 2009 Sun Microsystems, Inc. All rights reserved. 23
Ta-Dum!

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

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

LWUIT on Whatever
TV, desktop, toasters...

25
Digital TV Standards Worldwide

DVB-MHP DVB-GEM GEM-IPTV

OCAP ARIB B.23

DTMS ACAP
CDC,PBP
Copyright © 2009 Sun Microsystems, Inc. All rights reserved. 26
CDC and PBP ties together the Java based TV
standards
CDC Market Coverage
Blu-ray Disc DTV/IPTV Cable DTV
Emerging:
IPTV,Brazil,
China

CDC,FP,PBP CDC,
FP,PBP

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

LWUIT Everywhere
• LWUIT’s platform interface is thin

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

Show Me the Code!
A Quick Start with Form

29
Hello, LWUIT!
• Initialize LWUIT
Display.init(this);
• Load a theme
> Sets colors, images, fonts
> More on this magic later
• Create a form
Form f = new Form("Hello, LWUIT!");
• Show the form
f.show();
HelloLWUIT

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

Working With Forms

31
Using Form
• Create a form
Form f = new Form("Labels");
• Add some stuff
Label label = new Label("Baldy");
f.addComponent(label);
• Slap it up on the screen
f.show();

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

Layout Managers
• Remember Swing?
• Six supported layout managers
> BorderLayout
> BoxLayout
> FlowLayout
> GridLayout
> CoordinateLayout
> GroupLayout

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

Layout Manager Family Album

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

Working With a Layout Manager
• Create a form as usual
Form f = new Form("Layouts");
• Set a layout manager
f.setLayout(new BorderLayout());
• Add components with constraints
//Label label = ...
//Container buttonBar = ...
f.addComponent(
BorderLayout.CENTER, label);
f.addComponent(
BorderLayout.SOUTH, buttonBar);

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

Component Tour

36
Partial Component Hierarchy
Component

List Container TextArea Label

ComboBox Form TabbedPane Button

Dialog RadioButton CheckBox

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

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

Label label = new Label("Baldy");

Image image =
Image.createImage("/baldy.png"); ComponentMIDlet
showLabels()
Label picLabel = new Label(image);
Copyright © 2009 Sun Microsystems, Inc. All rights reserved. 38
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

ComponentMIDlet
showButtons()
showEvents()
Copyright © 2009 Sun Microsystems, Inc. All rights reserved. 39
RadioButton
• Inherits from Button
• Adds a boolean state
• Not much good by itself
• Use ButtonGroup

ComponentMIDlet
showMoreButtons()

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

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

ComponentMIDlet
showMoreButtons()

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

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.
ComponentMIDlet
showText()

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

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

ComponentMIDlet
showText()

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

Lists

44
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

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

Using List
• Create a list
List list = new List();
• Add items to the default model
list.addItem("Item1");
list.addItem("Item2");
list.addItem("Item3");

ListDemo
list1()

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

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

ListDemo
list5()

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

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);
ListDemo
}
list4()

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

List Events
• Action Events – when user clicks select on the list
list.addActionListener(al);
• Selection Events – when user navigate list items
list.addSelectionListener(sl);
• Data Events – from the list model
list.getModel().addDataChangedListener();

ListDemo
list6()

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

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

ComponentDemo
showListAndComboBox()

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

Dialogs

51
Dialog
• A Dialog is a Form that occupies a part of the
screen as a top component.
• Dialog can be modal/modalless
• Use show() or dispose() methods
• Two ways to create:
> Static factory methods
Dialog.show(.....);
> Create a new object
Dialog dialog = new Dialog();
dialog.show();
Copyright © 2009 Sun Microsystems, Inc. All rights reserved. 52
More about Dialogs
• Dialog type indicates an associated sound and icon
• Types:
> ALARM
> CONFIRMATION
> ERROR
> INFO
> WARNING

DialogDemo

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

Working with Containers

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

DialogDemo
nesting()

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

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

ComponentDemo
showTabbedPane()

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

Styles, Themes,
and Resources
Oh My!

57
Style
• Component attributes
> Colors -
– Normal: bgColor, fgColor
– Focus: bgSelectionColor, fgSelectionColor
> Font
> Transparency
> Image
> Margin, Padding
> Border
> Painter
ComponentMIDlet
• Store defaults in a .res file (a theme) showStyle()

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

Themes
• Collection of style attributes
• Declared in .res file
• Create using:
> Resource Editor
> Ant task
• Can be replaced at runtime
Resources r = Resources.open("/javaTheme.res");
UIManager.getInstance().setThemeProps(
r.getTheme("javaTheme")
);

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

Copyright © 2009 Sun Microsystems, Inc. All rights reserved. 60
Resources
• LWUIT Binary file
> Themes
> Fonts
> Images
> Animations
> Localization
• Create
> Ant
> Resource Editor

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

Resource Editor

Resource Editor

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

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

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

Animation and Transitions
Swoosh!

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

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

Transitions
• Ready-made transitions
> Slide, Fade
> 3D! Cube , Rotate, Fly-in
• Extendable
• Applicable for
> Forms
> Dialogs
> Menu
> Components
ComponentMIDlet
showPainter()

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

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(...)

DialogDemo
dialog3()

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

Stuff That Just Wouldn’t Fit

68
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

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

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

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

Creating Your Own Components
• Define familiar behavior
> Paint
> Sizing
> Key and pointer events
> Focus
• See Developer’s Guide, Chapter 13

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

Look and Feel
• Pluggable Look and Feel (PlaF)
• In case styles, painters, and themes weren’t good
enough for you
• com.sun.lwuit.plaf

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

The End
Thank you!
Max.Mu@sun.com

73