Cosc 4755

Basic GUI interface

Background

Java SE using AWT (Abstract Windowing Toolkit) and SWING, while JavaME using MIDP

AWT and Swing are for desktop computers, windows elements with higher resolution, then mobile phone's screens

They work with pointing devices that mostly don't exist on mobile phones

Lots of Windows management and overlapping windows, which again, either don't exist or is just impractical in most mobile phones.

Runtime events like mouse-move, button-click, that on limited processing power and memory of mobile devices, are just to much to process or not necessary.

LCDUI

javax.microedition.lcdui (LCD UI) provides the User Interface javax.microedition.lcdui.game which is the game

package. It's divided into two groups

High-level Target maximum number of devices. Heavily abstracted

and provide minimal control over the look and feel. Let each device manage it.

Low-Level Maximum control, but at the cost of portability.

LCDUI (2)

High-level classes

Low-level classes Canvas and Graphics from the Displayable

interface Pretty much you are expected to “roll your own” .

A Note

• Remember, GUI interfaces are event driving• There are objects, such a textbox and their like and

the user “does something” and your code responses to an event.• Most GUI code has an initial setup to display the GUI

interface and then waits for the user to do something (likely the event calls a predetermined method/subroutine).

• If you have never worked with a GUI before this can be confusing.

• Also TouchScreen events for high level classes are supported without any extras

High-level classes

Alert Similar in nature to message box you see in many

applications. Normally information, error messages, confirmation.

Alert myalert = new Alert(“My Alert”); Default constructor takes a string which is the title. Second constructor, takes alert(“Title”, “Alert

Message”, Image, AlertType) Note Title can't be changed once it is set. Other values

can be changed by method calls.

Alerts

You can use the setTimeout(int time) in milliseconds for how long to display or pass Alert.Forever to make the alert a modal dialog.

AlertType: ALARM, CONFIRMATION, ERROR, INFO, WARNING Can use playsound() to have the phone play a

sound as well. AlertType.INFO.playSound(Display myDisplay) may play the info sound.

You can also set an indicator with the alert, using setIndicator(Gauge gauge); We come back to Gauge method within Forms.

Alerts (2)

Commands can also be added/removed to alerts addCommand(Command cmd) removeCommand(Command cmd) setCommandListerner(CommandListener listener)

This will change the default behavior of an alert from timeout to modal, waiting for a user action.

We'll come back to commands later on, since every object can have a command.

HelloWorld3

