J2ME User Interface I

Major classes in the lcdui packageTo be discussed in this lecture

TextBox• The simplest type of screen is the TextBox. • TextBox allows the user to enter a string. • Text input is a difficult task on mobile phones.

Many devices only have a numeric keypad, so entering a single character is a matter of one, two, three or four button presses.

• A good MIDlet requires minimal user input.

an email TextBox

TextBox• A TextBox is created by specifying four parameters:

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

• The title is used as the screen title• The text and maxSize determine the initial text and

maximum size of the text box. • The constraints are used to restrict the user's input.

– ANY : allows any type of input.– NUMERIC : restricts the input to integers.– DECIMAL : allows numbers with fractional parts.– PHONENUMBER : requires a telephone number.– EMAILADDR : input must be an e-mail address.– URL : input must be a web address.

TextBox Constraints• The devices don't allow invalid input; for example, a

NUMERIC TextBox doesn't allow you to enter alphabetic characters.

• Constraints may be combined with the flags listed below.

• Constraints limit the behavior of users, while flags define the behavior of the TextBox.

• The available flags are:PASSWORD : characters are not shown when entered;

generally, they are represented by asterisks.

UNEDITABLE : indicates text that cannot be edited.

TextBox FlagsSENSITIVE : indicates that text should not be stored. Some input

schemes store input from the user for later use in autocompletion. This flag indicates that the text should not be saved or cached.

NON_PREDICTIVE : indicates that you are expecting the user to enter text that any text-predicting input scheme will probably not be able to guess. For example, if you're expecting the user to enter an order number like Z51002S, you would use this flag to tell the input scheme to not bother trying to predict the input.

INITIAL_CAPS_WORD : is used for input where each word should be capitalized.

INITIAL_CAPS_SENTENCE indicates input where the first character of each sentence should be capitalized. NOT all of these settings may be functional in all

devices.

TextBox Flags

• The flags may be combined with any of the other constraints using the OR operator ( | ).

• For example, to create a TextBox that asks the user to enter a number password, you would do something like this:

• Displayable d = new TextBox( "PIN", "", 8, TextField.NUMERIC | TextField.PASSWORD);

Password

• Be careful in using PASSWORD. • For every character you enter, the password

field shows an asterisk or some other symbol. • On mobile phones and other small devices,

security is less of a concern because the screens are smaller and much more difficult to read than a typical desktop monitor.

Example: Accept a string from TextBox and echo it

One TextBoxTwo Commands - Exit and GreetOne CommandListener

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

public class TextBoxTest extends MIDlet implements CommandListener { private Display display; private TextBox tbClip; private Command cmExit; private Command cmGreet;

public TextBoxTest() { cmExit = new Command("Exit", Command.EXIT, 0); cmGreet = new Command("Greet", Command.SCREEN, 1);

tbClip = new TextBox("Textbox Test", "", 20, TextField.ANY); tbClip.addCommand(cmExit); tbClip.addCommand(cmGreet); tbClip.setCommandListener(this); }

Example public void startApp() { display = Display.getDisplay(this); display.setCurrent(tbClip); }

public void pauseApp() { }

public void destroyApp(boolean unconditional) { }

public void commandAction(Command c, Displayable s) { if (c == cmExit) notifyDestroyed(); else if (c == cmGreet) System.out.println("Hello " + tbClip.getString()); }}

Alerts

• An Alert is essentially a simple dialog box. There are two types of Alert: – modal, which displays the dialog until acknowledged by the

user, and – timed, which is displayed for a specified number of seconds.

• The constructors for an Alert are shown below:Alert(String title)Alert(String title, String alertText, Image alertImage, AlertType

alertType)• You can specify an image but we will discuss it in later

lecture.

Alerts

• The AlertType class provides five types: ALARM, CONFIRMATION, ERROR, INFO, and WARNING.

• The AlertType component uses sound, rather than an image, to notify the user of an event.

• By default, timed Alerts are created using a default timeout value; you can find out the default value by calling getDefaultTimeout().

• To set the timeout value to five seconds, you could do this:alert.setTimeout(5000);

• If you want a modal alert, use the special value FOREVER:alert.setTimeout(Alert.FOREVER);

Example Five Alerts

• The following example, FiveAlerts, shows all types of alert. • The display has six commands (5 Alerts + 1 Exit).

• The default timeout value is 2000ms = 2 seconds. i.e. The Alert screen will dismiss after 2 seconds.

