Mobile Application Development Using J2ME - AS Nida

Mobile Application Development 

Using J2ME 

User Interface 

Pramote Kuacharoen 

MIDP Applications 

• Many MIDP applications are built to run on many 

different devices without modification 

• User interface is difficult 

– Devices have screens of all sizes, in grayscale and in 

color 

– Devices vary widely in their input capabilities, from 

numeric keypads to alphabetic keyboards, soft keys, 

and even touch screens 

• Minimum requirements 

– Screen size is 96x54 pixels, with at least one bit of 

color depth 

– Input is fairly open ended; devices are expected to 

have some type of keyboard, or a touch screen, or 

possibly both 

Copyright © 2007 Pramote Kuacharoen – All rights reserved. 

2 

1

Designing Application 

• Abstraction 

– Specifying a user interface in abstract terms and 

replying on the MIDP implementation to create 

something concrete 

• Discovery 

– Obtaining the device information at runtime and 

tailoring the user interface programmatically 


User Interface Classes 

• MIDP contains user interface classes in the 

javax.microedition.lcdui and 

javax.microedition.lcdui.game packages 

• The device’s display is represented by an instance 

of the Display class which obtained by the 

getDisplay method 

• The Display’s main purpose is to keep track of what 

is currently shown, which is an instance of 

Displayable 

• Midlets can change the contents of the display by 

passing Displayable instances to the Display’s 

setCurrent method 


3 

4 

2

The Basic Function of a Typical MIDlet 

• Show a Displayable 

• Wait for input 

• Decide what Displayable should be next 

• Repeat 


javax.microeidtion.lcdui 

Screen 

Displayable Class Hierachy 

Displayable 

Canvas 

Alert List Form TextBox 


javax.microeidtion.lcdui.game 

GamesCanvas 

5 

6 

3

Using Display 

• Display manages a device’s screen 

• The getDisplay method obtains the reference to the device’s display 

• Once we have got a reference to a display’s Display, we can create an 

instance of Displayable and pass it to one of the Display’s setCurrent 

methods 

• The getCurrent method returns a reference to what’s currently being 

shown 

• Other methods: numColors, getColor, isColor, isShown, 

getBorderStyle, flashBacklight, vibrate 

public void startApp() { 

Display d = Display.getDisplay(this); 

// more code 

} 

// Requests that a different Displayable object be made visible 

// on the display 

public void setCurrentDisplay(Displayable nextDisplayable) 

// Requests that this Alert be made current, and that nextDisplayable 

// be made current after the Alert is dismissed 

public void setCurrentDisplay(Alert alert, Displayable nextDisplayable) 


Event Handling with Commands 

• A command is an action the user can invoke 

• Every displayable keeps a list of its Commands 

• We can add and remove a command from the Displayable 

// Adds a command to the Displayable 

public void addCommand(Command cmd) 

// Removes a command from the Displayable 

public void removeCommnad(Command cmd) 


7 

8 

4

Commands 

• In MIDP, commands are represented by instances of 

the Command class 

• To create a Command, just supply a name, a type, 

and a priority 

– The name is usually shown on the screen 

– The type is the type of the command 

– The priority is used to determines what command can 

be display when there are more commands than 

available screen space (0 is highest priority) 

• Commands are assigned to two soft buttons in the 

Sun J2ME Wireless Toolkit emulator 

• If there are more than two commands, the second 

soft buttons will be Menu 


Command Types 

Name Meaning 

OK 

CANCEL 

BACK 

STOP 

HELP 

SCREEN 

Creating Commands 

Confirms selection 

Cancels pending changes 

Moves the user back to a previous screen 

Stops a running operation 

Shows application instructions 

Indicates generic type of specific application commands 

Short Label Commands 

Command c = new Command(“OK”, Command.OK, 0); 

Command l = new Commnad(“Launch”, Command.SCREEN, 0); 

Long Label Command 

Command c = new Command(“Run”, “Run simulation”, Command.OK, 0); 

The Command class provides getLabel, getLongLabel, getCommandType methods 


