Back | Next

In this article, you will understand the Midlet's user interface. This User Interface takes care of small screen size and gives us some basic components customized for devices.

The key to Midlet UI is Package javax.microedition.lcdui. lcdui stands for Limited Connected Device User Interface and Liquid Crystal Display User Interface. The Hierarchy of UI components is given below

As the figure shows lcdui package has Display and Displayable as core classes and Displayable is further divided into Low Level API and High Level API. Low Level API is a Canvas based API for drawing images while High-Level API is for creating Forms, Alerts etc. Let’s analyze this hierarchy in more detail in the next few sections

Display

Display is the display manager handle. To get this handle use Display.getDisplay (MIDlet midlet) where midlet is the present midlet. Now that we have handle to Display manager, call setCurrent(Displayable nextDisplayable) to make the Displayable object visible. Displayable objects are J2ME UI components like Screens and Canvas.

Let’s look at the code snippet of HelloWorld.java. In the startApp() method Display.getDisplay(this) is called where this refers to the parent class MIDlet. This Dislpay manager object is used to display the helloForm which is a Displayable object.

 /**
  * Hello World Constructor.
  * */

    public HelloWorld() {

    	exitCommand = new Command("Exit", Command.EXIT, 1);
    	helloForm = new Form("Hello World");
    	helloForm.append(new String("Hello World"));
    	helloForm.addCommand(exitCommand);
    	helloForm.setCommandListener(this);

    }


    protected void startApp() {
        Display.getDisplay(this).setCurrent(helloForm);
    }

• boolean flashBacklight(int duration) : Flash device backlight for a given duration.
• boolean isColor(): To find out whether the device is a color device.
• boolean vibrate(int duration): Vibrate device for a given duration.

Displayable is an object that can be displayed on the screen. Displayable object has three components

• Title
• Ticker
• Area to place other UI components like text fields and images.

We can use getTicker(), setTicker(), getTitle() and setTitle() methods for Ticker and Title manipulations. Displayable object can also be used to query device's displayable area using getHeight() and getWidth() methods.

A Displayable object is further subclassed by Screen and Canvas and these form the basis of an important concept in lcdui design.

Low-Level API : Any class that subclasses a Canvas is a Low Level User Interface. Here you will have to create and draw all the components on to a screen. This API can be used to create splash screens, hot spots, terrains and characters for gaming etc.

High-level API : Any class that subclasses a Screen is a High Level User Interface. High-Level API gives us a rich set of ready made UI components for user interaction like alerts, forms, lists etc.

These API's can be used interchangeably in the same midlet depending on the functionality. In the next few chapters we will get to know more about UI API's and Event Handling Mechanism in J2ME.

High Level UI Programming

In this lesson we will learn about Screen based API's and midlets Event Handling Mechanism. Let’s recap what we have learnt about High-Level API in the previous section.

• Any class that subclasses a Screen is a High Level User Interface.
• Screen is a subclass of Displayable Class which is displayed to mobile EDI (Electronic Data Interface) by the display manager (Display object).
• High-Level API gives us a rich set of ready made UI components for user interaction like alerts, forms, lists etc.

• The Inbox of your SMS has a List of messages. It does not have any other item on the screen except a List. You may not find any Desktop application which just has a list occupying your entire screen.
• Some screens have a TextBox covering the whole screen.
• The Mobile display is so small the alert covers the whole screen.

In AWT, Form is a top UI component on which all the other Items are rendered but same is not the case of mobile devices. So we have four top level screen components

• Form
• Alert
• List
• TextBox

Class Form

Form is a component on which the Items can be placed. The commonly used Items are ChoiceGroup, CustomItem, DateField, Gauge, ImageItem, Spacer, StringItem and TextField.

Form has two constructors

• Form(String title)
  Creates an empty form without any Items placed on it. To Place Items on it use
  append(Image img)
  append(Item item)
  append(String str)
  
  
• Form(String title, Item[] items)
  Create an array of Items and add them during Form creation. The above methods can also be used for adding more Items to the form.

Event Handling Mechanism in J2ME/JavaME

Event handling mechanism of a Midlet is similar to Event Handling Mechanism in AWT. Any class that wants to add event listening to high level interface should implement Interface CommandListener.

Let us again look at the code segment of HelloWorld program. It extends the CommandListener and also has following line of code

helloForm.setCommandListener(this);

This line sets a listener for Commands to the Displayable helloForm (Remember Form is a subclass of Displayable). Without this line your application will not respond to the user's Command events.

Commands as you can deduce are the hard keys at the top of your keypad. Most mobile devices have Left Side Key (LSK) and (Right Side Key) RSK. Some devices may also have three keys at the top.

exitCommand = new Command("Exit", Command.EXIT, 1);

Command is a button which gets automatically mapped to Hardware keys at the top of your mobile keypad. Below picture shows Exit command mapped to LSK and ready to listen to any button clicks.

• Detect the events due to Commands on the Displayable.
• Respond to these events.

In our Hello World application we exit the application.

public void commandAction(Command cmd, Displayable disp) {
	if (cmd == exitCommand) {
		destroyApp(false);
		notifyDestroyed();
	}
}

Currency calculator

The currency calculator example demonstrates the High-Level UI API. This program also gives you pointers towards Floating point calculations in MIDP1.0. As you already know Float is not supported in MIDP1.0.

Back | Next

This page is a part of a frames based web site. If you have landed on this page from a search engine click here to view the complete page.