lightweight ui toolkit - making …...lightweight ui toolkit for the java me platform- making...

LIGHTWEIGHT UI TOOLKIT - MAKING COMPELLING JAVA™ ME APPLICATIONS EASY

Chen Fishbein, Software Architect Shai Almog, Software ArchitectYoav Barel, Senior Manager

TS-4921

2008 JavaOneSM Conference | java.sun.com/javaone | 2

Agenda

What is LWUIT?Why?Key BenefitsKey FeaturesDemoSamplesToolsAdvanced ConceptsGet StartedQ&A


What Is LWUIT?

Lightweight library bundled with the applicationCompelling UIConsistent across different devicesToday's handsets MIDP 2.0/CLDC 1.1 only requirement!Inspired by SwingResource editor


Developed in-house to support project Hydrazine Complex UI requirements on existing devicesHigh portabilityDeveloper's feedbackBridges the gap between today and tomorrow

Why?


Key Benefits

Rapid development• Familiar API• Clean & Simple

Easy deployment• One JAR – many devices

Mass market devicesConsistentExtendableFilthy Rich UIBrand-able


Swing Like MVCLayoutsPLAF & ThemesFontsTouch ScreenAnimations & TransitionsRich widgets3D Integration

PaintersModal DialogSynchronous ModelExternal ToolsI18N/L10N

Key Features


Approach


LWUIT Demo


Samples – Hello World

Form frm = new Form(“Hi”);frm.addComponent(new Label(“World”));frm.addCommand(exitCommand);frm.show();

Now Make It Beautiful...

Resources r = Resources.open(“/myTheme.res"); UIManager.getInstance().setThemeProps(r.getTheme(“theme”);


Samples – List

Form frm = new Form(“List”);frm.setLayout(new BorderLayout());List lst = new List(new String[] { “Item 1”, “Item 2”, “Item 3”, “Item 4”});lst.setListCellRenderer(new MyRenderer());frm.addComponent(BorderLayout.CENTER, lst);frm.addCommand(exitCommand);frm.show();


Samples – Rendererclass MyRenderer extends Label implements ListCellRenderer { private Image sady, smily; ... public Component getListCellRendererComponent(List list, Object value, int index, boolean isSelected) { setText(value.toString()); setFocus(isSelected); if (isSelected) { setIcon(sady); getStyle().setBgTransparency(100); } else { setIcon(smily); getStyle().setBgTransparency(0); } return this; } public Component getListFocusComponent(List list) { return getListCellRendererComponent(list,"",0,true); }}


Samples – Renderer (cont)


Samples – FormForm frm = new Form(“Survey”);frm.setLayout(new BoxLayout(BoxLayout.Y_AXIS));frm.addComponent(new Label(“Are you happy?”));final RadioButton yes = new RadioButton(“Yes”);RadioButton no = new RadioButton(“No”);frm.addComponent(yes);frm.addComponent(no);ButtonGroup bg = new ButtonGroup();bg.add(yes); bg.add(no);Button submit = new Button(“Submit”);frm.addComponent(submit);submit.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent ev) { String text = “Too bad :-(“; if(yes.isSelected()) { text = “Yay!!!”; } Dialog.show(“Result”, text, “OK”, null); }});frm.show();


Resource Editor

Optional ToolBuilt For DesignersStandaloneResources:• Themes• Fonts• Animations/Images• Localization• Arbitrary Data

LWUITDemo “live preview”


Matisse GUI Builder

Award Winning, Mature Group Layout – Baseline alignmentRelative spacing/growEvent Handling CodeD&D/C&PStyles & ThemesComponent PaletteCustom Components


Tools Demo


Advanced Concepts

Uses native rendering engineRenders onto GameCanvasOptional M3G rendering integrationPlanned: SVG supportAbstracts physical motionAnimations/Transitions based on internal engineThreading approach of Swing coupled with builtin FoxtrotSingle EDT for rendering and events


Performance & Portability

Testing heavily on Sprint devices, Nokia, SE, Motorolla and phoneMEMany additional phones are testedDesigned for small size/overheadMost overhead is in resourcesIndexedImage & light mode for low endDoesn't require preprocessor


Footprint

Jar size as low as 50kb for a small applicationMemory depends on theme/functionality/resolutionUI Demo runs on 320x240x24bpp Nokia S40 using under 1mb and no more than 2mbThemes can be light or heavy depending on their features


FAQs ...

MIDP 2.0 devices support LCDUI, why do I need LWUIT?• LWUIT offers a rich UI alternative that sits on top of MIDP• Both complement each other and LWUIT remains strictly optional

Will I need to learn a new API?How similar is it to Swing?• LWUIT was inspired by Swing. Developers should find it easy to move

between LWUIT and AGUI/Swing APIs

How will LWUIT assist me in dealing with fragmentation?• LWUIT is Implemented on top of Canvas therefore highly portable• Not a device API but bundled together with the application

There are other UI toolkits out there – why LWUIT?• We believe LWUIT offers very attractive functionality for developing

consistent and compelling Java ME apps• LWUIT remains strictly optional• Due to the open source nature of LWUIT we hope cross-pollination

will occur for the benefit of the entire industry


Get Started

Early access on java.net (binary) http://lwuit.dev.java.netOnline TutorialAvailable in Sprint WTK 3.3Come visit us at: The Mobility Village podPlease send us feedbackOpen Source soon!!!


Q&A


Chen Fishbein, Software Architect Shai Almog, Software ArchitectYoav Barel, Senior Manager

TS-4921

lightweight ui toolkit - making …...lightweight ui toolkit for the java me platform- making...

Documents