You are on page 1of 24

LIGHTWEIGHT UI TOOLKIT - MAKING COMPELLING JAVA™ ME APPLICATIONS EASY

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

TS-4921

ME APPLICATIONS EASY Chen Fishbein, Software Architect Shai Almog, Software Architect Yoav Barel, Senior Manager TS-4921

Agenda

What is LWUIT?Agenda Why? Key Benefits Key Features Demo Samples Tools Advanced Concepts Get Started Q&A 2008 JavaOne

Why?Agenda What is LWUIT? Key Benefits Key Features Demo Samples Tools Advanced Concepts Get Started Q&A

Key BenefitsAgenda What is LWUIT? Why? Key Features Demo Samples Tools Advanced Concepts Get Started Q&A 2008

Key FeaturesAgenda What is LWUIT? Why? Key Benefits Demo Samples Tools Advanced Concepts Get Started Q&A 2008

DemoAgenda What is LWUIT? Why? Key Benefits Key Features Samples Tools Advanced Concepts Get Started Q&A

SamplesAgenda What is LWUIT? Why? Key Benefits Key Features Demo Tools Advanced Concepts Get Started Q&A

ToolsWhat is LWUIT? Why? Key Benefits Key Features Demo Samples Advanced Concepts Get Started Q&A 2008

Advanced Conceptsis LWUIT? Why? Key Benefits Key Features Demo Samples Tools Get Started Q&A 2008 JavaOne S

Get StartedBenefits Key Features Demo Samples Tools Advanced Concepts Q&A 2008 JavaOne S M Conference |

Q&AFeatures Demo Samples Tools Advanced Concepts Get Started 2008 JavaOne S M Conference | java.sun.com/javaone |

Demo Samples Tools Advanced Concepts Get Started Q&A 2008 JavaOne S M Conference | java.sun.com/javaone |

What Is LWUIT?

Lightweight library bundled with the applicationWhat Is LWUIT? Compelling UI Consistent across different devices Today's handsets MIDP 2.0/CLDC 1.1 only requirement!

Compelling UIIs LWUIT? Lightweight library bundled with the application Consistent across different devices Today's handsets

Consistent across different deviceslibrary bundled with the application Compelling UI Today's handsets MIDP 2.0/CLDC 1.1 only requirement!

Today's handsets MIDP 2.0/CLDC 1.1 only requirement!Compelling UI Consistent across different devices Inspired by Swing Resource editor 2008 JavaOne S M

Inspired by SwingToday's handsets MIDP 2.0/CLDC 1.1 only requirement! Resource editor 2008 JavaOne S M Conference |

Resource editorMIDP 2.0/CLDC 1.1 only requirement! Inspired by Swing 2008 JavaOne S M Conference | java.sun.com/javaone |

1.1 only requirement! Inspired by Swing Resource editor 2008 JavaOne S M Conference | java.sun.com/javaone |

Why?

Developed in-house to support project HydrazineWhy? Complex UI requirements on existing devices High portability Developer's feedback Bridges the gap between today

Complex UI requirements on existing devicesWhy? Developed in-house to support project Hydrazine High portability Developer's feedback Bridges the gap between

High portabilityHydrazine Complex UI requirements on existing devices Developer's feedback Bridges the gap between today and

Developer's feedbackComplex UI requirements on existing devices High portability Bridges the gap between today and tomorrow 2008

Bridges the gap between today and tomorrowexisting devices High portability Developer's feedback 2008 JavaOne S M Conference | java.sun.com/javaone |

feedback Bridges the gap between today and tomorrow 2008 JavaOne S M Conference | java.sun.com/javaone |

Key Benefits

Rapid developmentKey Benefits • Familiar API • Clean & Simple Easy deployment • One JAR – many

Familiar API

Clean & Simple

Easy deploymentdevelopment • Familiar API • Clean & Simple • One JAR – many devices Mass market

One JAR – many devices

Mass market devices& Simple Easy deployment • One JAR – many devices Consistent Extendable Filthy Rich UI Brand-able

Consistent• One JAR – many devices Mass market devices Extendable Filthy Rich UI Brand-able 2008 JavaOne

ExtendableOne JAR – many devices Mass market devices Consistent Filthy Rich UI Brand-able 2008 JavaOne S

Filthy Rich UI– many devices Mass market devices Consistent Extendable Brand-able 2008 JavaOne S M Conference |

Brand-ableMass market devices Consistent Extendable Filthy Rich UI 2008 JavaOne S M Conference | java.sun.com/javaone |

devices Consistent Extendable Filthy Rich UI Brand-able 2008 JavaOne S M Conference | java.sun.com/javaone |

Key Features

Swing Like MVCKey Features Layouts PLAF & Themes Fonts Touch Screen Animations & Transitions Rich widgets 3D Integration

LayoutsKey Features Swing Like MVC PLAF & Themes Fonts Touch Screen Animations & Transitions Rich widgets

PLAF & ThemesKey Features Swing Like MVC Layouts Fonts Touch Screen Animations & Transitions Rich widgets 3D Integration

