Basic GUI interface
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,468
On Slideshare
1,468
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
54
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Cosc 4755 Basic GUI interface
  • 2. 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.
  • 3. 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.
  • 4. LCDUI (2)
    • High-level classes
    • Low-level classes
      • Canvas and Graphics from the Displayable interface
        • Pretty much you are expected to “roll your own” .
  • 5. 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
  • 6. 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.
  • 7. 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.
  • 8. 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.
  • 9. 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);
    • }
  • 10. 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
  • 11. 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.
  • 12. Text Box Example
    • import 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) {}
    • }
  • 13. 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
  • 14. 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) {}
    • }
  • 15. 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);
  • 16. 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.
  • 17.
    • 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)
  • 18. 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.
  • 19. 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.
  • 20. 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.
  • 21. 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.
  • 22. 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
  • 23. 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) {}
    • }
  • 24. 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.
  • 25. 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)
  • 26. One large example of a form After “clicking” the alert button Form is larger then the screen size, so it scrolls You can get the source project from the website, FormExample.zip
  • 27. 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();
    • }
  • 28. 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(&quot;Process Completed.&quot;);
    • } catch (InterruptedException Error) {
    • throw new RuntimeException(Error.getMessage());
    • }
    • }
    • }
    • }
  • 29. 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!
  • 30. 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);
  • 31. Ticker example
    • import 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(&quot;Exit&quot;, Command.EXIT,0);
    • s1 = new StringItem(&quot;Where is the Ticker?&quot;, &quot;Hello World&quot;);
    • tick = new Ticker(&quot;This is a Ticker!&quot;);
    • }
    • public void startApp() {
    • form = new Form(&quot;Ticker Example&quot;);
    • 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) {}
    • }
  • 32. 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.
  • 33. Q A &