LWUIT M3DD Tutorial 1.0 Important

LWUIT TutorialJonathan KnudsenChen FishbeinAriel LevinSun Microsystems, Inc.

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

The Big Fly-In

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

User Interface ChoicesBesides LWUIT

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

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

Ta-Dum!Here’s LWUIT!

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!

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

Ta-Dum!

LWUITDemo

On-Device PortalThe original challenge

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

Feed Widget

Java Widget

Java ODP Client Overview

On-Device Portal

ODP Screen Shots

On-Device Portal

LWUIT on WhateverTV, desktop, toasters...

ARIB B.23OCAP

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

Show Me the Code!A Quick Start with Form

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!

Working With Forms

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

Component Tour

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

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

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

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

ListDemolist1()

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

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

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

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

Working with Threads

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

Dialogs

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

Working with Containers

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

Styles, Themes,and ResourcesOh My!

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

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

Animation and TransitionsSwoosh!

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

Stuff That Just Wouldn’t Fit

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

The EndThank you!jonathan.knudsen@sun.comchen.fishbien@sun.comariel.levin@sun.com

LWUIT M3DD Tutorial 1.0 Important

Documents

Transcript of LWUIT M3DD Tutorial 1.0 Important

LWUIT Developer's Guide - Oracle Documentation

Day1_3 build great u_is with lwuit for nokia asha software platform 1

A Tutorial on Java Servlets and Java Server Pages JSP 1.0

LWUIT for Nokia Asha app development

XVL BOM Assembler Tutorial For Version 1.0 and later

CAM Tutorial CREO PARAMETRIC 1.0 week 2 Part 3 ... - Polynetpolynet.dk/cad/exercises/UGE_2.pdf · CAM Tutorial CREO PARAMETRIC 1.0 week 2 Part 4 Revised by Tomas Benzon DTU MEK March

COMP201 Java Programming Part III: Advanced Features Topic 14: Servlets Servlets and JavaServer Pages (JSP) 1.0: A Tutorial hall/java/Servlet-Tutorial/Servlet-Tutorial-Intro.html.

AdventNet WebNMS 5 :: eBON TutorialAdventNet WebNMS 5 :: eBON Tutorial AdventNet, Inc. 3eBON EMS Tutorial eBON Element Management System AdventNet Web NMS Tutorial Version 1.0 A simple

Fenics Tutorial 1.0

SuperGuía-Tutorial definitivo XBMC v 1.0

Tutorial: SPARQL 1.0 - I. Fundulaki - ESWC SS 2014

JADOPPT Version 1.0 (Tutorial)

LWUIT Developer's Guide

Build great UIs with LWUIT for Nokia Asha software platform 1.0

Online Substantive Process TRUST MANAGERS Self Teach Tutorial April 2008 Version 1.0.

polysat version 1.0 Tutorial Manual - Amazon Web Services

LINUX TUTORIAL - CGISS - Boise State Universitycgiss.boisestate.edu/~lml/SeismicMethods/Linux-tutorial.pdf · LINUX TUTORIAL 4 07/10/2009 Linux Tutorial 1.0.doc 1. What is Linux?

DerekMurray - Add-Multiply Actor Project Tutorial (Issue 1.0)

CoMeT Tutorial 1.0-23

Lwuit m3dd Tutorial 1.0