7 Lwuit Sun Maxmu

8/9/2019 7 Lwuit Sun Maxmu

1/73

1

LWUIT Tutorial

([email protected])Sun Microsystems, Inc.

1


2/73


3/73

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

Outline

The Big Fly-In

User Interface Choices

Ta-Dum!

LWUIT on Whatever

Show Me the Code!

Working With Forms

Component Tour

Lists

Dialogs

Working with Containers

Styles, Themes, Resources

Animation and Transitions

Stuff That Just Wouldnt Fit


4/73

4

The Big Fly-In

4


5/73


Java Technology is Everywhere

Java EE Java SE Java ME Java Card

...and more!

The Big Fly-in


6/73


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


7/737Copyright 2009 Sun Microsystems, Inc. All rights reserved.

A VeryBrief 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-in

MSA 1.0 1.1


9/739

User Interface ChoicesBesides LWUIT

9



The Menu

SVG

3D Graphics

OpenGL ES

LCDUIand...

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 artistroles

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, notpart ofMSA 1.0

OpenGL is a standard

API for 2D and 3Dgraphics

OpenGL ES is a subsetfor 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 40

Nokia Series 40 3rd ed.Sun Java Wireless Toolkit


U I f Ch i LCDUI



Command Examples


U I t f Ch i LCDUI



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

Nokia Series 40 Motorola RAZR

Sun Java Wireless Toolkit


U I t f Ch i LCDUI



Command Placement

Sun toolkit RAZR Series 40 3rd edition


U I t f Ch i LCDUI


20/73


Canvas

Do your own drawing

Lines, rectangles, ellipses

Limited fonts

Limited image control

It is possible to roll your own UItoolkit this way

Many application developerstake this route, but its tough


U I t f Ch i LCDUI


21/73


GameCanvas

Extensions to Canvas for 2D games

Streamlined animation pipeline> Synchronous repainting

> Key polling

Layers

Sprites

> Animation> Collisions



22/73

22

Ta-Dum!Heres LWUIT!

22

T D !


23/73


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!

Ta Dum!
http://lwuit.dev.java.net/http://lwuit.dev.java.net/


24/73


Clinchers

Runs on many devices

Transitions

Layouts

Fonts

Themes

Touch support

Thriving community

Cant beat the price

Ta-Dum!

LWUITDemo


25/73

25

LWUIT on WhateverTV, desktop, toasters...

25


26/73


ARIB B.23OCAP

ACAP

DVB-MHP

Digital TV Standards Worldwide

DVB-GEM GEM-IPTV

DTMS

CDC,PBP


27/73


CDC and PBP ties together the Java based TVstandards

CDC Market CoverageBlu-ray Disc DTV/IPTV Cable DTV

Emerging:

IPTV,Brazil,

China

CDC,FP,PBP CDC,FP,PBP


28/73


LWUIT Everywhere

LWUITs platform interface is thin


29/73

29

Show Me the Code!A Quick Start with Form

29


30/73


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


31/73

31

Working With Forms

31


32/73


Using Form

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

Add some stuff

Label label = new Label("Baldy");f.addComponent(label);

Slap it up on the screenf.show();


33/73


Layout Managers

Remember Swing?

Six supported layout managers> BorderLayout

> BoxLayout> FlowLayout

> GridLayout

> CoordinateLayout> GroupLayout


34/73


Layout Manager Family Album


35/73


Working With a Layout Manager

Create a form as usualForm 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);


36/73

36

Component Tour

36


37/73


Partial Component Hierarchy

Component

List Container TextArea Label

ComboBox Form TabbedPane Button

Dialog RadioButton CheckBox


38/73


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


39/73


Button

Inherits from Label

Can receive focus

Use select key or pointer to

click it Add an ActionListener

to find out when its clicked

ComponentMIDlet

showButtons()

showEvents()


40/73


RadioButton

Inherits from Button

Adds a boolean state

Not much good by itself

Use ButtonGroup

ComponentMIDlet

showMoreButtons()


41/73


CheckBox

Inherits from Button

Adds a boolean state

Find out with isSelected()

ComponentMIDlet

showMoreButtons()


42/73


TextArea

Specify rows and columns

Displays text

Constraints: URL,EMAILADDR, NUMERIC, etc.

Editing is done in a platform-specific text box

Multiline TextAreas cangrow as needed.

ComponentMIDlet

showText()


43/73


TextField

Subclass ofTextArea

Single line

In situediting

Native editing is also available

ComponentMIDlet

showText()


44/73

44

Lists

44


45/73


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


46/73


Using List

Create a listList list = new List();

Add items to the default modellist.addItem("Item1");

list.addItem("Item2");list.addItem("Item3");

ListDemo

list1()


47/73


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 lists modellist.setModel(new RMSListModel());

ListDemo

list5()


48/73


List Cell Rendering

A cell rendererdisplays 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()


49/73


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

ListDemo

list6()


50/73


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


51/73

51

Dialogs

51


52/73


Dialog

A Dialog is a Form that occupies a part of thescreen as a top component.

Dialog can be modal/modalless

Use show() ordispose() methods Two ways to create:

> Static factory methods

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

dialog.show();


53/73


More about Dialogs

Dialog type indicates an associated sound and icon

Types:> ALARM

> CONFIRMATION> ERROR

> INFO

> WARNING

DialogDemo


54/73

54

Working with Containers

54


55/73


Nesting Containers

Container is a Component

Container.addComponent(...) accept Components

Each Container has its own layout

DialogDemo

nesting()


56/73


TabbedPane

Each contained component has alabeled 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()


57/73

57

Styles, Themes,and ResourcesOh My!

57


58/73


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


59/73


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


60/73



61/73


Resources

LWUIT Binary file> Themes

> Fonts

>Images> Animations

> Localization

Create

> Ant> Resource Editor


62/73


Resource Editor

Resource Editor


63/73


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


64/73

64

Animation and TransitionsSwoosh!

64


65/73


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


66/73


Transitions

Ready-made transitions> Slide, Fade

> 3D! Cube , Rotate, Fly-in

Extendable Applicable for

> Forms

> Dialogs> Menu> Components

ComponentMIDlet

showPainter()


67/73


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


68/73

68

Stuff That Just Wouldnt Fit

68


69/73


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 LWUITs own Transition3D for an example


70/73


Scalable Vector Graphics (JSR 226)

Bridge between SVG Tiny content and LWUIT Create LWUIT Image from URL orInputStream

Access to document model

Convenience methods for scaling and rotating


71/73


Creating Your Own Components

Define familiar behavior> Paint

> Sizing

> Key and pointer events

> Focus

See Developers Guide, Chapter 13


72/73


Look and Feel

Pluggable Look and Feel (PlaF) In case styles, painters, and themes werent good

enough for you

com.sun.lwuit.plaf


73/73

The End

Thank [email protected]

Documents

7 Lwuit Sun Maxmu