FontsKey Features Swing Like MVC Layouts PLAF & Themes Touch Screen Animations & Transitions Rich widgets

Touch ScreenKey Features Swing Like MVC Layouts PLAF & Themes Fonts Animations & Transitions Rich widgets 3D

Animations & TransitionsSwing Like MVC Layouts PLAF & Themes Fonts Touch Screen Rich widgets 3D Integration Painters Modal

Rich widgets& Themes Fonts Touch Screen Animations & Transitions 3D Integration Painters Modal Dialog Synchronous Model

3D IntegrationFonts Touch Screen Animations & Transitions Rich widgets Painters Modal Dialog Synchronous Model External Tools

PaintersAnimations & Transitions Rich widgets 3D Integration Modal Dialog Synchronous Model External Tools I18N/L10N 2008

Modal Dialog& Transitions Rich widgets 3D Integration Painters Synchronous Model External Tools I18N/L10N 2008 JavaOne S

Synchronous ModelRich widgets 3D Integration Painters Modal Dialog External Tools I18N/L10N 2008 JavaOne S M Conference |

External Tools3D Integration Painters Modal Dialog Synchronous Model I18N/L10N 2008 JavaOne S M Conference |

I18N/L10NPainters Modal Dialog Synchronous Model External Tools 2008 JavaOne S M Conference | java.sun.com/javaone |

Modal Dialog Synchronous Model External Tools I18N/L10N 2008 JavaOne S M Conference | java.sun.com/javaone |

Approach

Approach 2008 JavaOne S M Conference | java.sun.com/javaone | 7

LWUIT Demo

LWUIT Demo

LWUIT Demo 2008 JavaOne S M Conference | java.sun.com/javaone | 9

Samples – Hello World

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

Now Make It Beautiful

frm.show(); Now Make It Beautiful Resources r = Resources.open(“/myTheme.res");

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

2008 JavaOne S M Conference | java.sun.com/javaone |
2008 JavaOne S M Conference | java.sun.com/javaone |
2008 JavaOne S M Conference | java.sun.com/javaone |
2008 JavaOne S M Conference | java.sun.com/javaone |

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

lst); frm.addCommand(exitCommand); frm.show(); 2008 JavaOne S M Conference | java.sun.com/javaone |
lst); frm.addCommand(exitCommand); frm.show(); 2008 JavaOne S M Conference | java.sun.com/javaone |
lst); frm.addCommand(exitCommand); frm.show(); 2008 JavaOne S M Conference | java.sun.com/javaone |
lst); frm.addCommand(exitCommand); frm.show(); 2008 JavaOne S M Conference | java.sun.com/javaone |

Samples – Renderer

class 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 – Renderer (cont) 2008 JavaOne S M Conference | java.sun.com/javaone | 1 3
Samples – Renderer (cont) 2008 JavaOne S M Conference | java.sun.com/javaone | 1 3
Samples – Renderer (cont) 2008 JavaOne S M Conference | java.sun.com/javaone | 1 3

Samples – Form

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

} Dialog.show(“Result”, text, “OK”, null); } }); frm.show(); 2008 JavaOne S M Conference |
} Dialog.show(“Result”, text, “OK”, null); } }); frm.show(); 2008 JavaOne S M Conference |
} Dialog.show(“Result”, text, “OK”, null); } }); frm.show(); 2008 JavaOne S M Conference |
} Dialog.show(“Result”, text, “OK”, null); } }); frm.show(); 2008 JavaOne S M Conference |
} Dialog.show(“Result”, text, “OK”, null); } }); frm.show(); 2008 JavaOne S M Conference |

}

});

frm.show();

Resource Editor

Optional ToolResource Editor Built For Designers Standalone Resources: • Themes • Fonts • Animations/Images •

Built For DesignersResource Editor Optional Tool Standalone Resources: • Themes • Fonts • Animations/Images • Localization

StandaloneResource Editor Optional Tool Built For Designers Resources: • Themes • Fonts • Animations/Images •

Resources:Resource Editor Optional Tool Built For Designers Standalone • Themes • Fonts • Animations/Images •

Themes

Fonts

Animations/Images

Localization

Arbitrary Data

LWUITDemo “live preview”Animations/Images • Localization • Arbitrary Data 2008 JavaOne S M Conference | java.sun.com/javaone |

• Arbitrary Data LWUITDemo “live preview” 2008 JavaOne S M Conference | java.sun.com/javaone |

Matisse GUI Builder

Award Winning, MatureMatisse GUI Builder Group Layout – Baseline alignment Relative spacing/grow Event Handling Code D&D/C&P Styles

Group Layout – Baseline alignmentMatisse GUI Builder Award Winning, Mature Relative spacing/grow Event Handling Code D&D/C&P Styles & Themes

Relative spacing/growAward Winning, Mature Group Layout – Baseline alignment Event Handling Code D&D/C&P Styles & Themes

Event Handling CodeGroup Layout – Baseline alignment Relative spacing/grow D&D/C&P Styles & Themes Component Palette Custom

D&D/C&PBaseline alignment Relative spacing/grow Event Handling Code Styles & Themes Component Palette Custom Components 2008