Example - Five Alerts

• The Error Alert will stay until the user dismiss it.• The Info Alert will stay for on the screen for 4 seconds.• After the alert dismisses, the display will return to the

previous screen public void setCurrent(Alert alert)

or go to next screen if the following setCurrent is used:public void setCurrent(Alert alert, Displayable nextDisplayable)

Example - Five Alertsimport javax.microedition.midlet.*;import javax.microedition.lcdui.*;

public class FiveAlerts extends MIDlet implements CommandListener { private Display disp;

private Form f; private Alert alarm; private Alert confirm; private Alert error; private Alert info; private Alert warning; private Command alarmCommand, confCommand, errCommand, infoCommand, warnCommand, exitCommand; public FiveAlerts() { alarmCommand = new Command("Alarm", Command.SCREEN, 1); confCommand = new Command("Condirm", Command.SCREEN, 1); errCommand = new Command("Error", Command.SCREEN, 1); infoCommand = new Command("Info", Command.SCREEN, 1); warnCommand = new Command("Warning", Command.SCREEN, 1); exitCommand = new Command("Exit", Command.EXIT, 0);

f = new Form("Five Alerts"); f.addCommand(alarmCommand); f.addCommand(confCommand); f.addCommand(errCommand); f.addCommand(infoCommand); f.addCommand(warnCommand); f.addCommand(exitCommand); f.setCommandListener(this);

alarm = new Alert("Alarm", "Your payment is due today.", null, AlertType.ALARM); confirm = new Alert("Confirmation", "Do you want to proceed?", null, AlertType.CONFIRMATION); error = new Alert("Network error", "A network error occurred. Please try again.", null, AlertType.ERROR);

info = new Alert("About", "This program is used to demonstrate use of Alert." + " It will displayed for 4 seconds", null, AlertType.INFO); warning = new Alert("Warning", "Memory is low.", null, AlertType.WARNING);

System.out.println("DefultTimeout = " + alarm.getDefaultTimeout());

error.setTimeout(Alert.FOREVER); info.setTimeout(4000); // display for 4 seconds }

public void startApp() { disp = Display.getDisplay(this); disp.setCurrent(f); }

public void pauseApp() { }

public void destroyApp(boolean unconditional) {}

public void commandAction(Command c, Displayable s) { if (c == alarmCommand) disp.setCurrent(alarm); else if (c == confCommand) disp.setCurrent(confirm); else if (c == errCommand) disp.setCurrent(error, f); else if (c == infoCommand) disp.setCurrent(info, f); else if (c == warnCommand) disp.setCurrent(warning, f); else if (c == exitCommand) notifyDestroyed(); }}

DISMISS_COMMAND - Done• MIDP implementation automatically supply a DISMISS_COMMAND

to dismiss a modal alert. • For example, the Sun's emulator provides a Done command mapped

to a soft button.

• You can replace the default DISMISS_COMMAND by using the addCommand() method.

• When the application first adds a command to an Alert, DISMISS_COMMAND is implicitly removed.

Lists

• Allows the user to select items (called elements) from a list of choices.

• A text string or an image is used to represent each element in the list.

List Types

• List supports the selection of a single element or of multiple elements by using constants in the Choice interface:– EXCLUSIVE - only one element may be selected

(i.e. radio buttons.)– MULTIPLE - multiple elements may be selected

simultaneously.

IMPLICIT Type

• There is a third type called IMPLICIT which is a specific mode of EXCLUSIVE type.

• The IMPLICIT mode is similar to a menu. When a row is selected the application responds by performing some type of action.

IMPLICIT EXCLUSIVE

Creating Lists• To create a List, use the following constructors:

public List(String title, int type) //create an empty listpublic List(String title, int type, String[] stringElements, Image[] imageElements)

• title - the screen's title • listType - one of IMPLICIT, EXCLUSIVE, or MULTIPLE• stringElements - set of strings specifying the string parts

of the List elements• imageElements - set of images specifying the image

parts of the List elements • One of stringElements and imageElements can be null

but not both.

Append and remove elements

• The following List methods is useful in maintaining elements in a list:

• int append(String stringPart, Image imagePart) Appends an element to the List.

• void insert(int elementNum, String stringPart, Image imagePart)

Inserts an element into the List just prior to the element specified.

• void delete(int elementNum) Deletes the element referenced by elementNum.

Selection in IMPLICIT Lists

• Very Similar to Displayable• When the user makes a selection in an

IMPLICIT List, the commandAction() method of the List's CommandListener is invoked.

• A special value, List.SELECT_COMMAND, is passed to commandAction() as the Command parameter.

Determine which element is selected

• For EXCLUSIVE and IMPLICIT lists, the index of the single selected element can be obtained from the following method:– public int getSelectedIndex()

• For MULTIPLE list, you can find out whether a particular element in a List is selected by the following method:– public boolean isSelected(int index)

Example - ImplicitList

Example - ImplicitListimport javax.microedition.midlet.*;import javax.microedition.lcdui.*;

public class ImplicitList extends MIDlet implements CommandListener { private Display display; private List lsDocument; private Command cmExit;

public ImplicitList() { display = Display.getDisplay(this);

// Create the Commands cmExit = new Command("Exit", Command.EXIT, 1);

Example - ImplicitList // Create array of corresponding string objects String options[] = {"Next", "Previous", "New"};

// Create list using arrays lsDocument = new List("Document Option:", List.IMPLICIT, options, null); lsDocument.addCommand(cmExit); lsDocument.setCommandListener(this); }

public void startApp() { display.setCurrent(lsDocument); }

public void pauseApp() { }

public void destroyApp(boolean unconditional) { }

Example - ImplicitList public void commandAction(Command c, Displayable s) { // If an implicit list generated the event if (c == List.SELECT_COMMAND) { switch (lsDocument.getSelectedIndex()) { case 0: System.out.println("Next selected"); break;

case 1: System.out.println("Previous selected"); break;

case 2: System.out.println("New selected"); break; } } else if (c == cmExit) { notifyDestroyed(); } }}