9 

10 

5

Responding to Commands 

• A listener object is notified when the user invokes any 

command in a Displayable 

• The listener is an object that implements the CommandListener 

interface 

• The listener can be registered with a Displayable 

// Registers the listener 

public void setListener(CommandListener l) 

// Required method for classes which implement 

// the interface CommandListener 

public void commandAction(Command c, Displayable s) 


import javax.microedition.midlet.*; 

import javax.microedition.lcdui.*; 

Ex: A Simple Command 

public class Commander extends MIDlet { 

public void startApp() { 

Displayable d = 

new TextBox("Enter Text", "Commander", 

20, TextField.ANY); 

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

d.addCommand(c); 

d.setCommandListener(new CommandListener() { 

public void commandAction(Command c, 

Displayable s){ 

notifyDestroyed(); 

} 

}); 

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

} 

public void pauseApp() {} 

public void destroyApp(boolean unconditional) {} 

} 


11 

12 

6

• All Displayables have a title 

and an optional tickers 

Titles & Tickers 

public void setTitle(String newTitle) 

public String getTitle() 

// Displayable d = ... 

Ticker ticker = new Ticker(“Mobile Application Development”); 

d.setTicker(ticker); 


Screens 

• Screen is the base class for all classes that 

represent generalized user interfaces 

– Alert 

– Form 

– List 

– TextBox 

• This class has no method of its own, but inherits all 

from Displayable 


13 

14 

7

TextBox 

public TextBox(String title, String text, int maxSize, int contstraints) 

TextBox class constaints 

ANY allows any type of input 

NUMERIC restricts the input to integers 

DECIMAL allows numbers with fractional parts 

PHONENUMBER requires a telephone number 

EMAILADDR must be an email address 

URL must be a URL 


TextBox class flags 

PASSWORD 

UNEDITABLE 

SENSITIVE 

NON_PREDICTIVE 

INITIAL_CAPS_WORD 

INITIAL_CAPS_SENTENCE 

Displayable d = new TextBox(“Email”, “”, 64, 

TextField.EMAILADDR | TextField.PASSWORD); 

Alerts 

• An alert is an informative message shown to the user 

– A timed alert is shown for a certain amount of time 

– A modal alert stays up until the user dismisses it 

• When dismissed 

– Advances to the next screen if called the two-argument 

setCurrent method of the Display 

– Back to the previous screen if called the regular oneargument 

setCurrent method 

public Alert(String title) 

public Alert(String title, String alertText, Image alertImage, 

AlertType alertType) 

Alert a = new Alert(“Sorry”, “I’m sorry. I’m afraid you can’t do that.”, 

null, null); 

a.setTimeout(5000); // timed alert 5 seconds 

a.setTimeout(Alert.FOREVER); // modal alert 


15 

16 

8


EXCLUSIVE 

ALARM 

CONFIRMATION 

ERROR 

INFO 

WARNING 

AlertType 

An alert to an event 

A hint to confirm user actions 

An erroneous operation 

A non-threatening information 

A warning 

Lists 

MULTIPLE 


IMPLICIT 

17 

18 

9

Event Handling for IMPLICIT Lists 

• When the user makes a selection in an IMPLICIT list, the 

commandAction method of the list’s CommandListener is 

invoked 

public void commandAction(Command c, Displayable s) { 

if (c == nextCommand) 

// ... 

else if (c == List.SELECTED_COMMAND) 

// ... 

} 


Creating Lists 

• List types 

– List.EXCLUSIVE 

– List.MULTIPLE 

– List.IMPLICIT 

• The stringElements cannot be null, but can have zero elements 

• The imageElements can be null 

public List(String title, int type) 

public List(String title int type, 

String[] stringElements, Image[] imageElements) 


19 

20 

10

Images 

• An Image object is an instance of the 

javax.microedition.lcdui.Image class 

• The image files must be in PNG format 

• The Image class has no constructors 

• Image objects may be mutable and immutable 

public static Image createImage(String name) 

