J2ME User Interface I

Major classes in the lcdui package To 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 Flags SENSITIVE : 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 TextBox Two Commands - Exit and Greet One CommandListener

Example import 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 Alerts import 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 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?", AlertType.CONFIRMATION); error = new Alert("Network error", "A network error occurred. Please try again.", 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.", 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 list public 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 - ImplicitList import 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"); case 2: System.out.println("New selected"); } 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 - MultipleList import 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.java public 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);