J.E.N.I.

Chapter 3
High Level User Interface
3.1 Objectives
At the end of the lesson, the student should be able to:

Know the advantages and disadvantages of using high-level and low-level UI classes

Design MIDlets using the high-level UI components

Identify the different sub-classes of Screen

Know the different items that can be put into a

Form object

3.2 MIDP User Interface

MIDP user interface is designed for mobile devices. Application MIDP is shown in limited
screen area. Hardware memory may also be an important factor if the mobile equipment
has a small memory capacity.
With a wide range of mobile devices, from a variety of models of mobile phones up to PDAs,
MIDP user interface has been designed to be more flexible and easy to use in a wide range
of this equipment.
MIDP has a class capable of handling high-level and low-level user interface. High-level UI
interfaces is designed flexible. The appearance of this component is not specifically defined.
Actual screen appearance of various kinds of components are used from one apparatus to
another apparatus. Thus, the programmers have been convinced by the usefulness of highlevel UI component interfaces have similarities in overall implementers various
specifications.

High Level UI

Low-Level UI

highly portable across devices

may be device-specific

look and feel is the same as device

application specific look and feel

interactions like scrolling are encapsulated

must implement own navigation

cannot define actual appearance

can define actual appearance on pixel level

Pengembangan Perangkat Mobile

J.E.N.I.

High Level UI
no access to device specific features

Low-Level UI
access to low-level
input like key presses

Figure: High-Level UI versus Low-Level UI

When to use High-Level UI

When building an easy text-based application

When you want your application to be easily interchanged with different kinds of
equipment (Portability)

When you want your application to have the same look as other UI components of
various equipment.

When you want your code to be as little as possible, when an interaction is handled by
API

When to use Low-Level UI

When you need a high-level to control the display of an application

When your application requires the exact spot of the elements that exists on screen

When creating a graphical game; although you can still use high-level UI in the game
menu, it is more advisable to make UI menu on your own to avoid seamless
atmosphere for the user

When an application requires access to low-level input that has such key presses

If your application will be implemented on the navigation screen on your own

3.2.1

Display

The core of the MIDP user interface is the display. There is only one and only one instance
of Display is per MIDlet. The MIDlet can get a reference to the Display object by using the
static Display.getDisplay()method, passing a reference to the MIDlet instance.
The MIDlet is guaranteed that the Display object will not change within the MIDlets
instances existence. This means that the variable returns (returned) when you call
getDisplay() and it will not matter if you call with startApp() or destroyApp() (Look at the
Midlet Life Cycle images).

Pengembangan Perangkat Mobile

J.E.N.I.

3.2.2

Displayable

Only one Displayable is displayed at a time. By default, a Displayable is not visible on the
Display. A Displayable can be displayed by calling the setCurrent() method of the Display
instance. The setCurrent() method should be called at the start of the application,
otherwise, a blank screen will be displayed or the application will not start.

Figure: MIDlet Life Cycle

startApp method of MIDlet is a place where you can put setCurrent caller method (). But
you have to consider that MIDlet startApp() can be called more than once. To dismiss close
MIDlet temporarily pause by calling the pauseApp() function on incoming call, startApp() is
called again (after an incoming call) to enable. Thus, by calling the method setCurrent() on
startApp(), the possibility of the display will be dark (blank) on a screen displayed
previously, until the cessation (pause by the phone call)
A displayable could have name, some (command), CommandListener and Ticker.

Pengembangan Perangkat Mobile

J.E.N.I.

Figure: Property of a Displayable

3.2.3

Title

A Displayable has a title associated with itself. The position and appearance of the title is
device specific and can only be determined by device. A title is attached to a Displayable
by calling setTitle(). Calling this method will immediately update the title of the Displayable.
If the Displayable is currently displayed on the screen, the MIDP specification states that
the title should be changed by the implementation "as soon as it is feasible to do so".
Null parameter gives setTitle() to erase the Displayable title. Changing or deleting a title
can affect the size of Displayable area for the contents of the Displayable referred to. If the
size of the area changes, MIDlet will be notified with a call back method sizeChanged().

