E-mail    Print    Discuss    Blog

J2ME Tutorial, Part 2: User Interfaces with MIDP 2.0

Contents User Interface Architecture Alert List TextBox Form Images, Tickers, and Gauges Handling User Commands Working with the Low-Level API

This is part two in a series that explores J2ME with MIDP 2.0. "Part 1: Creating MIDlets" showed you how to acquire, install, and use the Wireless Toolkit for developing MIDlets. Part one also showed how to develop MIDlets without using the Toolkit, which is important in order to understand the behind-the-scenes activity involved in creating a MIDlet. Part one finished with an exploration of the lifecycle of a MIDlet, with a step-by-step guide through the events in the life of a MIDlet.

In this article, you will create the user interface (UI) elements of a MIDlet. Since the interaction with a user is a paramount concern in any MIDlet, due to the size of the screens, it is important for you to understand the basics of this side of MIDlets. Any interaction with a user is done via a UI element. In fact, when you created the simplistic Date-Time MIDlet in part one, you used one such element called Alert to show an alert message on the screen. This message was actually shown on the screen by the help of another UI element called Display.

Let's start with a discussion of the overall architecture of the UI elements.

User Interface Architecture

MIDP 2.0 provides UI classes in two packages, javax.microedition.lcdui and javax.microedition.lcdui.game, where lcdui stands for liquid crystal display user interface (LCD UI). As expected, the game package contains classes for development of a wireless game UI. I will discuss this package in the next part of this series.

The UI classes of of MIDP 2.0's javax.microedition.lcdui package can be divided into two logical groups: the high- and low-level groups. The classes of the high-level group are perfect for development of MIDlets that target the maximum number of devices, because these classes do not provide exact control over their display. The high-level classes are heavily abstracted to provide minimal control over their look and feel, which is left for device on which they are deployed to manage, according to its capabilities. These classes are shown in Figure 1.

Figure 1. High-level MIDP 2.0 UI classes

The classes of the low-level group are perfect for MIDlets where precise control over the location and display of the UI elements is important and required. Of course, with more control comes less portability. If your MIDlet is developed using these classes, it may not be deployable on certain devices, because they require precise control over the way they look and feel. There are only two classes in this group, and they are shown in Figure 2.

Figure 2. Low-level MIDP 2.0 UI classes

There is another class in the low-level group called GameCanvas, which is not shown here, as it will be discussed in the next part of this series.

For you to be able to show a UI element on a device screen, whether high- or low-level, it must implement the Displayable interface. A displayable class may have a title, a ticker, and certain commands associated with it, among other things. This implies that both the Screen and Canvas classes and their subclasses implement this interface, as can be seen in Figure 3. The Graphics class does not implement this interface, because it deals with low-level 2D graphics that directly manipulate the device's screen.

Figure 3. Canvas and Screen implement the Displayable interface

A Displayable class is a UI element that can be shown on the device's screen while the Display class abstracts the display functions of an actual device's screen and makes them available to you. It provides methods to gain information about the screen and to show or change the current UI element that you want displayed. Thus, a MIDlet shows a Displayable UI element on a Display using the setCurrent(Displayable element) method of the Display class.

As the method name suggests, the Display can have only one Displayable element at one time, which becomes the current element on display. The current element that is being displayed can be accessed using the method getCurrent(), which returns an instance of a Displayable element. The static method getDisplay(MIDlet midlet) returns the current display instance associated with your MIDlet method.

A little bit of actual code here would go a long way in helping understand the MIDlet UI concepts that we have just discussed. Rather than write new code, let's try and retrofit our understanding on the Date-Time MIDlet example from part one, which is reproduced in Listing 1.

package com.j2me.part1;


import java.util.Date;


import javax.microedition.lcdui.Alert;

import javax.microedition.lcdui.Display;
import javax.microedition.midlet.MIDlet;


public class DateTimeApp extends MIDlet {

  Alert timeAlert;


  public DateTimeApp() {
    timeAlert = new Alert("Alert!");
    timeAlert.setString(new Date().toString());
  }

  public void startApp() {
    Display.getDisplay(this).setCurrent(timeAlert);
  }

  public void pauseApp() {
  }

  public void destroyApp(boolean unconditional) {
  }
}