public class HelloMIDlet extends MIDlet {

public void startApp() {

//System.out.println("Hello World");

Display mydis = Display.getDisplay(this);

Alert myalert = new Alert("Alert!", "Helloworld",null,AlertType.INFO);

AlertType.INFO.playSound(mydis);

mydis.setCurrent(myalert);

}

…

TextBox

• Both to display text and receive input

• TextBox txtBox1 = new TextBox(“Title”, “text to display”, length of field or text to display, Is it editable);

• If the textbox is receiving input, then “text to display” is likely blank, and length of field is how long the data can be.

• “Is it editable” takes some constants from TextField• 0 no editabled. Or TextField.UNEDITABLE

• TextField.ANY accept any kind of input

TextBox (2)

•Constants

•ANY (anything)

•DECIMAL (numbers like -1.23)

•EMAILADDR (email address)

•NUMERIC (only digits)

•PASSWORD (obscured view)

•URL (url address)

•The constants can be combined with bit-wise AND (&)

•TextField.NUMERIC & TextField.PASSWORD

•So you have a password that can be only numbers, which is obscured.

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

public class HelloMIDlet extends MIDlet { private TextBox txtBox1;

public HelloMIDlet() { txtBox1 = new TextBox(

"HelloWorld", "Hi there", 8, 0); }

public void startApp() {//System.out.println("Hello World"); Display.getDisplay(this).setCurrent(txtBox1); }

public void pauseApp() {}

public void destroyApp(boolean unconditional) {}

}

List

• Lists contains one or more choices

• The list can be MULTIPLE, EXCLUSIVE, or IMPLICIT

• The constructor has either the title and listType, or title, listType, string[] that is the elements, and optional Image[]);

• Elements can be added with insert, or append the end of the list with append.

• An element is removed with delete, or deleteAll() removes all elements

List Example

import javax.microedition.midlet.*;

import javax.microedition.lcdui.*;

public class HelloMIDlet extends MIDlet {

private List mylist;

public HelloMIDlet() {

String entry[] = {"Fred", "Jim", "Steve"};

mylist = new List("Choose a person", Choice.IMPLICIT,entry,null);

}

public void startApp() {

//System.out.println("Hello World");

Display.getDisplay(this).setCurrent(mylist);

}

public void pauseApp() {}

public void destroyApp(boolean unconditional) {}

}

Command

A command can be added to most gui objects. addCommand(Command cmd) removeCommand(Command cmd) setCommandListerner(CommandListener listener)

• These are needed to respond to events.

• An example, exit the app• exitCommand = new Command("Exit", Command.EXIT,

0);

• addComand(exitCommand);

• setCommandListener(this);

Command (2)

• setCommandListener(this);

• This implies that there is a method

public void commandAction(Command c, Displayable s) {

if (c == exitCommand) {

destroyApp(false);

notifyDestroyed();

}

}

• When an event is triggered, commandAction is called.

• Adding multiple commands, adds them to a menu.

public class HelloMIDlet extends MIDlet implements CommandListener{

private TextBox txtBox;

private Command done, help, cancel ;

public HelloMIDlet() {

txtBox = new TextBox("Hello World", "Hi there",8,0);

done = new Command("Exit", Command.EXIT,0);

help = new Command("Help",Command.HELP,1);

cancel = new Command("Cancel",Command.CANCEL,1);

}

public void startApp() {

txtBox.addCommand(done);

txtBox.addCommand(help);

txtBox.addCommand(cancel);

txtBox.setCommandListener(this);

Display.getDisplay(this).setCurrent(txtBox);

}

public void commandAction(Command c, Displayable s) {

if (c == done) {

notifyDestroyed();

} else if (c == help) {

//code for help

} else if (c == cancel){

//code for cancel

}

}

Command (2)

Form

• A Form is a collection of instances of the Items interface.

• TextBox, List can work as a standalone UI element.

• But do more interesting GUI, we need a Form

• Comes with the following subclasses

• ChoiceGroup, CustomItem, DateField, Gauge, ImageItem, Spacer, StringItem, TextField

• TextField: Same as a TextBox.

• ChoiceGroup: Same as a List.

Form (2)

• StringItem: A label that cannot be modified by the user. This item may contain a title and text, both of which may be null to allow it to act as a placeholder.

• ImageItem: An item that holds an image.

• Form class provides a shortcut for adding a StringItem and ImageItem, without a title: append(String text or Image image)

• DateField: Allows the user to enter date/time in one of three formats: DATE, TIME, or DATE_TIME.

Form (3)

• Spacer: Used for positioning UI elements by putting some space between them.

• This element is an invisible UI element and can be set to a particular size.

• Gauge: A gauge is used to simulate a progress bar. It can also be used interactively by the user.

Form (4)

• CustomItem: CustomItem is an abstract class that allows the creation of subclasses that have their own appearances, their own interactivity, and their own notification mechanisms.

• If you require a UI element that is different from the supplied elements, you can subclass CustomItem to create it for addition to a form.

gauge

• Guage is like a progress bar, except it can also be interactive, example, a volume control.

• guage(String Label, boolean interactive, int maxValue, int initialValue)

• So a volume control might look like this:

• g = new guage(“Volume”, true, 10, 5);• interactive, current volume is 5 and max volume is 10.

• commands can be added so the app knows about user events from the gauge

• see gauge in the link for commands http://java.sun.com/javame/reference/apis/jsr118/constant-values.html#javax.microedition.lcdui.Command.ITEM

gauge example

import javax.microedition.midlet.*;import javax.microedition.lcdui.*;public class HelloMIDlet extends MIDlet implements CommandListener{ private Gauge g1, g2; private Command done; private Form form; public HelloMIDlet() { done = new Command("Exit", Command.EXIT,0); g1 = new Gauge("Interactive", true, 10, 5); g2 = new Gauge("Not Interactive", false, 100, 40); }public void startApp() { form = new Form("GuageExample"); form.addCommand(done); form.append(g1); form.append(g2); Display.getDisplay(this).setCurrent(form);}public void commandAction(Command c, Displayable s) { if (c == done) { destroyApp(false); notifyDestroyed(); }}public void pauseApp() {}

public void destroyApp(boolean unconditional) {}}

StringItem

• A stringItem can be use a string

• But it has a appearance setting

• Item.PLAIN, Item.HYPERLINK, Item.BUTTON

• So if you need button, use a stringItem and change it’s appearance.

• Button example:

• stringItem button = new stringItem(null,”OK”, ITEM.BUTTON);

• You will need a ItemCommandlistener to respond to the event.

A Note

• Form commands

• You’ll need to implement CommandListener• public void commandAction(Command c, Displayable s)

• When Items are changed you need ItemStateListener

• public void itemSateChanged(Item i)

• Item commands

• You’ll need to implement ItemCommandListener• public void commandAction(Command cmd, Item item)

One large example of a form

After “clicking” the alert buttonForm is larger then the screen size, so it scrolls

You can get the source project from the website, FormExample.zip

Example Form Code

import javax.microedition.midlet.*;import javax.microedition.lcdui.*;public class HelloMIDlet extends MIDlet implements CommandListener, ItemCommandListener, ItemStateListener { private Form form; private Display display; private Gauge g1, g2; private Command done, button; private ImageItem image; private Spacer space; private TextField txt; private DateField date; private StringItem s1, s2; private ChoiceGroup list; private Alert alert;

public HelloMIDlet() { display = Display.getDisplay(this); done = new Command("Exit", Command.EXIT,0); button = new Command("button",StringItem.BUTTON,0); s1 = new StringItem("StringItem", "Hello World"); s2 = new StringItem("button alert","Alert!",Item.BUTTON); s2.setDefaultCommand(button); s2.setItemCommandListener(this); txt = new TextField("Enter:", "Name", 10, TextField.ANY); g1 = new Gauge("Interactive", true, 10, 5); g2 = new Gauge(null, false, 100, 0); space = new Spacer(10,10); date = new DateField("Today is", DateField.DATE); list = new ChoiceGroup("Sound:", Choice.EXCLUSIVE, new String[ {"Information", "Confirmation", "Warning", "Alarm","Error"}, null); try { image = new ImageItem("Picture:",Image.createImage("/pic.jpg"), ImageItem.LAYOUT_DEFAULT, "phone"); } catch(Exception e) {} }

public void startApp() { form = new Form("Form Example"); form.append(s1); //add stringitem form.append(txt); //add textfield form.append(g1); //add interactive gauge form.append(space); //add a spacer form.append(date); //add datefield form.append(list); //add choicegroup form.append(s2); //add stringitem button if (image != null) { form.append(image);} //if image loaded, add it. form.addCommand(done); //add exit command form.setItemStateListener(this); //add listener for all items form.setCommandListener(this); //add listener for exit command display.setCurrent(form); //now display the form }public void commandAction(Command c, Displayable s) { if (c == done) { destroyApp(false); notifyDestroyed(); }}public void commandAction(Command cmd,Item item) { if(cmd==button && item==s2) {

callalert(); //call code for alert and second gauge. } }public void callalert() { alert = new Alert("Alert!","Processing ...",null, AlertType.INFO); alert.setIndicator(g2); alert.setTimeout(Alert.FOREVER); display.setCurrent(alert, form); new Thread(new GaugeUpdater()).start();}

Example Form Code (2)

public void itemStateChanged(Item i) { if (i == list) {//only dealing with choicegroup select. switch (list.getSelectedIndex()){ case 0: AlertType.INFO.playSound(display); break; case 1: AlertType.CONFIRMATION.playSound(display); break; case 2: AlertType.WARNING.playSound(display); break; case 3: AlertType.ALARM.playSound(display); break; case 4: AlertType.ERROR.playSound(display); break; } }}public void pauseApp() {}

public void destroyApp(boolean unconditional) {}

class GaugeUpdater implements Runnable { //this is a thread to update gauge. public void run() { try { while (g2.getValue() < g2.getMaxValue()) { Thread.sleep(1000);//1 second g2.setValue(g2.getValue() + 10); } alert.setString("Process Completed."); } catch (InterruptedException Error) { throw new RuntimeException(Error.getMessage()); } } }}

A Note on Threads.

• In JavaME,

• Threads should be limited in their use and operations. Remember, limited power, limited memory devices. The number of threads maybe much more limited then in JavaSE

• In General

• Never put your main Thread to sleep, because the GUI will not redraw!

Ticker

• Another interesting GUI item is a ticker. “ticker-tape” or text that scrolls across the screen (top or bottom).

• Form.setTicker(Ticker t);

• It’s very simple object.

• Constructor: Ticker(String str);

• String = getString();

• setString(String str);

Ticker exampleimport javax.microedition.midlet.*;import javax.microedition.lcdui.*;public class HelloMIDlet extends MIDlet implements CommandListener { private Form form; private Display display; private Command done; private StringItem s1; private Ticker tick; public HelloMIDlet() { display = Display.getDisplay(this); done = new Command("Exit", Command.EXIT,0); s1 = new StringItem("Where is the Ticker?", "Hello World"); tick = new Ticker("This is a Ticker!"); }public void startApp() { form = new Form("Ticker Example"); form.setTicker(tick); form.append(s1); //add stringitem form.addCommand(done); //add exit command form.setCommandListener(this); //add listener for exit display.setCurrent(form); //now display everything.}public void commandAction(Command c, Displayable s) { if (c == done) { destroyApp(false); notifyDestroyed(); }}public void pauseApp() {}public void destroyApp(boolean unconditional) {}}

Next time

• Blackberry and Android programming.

• Still JavaMe, but with many extensions.

• Both come with a lot more class and features.• including missing classes/objects from Java.

QA&