Application Development for Mobile Devices Lecture4 - GUIs, Study notes of Mobile Computing

Download Application Development for Mobile Devices Lecture4 - GUIs and more Study notes Mobile Computing in PDF only on Docsity!

Lecture 4

Java ME – Building a GUI using

MIDP 2.

S.Kapetanakis & Markus A. Wolf

Based on material from Gill Windall

1 Application Development for Mobile Devices

Contents Device-independence - Abstraction versus Discovery Using the MIDP Screen classes TextBox Screens Commands for user input Alert Screens Images List Screens Forms

Abstraction versus Discovery Abstraction

Simpler coding

Easier to port to new devices

Perhaps more efficient

Use for most parts of

applications

Create using a subclass of

class Screen

Discovery

Able to take advantage of

specific details of particular

devices

Use when necessary e.g.

custom forms like a seating

plan of a theatre for choosing

a seat

Create using a subclass of

class Canvas

MIDP makes it possible to mix both approaches

in one application

Some key classes javax.microedition.lcdui Displayable Screen Canvas Alert List Form TextBox GameCanvas

Markus A. Wolf Full code for previous example import javax.microedition.midlet.; import javax.microedition.lcdui.; public class ShowTextBox1 extends MIDlet { private TextBox mTextBox; public ShowTextBox1() { // create the main TextBox screen mTextBox = new TextBox("Enter a number", "0", 5, TextField.NUMERIC); } protected void startApp() { Display mDisplay = Display.getDisplay(this); mDisplay.setCurrent(mTextBox); } protected void destroyApp(boolean param) {} protected void pauseApp() {} } ShowTextBox1.java 7

Creating Commands Commands allow the user to interact with the application The precise way Commands appear depends on the MIDP implementation (i.e. the device) Added to a screen using addCommand(). mTextBox.addCommand( new Command("Exit", Command.EXIT, 0) ); create an instance of class Command command label command type command display priority (low number = high priority)

Markus A. Wolf

Making the application respond to

Commands

The code to be run when the user selects the Command

must go in the commandAction() method of the object

specified as the Listener e.g.

public class CommandDemo1 extends MIDlet implements CommandListener { ..... public CommandDemo1() { ..... mTextBox.addCommand(new Command("Exit", Command.EXIT, 0)); mTextBox.setCommandListener(this); } public void commandAction(Command c, Displayable d) { if (c.getLabel().equals("Exit")) { notifyDestroyed(); } ….. code run when the command is invoked 10

Example with 3 Commands import javax.microedition.midlet.; import javax.microedition.lcdui.; public class CommandDemo1 extends MIDlet implements CommandListener { private TextBox mTextBox; public CommandDemo1() { mTextBox = new TextBox("Enter a number", "0", 5, TextField.NUMERIC); mTextBox.addCommand(new Command("Exit", Command.EXIT, 0)); mTextBox.addCommand(new Command("Double it", Command.SCREEN, 2)); mTextBox.addCommand(new Command("Square it“, Command.SCREEN, 1)); mTextBox.setCommandListener(this); } protected void startApp() { Display mDisplay = Display.getDisplay(this); mDisplay.setCurrent(mTextBox); } CommandDemo1.java (continued over)

Screen and Command exercise

The next few slides give the skeleton code for a MIDlet with two

TextBox screens. The first screen asks the user to enter their

name. When they select the "Next" command it will display the

second screen which greets them by name (e.g. "Hello Gill").

Both screens have an "Exit" Command that allows the user to quit

the application.

The first screen has a "Next" Command that takes the user to the

second screen

The second screen has a "Back" Command that takes the user

back to the first screen

Complete the code to make the program work as specified.

Screen and Command exercise (continued)

Enter name and

choose "Next”

(mTextBox1)

Second screen

displays welcome

message

(mTextBox2)

"Back" takes you

back to the first

screen

• (^) Hint: there is a is a command type of Command.BACK
• (^) Why does the "Exit" command switch from left to right?

public void commandAction(Command c, Displayable d) { if (c.getLabel().equals("Exit")) { notifyDestroyed(); } if (c.getLabel().equals("Next")) { // add code to handle "Next" command } if (c.getLabel().equals("Back")) { // add code to handle "Back" command here } } protected void destroyApp(boolean param) {} protected void pauseApp() {} } HelloExercise.java

Tickers All screens (in fact in MIDP 2.0 Canvases as well) can have a Ticker which is just a piece of scrolling text e.g.

Ticker ticker = new Ticker("Welcome to the wonderful world of MIDP");

mTextBox.setTicker(ticker);

TickerEg1.java

Alerts

example

public class Alerts1 extends MIDlet implements CommandListener { private Display mDisplay; private Alert mSplashAlert, mAboutAlert; private TextBox mTextBox; public Alerts1() { mTextBox = new TextBox("Alerts1", "", 10, TextField.ANY); mTextBox.addCommand(new Command("Exit", Command.EXIT, 0)); mTextBox.addCommand(new Command("About", Command.SCREEN, 0)); mTextBox.setCommandListener(this); // create the Alert Splash Screen mSplashAlert = new Alert("", " Alert Demonstration program", null, AlertType.INFO); mSplashAlert.setTicker(new Ticker("w e l c o m e")); mSplashAlert.setTimeout(10000); // create the Alert About Screen mAboutAlert = new Alert("About: Alerts1", " Version: 0.1, Jan 2005\n www.whatsit.com", null, AlertType.INFO); mAboutAlert.setTimeout(Alert.FOREVER); } Alerts1.java (continued on next slide)

Alerts example continued protected void startApp() { mDisplay = Display.getDisplay(this); mDisplay.setCurrent(mSplashAlert, mTextBox); } public void commandAction(Command c, Displayable d) { if (c.getLabel().equals("Exit")) { notifyDestroyed(); } if (c.getLabel().equals("About")) { mDisplay.setCurrent(mAboutAlert); } } Alerts1.java screen to display after Alert screen