Java- LWUIT N Amanquah

Lab work Build an application that does the following: Make use of netbeans: Fetch data from the user (the user’s preferences) Send it by sms to another number. Store the data you have collected in a record store so that it can be retrieved the next time the user runs the program. One menu item should allow the user to enter the values afresh, or to fetch the saved values.

LWUIT LightWeight User Interface Toolkit (LWUIT) [loo-it] Cf Limited Capability Device User Interface (LCDUI) API Swing inspired provide a consistent, compelling look and feel Supports cool screen transitions eg fade, flip, slide, also cube Themes for look and feel Supported on >=MIDP 2.0 devices

Lwuit class hierarchy Resource editor for visual design Add Lwuit.jar to resources for the project

Hello world import javax.microedition.midlet.*; import com.sun.lwuit.*; //note the imports import com.sun.lwuit.events.*; public class Midlet extends MIDlet implements ActionListener { //not CommandListener Display.init(this); //init the display Form f = new Form("Hello, LWUIT!"); f.show(); Command exitCommand = new Command("Exit"); f.addCommand(exitCommand); f.setCommandListener(this); } public void pauseApp() {} public void destroyApp(boolean unconditional) {} public void actionPerformed(ActionEvent ae) { //not commandAction notifyDestroyed();

Always call the init method. It instantiates LWUITImplementation

Forms To add elements to forms: f.addComponent(formElement); ButtonGroup is used to manage groups of exclusive radio buttons Layouts like in swing: border, flow, Note that textFields do not have captions as in LCDUI

Labels and buttons Label l = new Label(image); l.setAlignment(Component.CENTER); l.setText(“The Caption"); l.setTextPosition(Component.BOTTOM); Button b=new Button(“Caption") //behaves like swing. “Button” is not “Command”, Commands make menus Buttons show up as buttons, are clickable

Radio buttons & check boxes Form f = new Form("More Buttons"); RadioButton rb; ButtonGroup group = new ButtonGroup(); rb = new RadioButton(“radio1"); group.add(rb); f.addComponent(rb); rb = new RadioButton(“radio2"); //for check box: CheckBox cb; cb = new CheckBox(“chk bx1"); f.addComponent(cb); …

Lists & combo boxes Use a list model List list = new List(); list.addItem("item1"); list.addItem("item2"); f.addComponent(list); ComboBox comboBox = new ComboBox(list.getModel()); f.addComponent(comboBox);

Other components TextArea Calendar TabbedPane MediaComponent –to display rich media content

Layouts Layouts include: BorderLayout FlowLayout BoxLayout GridLayout GroupLayout f.setLayout(new BoxLayout(BoxLayout.Y_AXIS)); f.addComponent(BorderLayout.WEST, c)