Example - Multiple Selection List

• The select operation does not generate a Command event.

• Need an OK Command to signify the completion of selection.

• Use a loop to check which elements are selected.

Example - MultipleListimport javax.microedition.midlet.*;import javax.microedition.lcdui.*;

public class MultipleList extends MIDlet implements CommandListener { private Display display; private List lsDocument; private Command cmExit; private Command cmOK; private String members[] = {"Peter", "Paul", "Mary", "Tony", "Albert"};

public MultipleList() { display = Display.getDisplay(this);

// Create the Commands cmExit = new Command("Exit", Command.EXIT, 1); cmOK = new Command("OK", Command.OK, 1);

Example - MultipleList // Create list using arrays, add commands, listen for events lsDocument = new List("Team Members:", List.MULTIPLE,

members, null);

lsDocument.addCommand(cmExit); lsDocument.addCommand(cmOK); lsDocument.setCommandListener(this); }

public void startApp() { display.setCurrent(lsDocument); }

public void pauseApp() { }

public void destroyApp(boolean unconditional) { }

Example - MultipleList

public void commandAction(Command c, Displayable s) { if (c == cmOK) { System.out.println("You selected"); for (int i=0; i<members.length; i++) { if (lsDocument.isSelected(i)) System.out.println(members[i]); } } else if (c == cmExit) { notifyDestroyed(); } }}

Images

• MIDP supports PNG images.• This format supports both a transparent color

and lossless compression.

Images• Three methods to obtain an Image object:

– public static Image createImage(String name)– public static Image createImage(byte[] imagedata, int

imageoffset, int imagelength)– public static Image createImage(InputStream stream)

• The first method create an Image from the named file, which should be packaged inside the JAR that contains your MIDlet.

• The second method creates an Image using data in the supplied array.

• The third method creates an Image from an InputStream.

• Images may be mutable or immutable. • Mutable Images can be modified by calling

getGraphics() and using the returned Graphics object to draw on the image. It will be discussed in later lecture.

Use Images in List

• The program is modified from ImplicitList.java.

• The maximum image width and height are 12 pixel in the MIDP emulator.

• Save your images under the folder res.

ImageList.javapublic ImageList() { display = Display.getDisplay(this); cmExit = new Command("Exit", Command.EXIT, 1);

// Create array of corresponding string objects String options[] = {"discuss", "news", "print"}; Image imgs[] = new Image[3]; try { imgs[0] = Image.createImage("/discuss.png");

imgs[1] = Image.createImage("/news.png"); imgs[2] = Image.createImage("/print.png"); } catch (Exception ex) { ex.printStackTrace();

} lsDocument = new List("Document Option:",

List.IMPLICIT, options, imgs);

lsDocument.addCommand(cmExit); lsDocument.setCommandListener(this);}