3.2.4

Command

With the shortage of size on the screen, MIDP does not describe a menu bar. In place of
the menu bar, MIDlet have Commands. A Command is usually implemented by the MIDP
implementation as a soft key or an item in a menu. A Command Object only contains
information about the action to be taken when it is activated. It does not contain code that
would be executed when it is selected.
The CommandListener property of a Displayable contains actions that are to be executed
upon the Commands activation. CommandListener is a specific interface on a single
method:
Pengembangan Perangkat Mobile

J.E.N.I.

public void commandAction(Command command, Displayable displayable)

Mapping of Commands on the equipment depends on the number that has been set or a
programmable button on the equipment. If there is an improper number of all Command
buttons, then enable the equipment to put some or all of Command on a menu and a map
on the menu and button will be labeled "Menu"

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

Command newCommand = new Command("New Item", Command.OK, 1);
Command renameCommand = new Command("Rename Item", Command.OK, 1);
Command deleteCommand = new Command("Delete Item", Command.OK, 1);
...
list.addCommand(exitCommand);
list.addCommand(newCommand);
list.addCommand(renameCommand);
list.addCommand(deleteCommand);
Figure: Listing program for mapping Commands into Displayable

Pengembangan Perangkat Mobile

J.E.N.I.

Figure: Example of display of multiple Commands

Command has a short label, long label, type and priority.

Command Label
It is assumed that the small screen size of the target piece of equipment, will always be a
factor when building MIDP applications. This assumption can also be applied to Command
label. Command label should be brief, but descriptive, it must be right on the screen and
still be understood by the user.
As long label is specified, it will be shown as appropriate at any time during an
implementation of the system viewed. No API calling sets label to be displayed. It is also
possible that a Command will feature a short label when another command is on the same
screen featuring long labels.
Command Type
A Command introduced on the equipment is often called device-dependent. A programmer
can find out the type specifications of Command. This type will be displayed as a hint on
where the Command is placed.
Various types of Command:

Command.OK, Command.BACK,
Command.CANCEL, Command.EXIT,
Command.HELP, Command.ITEM,
Command.SCREEN, Command.STOP

Pengembangan Perangkat Mobile

J.E.N.I.

Figure: Command displays differently on different implemented phones

Command Priority
Applications can assign Command specifications that are important to the property priority.
This is an integer property and lower scores are very important. Property priority is also
just a hint at the place where it should place the Command. Usually the implementation
determines the position of Command by type. If there is more than one Command of the
same type, normally priority will be consider the placement of Command.

3.2.5

CommandListener

An interface CommandListener with a single method:

void commandAction(Command command, Displayable displayable)

The commandAction() method is called when a Command is selected. The Command

Variable is a reference to the Command that was selected. Displayable is the Displayable
(or Screen) where the Command is located and where the select action happened.
CommandAction() must be returned immediately, if not the execution applications will be
unblock. This is because, MIDP specification does not require implementation to create a
barrier to the delivery event.

Pengembangan Perangkat Mobile

J.E.N.I.

3.2.6

Ticker

Ticker is a line of text that can be scrolling continuously on display. Constructor method of
ticker receives text string for display. The only two other case methods, i.e. getters and
setters for this text: String GetString() and void setString(String text). There is no other
way in an application to control the speed and direction of scrolling text. Scrolling cannot
be paused or stopped.
If space is placed in the text, it will not be displayed on the screen. All lines of text will be
displayed as a single line of scrolling text.
A ticker can be mounted on a Displayable by calling setTicker(). If Displayable ticker has
been there on, it will be replaced by a new ticker contained in the parameter.
Null parameter gives the ticker setTicker to replace all that has been put on Displayable.
Removing ticker of Displayable can cause changes in the size of the area of the Displayable
contents. If the area size changes occur, then MIDlet will call a method size with
sizeChanged()
Displayable object ticker may not share an event (action).