public static Image createImage(byte[] imageData, int imageOffset, 

int imageLength) 

public static Image createImage(InputStream stream) 

public static Image createImage(Image image, int x, int y, 

int width, int height, int transform) 

public static Image createImage(Image source) 

public static Image createImage(int width, int height) 


Editing a List 

• List provides methods for adding items, removing elements, 

and examining elements 

• Appearance of a List can be controlled by using setFitPolicy 

method and setFont method 

public void set(int elementNum, String stringPart, Image imagePart) 

public void insert(int elementNum, String stringPart, Image imagePart) 

public int append(String stringPart, Image imagePart) 

public String getString(int elementNum) 

pubic Image getImage(int elementNum) 

public void delete(int elementNum) 

public void deleteAll() 

public int size() 


Controlling appearance 

setFitPolicy 

TEXT_WRAP_ON 

TEXT_WRAP_OFF 

TEXT_WRAP_DEFAULT 

setFont 

21 

22 

11

List Selections 

• We can find out if the element is selected 

• We can get the selected element’s index 

• We can change the current selection programmatically 

public boolean isSelected(int index) 

public int getSelectedIndex() 

public void setSelectedIndex(int index, boolean selected) 

public int getSelectedFlags(boolean[] selectedArray_return) 

public void setSelectedFlags(boolean[] selectedArray) 


Ex: an Exclusive List 

public class ExclusiveList extends MIDlet implements CommandListener { 

public ExclusiveList(){ 

String[] sElements = { "Airplane", "Car", "Hotel" }; 

mList = new List("Reservation type", List.EXCLUSIVE, sElements, null); 

mNextCommand = new Command("Next", Command.SCREEN, 0); 

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

mList.addCommand(mNextCommand); 

mList.addCommand(mExitCommand); 

mList.setCommandListener(this); 

} 

public void startApp() { Display.getDisplay(this).setCurrent(mList); } 

public void commandAction(Command c, Displayable s) { 

if (c == mNextCommand) { 

int index = mList.getSelectedIndex(); 

Alert alert = new Alert("Your selection", 

"You chose " + mList.getString(index) + ".", 

null, AlertType.INFO); 

Display.getDisplay(this).setCurrent(alert, mList); 

} 

else if (c == mExitCommand) notifyDestroyed(); 

} 

public void pauseApp() {} 

public void destroyApp(boolean unconditional) {} 

private List mList; 

private Command mExitCommand, mNextCommand; 

} 


23 

24 

12

Forms 

• Form is a screen that can include an arbitrary collection of 

user-interface controls, called items 

public Form(String title) 

public Form(String title, Item[] items) 


Managing Items 

• Items may be added and removed, even while the Form is 

showing 

• The append method adds an item to the bottom of the form 

• The set method replaces an item at a specific index 

• The insert method add an item somewhere in the middle of the 

form 

public int append(Item item) 

public int append(String str) 

public int append(Image image) 

public void set(int index, Item item) 

public void insert(int index, Item item) 

public void delete(int index) 

public void deleteAll() 

public int size() 

public Item get(int index) 


25 

26 

13

Items 

• All items that can be added to forms descend from the class 

javax.microedition.lcdui.Item 

• The class has getLabel and setLabel method 

• Items can also have commands, just like Displayables 

• When an Item is selected in a form, the Item’s commands are 

shown along with the commands in the form 

• We can manage the commands on an Item using 

addCommand and removeCommand 

• A command listener may be assigned using the 

setItemCommandListener 

public void commandAction(Command c, Item item) 


Ex: Forms 


27 

28 

14

Layouts 

• Items have a minimum size and a preferred size 

• The Item class includes a layout directive, accessed using 

getLayout and setLayout 

• LAYOUT_2 is a flag to the implementation that the item should 

be laid out using MIDP 2 rules 

The horizontal values: 

LAYOUT_LEFT 

The verticle values: 

LAYOUT_RIGHT 

LAYOUT_TOP 

LAYOUT_CENTER 

LAYOUT_BOTTOM Shrinking and expanding: 

