07 - J2ME Graphic User interface

We will use the MIDP profile for this part of the tutorial, so let’s start by reviewing the available high level classes we have available:

 

Introduction to User Interfaces

Once we get into the CLDC configuration with the MIDP profile, the following image shows most of the available classes for creating user interfaces. We will see some of them in this tutorial.

Display Class

This class represents the display manager and the input devices. As we mentioned before, every MIDlet has to have at least one Display object. This class can get information about the display of the device and is able to display every object that compounds our user interface.

If we go back to our first MIDlet, we can see the following line:

          myDisplay = Display.getDisplay(this);

We have this line in the MIDlet constructor, which allow us to have this object available as long as the MIDlet is executed. We need to be sure that whenever our application is running we are setting the current display to an object that extends the Displayable class:

          myDisplay.setCurrent(Displayable d);

Displayable Class

This class is an abstract class: public abstract class Displayable and represents each and every screen of our application. Every Display object can have as many Displayable objects as required.

This class has two methods that will allow us to control which screen we want to be visible: getCurrent() and setCurrent().

Command and CommandListener classes

A Command object keeps information about an event; we can think of it a button which allows us to detect an action.

A Command object receives three parameters:

  1. Label: the text that will be shown in screen that uses our Command.
  2. Type: it is an identifier for the type of Command we want to create, the values are static finals from the Command class: BACK, CANCEL, EXIT, HELP, ITEM, OK, SCREEN, and STOP. This type will allow the device to render the Command object with a specific look and feel if possible.
  3. Priority: this will give an order for the AMS for rendering different Command objects. The greater the value, the lower the priority.

So, to create a new Command we need to add a line like the following:

          new Command("OK", Command.OK, 1);

In order for our MIDlet to be able to execute our Command objects, we need our MIDlet to implement the CommandListenerinterface, and by doing this we will need to implement the method: commandAction(Command c, Displayable d). In this method we will define which action to take when an event from the Command c in the object Displayable d is executed.

package my.demo;
import javax.microedition.lcdui.Command;
import javax.microedition.lcdui.CommandListener;
import javax.microedition.lcdui.Display;
import javax.microedition.lcdui.Displayable;
import javax.microedition.lcdui.Form;
import javax.microedition.midlet.MIDlet;
import javax.microedition.midlet.MIDletStateChangeException;
public class HelloWorld extends MIDlet implements CommandListener {
    private Display myDisplay;
    private Form myForm = null;
    private Form myOKForm = null;
    private Command okCommand = new Command("OK", Command.OK, 1);
    private Command exitCommand = new Command("Exit", Command.EXIT,2);
    public HelloWorld() {
        myDisplay = Display.getDisplay(this);
        myForm = new Form("Hello World!!!!");
        myOKForm = new Form ("OK");
    }
    protected void destroyApp(boolean arg0) throws MIDletStateChangeException {
        myDisplay = null;
        myForm = null;
        notifyDestroyed();
    }
    protected void pauseApp() {
    }
    protected void startApp() throws MIDletStateChangeException {
        myDisplay.setCurrent(myForm);
        myForm.addCommand(okCommand);
        myForm.addCommand(exitCommand);
        myForm.setCommandListener(this);
    }     
    public void commandAction(Command c, Displayable d) {
        if (c==exitCommand) {
                try {
                    destroyApp(false);
                } catch (MIDletStateChangeException e) {
                    e.printStackTrace();
                }            
        } else if (c==okCommand) {
            myDisplay.setCurrent(myOKForm);
        }
    }
}

When executing this MIDlet, our initial screen will show something like this:

          

Here we can see our two commands showing the labels we set (Exit and OK). If you select the OK, then the following screen will be shown:

          

If you select Exit, then the MIDlet will be stopped.

Like us on Facebook