CSE 2012Y Objective

After this lecture you’ll

Understand the MIDP GUI model

And start programming UI on J2ME

Overview Why not reuse AWT ?

User interface requirement for handheld devices are
AWT is designed for desktop computers and
different from those of desktop computers. Why? optimised for these machines

CLDC itself does not define any GUI functionality.

AWT assumes certain user interaction models. It

GUI classes in the MIDP are not based on the Abstract
is designed to work with pointing devices
Window Toolkit (AWT)

AWT has a rich feature set, and includes support
for functionality that is not found or is impractical
to implement on handheld devices

MIDP User Interface APIs MIDP User Interface APIs (Contd)

The MIDP user interface API is divided into a high- and
Low level API
low-level API.
Low-level API provides little abstraction.

High Level API
It is designed for applications that need precise

High level API Is designed for applications where portability placement and control of graphic elements, as well as
between mobile information devices is important.
access to low-level input events

To achieve portability, the API employs a high level abstraction
and gives you little control over its look and feel.
This API gives the application full control over what is

The high-level API provides input elements such as text fields, being drawn on the display
choices, and gauges. There are only two fixed levels: Screens and
E.g javax.microedition.lcdui.Canvas, javax.microedition.lcdui.Graphics
Items. The Items can be placed in a Form, which is a specialized
Screen.

1
 MIDP GUI Model MIDP GUI Model
MIDlet

The high-level Screens and the low-level class Canvas
have the common base class Displayable. Display

All subclasses of Displayable fill the whole screen of the
device. Displayable Command

Subclasses of Displayable can be shown on the device ChoiceGroup

using the setCurrent() method of the Display object. Screen Canvas
DateField

The display hardware of a MIDlet can be accessed by Alert
calling the static method getDisplay(), where the MIDlet Gauge
List Choice <<interface>>
itself is given as parameter. ImageItem
Form Item
StringItem
Textbox
TextField

MIDP GUI Model ( Contd) Relationship between display and screen

Display

To show something on a MIDP device, you’ll need to obtain the
device’s display – javax.microedition.lcdui.Display class

Provides methods to retrieve information about the device’s
display capabilities

Screen

Encapsulates and organises graphics objects and coordinates
user input through the device. – javax.microedition.lcdui.Screen
and are shown by the Display object by calling its setCurrent()
method.

There can be several screens in an application, but only one
screen at a time can be visible in a display, and the user can only
traverse only through the items on that screen

MIDP GUI ( Contd) MIDP GUI ( Contd)

Screen is an abstract class on its own
Ticker

Every screen can have 2 additional characteristics
The Ticker Class implements a tickertape, or a piece of

A title text that runs continuously across the display

Public void setTitle(String title);
Public Ticker(String Str)

Public String getTitle();
Public String getString()

and a ticker –
Public void setString(String s);
A graphical component that appears above the title and can be used to

scroll information across to the user

A ticker can be attached to

Public void setTicker(Ticker ticker)
Alert

Public Ticker getTicker();
TextBox

List

Form

2
 MIDP GUI ( Contd) MIDP GUI ( Contd)

Alert
List

An alert is an ordinary screen that can contain text and image
A list is a screen containing selectable choices

It informs the user about errors and other exceptional conditions

Both List and ChoiceGroup have common behaviour

An alert can either be modal or timed

Modal
defined by choice interface

The alert remains on the screen until the user dismisses it

Class List

Timed Alert

It is displayed for a certain amount of time

Public List( String Title, int listType);

Alert Class
Public List(String title, int listType, String[] stringElements,

Public Alert(String title) image[] imageElements);
Public Alert(String Title, String alertText, Image alertImage. AlertType alertType)

Public void setTimeout(int t)

There are 3 types of listType

Public voiid getTimeout();
IMPLICIT,EXCLUSIVE and MULTIPLE

AlertType – ALARM,CONFIRMATION,ERROR,INFO,WARNING

MIDP GUI ( Contd) MIDP GUI ( Contd)

Methods for List
TextBox

Public int append( String stringElement, Image imageElement);
A TextBox object is a screen that allows the user to enter and edit

Public void insert(int index, String stringElement, Image ImageElement) text.

Public void set( int index, String stringElement, Image ImageElement)
Public TextBox( String Title, String Text, int maxSize, int Constraints);

Public void delete(int index)

The constraints used are static constant integers of TextField

Public string getString(int index)
class which are shared between Textfield and TextBox class

Public Image getImage(int index)

The constraints are as follows:

TextField.ANY

TextField.EMAILADDR

TextField.NUMBER

TextField.PHONENUMBER

TextField.URL

TextField.Password

Working with forms MIDP GUI ( Contd)

In addition to screen based components, you have the
Item
ability to use forms to combine multiple components into
It is an abstract class acting as a base class for all components
one screen either on a form or alert.