LAYOUT_VCENTER LAYOUT_SHRINK (width) 

LAYOUT_EXPAND (width) 

LAYOUT_VSHRINK (height) 

LAYOUT_VEXPAND (height) 


StringItem 

LAYOUT_NEWLINE_BEFORE 

LAYOUT_NEWLINE_AFTER 

• StringItem represent a simple text label 

• The appearance of both StringItem and ImageItem can be 

controlled using appearance mode 

– PLAIN 

– HYPERLINK 

– BUTTON 

public StringItem(String label, String text) 

public StringItem(String label, String text, int appearanceMode) 

Form form = new Form(“StringItem Test”); 

StringItem stringItem = new StringItem(“Label:”, “Value”); 

form.append(stringItem) 


29 

30 

15

Spacer 

• Spacer represent empty space in a Form 

• Spacer cannot gain focus and cannot have commands 

public Spacer(int minWidth, int minHeight) 


TextField 

• TextField represents an editable string 

TextField class constaints 

ANY allows any type of input 

NUMERIC restricts the input to integers 

DECIMAL allows numbers with fractional parts 

PHONENUMBER requires a telephone number 

EMAILADDR must be an email address 

URL must be a URL 

public TextField(String label, String text, int maxSize, int constraints) 


31 

32 

16

• ItemsItem 

– A label 

– The layout 

– Alternate text 

Layout 

ImageItem 

LAYOUT_CENTER, LAYOUT_DEFAULT, LAYOUT_LEFT, 

LAYOUT_NEWLINE_AFTER, LAYOUT_NEWLINE_BEFORE, 

LAYOUT_RIGHT 

public ImageItem(String label, Image img, int layout, String altText) 

public ImageItem(String label, Image img, int layout, String altText, 

int appearanceMode) 


DateField 

• DateField is an mechanism by which user can enter dates, 

times, or both 

• The DateField is an editor for a java.util.Date 

public DateField(String label, int mode) 

public DateField(String label, int mode, TimeZone timeZone) 

public Date getDate() 

public void setDate(Date date) 


Modes: 

DATE displays an editable date 

TIME displays an editable time 

DATE_TIME displays both date and time 

33 

34 

17

Gauge 

• Gauge represents an integer value 

• The value of a Gauge instance can be retrieved and modified 

with getValue and setValue methods 

• The value runs from to a variable maximum value 

• The maximum for the gauge can be retrieved and modified with 

the getMaxValue and setMaxValue methods 

• The maximum value can be set to INDEFINITE 

• Types 

– Interactive 

– Noninteractive (incremental, continuous) 

public Gauge(String label, boolean interactive, 

int maxValue, int initialValue) 


Ex: Gauges 


Gauge value: 

INCREMENTAL_UPDATING 

INCREMENTAL_IDLE 

CONTINUOUS_RUNNING 

CONTINUOUS_IDLE 

35 

36 

18

ChoiceGroup 

• ChoiceGroup offers a list of choices 

• It is similar to javax.microedition.lcdui.List 

public ChoiceGroup(String label, int choiceType) 

public ChoiceGroup(String label, int choiceType, String[] stringElements, 

Image[] imageElements) 

Choice type: 

MULTIPLE 

EXCLUSIVE 

POPUP 


Responding to Item Changes 

• Most items in a Form fire events when the user changes them 

• The application can listen for these events by registering an 

ItemStateListener with the Form 

• ItemStateListener is an interface with a single method which is 

called every time an item in a Form is changed 

public void setItemStateListener(ItemStateListener iListener) 

// The method in the interface ItemStateListener 

public void itemStateChanged(Item item) 


37 

38 

19

Custom Items 

• A CustomItem is customized by subclassing to introduce new 

visual and interactive elements into Forms 

• Subclasses are responsible for their visual appearance 

including sizing, rendering, choice of colors, fonts, and 

graphics 

protected abstract int getPrefContentWidth(int height) 

protected abstract int getPrefContentHeight(int width) 

protected abstract int getMinContentWidth() 

protected abstract int getMinContentHeight() 

