J2ME User Interface

October 20, 2007

1) Introduction

User-interface requirements for small handheld devices are different from personal computers. Because comparatively the display size of handheld devices is smaller. That’s why, we cannot follow the personal computers user-interface programming guidelines for handheld devices. In J2ME,the CLDC itself does not define any GUI functionality. The official GUI classes for the J2ME are included in profiles such as the MIDP and are defined by the Java Community Process (JCP). The GUI classes in the MIDP are not based on the Abstract Window Toolkit (AWT). The limited CPU memory of handheld devices, cannot handle the AWT. The MIDP contains its own GUI guidelines. The MIDP GUI consists of high-level and low-level APIs, each with their own set of events. Here we are going to discuss about only High-level API’s.

Contents: (This one itself shows the Device Display Heirarchy)

Display Object
- Displayable Object
DISPLAYABLE : Screen Object
- TextBox Object
- Alert Object
- List Object
- Form Object
FORM : Item Object
- ChoiceGroup Object
- DateField Object
- Guage Object
- Image and ImageItem Object
- StringItem Object
- TextField Object

2) API’s

MIDP offers a high-level API objects for user interface development. This is used to build common user-interface components such as Form s, TextBox etc… This handles most component functionality, such as drawing each component on the screen.

2.1) Display Object

A MIDlet has one instance of a Display object. This object is used to obtain information about the current display and includes methods for requesting the objects being displayed. The Display object is essentially the manager of the device display.Display is represented by the javax.microedition.lcdui.Display class. The Display class is the one and only display manager that is instantiated for each active MIDlet and provides methods to retrieve information about the device’s display capabilities.A reference to the device’s display can be obtained by providing a MIDlet reference to the static getDisplay( ) method in the startApp( ) method of a MIDlet.

public Display getDisplay(MIDlet lMidlet);		
 
 
public class firstMidlet extends MIDlet
 {
	firstMidlet( ) { }
	int startApp( ) 
	{ .....
		return 0;}	
}

Now we have a reference. Then we have to create GUI component. The two forms of the setCurrent() method with this reference as parameter are shown here.

1 2	setCurrent(Displayable dispRef); setCurrent(Alert aRef, Displayable dispRef);

2.1.1) Displayable Object

There is only one Display object per MIDlet, but many objects within a MIDlet may be displayable. A Displayable object is a component that is visible on a device. MIDP contains two subclasses of Displayable: Screen and Canvas.

1
2
3

abstract public class Displayable
public abstract class Canvas extends Displayable
public abstract class Screen extends Displayable

We can find out that, what is currently being displayed on the device. We can find the types of colors the display object supports.Here are the methods.

public Displayable getCurrent( );
 
public void boolean isColor( ); //returns TRUE if it supports Color, FALSE if it Supports grayscale
public int numColors( ); //Returns number of colors it supports

2.2) DISPLAYABLE : Screen Object

User interacts with the device through Screen. Screen combines and organizes graphics objects and manages user input through the device. Screens are represented by the javax.microedition.lcdui.Screen object. Then by calling setCurrent( ) they will shown by the Display object.There can be several screens in an application, but only one screen at a time can be visible in a display. There are four types of screens, TextBox, List, Alert, and Form. Screen can have two characteristics: title and ticker.

The title is a string that appears above the screen contents. The following methods are used to set and retrieve the title of the screen.

1 2	public void setTitle(String title); public String getTitle( );

The Ticker is a image that stays above the title. The Ticker class implements a tickertape. Starting and Stopping the Ticker doesn’t done using methods.The string associated with Ticker scrolls continuously, whose direction of scrolling and the speed of the scrolling depends on the MIDP implementation.The following are the list of methods used in the Ticker.

public void setTicker(Ticker ticker); // To set the Ticker
public Ticker getTicker( ); // To get the Ticker
 
public Ticker(String string); // Ticker's Constructor.
 
public String getString( ); //To get the sring Associated with he Ticker
public setString(String s);// To set the sring Associated with he Ticker
 
setTicker(new Ticker("HI HOW ARE YOU"));//To attach the Ticker to screen

2.2.1) TextBox

TextBox is a screen’s object, using which we can give input and modify the text. TextBox is used when the user needs to give the input for the application. Here is the TextBox’s Constructor.

1	public TextBox(String title, String text, int maxSize, int constraints);

The text is used to get the text in the TextBox and maxSize is used to set the maximum size of the TextBox. Some integer constants are used to limit the text in the TextBox such as TextField.ANY , TextField.EMAILADDR ,TextField.NUMBER, TextField.PASSWD, TextField.PHONENUMBER, and TextField.URL. Here are some methods used with TextBox.

public int getConstraints( ); // To get the Current Constraints associated with the TextBox
public void setConstraints(int c);// To set the Constraints for TextBox
 
public int getMaxSize( ); // To get the Maximum Size of TextBox
public void setMaxSize(int size); // To set the Maximum Size of TextBox
 
public String getString( ); // To get the Text in the TextBox
public void setString(String s); // To set the Text in the TextBox
 