A form is a screen that contains items
Public string getLabel();

Public void setLabel(String s);

Class Form
Public Form (String Title);

Public Form (String Title, Item[] items);

ChoiceGroup

Public int append ( Image img) ;
Represents a group of selectable choices to be placed on a Form
object

Public int append ( Item item);
Public ChoiceGroup( String label, int choiceType)

Public void delete (int ItemNum)
Public ChoiceGroup( String label, int choiceType, String[] stringElements, Image[]

Public Item get (int itemNum) imageElements);

Public int append( String stringElement, image imageElement)

Public void insert (int itemNum, Item item)
Public void insert( int index, String stringElement, image imageElement)

Public int set( int itemNum, Item item);
Public void set( int index, String stringElement, Image imageElement)

Public int size();// current number of items that are in the form
Note: the IMPLICIT choice type is not available in choice group

3
 MIDP GUI ( Contd) MIDP GUI ( Contd)

DateField
Gauge

A DateField object is an editable component for representing
A gauge is used to represent the progress of certain tasks
calendar date and time information that can be placed on a Form
object.
A Gauge can be

Can be configured to accept date or time information, or both.
Interactive

A gauge object represents a bar graph that can be used within a form

Datefield Class
or Non-interactive

Public DateField( String label, int mode)
A non-interactive gauge can be used to represent the progress of a certain task .

Public DateField( String label, int mode, TimeZone timezone)
It is used when you don’t know how long a particular activity will take

A non-interactive gauge that has an INDEFINITE maximum

Public Date getDate()
This type of gauge can be in one of four states, and this is reflected by the initial

Public int getInputMode() value
CONTINUOUS_IDLE, INCREMENTAL_IDLE, CONTINUOUS_RUNNING, and

Public void setDate( Date date)

INCREMENTAL_UPDATING

Public void setInputMode( int mode);
Each state represents the best effort of the device to let the user know the current
activity of the MIDlet, and you can use them to represent these states yourself

Note: mode can be DateField.DATE,TIME,DATE_TIME

MIDP GUI ( Contd) MIDP GUI ( Contd)

StringItem

Gauge class

Public Gauge( String label, boolean interactive, int maxValue, int

An object which is a text component item that may
initialValue) contain a string that cannot be edited

Public boolean isInteractive()
Public stringItem( string label, string contents);

Public int getMaxValue()
public void setText(String s)

Public int getValue()
Public void setLabel( String l)

Public void setMaxValue( int maxValue)

Public string getText();

Public void setValue( int value);

Public String getLabel

Note: For non-interactive gauge: MaxValue = INDEFINITE and

initialValue = CONTINUOUS_IDLE, INCREMENTAL_IDLE,
CONTINUOUS_RUNNING, and INCREMENTAL_UPDATING

MIDP GUI ( Contd) MIDP GUI ( Contd)

TextField
Image and imageItem

Unlike StringItem, a TextField object is an editable text component that
may be placed on a form
An ImageItem object is an image component that

Similar to Textbox, however, TextField has a capacity /maximum size contains a reference to an image object.

It requires input from the user

An image is created, either by reading from a physical

TextField class location or by making an image in-memory,
Public TextField( String label, String text, int maxSize, int constraints);

Constraints can be TextField. - ANY, EMAILADDR, NUMBER, PASSWD,

It exists only in the off-screen memory. Therefore, you
PHONENUMBER and URL should be careful while using images, and restrict the

Public int getConstraints() size of images to the minimum possible to avoid filling

Public void setConstraints( int c)

Public int getMaxSize(); the device's available memory

Public void setMaxSize(int size)
Note that the MIDlet specification mandates support for

Public String getString();

Public void setString( String s); the Portable Network Graphics (PNG) format for

Public int size(); images

4
 MIDP GUI ( Contd) MIDP GUI ( Contd)

Images can either be
Class imageItem

Immutable or
Public imageItem( String label, image img, int layout, String

Created by loading image data from resource bundles, files etc. altText)

Once created they cannot be modified
Layout can be the followings

Public static Image createImage( Image image)
ImageItem – LAYOUT_CENTER, LAYOUT_DEFAULT, LAYOUT_LEFT,

Public static Image createImage( String name) LAYOUT_NEWLINE_AFTER, LAYOUT_NEWLINE_BEFORE,
LAYOUT_RIGHT,

Public String getAltText()

Mutable

Public image getImage()

It is created in off-screen memory and can be modified/ edited

An image created this way initially has all of its pixels set to white, and

Public int getLayout()
you can acquire a graphics object on this image by using the method
Public void setAltText( string altText)
getGraphics() to modify the way it is rendered on screen
Public void setImage(Image img)

Public static Image createImage( int width, int height)
Public void setLayout( int layout)