protected abstract void paint(Graphic g, int w, int h) 


Ex: Custom Item 

import javax.microedition.lcdui.*; 

public class SimpleItem extends CustomItem { 

public SimpleItem(String title) { super(title); } 

// CustomItem abstract methods. 

public int getMinContentWidth() { return 100; } 

public int getMinContentHeight() { return 60; } 

public int getPrefContentWidth(int height) { 

return getMinContentWidth(); 

} 

public int getPrefContentHeight(int width) { 

return getMinContentHeight(); 

} 

public void paint(Graphics g, int w, int h) { 

g.drawRect(0, 0, w - 1, h - 1); 

g.setColor(0x000000ff); 

int offset = 0; 

for (int y = 4; y < h; y += 12) { 

offset = (offset + 12) % 24; 

for (int x = 4; x < w; x += 24) { 

g.fillTriangle(x + offset, y, 

x + offset - 3, y + 6, 

x + offset + 3, y + 6); 

} 

} 

} 

} 


39 

40 

20

Custom Item Painting 

• A CustomItem is drawn on the screen in its paint 

method 

• The parameter of Graphic serves two purposes 

– The drawing surface of the CustomItem’s content area 

– Numerous methods for drawing shapes, images, and 

text 

• The paint method is called by the MIDP 

implementation whenever it needs to show the 

custom item on the screen 

• The MIDP implementation also calls other method to 

find out the minimum and preferred sizes when the 

form is being laid out 


Updating the Custom Item Appearance 

• If something needs to change in the custom item’s appearance, 

we can request a refresh by calling the repaint method 

• The MIDP implementation will soon call the paint method again 

protected void repaint() 

protected void repaint(int x, int y, int width, int height) 


41 

42 

21

Appearance Consistency 

• Two methods return information that can help we make our 

item’s appearance consistent with the device’s look and feel 

– The getColor method in the Display class 

– The getFont method in the Font class 

public void paint(Graphic g, int w, int h) { 

// Display d = ... 

int fhc = d.getColor(Display.COLOR_HIGHLIGHT_FOREGROUND); 

g.setColor(fhc); 

// Draw stuff 

} 

public int getColor(int colorSpecifier) 

public static Font getFont(int fontSpecifier) 

FONT_STATIC_TEXT 

FONT_INPUT_TEXT 


COLOR_BACKGROUND, COLOR_BORDER, 

COLOR_FOREGROUND, 

COLOR_HIGHLIGHTED_BACKGROUND, 

COLOR_HIGHLIGHTED_BORDER, 

COLOR_HIGHLIGHTED_FORGROUND 

Showing, Hiding, and Sizing 

• When a CustomItem is made visible, even partially 

visible, its showNotify method is called 

• The subsequent call to the paint method to render 

the item 

• The hideNotify is called when the item is no longer 

visible 

• The sizeChanged method is called with the new 

width and height of the content area when the 

containing Form gets laid out again 

• If the custom item need a different size, it should call 

the invalidate method 


43 

44 

22

Handling Events 

• A CustomItem can respond to keyboard and pointer events by 

overriding the related methods 

• Devices have varying capabilities and some may not be able to 

deliver certain types of events to CustomItems 

• Custom items can use the getInteractionModes method to find 

out the capabilities of the device at runtime 

protected void keyPressed(int keyCode) 

protected void keyReleased(int keyCode) 

protected void keyRepeated(int keyCode) 

protected void pointerPressed(int x, int y) 

protected void pointerReleased(int x, int y) 

protected void pointerDragged(int x, int y) 


Item Traversal 

KEY_NUM0 – KEY_NUM9 

KEY_POUND 

KEY_STAR 

• Forms support a concept of focus (one item in the form is 

currently selected) 

• Traversal refers to the user being able to shift focus from one 

item to another 

protected boolean traverse(int dir, int viewportWidth, int viewportHeight, 

int [] visRect_inout) 

protected void traverseOut() 


45 

46 

23

Mobile Application Development Using J2ME - AS Nida

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?