Lwuit m3dd Tutorial 1.0
Transcript of Lwuit m3dd Tutorial 1.0
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!
3Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
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
5Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
Java Technology is Everywhere
Java EE Java SE Java ME Java Card
...and more!
The Big Fly-in
6Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
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
7Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
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
8Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
The Big Fly-inMSA 1.0 1.1
9
User Interface ChoicesBesides LWUIT
9
10Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
The Menu• SVG• 3D Graphics• OpenGL ES• LCDUI
and...• LWUIT
User Interface Choices: LCDUI
11Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
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
12Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
JSR 226 SVG API• Play animations• Interactive• Can also create elements at runtime
User Interface Choices: SVG
13Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
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
14Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
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
15Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
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
User Interface Choices: LCDUI
16Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
A Full Form
Nokia Series 40Nokia Series 40 3rd ed.Sun Java Wireless Toolkit
User Interface Choices: LCDUI
17Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
Command Examples
User Interface Choices: LCDUI
18Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
You Say To-may-to, I Say To-mah-to
Nokia Series 40 Motorola RAZRSun Java Wireless Toolkit
User Interface Choices: LCDUI
19Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
Command Placement
Sun toolkit RAZR Series 40 3rd edition
User Interface Choices: LCDUI
20Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
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
User Interface Choices: LCDUI
21Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
GameCanvas• Extensions to Canvas for 2D games• Streamlined animation pipeline
> Synchronous repainting> Key polling
• Layers• Sprites
> Animation> Collisions
User Interface Choices: LCDUI
22
Ta-Dum!Here’s LWUIT!
22
23Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
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!
24Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
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
26Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
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
27Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
FX W
idget
Feed Widget
Java Widget
Java ODP Client Overview
On-Device Portal
28Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
ODP Screen Shots
On-Device Portal
29
LWUIT on WhateverTV, desktop, toasters...
29
30Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
ARIB B.23OCAP
ACAP
DVB-MHP
Digital TV Standards Worldwide
DVB-GEM GEM-IPTV
DTMSCDC,PBP
LWUIT on Whatever
31Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
CDC/PBP is Standard for TV
CDC,FP,PBP
CDC Market CoverageBlu-ray DTV/IPTV Cable
LWUIT on Whatever
32Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
LWUIT Everywhere• LWUIT’s platform interface is thin
LWUIT on Whatever
33
Show Me the Code!A Quick Start with Form
33
34Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
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
36Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
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
37Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
Layout Managers• Remember Swing?• Six supported layout managers
> BorderLayout> BoxLayout> FlowLayout> GridLayout> CoordinateLayout> GroupLayout
Working with Forms
38Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
Layout Manager Family Album
Working with Forms
39Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
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
41Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
Partial Component HierarchyComponent
List Container TextArea Label
ComboBox Form TabbedPane Button
Dialog RadioButton CheckBox
Component Tour
42Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
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
43Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
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
44Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
RadioButton• Inherits from Button• Adds a boolean state• Not much good by itself• Use ButtonGroup
ComponentMIDletshowMoreButtons()
Component Tour
45Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
CheckBox• Inherits from Button• Adds a boolean state• Find out with isSelected()
ComponentMIDletshowMoreButtons()
Component Tour
46Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
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
47Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
TextField• Subclass of TextArea• Single line• In situ editing• Native editing is also available
ComponentMIDletshowText()
Component Tour
48
Lists
48
49Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
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
50Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
Using List• Create a listList list = new List();
• Add items to the default modellist.addItem("Item1");list.addItem("Item2");list.addItem("Item3");
ListDemolist1()
Lists
51Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
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
52Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
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
53Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
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
54Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
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
56Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
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
Working with Threads
57Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
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
Working with Threads
58Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
Typical Usage• In your ActionListener implementation:
public void actionPerformed(ActionEvent ae) { Runnable r = new LongOperationRunnable(); Thread t = new Thread(r); t.start();}
Working with Threads
59
Dialogs
59
60Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
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
61Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
More about Dialogs• Dialog type indicates an associated sound and icon• Types:
> ALARM> CONFIRMATION> ERROR> INFO> WARNING
DialogDemo
Dialogs
62
Working with Containers
62
63Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
Nesting Containers• Container is a Component • Container.addComponent(...) accept Components• Each Container has its own layout
DialogDemonesting()
Working with Containers
64Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
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()
Working with Containers
65
Styles, Themes,and ResourcesOh My!
65
66Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
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
67Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
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"));
Styles, Themes, and Resources
68Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
Styles, Themes, and Resources
69Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
Resources• LWUIT Binary file
> Themes> Fonts> Images> Animations> Localization
• Create> Ant> Resource Editor
Styles, Themes, and Resources
70Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
Resource Editor
Resource Editor
Styles, Themes, and Resources
71Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
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()
Styles, Themes, and Resources
72
Animation and TransitionsSwoosh!
72
73Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
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
74Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
Transitions• Ready-made transitions
> Slide, Fade> 3D! Cube , Rotate, Fly-in
• Extendable• Applicable for
> Forms> Dialogs> Menu> Components ComponentMIDlet
showPainter()
Animation and Transitions
75Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
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()
Animation and Transitions
76
Stuff That Just Wouldn’t Fit
76
77Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
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
Stuff That Just Wouldn’t Fit
78Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
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
Stuff That Just Wouldn’t Fit
79Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
Creating Your Own Components• Define familiar behavior
> Paint> Sizing> Key and pointer events> Focus
• See Developer’s Guide, Chapter 13
Stuff That Just Wouldn’t Fit
80Copyright © 2009 Sun Microsystems, Inc. All rights reserved.
Look and Feel• Pluggable Look and Feel (PlaF)• In case styles, painters, and themes weren’t good
enough for you• com.sun.lwuit.plaf
Stuff That Just Wouldn’t Fit