3.2.7

Screen

Screen is the essence of abstract class that is used for high-level UI while the Displayable
canvas abstract class is for low-level UI.
Here are four subclasses of the abstract class screen: Form, TextBox, List and Alert.

Pengembangan Perangkat Mobile

J.E.N.I.

Figure: Displayable Class Hierarchy

3.2.8

Item

Items is a component that can be put into a container, such as Form or Alert. An item can
have the following properties:

Property

Default Value

Label

Classified in subclass constructor

Commands

defaultCommand

Null

ItemCommandListener

Null

Layout directive

LAYOUT_DEFAULT

Preferred width and height

-1 (unlocked)

Pengembangan Perangkat Mobile

J.E.N.I.

Figure: Item Class Hierarchy

Specifications layout of items by Form. Directives layout can be combined using the bitwise
or operation (|). However, some of the directive is mutually exclusive. Here are the
horizontal alignment directives which are mutually exclusive:
LAYOUT_LEFT
LAYOUT_RIGHT
LAYOUT_CENTER

Here are the vertical alignment directive which are also mutually exclusive:
LAYOUT_TOP
LAYOUT_BOTTOM
LAYOUT_VCENTER

Here are another layout of the directive (not mutually exclusive):

LAYOUT_NEWLINE_BEFORE
LAYOUT_NEWLINE_AFTER
LAYOUT_SHRINK
LAYOUT_VSHRINK
LAYOUT_EXPAND
LAYOUT_VEXPAND
LAYOUT_2

3.3 Alert
An alert is a screen that can display a text and an image. An alert is a component for
displaying error, a warning, display text and image information, or to get confirmation from
the user.
The Alert is displayed for a specific period of time. This time is set using the setTimeout()
method and is specified in milliseconds unit. It can be made to be displayed until the user
activates the command ("Done") by specifying a special timeout of Alert.FOREVER.

Pengembangan Perangkat Mobile

10

J.E.N.I.

Alert can also display components Gauge (See the item Gauge) as indicator.
When the alert contains text that does not comply with the screen and should scroll, then
automatically sets the alert to capital (timeout is set to Alert.FOREVER).

import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;

public class AlertExample extends MIDlet implements CommandListener {

Display display;
Form mainForm;
Command exitCommand = new Command("Exit", Command.EXIT, 0);
Command okCommand = new Command("Ok", Command.OK, 0);
Gauge gauge = new Gauge(null, false, 5, 0);
Command[] commands = {
new Command("Alarm", Command.OK, 0),
new Command("Confirmation", Command.OK, 0),
new Command("Info", Command.OK, 0),
new Command("Warning", Command.OK, 0),
new Command("Error", Command.OK, 0),
new Command("Modal", Command.OK, 0)
};

Alert[] alerts = {
new Alert("Alarm Alert",
"Example of an Alarm type of Alert",
null, AlertType.ALARM),
new Alert("Confirmation Alert",
"Example of an CONFIRMATION type of Alert",
null, AlertType.CONFIRMATION),
new Alert("Info Alert",
"Example of an INFO type of Alert",
null, AlertType.INFO),
new Alert("Warning Alert",
"Example of an WARNING type of Alert, w/ gauge indicator",
null, AlertType.WARNING),

Pengembangan Perangkat Mobile

11

J.E.N.I.

new Alert("Error Alert",

"Example of an ERROR type of Alert, w/ an 'OK' Command",
null, AlertType.ERROR),
new Alert("Modal Alert",
"Example of an modal Alert: timeout = FOREVER",
null, AlertType.ERROR),
};

public AlertExample(){
mainForm = new Form("JEDI: Alert Example");

mainForm.addCommand(exitCommand);
for (int i=0; i< commands.length; i++){
mainForm.addCommand(commands[i]);
}
mainForm.setCommandListener(this);

// Add a gauge and sets the timeout (milliseconds)

alerts[3].setIndicator(gauge);
alerts[3].setTimeout(5000);

// Add a command to Alert

alerts[4].addCommand(okCommand);

// Set alert
alerts[5].setTimeout(Alert.FOREVER);
}

public void startApp() {

if (display == null){
display = Display.getDisplay(this);
display.setCurrent(mainForm);
}
}

public void pauseApp() {}

Pengembangan Perangkat Mobile

12

J.E.N.I.

public void destroyApp(boolean unconditional) {}

public void commandAction(Command c, Displayable d){

if (c == exitCommand){
destroyApp(true);
notifyDestroyed(); // Exit
}
for (int i=0; i<commands.length; i++){
if (c == commands[i]){
display.setCurrent(alerts[i]);
}
}
}
}