Styles & ThemesRelative spacing/grow Event Handling Code D&D/C&P Component Palette Custom Components 2008 JavaOne S M

Component PaletteEvent Handling Code D&D/C&P Styles & Themes Custom Components 2008 JavaOne S M Conference |

Custom ComponentsCode D&D/C&P Styles & Themes Component Palette 2008 JavaOne S M Conference | java.sun.com/javaone |

Styles & Themes Component Palette Custom Components 2008 JavaOne S M Conference | java.sun.com/javaone |

Tools Demo

Advanced Concepts

Uses native rendering engineAdvanced Concepts Renders onto GameCanvas Optional M3G rendering integration Planned: SVG support Abstracts physical

Renders onto GameCanvasAdvanced Concepts Uses native rendering engine Optional M3G rendering integration Planned: SVG support Abstracts physical

Optional M3G rendering integrationUses native rendering engine Renders onto GameCanvas Planned: SVG support Abstracts physical motion

Planned: SVG supportRenders onto GameCanvas Optional M3G rendering integration Abstracts physical motion Animations/Transitions based on

Abstracts physical motion Animations/Transitions based on internal engineOptional M3G rendering integration Planned: SVG support Threading approach of Swing coupled with builtin Foxtrot

Threading approach of Swing coupled with builtin Foxtrotmotion Animations/Transitions based on internal engine Single EDT for rendering and events 2008 JavaOne S M

Single EDT for rendering and eventsThreading approach of Swing coupled with builtin Foxtrot 2008 JavaOne S M Conference | java.sun.com/javaone |

with builtin Foxtrot Single EDT for rendering and events 2008 JavaOne S M Conference | java.sun.com/javaone
with builtin Foxtrot Single EDT for rendering and events 2008 JavaOne S M Conference | java.sun.com/javaone

Performance & Portability

Testing heavily on Sprint devices, Nokia, SE, Motorolla and phoneMEPerformance & Portability Many additional phones are tested Designed for small size/overhead Most overhead is in

Many additional phones are testedheavily on Sprint devices, Nokia, SE, Motorolla and phoneME Designed for small size/overhead Most overhead is

Designed for small size/overheadSE, Motorolla and phoneME Many additional phones are tested Most overhead is in resources IndexedImage &

Most overhead is in resourcesphones are tested Designed for small size/overhead IndexedImage & light mode for low end Doesn't

IndexedImage & light mode for low endfor small size/overhead Most overhead is in resources Doesn't require preprocessor 2008 JavaOne S M

Doesn't require preprocessoris in resources IndexedImage & light mode for low end 2008 JavaOne S M Conference |

light mode for low end Doesn't require preprocessor 2008 JavaOne S M Conference | java.sun.com/javaone |

Footprint

Footprint Jar size as low as 50kb for a small application Memory depends on theme/functionality/resolution UI

Jar size as low as 50kb for a small applicationFootprint Memory depends on theme/functionality/resolution UI Demo runs on 320x240x24bpp Nokia S40 using under 1mb and

Memory depends on theme/functionality/resolutionFootprint Jar size as low as 50kb for a small application UI Demo runs on 320x240x24bpp

UI Demo runs on 320x240x24bpp Nokia S40 using under 1mb and no more than 2mbapplication Memory depends on theme/functionality/resolution Themes can be light or heavy depending on their features

Themes can be light or heavy depending on their features320x240x24bpp Nokia S40 using under 1mb and no more than 2mb 2008 JavaOne S M Conference

FAQs

MIDP 2.0 devices support LCDUI, why do I need LWUIT?FAQs • LWUIT offers a rich UI alternative that sits on top of MIDP • Both

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?complement each other and LWUIT remains strictly optional • LWUIT was inspired by Swing. Developers should

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?find it easy to move between LWUIT and AGUI/Swing APIs • LWUIT is Implemented on top

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?Not a device API but bundled together with the application • We believe LWUIT offers very

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.netGet Started Online Tutorial Available in Sprint WTK 3.3 Come visit us at: The Mobility Village

Online TutorialEarly access on java.net (binary) http://lwuit.dev.java.net Available in Sprint WTK 3.3 Come visit us at: The

Available in Sprint WTK 3.3java.net (binary) http://lwuit.dev.java.net Online Tutorial Come visit us at: The Mobility Village pod Please send us

Come visit us at: The Mobility Village podOnline Tutorial Available in Sprint WTK 3.3 Please send us feedback Open Source soon!!! 2008 JavaOne

Please send us feedbackin Sprint WTK 3.3 Come visit us at: The Mobility Village pod Open Source soon!!! 2008

Open Source soon!!!us at: The Mobility Village pod Please send us feedback 2008 JavaOne S M Conference |

Village pod Please send us feedback Open Source soon!!! 2008 JavaOne S M Conference | java.sun.com/javaone

Q&A

Q&A 2008 JavaOne S M Conference | java.sun.com/javaone | 2 3

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

TS-4921

Almog, Software Architect Yoav Barel, Senior Manager TS-4921 2008 JavaOne S M Conference | java.sun.com/javaone |