Containers Dialogs: c. addComponent(new Button(“aButton")); Container c = new Container(new BoxLayout(BoxLayout.X_AXIS)); //add stuff: c. addComponent(new Button(“aButton")); Dialogs: new Dialog().show("Please confirm", “The message ", "OK", "Cancel")) Many show methods Is modal (generally) Usually returns true if OK button pressed. (Check version of fxn called in API)

Transitions Incoming & outgoing f.setTransitionOutAnimator( Transition) f.setTransitionInAnimator( Transition) Transition createSlide(int type, boolean forward, int duration) \ also: Transition createFade() 3-D animations possible on devices that have Mobile 3D Graphics API. Eg createFlyIn, createCube , createRotation Eg f.setTransitionOutAnimator(CommonTransitions.createSlide(CommonTransitions.SLIDE_HORIZONTAL, false, 1000)); //false= left to right transition //1000= num of milliseconds for transiton f.setTransitionOutAnimator(CommonTransitions.createFade(1000));

Events Implement ActionListener Pass instance of ActionListener to the objects addActionListener() method Eg btn.addActionListenter(this) Provide a body for public void actionPerformed(ActionEvent ae) Determine which object created event by calling ae.getCommand() //within the actionPerformed fxn Within events, it is useful to call f.layoutContainer() on the form to make it repaint any adjustments made to elements of a form

Events Display class in LWUIT manages a single main thread (Event Dispatch Thread) Implement one callback/listener interfaces, register it with LWUIT to listen to all events Most use actionListener Others include DataChangedListener -when a ListModel changes. for a list or combo box. SelectionListener -when the current selection of a ListModel changes. FocusListener -when a component gains or loses focus. StyleListener -when changes in a component's style occur

Event listener eg //creating a listener private class StudentListActionListener implements ActionListener { public void actionPerformed(ActionEvent evt) { //selectedStudent = (Student) studentList.getSelectedItem(); if (evt.getSource().equals(studentList)) { displayStudent(); } else if (evt.getSource().equals(newButton)) { selectedStudent = null; newDob = 0; } else if (evt.getSource().equals(removeButton)) { if (new Dialog().show("Please confirm", "OK to remove " + selectedStudent, "OK", "Cancel")) { StudentDao.removeStudent(selectedStudent); displayStudents(); } //code to add the listener to the widgets StudentListActionListener listActionListener = new StudentListActionListener(); newButton.addActionListener(listActionListener); removeButton.addActionListener(listActionListener); studentList.addActionListener(listActionListener);

Logging The Log class and static p methods permits writing to the log, eg Log.p(“Message to log”); Four log levels: Debug, Info, Error, and Warning. Call Log.showLog() to display a form with log

Lists: LWUIT vs LCDUI Lists LCDUI List are Strings and images, adding a collection of records to the list for display is difficult difficult to associate the selected choice to element in the collection A LWUIT can handle an array or Vector of Objects To get selected object, call on the getSelectedItem()

Lists Eg a: LCDUI list: List list = new List("list", Choice.IMPLICIT); list.setCommandListener(this); Vector students = StudentDao.getStudents(); for (int i = 0; i < students.size(); i++) { list.append(students.elementAt(i).toString(), null); } b: LWUIT list: List list = new List(students); Ref:http://www.devx.com/wireless/Article/38461/1954

Styles and Themes Styles for individual components Get an individual element’s style eg Style s= lbl.getStyle() Set styles eg s.setBgTransparency(0); S. setBgColor (0xff00ff) See style object in API

Eg: Set style of each element Display.init(this); Form form = new Form("Test Style"); TextArea text = new TextArea("Test of style"); Style textStyle = text.getStyle(); textStyle.setBgSelectionColor(0xffffff); textStyle.setFgSelectionColor(0x000000); textStyle.setFont(Font.createSystemFont(Font.FACE_MONOSPACE, Font.STYLE_UNDERLINED, Font.SIZE_SMALL)); Button b = new Button("Test Button"); Style buttonStyle = b.getStyle(); buttonStyle.setBgColor(0x3333ff); buttonStyle.setFgColor(0xffff33); buttonStyle.setFont(Font.createSystemFont(Font.FACE_PROPORTIONAL, Font.STYLE_ITALIC + Font.STYLE_BOLD, Font.SIZE_LARGE)); form.addComponent(text); form.addComponent(b); form.show(); //other methods include: lbl.getStyle().setBgTransparency(0);

Themes To load a theme: Themes for look and feel of app Use the Resource Editor to create a theme. Save as .res Look in the utils folder for the resource editor To load a theme: Do call Display.init() first! try {     Resources res = Resources.open(“/res/aTheme.res”);     UIManager.getInstance().setThemeProps(res.getTheme(“Test Theme”));      } catch (java.io.IOException ioe) {     ioe.printStackTrace(); }

Other J2ME UI frameworks http://wiki.forum.nokia.com/index.php/Java_ME_UI_Frameworks http://j2me.ngphone.com/opensource/ui.htm http://javabyexample.wisdomplug.com/component/content/article/44/73.html Examples include: Apime J2MEPolish J4ME kUIx MWT Synclast etc etc

Lab Build a hello world application with LWUIT and transfer it to a phone. Re-create the DVLA project using LWUIT. Note that all events will remain the same. Add as much pizzazz to your application

References http://www.devx.com/wireless/Article/38461/1954 http://java.sun.com/developer/technicalArticles/javame/lwuit_intro/