INFO Alert

Modal Alert

Alert w/ gauge indicator

Image: Different Alert Types.

3.4 List
The Lists are a subclass of the Screen containing a list of a choice. A List can be of three
types: IMPLICIT, EXCLUSIVE or MULTIPLE.

Pengembangan Perangkat Mobile

13

J.E.N.I.

If the List is IMPLICIT and the user executes the "select" button, commandAction() of the
Lists commandListener will be called. The default command is List.SELECT_COMMAND.
For the type of IMPLICIT and EXCLUSIVE, GetSelectedIndex() returns the index of the
selected element. For type MULTIPLE, getSelectedFlags() returns a boolean that contains
an array of state of the elements. IsSelected (int index) restore the state of the elements
in the provision of index positions.

import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;

public class ListExample extends MIDlet implements CommandListener {

Display display;
List list;
Command exitCommand = new Command("Exit", Command.EXIT, 1);
Command newCommand = new Command("New Item", Command.OK, 1);
Command renameCommand = new Command("Rename Item", Command.OK, 1);
Command deleteCommand = new Command("Delete Item", Command.OK, 1);
Ticker ticker = new Ticker(
"JEDI - Java Education and Development Initiative");

public ListExample(){
list = new List("JEDI: List Example", List.IMPLICIT);
list.append("List Item #1", null);
list.append("List Item #2", null);
list.append("List Item #3", null);

list.setTicker(ticker);

list.addCommand(exitCommand);
list.addCommand(newCommand);
list.addCommand(renameCommand);
list.addCommand(deleteCommand);
list.setCommandListener(this);

Pengembangan Perangkat Mobile

14

J.E.N.I.

public void startApp() {

if (display == null){
display = Display.getDisplay(this);
display.setCurrent(list);
}
}

public void pauseApp() {

}

public void destroyApp(boolean unconditional) {

}

public void commandAction(Command c, Displayable d){

if (c == exitCommand){
destroyApp(true);
notifyDestroyed(); // Exit
}
if (c == List.SELECT_COMMAND){
int index = list.getSelectedIndex();
String currentItem = list.getString(index);
// run something
}
}
}

Pengembangan Perangkat Mobile

15

J.E.N.I.

List.IMPLICIT

List.EXCLUSIVE

List.MULTIPLE

Figure: List Types

3.5 Text Box

A TextBox is a sub-class of the Screen that can be used to get text input from the user. It
allows a user to enter and edit text. It is similar to a TextField (See TextField item) because
it can have input constraints and input modes. Its difference with TextField is that the user
can input a new line (when the input constraint is set to "ANY").
The contents of the TextBox can be retrieved using getString() method.

Pengembangan Perangkat Mobile

16

J.E.N.I.

Figure: TextBox ANY type (multi-line)

Figure: TextBox with PASSWORD modifications

3.6 Form
The Form is a subclass of Screen. It is a container for subclass items, such as TextField,
StringItem, ImageItem, DateField and ChoiceGroup. It handles the layout of these
components. It also handles traversal among the components and scrolling of the screen.
Item added and put into a form using the method append() and insert(), respectively.
Item referenced using a zero-based index.

3.7 ChoiceGroup
The ChoiceGroup item is a group of selectable choice. The choice may contain a text, an
image or both.
The choices may be EXCLUSIVE (only one choice can be selected) or MULTIPLE (multiple
choices can be selected at a time). If a ChoiceGroup is of type POPUP, only one choice is
displayed. A popup selection will be displayed when this item is selected. From this popup
selection, the user may select his choice. The choice displayed is always the selected choice.

Pengembangan Perangkat Mobile

17

J.E.N.I.

GetSelectedIndex() returns the index element of the ChoiceGroup selected.

GetSelectedFlags() returns an array that responds to the boolean elements of ChoiceGroup.
IsSelected(int index) returns the state of elements given by index position.

choiceForm = new Form("Choice Group Types");

choiceForm.addCommand(exitCommand);
choiceForm.setCommandListener(this);

choiceExclusive = new ChoiceGroup("Exclusive", Choice.EXCLUSIVE);

choiceExclusive.append("Male", null);
choiceExclusive.append("Female", null);
choiceForm.append(choiceExclusive);

choiceMultiple = new ChoiceGroup("Multiple", Choice.MULTIPLE);

choiceMultiple.append("Apple", null);
choiceMultiple.append("Orange", null);
choiceMultiple.append("Grapes", null);
choiceForm.append(choiceMultiple);

choicePopup = new ChoiceGroup("Popup", Choice.POPUP);

choicePopup.append("Asia", null);
choicePopup.append("Europe", null);
choicePopup.append("Americas", null);
choiceForm.append(choicePopup);

Pengembangan Perangkat Mobile

18

J.E.N.I.

Figure: Choice Group Types

3.8 Date Field

DateField component is used to input the date and time of the user. It may contain a date
entry (mode DATE), a time entry (mode TIME) or both (mode DATE_TIME).
The getDate() method returns the current value of an item. It will return null if the item is
not initialized. If the mode of the DateField is DATE, the time component of the return value
is set to zero. If mode is TIME, the date component is set to "January 1, 1970"

dateForm = new Form("DateField Modes");

dateForm.addCommand(backCommand);
dateForm.setCommandListener(this);

DateField dateonly =
new DateField("Birthday (DATE)", DateField.DATE);
DateField timeonly =
new DateField("Set Alarm (TIME)", DateField.TIME);

Pengembangan Perangkat Mobile

19

J.E.N.I.

DateField datetime =
new DateField("Departure (DATE_TIME)", DateField.DATE_TIME);

dateForm.append(dateonly);
dateForm.append(timeonly);
dateForm.append(datetime);

DateField input modes

Selecting a date

Time input

Figure: DateField mode and input screens

3.9 String Item

A StringItem is a read-only component. It is composed of a label and text.
The StringItem optionally accepts an appearance mode parameter. The appearance mode
may be Item.PLAIN, Item.HYPERLINK or Item.BUTTON.
If the appearance mode is of type HYPERLINK or BUTTON, the default Command and the
ItemCommandListener must be set on the Item.

stringForm = new Form("StringField Modes");

stringForm.addCommand(exitCommand);
stringForm.setCommandListener(this);

Pengembangan Perangkat Mobile

20

J.E.N.I.

StringItem plain = new StringItem("Plain", "Plain Text", Item.PLAIN);

StringItem hyperlink = new StringItem("Hyperlink",

"http://www.sun.com", Item.HYPERLINK);
hyperlink.setDefaultCommand(new Command("Set", Command.ITEM, 0));
hyperlink.setItemCommandListener(this);

StringItem button = new StringItem("Button", "Click me", Item.BUTTON);

button.setDefaultCommand(new Command("Set", Command.ITEM, 0));
button.setItemCommandListener(this);

stringForm.append(plain);
stringForm.append(hyperlink);
stringForm.append(button);

Figure: StringItem

Pengembangan Perangkat Mobile

21

J.E.N.I.

3.10 Image Item

ImageItem is simply an image that can be put on a component, like a Form.
ImageItem received the item as a layout parameter (See the section Item):
public ImageItem(
String label,
Image img,
int layout,
String altText)
Other constructors receive mode to see the type Item.PLAIN, Item.HYPERLINK or
Item.BUTTON (See the section StringItem):

public ImageItem(String label,

Image image,
int layout,
String altText,
int appearanceMode)

imageForm = new Form("ImageItem");

imageForm.addCommand(backCommand);
imageForm.setCommandListener(this);

try {
Image img = Image.createImage("/jeni.png");
ImageItem image =
new ImageItem("JENI", img, Item.LAYOUT_CENTER, "jeni logo");
imageForm.append(image);
} catch (Exception e){e.printStackTrace();}

jeni.png fil e i s very important for input into the project by using operating system's
manager and put the image into the project directory under the subdirectory "src". Then
the project is reloaded by right-clicking the name project and select "Refresh Folders".

Pengembangan Perangkat Mobile

22

J.E.N.I.

Figure: ImageItem

Pengembangan Perangkat Mobile

23

J.E.N.I.

3.11 Text Field

A TextField is an Item where the user can encode input. Some exclusive input constraints
which can be set as follows:

TextField.ANY
TextField.EMAILADDR
TextField.NUMERIC
TextField.PHONENUMBER
TextField.URL
TextField.DECIMAL

The input can also have a variety of modifications:

TextField.PASSWORD
TextField.UNEDITABLE
TextField.SENSITIVE
TextField.NON_PREDICTIVE
TextField.INITIAL_CAPS_WORD
TextField.INITIAL_CAPS_SENTENCE
Modifications can be set by using the bit-wise OR (|) operator (or toggled using the bitwise XOR operator ^) on input constraint. As a consequence, modification can be obtained
from the return value of getConstraint() bit-wise operator AND (&).
Since the value returned by the modification also getConstraint(), the main constraint
Feedback could extracted with use bit-wise operator AND with TextBox.CONSTAINT_mask
and the return value of getConstaints().
GetString() returns the contents of the TextField as a String value.

textForm = new Form("TextField Types");

textForm.addCommand(backCommand);
textForm.setCommandListener(this);

TextField ANY = new TextField("ANY", "", 64,

TextField.ANY);

TextField EMAILADDR =
new TextField("EMAILADDR", "", 64,

TextField.EMAILADDR);

TextField NUMERIC =
new TextField("NUMERIC", "", 64,

TextField.NUMERIC);

TextField PHONENUMBER =

Pengembangan Perangkat Mobile

24

J.E.N.I.

new TextField("PHONENUMBER", "", 64,

TextField.PHONENUMBER);

TextField URL =
new TextField("URL", "", 64,

TextField.URL);

TextField DECIMAL =
new TextField("DECIMAL", "", 64,

TextField.DECIMAL);

textForm.append(ANY);
textForm.append(EMAILADDR);
textForm.append(NUMERIC);
textForm.append(PHONENUMBER);
textForm.append(URL);
textForm.append(DECIMAL);

Image: TextField Items

Pengembangan Perangkat Mobile

25

J.E.N.I.

3.12 Exercise
3.12.1 D y n a m i c List
Create a MIDlet that has implicitly as List Screen play. Put three Command added to this
List - "Add Item", "Remove Item" and "Exit". Command "Add Item" will provide services to
the user to enter the list using TextBox, then insert the item before current selected item
from the list. "Remove Item" will remove the currently selected list item
(getSelectedIndex). Command "Exit" will out of the program.

Pengembangan Perangkat Mobile

26