A Displayable UI element, an Alert, is created in the constructor. When the device's Application Management Software (AMS) calls the startApp() method, the current display available for this MIDlet is extracted using the Display.getDisplay() method. The Alert is then made the current item on display, by setting it as a parameter to the setCurrent() method.

As seen from Figure 1, there are four high-level UI elements that can be displayed on a MIDlet's screen. Let's discuss each of these elements in detail.

Alert

You already know how to create a basic alert message from Listing 1. Alerts are best used in informational or error messages that stay on the screen for a short period of time and then disappear. You can control several aspects of an alert by calling the relevant methods or using the right constructor.

• The title must be set while creating the alert and it cannot be changed afterwards: Alert("Confirm?");.
• To set the message the alert displays use, setString("Message to display") or pass the message as part of the constructor, Alert( "Confirm", "Are you sure?", null, null); .
• Use setTimeout(int time) to set the time (in milliseconds) for which the alert is displayed on the screen. If you pass Alert.FOREVER as the value of time, you will show the alert forever and make the alert a modal dialog.
• There are five types of alerts defined by the class AlertType: ALARM, CONFIRMATION, ERROR, INFO, and WARNING. These have different looks and feels and can have a sound played along with the alert.
• Associate an image with the alert using the method setImage(Image img);.
• Set an indicator with the alert using setIndicator(Gauge gauge); method.

List

A list contains one or more choices (elements), which must have a text part, an optional image part, and an optional font for the text part. The List element implements the Choice interface, which defines the basic operations of this element. The list must itself have a title, and must define a policy for the selection of its elements. This policy dictates whether only one element can be selected (Choice.EXCLUSIVE), multiple elements can be selected (Choice.MULTIPLE), or the currently highlighted element is selected (Choice.IMPLICIT). Figure 4 shows the difference between the three selection policies.

Figure 4. Selection policies for List elements

You can create a list in one of two ways.

• Create an list that contains no elements, and then append or insert individual elements.
• Create the elements beforehand and then create a list with these elements.

Listing 2 shows both ways.

  
package com.j2me.part2;

import javax.microedition.lcdui.List;
import javax.microedition.lcdui.Choice;
import javax.microedition.lcdui.Display;
import javax.microedition.midlet.MIDlet;

public class ListExample extends MIDlet {

	List fruitList1;
	List fruitList2;

	public ListExample() {
	  fruitList1 = new List("Select the fruits you like",
	                         Choice.MULTIPLE);
	  fruitList1.append("Orange", null);
	  fruitList1.append("Apple", null);
	  fruitList1.insert(1, "Mango", null); 
	    // inserts between Orange and Apple

	  String fruits[] = {"Guava", "Berry", "Kiwifruit"};
	  fruitList2 =
	    new List(
				"Select the fruits you like - List 2",
	      Choice.IMPLICIT,
	      fruits,
	      null);
	}

	public void startApp() {
		Display display = Display.getDisplay(this);
		display.setCurrent(fruitList1);

		try{
		  Thread.currentThread().sleep(3000);
		} catch(Exception e) {}

		display.setCurrent(fruitList2);
	}

	public void pauseApp() {
	}

	public void destroyApp(boolean unconditional) {
	}
}
  

Listing 2. Using Lists

List elements can be modified after the list has been created. You can modify individual elements by changing their text, text font, or image part, using the list index (starting at 0). You can delete elements using delete(int index) or deleteAll(). Any changes take effect immediately, even if the list is the current UI element being shown to the user.

Related Articles

J2ME Tutorial, Part 4: Multimedia and MIDP 2.0
In part four of this J2ME tutorial, you will use the Mobile Media API 1.1 (MMAPI) to load and play audio and video on your MIDP device.

J2ME Tutorial, Part 3: Exploring the Game API of MIDP 2.0
In part three of this J2ME tutorial, you will use the mobile gaming package to develop a simple game, which uses all of the classes of this package, as a learning tool.

J2ME Tutorial, Part 1: Creating MIDlets
Java 2 Micro Edition (J2ME) combines a resource-constrained JVM and a set of Java APIs for developing applications for mobile devices. Here is a step-by-step guide to creating MIDlets, testing and deploying these MIDlets, and a look at the lifecycle of a MIDlet.

View all java.net Articles.