Advertisment

Create Attractive UIs for Mobile Devices

author-image
PCQ Bureau
New Update

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.

Advertisment

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.

Direct Hit!



Applies To: J2ME Developers



USP:
Create rich UIs that are portable across different devices



Primary Link:
https://lwuit.dev.java.net/



Keywords:
LWUIT



DVD:
PCQ_PROFESSIONAL/ Developer
Advertisment

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.

Advertisment

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.

While creating the project, for

Device Emulator Platform we can select Sun Wireless Toolkit as it comes

default with NerBeans, while other Emulators can be added. through Project

properties

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.

Advertisment

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.

The Emulator executes the LWUIT

Demo App, and by clicking the soft-key button under Exit, the app can be

closed.
Advertisment

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.

Advertisment



.



.











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.

Once the project is created, to

add LWUIT.jar to the project resources we have to give the location of the

package and add to the Resources.

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

Advertisment