public int size( ); // To Get the number of Characters in the TextBox
 
/* Text Manipulation Methods */
 
public void delete(int offset, int length); // To delete some text
public void insert(char[] texts, int offset, int length, int position); // To Insert text
public void replace(String str, int position); // To replace the text
public void setChars(char[] texts, int offset, int length); // To set the characters
 
public int getCaretPosition(  ); // To get the Cursors position

2.2.2) Alert

Alert is a screen which contains text or image. It is used to show the errors and exceptions. A modal alert is a alert which need confirmation from user to close it.But the timed alert doesnt need the confirmation from user.It shows the error for certain amount of time and terminates.Here is the constructor for Alert:

1 2	public Alert(String name); public Alert(String name, String message, Image msgImage, AlertType errorType);

We can use a timeout value for displaying the Alert message, means how much time the Alert message displays. Initially we can set the timeout and later we can change it. If we want to know the current timeout value we can get it.Similarly we can set and get the Image and String values associated with the Alert.Here are the methods for the same.

public int getDefaultTimeout( );// To get the current default timeout value
public int getTimeout( );		//To get the current timeout value
public void setTimeout(int t);	//To set the timeout value
Alert alert = new Alert("Error Message"); // To create a new Alert
alert.setTimeout(5000); 		// Sets the timeout for 5000 milli seconds
alert.setTimeout(Alert.FOREVER); // To display the alert until user closes it.
public Image getImage( ); 		// To get the image associated with the Alert
public String getString( ); 	// To get the String associated with the Alert
public void setImage(Image "alert.png"); //To set the image associated with the Alert
public void setString(String "Spawning Error"); // To set the String associated with the Alert

The AlertType class has provided with five differet types of alerts: AlertType.ERROR, AlertType.ALARM, AlertType.CONFIRMATION, AlertType.WARNING, and AlertType.INFO. . Here are some methods to set and get the Alert Types.

1 2	public AlertType getType( ); public void setType(AlertType AlertType.CONFIRMATION);

Similarly we can create specific types of alerts as timedAlert or modalAlert.And using the same methods we can set and get the timeouts for them.

Alert timedAlert = new Alert ("Warning", "Clear It", null, AlertType.WARNING); // Creating
TimedAlert.setTimeout(5000); // to set the timeout for timedAlert
Display.setCurrent(timedAlert, timed); // To set the timedAlert as current alert
 
Alert modalAert = new Alert("Alarm", "Reminder", null, AlertType.ALARM);// Creating
modalAlert.setTimeout(alert.FOREVER); // modalAlert need manual dismissal
display.setCurrent(modalAlert, timed);// To set the modalAlert as current alert

2.2.3) List

List is a screen which is having some choices for selection. User has to select one of the choices explicitly. Its constructors are:

1 2	public List(String name, int listType); public List(String name, int listType, String[] stringElements, Image[] imageElements);

There are three types of list types, MULTIPLE , EXCLUSIVE, and IMPLICIT .

EXCLUSIVE type of list allows only one selection.
IMPLICIT type of list is a list where the choice is implicitly selected.
MULTIPLE type of list allows more than one selection of choices.

Here is an example

1	List list = new List("select one or more", Choice.MULTIPLE);

We can append, insert, or replace choices in the list. For a choice the text associated to it is mandatory and image associated with it is optional. We can delete the index associated t a choice. We can get text and image associated to a choice. Here are the methods:

public int append(String string, Image image); // To append into the list
public void insert(int choiceNo, String string, Image image); // To insert into the ist
public void set(int choiceNo, String string, Image image);//To replace the choice in the list
 
int open = list.append("OPEN", null); // open is index for the choice "OPEN"
 
public void delete(int index); // To delete an index
 
public String getString(int index); // To get the text associated to the choice with its index
public Image getImage(int index);//To get the image associated to the choice with its index
 
public boolean isSelected(int index); // To know which is selected in the list
public setSelectedIndex(int index, boolean bool); // To select the choice
 
public int getSelectedFlags(boolean[] selectedArray); // To set the selection state of the entire list
public void setSelectedFlags(boolean[] selectedArray); // To modify the one that has been passed in

2.2.4) Form

Forms used to combine multiple components into one screen. It is a screen that contains items. Its constructors are:

1 2	public Form(String str); public Form(String str, Item[] items);

It will arrange its components as a list. Like the choices within a list, items within a form can be edited using insert, append, and delete.Here are some examples.

public int append(Image img); //appends an object that subclasses the Item object	
public int append(Item item);
public int append(String str); //append a generic string	
public void delete(int itemNum); //deletes the item at the given position
public Item get(int itemNum);//access any item in the form at its given position
public void insert(int itemNum, Item item);//inserts an item in the form
public int set(int itemNum, Item item);//setting the item referenced by itemNum
public int size( );//find the current number of items that are in the form

The GUI components that can be placed on a form are: ChoiceGroup, DateField, Gauge, ImageItem, StringItem, and TextField.