by August 4, 2008 0 comments



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.

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

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.

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.

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.

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.

<target name="post-compile">

<taskdef classpath="ResourceBuilder.jar"
.
.
<image file="images/duke.gif" name="duke" pack="true"/>
</build>
</target>

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

No Comments so far

Jump into a conversation

No Comments Yet!

You can be the one to start a conversation.

Your data will be safe!Your e-mail address will not be published. Also other data will not be shared with third person.