Tips to create UIs for mobile devices

BANGALORE, INDIA: Since the inception of J2ME, developers have been facing the problem of portability across devices for their application. It was because the interfaces for the applications would be rendered differently on different devices. Above that the UI classes in J2ME were basic and could not facilitate developers in creating rich and compelling interfaces.

The Light Weight User Interface Toolkit (LWUIT) is a UI library from Sun Microsystems that comes as a respite to J2ME developers as now they can have a tool to create interfaces that would be portable across different devices and rendered in a same manner.

About LWUIT

LWUIT is a compact API for creating attractive application user interfaces for mobile devices. It has always been a challenge for a developer to create rich cross device applications using J2ME, since every handset vendor has his own interpretation for the specs provided by Sun for J2ME classes. This has resulted in implementation differences of fonts, layout, menus, etc. for an application that made the application look and behave differently on different devices. This happened mostly for application interfaces on Connected Limited Device Configuration (CLDC)/ Mobile Information Device Profile (MIDP) based devices. The Lightweight UI Toolkit was developed to address these issues.

The Lightweight UI Toolkit makes it very easy to create richer UIs that look and behave the same on all devices using a programming paradigm similar to Swing. This Toolkit is able to run on CLDC1.1 MIDP2.0/CDC PBP/SE.

LWUIT provides features like screen transitions, themes, and richer looks to user interfaces that's based on Swing like model, which has several layouts, menus, animation and rendering effects along with event handling support. The toolkit also has a resource editor, which designers can use to design the look and feel of the interface. Also it can be used to design the themes for the device.

Getting Started

With this month's PCQ Professional DVD we are distributing LWUIT, as well as the latest NetBeans version 6.1, which has support for mobility programming. Extract the contents from the LWUIT zipped file into a folder and then start the NetBeans IDE to start a new mobility project.

In NetBeans, create a new project through File > New Project, and there select Mobility option under categories and MIDP application from Projects pane and click Next button. Name the project as FirstLWUIT and uncheck the option to create Hello MIDlet and click Next. Then on the following screen, select the Emulator Platform as Sun Wireless Toolkit 2.5.2 for CLDC and choose the device of your choice and click on Finish. This creates the project skeleton.

We now have to add the LWUIT library to the project. From the Projects View, expand the project FirstLWUIT and then right click on Resources and select Add Jar/Zip option. On the Add Jar or Zip dialog window, browse to the location where you extracted LWUIT, select the LWUIT.jar file and select Open button. Now the LWUIT classes are available for this project and we can implement and use them to create interfaces.

First LWUIT MIDlet

To create the first MIDlet for our project, right click on the project package and select New > MIDlet. Name the MIDlet as FirstMidlet and click Finish. This creates a body of the MIDlet. Now we can implement LWUIT classes to create user interfaces. The Display class of LWUIT manages the graphics rendering and handling of events. Most of the components are like Swing in implementation and developers familiar with Swing will find it easier to get familiar with LWUIT.

In our test MIDlet we are using BorderLayout for the form and laying out various components to different sides of this layout. The following code snippet of the demo MIDlet demonstrates the use of image and also of components like labels and buttons, and of the command being assigned to the mobile device's soft keys.

public class FirstMIDlet extends MIDlet implements ActionListener {

private Form mForm;

public void startApp() {

if (mForm == null) {

Display.init(this);

Form f = new Form("LWUIT Demo App");

f.setLayout(new BorderLayout());

try{

Resources res = Resources.open("/myresourceFile.res");

Image i = res.getImage("duke");

Label bottomText = new Label(i);

bottomText.setAlignment(Component.CENTER);

bottomText.setText("Welcome to LWUIT!!");

bottomText.setTextPosition(Component.BOTTOM);

Container buttonBar = new Container(new BoxLay

out(BoxLayout.X_AXIS));

out(BoxLayout.X_AXIS));

.

.

public void actionPerformed(ActionEvent ae) {

destroyApp(true);

notifyDestroyed();

}

}

In the code snippet we used Command class. A command is a task that a user can trigger in the application. To assign a command to a menu bar item or device's soft keys we use addCommand() method as shown in the code snippet. In the demo code we use 'Exit' as a command that will trigger an event to close the application. In the code snippet we have used Resource class that is used to access the resources like images, in our case duke.gif. The Resource call needs to be wrapped in try-catch block as it throws IOException error. To add duke.gif image to the resource bundle, add the following to the project's build.xml file so that when the project is compiled the necessary files are added to the bundle and made available for the application.

.

.

After compiling and running the project, FirstLWUIT, the Sun Wireless toolkit emulator pops up with the application exceuting the FirstMIDlet where the image and the label are displayed in the center and the buttons are aligned at the botton. Also for left soft key an exit command has been assigned and on clicking that soft key the application ends.

In Conclusion

The Light Weight User Interface Toolkit Library with its Swing-like features enables a J2ME developer to create mobile applications with intuitive interfaces and frees him from the various portability issues.

(For the complete code, go to forums.pcquest.com under the Developers' thread.)