The user interface of the application is one of the
most important elements in programming an application. The user interface
should be designed keeping in mind the ease of use and clarity of display to the
user. The Mobile Information Device Profile (MIDP) provides the
javax.microedition.lcdui package which contains two kinds of user interface
elements, namely: § High Level User Interface The high level user interface contains the screens like Form, Alert, List and TextBox. It also contains Items which can be appended to the form. The advantage with the high level interface is that it is easier to program and the look and feel of the application’s user interface remains the same as that of the native code applications if they use the high level user interface. Thus the user will find it easier to operate the applications using high level interface as the elements of the high level interface will behave in the way a user is accustomed to use other applications like phonebook, scheduler etc. BEST PRACTICE As the look and feel of the high level interface changes from device to device never rely on the high level interface to behave similarly on all devices. For example the Ticker will generally move from right to left on most devices but in SonyEricsson T610 it moves vertically not horizontally, a very big difference!
Thus always use low level interface with the ‘SKJ UI Portability Technique’ (Explained in my earlier book ‘Mobile Phone Programming’) when you want to be cent percent sure of the behavior of your application. § Low Level User Interface Low level user interface consists of the Canvas, Graphics and the Font class. Through the use of these classes we can control the user display very finely. We can draw different elements like line, rectangle, arc and text. We will discuss more about the low level user interface in the next chapter titled ‘How to work with Low Level Graphics’.
All the screens like Form, Alert, List and TextBox have a common super class named Screen. The programmer can use the different screens for displaying data and getting user inputs in a portable way. The Screen class also provides the support for setting a Ticker, which could be used for various purposes. We will now discuss all the 4 types of screens in detail.
Form is the user interface screen which has been primarily built for editing and displaying multiple types and forms of data. Form is a sub class of screen that can contain the following types of Items: · Gauge · StringItem · ImageItem · TextField · ChoiceGroup · DateField  Therefore any sub class of the Item class can contained within the form. Thus a form can act as the container for gauges, images, text, lists and dates. Also being a subclass of the Screen, Ticker could also be set to a Form. All the items contained within a form can also be referred to by their indexes. The index of the first item is 0 and that of the last index is the number of items in the form reduced by one. The example code for using forms has not been given here separately as the construction of forms and appending them with items is there in the code examples for each type of Item.
The Alert helps in display of important data to the application user. The programmer can also set the time for which the Alert should wait before moving to the next displayable screen. The 5 types of Alert that are there are defined in the class ‘AlertType’. Alerts are very good in giving information about the errors and other exceptions to the users. In fact you can say that they are the dialog boxes for the mobile phones. To make an alert modal, use the following statement: · setTimeOut(Alert.FOREVER) There are five types of Alerts: · Alarm · Conformation · Error · Info · Warning  Apart
from defining the different types of Alerts for different situations the MIDP
has also given the option of showing any image inside an Alert. This image has
to be provided by the developer. You can use the images in all kinds of Alerts.
We shall now look at the practical code for the construction of all types of
Alerts. Example of Alert (Alarm) /*
* AlertMIDlet.java
*/
import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;
/**
* * @author SKJ * @version 1.0.0
*/
public class AlertAlarmMIDlet extends javax.microedition.midlet.MIDlet
{
private Display display ;
private Alert alert ;
private Form form ;
public AlertAlarmMIDlet()
{
this.form = new Form( "NextFormDisplay" ) ;
}
public void startApp()
{
this.display = Display.getDisplay( this ) ;
this.alert = new Alert("AlertTitle","AlertAlarmDemo",null,AlertType.ALARM) ;
this.display.setCurrent(this.alert,this.form) ;
}
public void pauseApp()
{
}
public void destroyApp(boolean unconditional)
{
}
}Emulator used for taking screen shot : Nokia 6650
Example of Alert (Confirmation) /*
* AlertConfirmationMIDlet.java
*/
import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;
import java.io.IOException ;
/**
* @author SKJ * @version 1.0.0
*/
public class AlertConfirmationMIDlet extends javax.microedition.midlet.MIDlet
{
private Display display ;
private Alert alert ;
private Form form ;
private Image image ;
public AlertConfirmationMIDlet()
{
this.form = new Form( "NextFormDisplay" ) ;
}
public void startApp()
{
this.display = Display.getDisplay( this ) ;
try
{
this.image = Image.createImage( "/res/Ball.png" ) ;
}
catch(IOException e)
{
this.display.setCurrent(new Alert("in Constructor ")) ;
}
this.alert = new Alert( "AlertConfirmation","After 5 sec. you
will move to the next form",this.image,AlertType.CONFIRMATION ;
this.alert.setTimeout( 5000 ) ;
this.display.setCurrent(this.alert,this.form) ;
}
public void pauseApp()
{
}
public void destroyApp(boolean unconditional)
{
}
}Emulator used for taking screen shot : Nokia 6650
Example of Alert (Error)
/*
* AlertErrorMIDlet.java
*/
import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;
import java.io.IOException ;
/**
*@author SKJ
* @version 1.0.0
*/
public class AlertErrorMIDlet extends javax.microedition.midlet.MIDlet
{
private Display display ;
private Alert alert ;
private Form form ;
private Image image ;
public AlertErrorMIDlet()
{
this.form = new Form( "NextFormDisplay" ) ;
}
public void startApp()
{
this.display = Display.getDisplay( this ) ;
try
{
this.image = Image.createImage( "/res/Ball.png" ) ;
}
catch(IOException e)
{
this.display.setCurrent(new Alert("in Constructor ")) ;
}
this.alert = new Alert( "AlertError","After 3 sec. you will
move to the next form",this.image,AlertType.ERROR ) ;
this.alert.setTimeout( 3000 ) ;
this.display.setCurrent(this.alert,this.form) ;
}
public void pauseApp()
{
}
public void destroyApp(boolean unconditional)
{
}
}Emulator used for taking screen shot : Nokia 6650
Example of Alert (Info) /*
* AlertInfoMIDlet.java
*/
import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;
import java.io.IOException ;
/**
* @author SKJ * @version 1.0.0
*/
public class AlertInfoMIDlet extends javax.microedition.midlet.MIDlet
{
private Display display ;
private Alert alert ;
private Form form ;
private Image image ;
public AlertInfoMIDlet()
{
this.form = new Form( "NextFormDisplay" ) ;
}
public void startApp()
{
this.display = Display.getDisplay( this ) ;
try
{
this.image = Image.createImage( "/res/Ball.png" ) ;
}
catch(IOException e)
{
this.display.setCurrent(new Alert("in Constructor ")) ;
}
this.alert = new Alert( "AlertInfo","After 3 sec. you will move
to the next form",this.image,AlertType.INFO) ;
this.alert.setTimeout( 3000 ) ;
this.display.setCurrent(this.alert,this.form) ;
}
public void pauseApp()
{
}
public void destroyApp(boolean unconditional)
{
}
}Emulator used for taking screen shot : Nokia 6650
Example of Alert (Warning) /*
* AlertWarningMIDletSuite.java
*/
import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;
import java.io.IOException ;
/**
* @author SKJ * @version 1.0.0
*/
public class AlertWarningMIDlet extends javax.microedition.midlet.MIDlet
{
private Display display ;
private Alert alert ;
private Form form ;
private Image image ;
public AlertWarningMIDlet()
{
this.form = new Form( "NextFormDisplay" ) ;
}
public void startApp()
{
this.display = Display.getDisplay( this ) ;
try
{
this.image = Image.createImage( "/res/Ball.png" ) ;
}
catch(IOException e)
{
this.display.setCurrent(new Alert("in Constructor ")) ;
}
this.alert = new Alert( "AlertWarning","Click OK to move to the
next form. Modal Alert",this.image,AlertType.WARNING) ;
this.alert.setTimeout( Alert.FOREVER ) ;
this.display.setCurrent(this.alert,this.form) ;
}
public void pauseApp()
{
}
public void destroyApp(boolean unconditional)
{
}
}Emulator used for taking screen shot : Nokia 6650
A List is a user interface element that is used to display options on the mobiles phone. The List is the mobile phone equivalent of the desktop’s ListBox and ComboBox. The lists can be used for displaying menu options. Lists are of the following 3 types: · IMPLICIT The IMPLICIT list offers a very convenient way for construction of menus and simple lists. It also gives the programmer an automatic command i.e. ‘public static final Command SELECT_COMMAND’. This Command enables the programmer to know whether the user has selected an element of the List. The events generated by this Command could be used of like that of any other normal command. For knowing which particular option has been selected in an IMPLICIT List use ‘public int getSelectedIndex ()’ method. · EXCLUSIVE In an EXCLUSIVE List the user has the option to choose one out of many elements. For knowing which particular option has been selected in an EXCLUSIVE List use ‘public int getSelectedIndex ()’ method. · MULTIPLE In a MULTIPLE List the user can choose many options at the same time from the List. To know the selection status of different options in a MULTIPLE List use ‘public int getSelectedFlags (boolean[] selectedArray_return)’ method. This method returns a boolean array containing the status of each element of the ‘multiple’ List. If the element is in the selected state then the corresponding variable in the boolean array returned by this method is in ‘true’ state otherwise it is in the false state.  LIST EXCLUSIVE  LIST MULTIPLE Example of List (IMPLICIT) /*
* ListDemoMIDlet.java
*/
import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;
/*
* @author SKJ
* @version 1.0.0
*/
public class ListDemoMIDlet extends javax.microedition.midlet.MIDlet implements CommandListener
{
private Display display ;
private List list ;
public ListDemoMIDlet()
{
this.list = new List(" Screen Title",List.IMPLICIT ) ;
this.list.append( "List1", null ) ;
this.list.append( "List2", null ) ;
this.list.append( "List3", null ) ;
this.list.append( "List4", null ) ;
this.list.append( "List5", null ) ;
this.list.setCommandListener( this ) ;
}
public void startApp()
{
this.display = Display.getDisplay( this ) ;
this.display.setCurrent( this.list ) ;
}
public void pauseApp() {
}
public void destroyApp(boolean unconditional)
{
}
public void commandAction( Command comm, Displayable disp )
{
if (disp == this.list )
{
if ( comm == List.SELECT_COMMAND )
{
if( this.list.getSelectedIndex() == 0 )
{
this.list.setTitle("List1 Clicked") ;
}
else if( this.list.getSelectedIndex() == 1 )
{
this.list.setTitle("List2 Clicked") ;
}
else if( this.list.getSelectedIndex() == 2 )
{
this.list.setTitle("List3 Clicked") ;
}
else if( this.list.getSelectedIndex() == 3 )
{
this.list.setTitle("List4 Clicked") ;
}
else if( this.list.getSelectedIndex() == 4 )
{
this.list.setTitle("List5 Clicked") ;
}
}
}
}
}Emulator used for taking screen shot : Nokia Series 60
Example of List (MULTIPLE) /*
* ListMultipleMIDlet.java
*/
import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;
/**
* @author SKJ * @version 1.0.0
*/
public class ListMultipleMIDlet extends javax.microedition.midlet.MIDlet implements CommandListener
{
private Display display ;
private List list ;
private Command ok ;
private Command back ;
private boolean[] bool ;
private Form form ;
public ListMultipleMIDlet()
{
this.list = new List(" Screen Title",List.MULTIPLE ) ;
this.ok = new Command("OK",Command.OK,1) ;
this.back = new Command("Back",Command.BACK, 1) ;
//this.alert = new Alert("")
this.list.append( "List1", null ) ;
this.list.append( "List2", null ) ;
this.list.append( "List3", null ) ;
this.list.append( "List4", null ) ;
this.list.append( "List5", null ) ;
this.bool = new boolean[ this.list.size()] ;
this.list.addCommand( this.ok ) ;
this.list.setCommandListener( this ) ;
}
public void startApp()
{
this.display = Display.getDisplay( this ) ;
this.display.setCurrent( this.list ) ;
}
public void pauseApp() {
}
public void destroyApp(boolean unconditional)
{
}
public void commandAction( Command comm, Displayable disp )
{
this.list.getSelectedFlags( this.bool ) ;
if ( disp == this.list )
{
if( comm == this.ok )
{
// creating the form here so that it will add item on every
// action. Won't keep the previous item
this.initForm() ;
for ( int i = 0; i < this.list.size(); i++ )
{
if ( this.bool[i] == true )
{
this.form.append( "ITEM " + i + "\n" ) ;
}
}
}
this.display.setCurrent(this.form) ;
}
else if ( disp == this.form )
{
if ( comm == this.back )
{
this.display.setCurrent(new Alert("","Setting the
list...",null,AlertType.INFO),this.list ) ;
this.list.setSelectedIndex(0,false) ;
}
}
}
public void initForm()
{
this.form = new Form( "MultipleListDemo" ) ;
this.form.addCommand( this.back ) ;
this.form.setCommandListener( this ) ;
}
}Emulator used for taking screen shot : Nokia Series 60
Example of List (Exclusive) /*
* ListExclusiveMIDlet.java
*/
import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;
import java.io.IOException ;
/**
* @author SKJ
* @version 1.0.0
*/
public class ListExclusiveMIDlet extends javax.microedition.midlet.MIDlet implements CommandListener
{
private Display display ;
private List list ;
private Form form ;
private Command listOK ;
private Command formBack ;
private boolean[] bool ;
public ListExclusiveMIDlet()
{
initListCommand() ;
this.initList() ;
}
public void startApp()
{
this.display = Display.getDisplay( this ) ;
this.display.setCurrent( this.list ) ;
}
public void pauseApp()
{
}
public void destroyApp(boolean unconditional)
{
}
public void commandAction( Command comm, Displayable disp )
{
this.list.getSelectedFlags( this.bool ) ;
if (disp == this.list )
{
if ( comm == this.listOK )
{
this.initForm() ;
for ( int i=0; i<this.list.size();i++ )
{
if (this.bool[i] == true )
{
this.form.append( "Item" + i + "\n" ) ;
}
}
//this.display.setCurrent(new Form( "List Action Event
//Generating the FORM")) ;
}
this.display.setCurrent( new Alert("","Wait... for 2
sec",null,AlertType.INFO),this.form ) ;
}
else if ( disp == this.form )
{
if ( comm == this.formBack )
{
this.display.setCurrent( new Alert("","Wait... for 2
sec",null,AlertType.INFO),this.list ) ;
}
}
}
private void initListCommand()
{
this.listOK = new Command("OK",Command.OK,2) ;
}
private void initFormCommand()
{
this.formBack = new Command( "Back",Command.BACK,2) ;
}
// Initializing the list here
private void initList()
{
this.initListCommand() ;
this.list = new List(" Screen Title",List.EXCLUSIVE ) ;
this.list.append( "List1", null ) ;
this.list.append( "List2", null ) ;
this.list.append( "List3", null ) ;
this.list.append( "List4", null ) ;
this.list.append( "List5", null ) ;
this.initBool() ;
this.list.addCommand( this.listOK ) ;
this.list.setCommandListener( this ) ;
}
private void initForm()
{
this.form = new Form( "ListExclusiveDemoForm" ) ;
this.initFormCommand() ;
this.form.addCommand( this.formBack ) ;
this.form.setCommandListener( this ) ;
}
private void initBool()
{
this.bool = new boolean[this.list.size()] ;
}
}Emulator used for taking screen shot : Nokia Series 60
The TextBox is a screen which lets the users input and edit the data. This screen is the mobile equivalent to desktop’s TextBox. The constructor for the TextBox takes the value for the capacity, which is the maximum number of characters that can be stored in the TextBox at any time. Also the phone may pose a maximum capacity i.e. the capacity which can be the maximum for this TextBox. A good application should normally take this in to account. The getMaxSize () method could be used to have the value of the maximum permissible capacity allowed by the mobile phone implementation environment. A TextBox can have these input constraints. They are as follows: · public static final int ANY · public static final int CONSTRAINT_MASK · public static final int EMAILADDR · public static final int NUMERIC · public static final int PASSWORD · public static final int PHONENUMBER · public static final int URL The implementation environment of the device restricts a user’s input based on these constraints. These input constraints are very useful in certain situations like when a user wants to enter the phone number. In this case if the TextBox’s input constraint is ‘NUMERIC’ then when the user will type on the key pad the input will automatically be the number printed on that key. The alphabets printed on the key will not form part of the input. Thus the user is saved from the hassle of repeatedly clicking on the same key to input a number. Thus the input constraints should be used based on the task for which the TextBox is being initialized. Note The TextBox is visually very similar to TextField. The only difference is that it has the features of a Screen and not the Item class.
The Item class defines the basic functionality of the elements that can be appended to the Form or Alert. There are 6 types of items which have been defined in the MIDP 1.0 specification. These 6 types of items provide wide ranging functionality. The following are the types of items defined by MIDP 1.0 specification:
ChoiceGroup DateField Gauge
ImageItem StringItem TextField
Emulator used for screenshot : Nokia 6650
Items normally have a label. This label value should normally be given but it is not compulsory to give it and a null value in place of a label is legal and it specifies the absence of a label. Also in some phone in case of some items when the user selects an item to edit its contents, the system switches to a system generated screen. For example on most phones when you edit text in a TextField, it changes in its look and feel to a TextBox. On choosing the automatically generated OK command after editing the TextField, it again becomes the normal TextField with all the contents that were added to it during the editing of text.
Best Practice
Although normally you can append a large number of items in one Form try to avoid such scenarios. From practical experience I will suggest you to keep the maximum number of items in a Form to 3. a. ChoiceGroup A ChoiceGroup is a user interface element to display multiple options on the mobiles phone. The ChoiceGroup is a subclass of the Item class. The ‘ChoiceGroup’ can be inserted on a form. There are two types of ChoiceGroup: Ø Exclusive This type of ChoiceGroup allows the user to select only one option from a given set of options. For knowing which particular option has been selected in an EXCLUSIVE ChoiceGroup use ‘public int getSelectedIndex ()’ method. Ø Multiple This type of ChoiceGroup allows the user to select any number of options from a given set of options. To know the selection status of different options in a MULTIPLE ChoiceGroup use ‘public int getSelectedFlags (boolean [] selectedArray_return)’ method. This method returns a boolean array containing the status of each element of the ‘multiple’ ChoiceGroup. If the element is in the selected state then the corresponding variable in the boolean array returned by this method is in ‘true’ state otherwise it is in the false state. CHOICEGROUP
 
Example of ChoiceGroup (Exclusive) /*
* ChoiceGroupExclusive.java
*/
import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;
/**
* * @author SKJ * @version 1.0.0
*/
public class ChoiceGroupExclusive extends javax.microedition.midlet.MIDlet
{
private Form form ;
private Display display ;
private ChoiceGroup cgExclusive ;
public ChoiceGroupExclusive()
{
this.display = Display.getDisplay(this) ;
this.initForm() ;
// Setting the current display
this.display.setCurrent(this.form) ;
}
public void startApp()
{
}
public void pauseApp()
{
}
public void destroyApp(boolean unconditional)
{
}
public void initForm()
{
// Initializing the items
initChoiceGroupExclusive() ;
// Initializing the forms
this.form = new Form("") ;
this.form.append(this.cgExclusive) ;
}
public void initChoiceGroupExclusive()
{
this.cgExclusive = new
ChoiceGroup("ChoiceGroupLabel",ChoiceGroup.EXCLUSIVE) ;
this.cgExclusive.append("String1",null) ;
this.cgExclusive.append("String2",null) ;
this.cgExclusive.append("String3",null) ;
}
}
Emulator used for taking screen shot : Nokia 6650
Example of ChoiceGroup (Multiple) /*
* ChoiceGroupMultiple.java
*/
import javax.microedition.midlet.*;
import javax.microedition.lcdui.*; /**
* * @author SKJ * @version 1.0.0
*/
public class ChoiceGroupMultiple extends javax.microedition.midlet.MIDlet
{
private Form form ;
private Display display ;
private ChoiceGroup cgMultiple ;
public ChoiceGroupMultiple()
{
this.display = Display.getDisplay(this) ;
this.initForm() ;
// Setting the current display
this.display.setCurrent(this.form) ;
}
public void startApp()
{
}
public void pauseApp()
{
}
public void destroyApp(boolean unconditional)
{
}
public void initForm()
{
// Initializing the items
initChoiceGroupMultiple() ;
// Initializing the forms
this.form = new Form("") ;
this.form.append(this.cgMultiple) ;
}
public void initChoiceGroupMultiple()
{
this.cgMultiple = new ChoiceGroup("ChoiceGroupLabel",ChoiceGroup.MULTIPLE) ;
this.cgMultiple.append("String1",null) ;
this.cgMultiple.append("String2",null) ;
this.cgMultiple.append("String3",null) ;
}
}
Emulator used for taking screen shot : Nokia 6650 b. DateField A DateField is a user interface element to take input and show the output in terms of date and time on the mobile phone. The DateField is subclass of the Item class. The ‘DateFields’ are normally used in conjunction with Forms within scheduling and time keeping applications like ‘world time clock’ application. The DateField can display Date and Time in the following formats: Ø DATE Ø DATE AND TIME Ø TIME Best Practice DateField in different devices look and also sometimes behave differently. Thus care should be taken to deliberate on the look and feel of the DateField on the actual devices on which the application has to be deployed before using them in an application.
Example Code: DateField (Date)
/*
* Date.java
*/
import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;
/**
* * @author SKJ * @version 1.0.0
*/
public class DateMIDlet extends javax.microedition.midlet.MIDlet
{
private Form form ;
private Display display ;
private DateField date ;
public DateMIDlet()
{
this.display = Display.getDisplay(this) ;
this.initForm() ;
// Setting the current display
this.display.setCurrent(this.form) ;
}
public void startApp()
{
}
public void pauseApp()
{
}
public void destroyApp(boolean unconditional)
{
}
public void initForm()
{
// Initializing the items
initDateFiledDate() ;
// Initializing the forms
this.form = new Form("") ;
this.form.append( this.date) ;
}
public void initDateFiledDate()
{
this.date = new DateField("DateFieldLabel",DateField.DATE) ;
}
}
Emulator used for taking screen shot : Nokia 6650
Example Code: DateField (Date_Time)
/*
* Date.java
*/
import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;
/**
* @author SKJ * @version 1.0.0
*/
public class DateTimeMIDlet extends javax.microedition.midlet.MIDlet
{
private Form form ;
private Display display ;
private DateField dateTime ;
public DateTimeMIDlet()
{
this.display = Display.getDisplay(this) ;
this.initForm() ;
// Setting the current display
this.display.setCurrent(this.form) ;
}
public void startApp()
{
}
public void pauseApp()
{
}
public void destroyApp(boolean unconditional)
{
}
public void initForm()
{
// Initializing the items
initDateFiledDateTime() ;
// Initializing the forms
this.form = new Form("") ;
this.form.append( this.dateTime) ;
}
public void initDateFiledDateTime()
{
this.dateTime = new
DateField("DateFieldLabel",DateField.DATE_TIME) ;
}
}
Emulator used for taking screen shot : Nokia 6650
Example Code: DateField (Time)
/*
* Date.java
*/
import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;
/**
* @author SKJ
* @version 1.0.0
*/
public class TimeMIDlet extends javax.microedition.midlet.MIDlet
{
private Form form ;
private Display display ;
private DateField time ;
public TimeMIDlet()
{
this.display = Display.getDisplay(this) ;
this.initForm() ;
// Setting the current display
this.display.setCurrent(this.form) ;
}
public void startApp()
{
}
public void pauseApp()
{
}
public void destroyApp(boolean unconditional)
{
}
public void initForm()
{
// Initializing the items
initDateFiledTime() ;
// Initializing the forms
this.form = new Form("") ;
this.form.append( this.time) ;
}
public void initDateFiledTime()
{
this.time = new DateField("DateFieldLabel",DateField.TIME) ;
}
}
Emulator used for taking screen shot : Nokia 6650
c. Gauge A Gauge is user interface element to display data in the form of a bar. In some devices the gauge is represented in form of a series of bars. The Gauge may be used to display the following types of screens:
Ø ‘Wait’ Screen Ø ‘Loading’ Screen Ø ‘Bar Graph’ Screen
The look and feel of the gauge is dependent on the handset. This fact should be kept in mind. The ‘public void setValue (int value)’ method is used to update the values of the Gauge programmatically. There can be two types of Gauges Ø Interactive In case of an interactive gauge the users are able to modify the values by there actions. The end user can use the Left key and Right key to edit the Gauge.
Ø Non – Interactive In case of a non – interactive gauge the users can not modify the values. The modification of values is possible only through the use of ‘public void setValue (int value)’ method.
The minimum value for a Gauge is 0. If you will set the initial value of the Gauge to more than the maximum permissible value then it will automatically set the maximum value to 99.
Example Code: Gauge (Non-interactive) /* * demoMIDlet.java */
import javax.microedition.midlet.*; import javax.microedition.lcdui.*;
/** * * @author SKJ * @version 1.0.0 */
public class demoMIDlet extends javax.microedition.midlet.MIDlet { private Form form ; private Display display ; private Gauge gaugeNonInteractive ;
public demoMIDlet() { this.display = Display.getDisplay(this) ;
this.initForm() ;
// Setting the current display this.display.setCurrent(this.form) ;
} public void startApp() {
}
public void pauseApp() {
}
public void destroyApp(boolean unconditional) {
}
public void initForm() { // Initializing the items initGaugeNonInteractive() ;
// Initializing the forms this.form = new Form("") ; this.form.append( this.gaugeNonInteractive ) ; }
public void initGaugeNonInteractive() { this.gaugeNonInteractive = new Gauge("GaugeLabel",false,100,0) ; } }  Emulator used for taking Screen Shot : Nokia Series 60
Example Code: Gauge (Interactive) /*
* GaugeInteractive.java
*/
import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;
/*
* @author SKJ * @version 1.0.0 */
public class GaugeInteractive extends javax.microedition.midlet.MIDlet
{
private Form form ;
private Display display ;
private Gauge gaugeInteractive ;
public GaugeInteractive()
{
this.display = Display.getDisplay(this) ;
this.initForm() ;
// Setting the current display
this.display.setCurrent(this.form) ;
}
public void startApp()
{
}
public void pauseApp()
{
}
public void destroyApp(boolean unconditional)
{
}
public void initForm()
{
// Initializing the items
initGaugeInteractive() ;
// Initializing the forms
this.form = new Form("") ;
this.form.append(this.gaugeInteractive) ;
}
public void initGaugeInteractive()
{
this.gaugeInteractive = new Gauge("GaugeLabel",true,100,0) ;
}
}
Emulator used for taking screen shot : Nokia Series 60
d. ImageItem The ImageItem class provides the functionality for adding the images in Forms and Alerts. This class also provides the facility of controlling the layout of the images. The following are the layouts provided to us in ImageItem: · LAYOUT_LEFT · LAYOUT_RIGHT · LAYOUT_CENTER · LAYOUT_NEWLINE_BEFORE · LAYOUT_NEWLINE_AFTER · LAYOUT_DEFAULT.
Providing LAYOUT_DEFAULT causes the system to use the system’s default layout policy. Also these are just the indications to the device. The device may not follow these due to resource constraints. Also remember that only immutable images should be added to it, otherwise it will throw an IllegalArgumentException.
The ImageItem’s constructor has the following signature: § public ImageItem (java.lang.String label, Image img, int layout, java.lang.String altText)
Example Code (Snippet): ImageITem imgItem = new ImageItem(“Image1”,starImage, LAYOUT_CENTER, “Star Image”) ;
Emulator used for taking screen shot : Nokia 6650
e. StringItem A StringItem contains: · Label · Text Both the label and the text should be strings. This subclass of Item is used to give a string output to the user and it does not support the input of strings from the users. Although the application can by itself change the contents of the StringItem. Best Practice The presentation of the label and the text may differ in different devices. Some devices display the label as bold, while others don’t. For a better understanding of user interface presentation in different devices, you may subscribe to ‘SKJ KnowledgeNET ’ by writing to knowledgenet@skjworld.com .
Example Code: StringItem /* * demoMIDlet.java */ import javax.microedition.midlet.*; import javax.microedition.lcdui.*; /** * @author SKJ * @version 1.0.0 */ public class demoMIDlet extends javax.microedition.midlet.MIDlet { private Form form ; private Display display ; private StringItem stringItem ; public demoMIDlet() { try { this.display = Display.getDisplay(this) ; this.initForm() ; // Setting the current display this.display.setCurrent(this.form) ; } catch(Exception e) { this.display.setCurrent(new Alert("in Constructor") ) ; }
} public void startApp() {
}
public void pauseApp() {
}
public void destroyApp(boolean unconditional) {
} public void initForm() { // Initializing the items initStringItem() ;
// Initializing the forms this.form = new Form("") ; this.form.append( this.stringItem ) ; }
public void initStringItem() { this.stringItem = new StringItem("Label","Text") ; } }
Emulator used for taking screen shot : Nokia 6650
f. TextField The constructor for the TextField takes the value for the capacity, which is the maximum number of characters that can be stored in the TextField at any time. Also the implementation may pose a maximum capacity i.e. the capacity which can be the maximum for this TextField. A good application should normally take this in to account. The getMaxSize() method could be used to have the value of the maximum permissible capacity allowed by the implementation environment.
A TextField can have many input constraints. They are as follows: · public static final int ANY · public static final int CONSTRAINT_MASK · public static final int EMAILADDR · public static final int NUMERIC · public static final int PASSWORD · public static final int PHONENUMBER · public static final int URL
The implementation environment of the device restricts a user’s input based on these constraints. These input constraints are very useful in certain situations like when a user wants to enter the phone number. In this case if the TextBox’s input constraint is ‘NUMERIC’ then when the user will type on the key pad the input will automatically be the number printed on that key. The alphabets printed on the key will not form part of the input. Thus the user is saved from the hassle of repeatedly clicking on the same key to input a number. Thus the input constraints should be used based on the task for which the TextBox is being initialized.  Emulator used for taking screen shot : Nokia 6650
Example Code: Textfield (ANY)
/*
* TextFieldAny.java
*/
import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;
/**
* @author SKJ * @version 1.0.0
*/
public class TextFieldAnyMIDlet extends javax.microedition.midlet.MIDlet
{
private Form form ;
private Display display ;
private TextField any ;
public TextFieldAnyMIDlet ()
{
this.display = Display.getDisplay(this) ;
this.initForm() ;
// Setting the current display
this.display.setCurrent(this.form) ;
}
public void startApp()
{
}
public void pauseApp()
{
}
public void destroyApp(boolean unconditional)
{
}
public void initForm()
{
// Initializing the items
initTextFieldAny() ;
// Initializing the forms
this.form = new Form("") ;
this.form.append( this.any) ;
}
public void initTextFieldAny()
{
this.any = new
TextField("TextFieldLabel","Text",50,TextField.ANY) ;
}
}
 Emulator used for taking screen shot : Nokia 6650
Example Code: Textfield (EMAILADDR)
/*
* TextFieldEmailAdd.java
*/
import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;
/**
* @author SKJ
* @version 1.0.0
*/
public class TextFieldEmailAddMIDlet extends javax.microedition.midlet.MIDlet
{
private Form form ;
private Display display ;
private TextField emailAdd ;
public TextFieldEmailAddMIDlet()
{
this.display = Display.getDisplay(this) ;
this.initForm() ;
// Setting the current display
this.display.setCurrent(this.form) ;
}
public void startApp()
{
}
public void pauseApp()
{
}
public void destroyApp(boolean unconditional)
{
}
public void initForm()
{
// Initializing the items
initTextFieldEmailAdd() ;
// Initializing the forms
this.form = new Form("") ;
this.form.append( this.emailAdd) ;
}
public void initTextFieldEmailAdd()
{
this.emailAdd = new
TextField("TextFieldLabel","Text",50,TextField.EMAILADDR) ;
}
}
Emulator used for taking screen shot : Nokia 6650
Example Code: Textfield (NUMERIC)
/*
* TextFieldNumeric.java
*/
import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;
/**
* @author SKJ
* @version 1.0.0
*/
public class TextFieldNumericMIDlet extends javax.microedition.midlet.MIDlet
{
private Form form ;
private Display display ;
private TextField numeric ;
public void startApp()
{
try
{
this.display = Display.getDisplay(this) ;
this.initForm() ;
// Setting the current display
this.display.setCurrent(this.form) ;
}
catch(Exception e)
{
this.display.setCurrent(new Alert("in Constructor") ) ;
}
}
public void pauseApp(){
}
public void destroyApp(boolean unconditional) {
}
public void initForm()
{
// Initializing the items
initTextFieldNumeric() ;
// Initializing the forms
this.form = new Form("") ;
this.form.append( this.numeric) ;
}
public void initTextFieldNumeric()
{
this.numeric = new TextField("TextFieldLabel","",10,TextField.NUMERIC) ;
}
}
Emulator used for taking screen shot : Nokia 6650
Example Code: Textfield (PASSWORD)
/*
* TextFieldPassword.java
*/
import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;
/**
* @author SKJ
* @version 1.0.0
*/
public class PasswordMIDlet extends javax.microedition.midlet.MIDlet
{
private Form form ;
private Display display ;
private TextField password;
public void startApp()
{
try
{
this.display = Display.getDisplay(this) ;
this.initForm() ;
// Setting the current display
this.display.setCurrent(this.form) ;
}
catch(Exception e)
{
this.display.setCurrent(new Alert("in Constructor") ) ;
}
}
public void pauseApp(){
}
public void destroyApp(boolean unconditional) {
}
public void initForm()
{
// Initializing the items
initTextFieldPassword() ;
// Initializing the forms
this.form = new Form("") ;
this.form.append( this.password) ;
}
public void initTextFieldPassword()
{
this.password = new
TextField("TextFieldLabel","",10,TextField.PASSWORD) ;
}
}
Emulator used for taking screen shot : Nokia 6650
Example Code: Textfield (PHONENUMBER)
/*
* TextFieldPN.java
*/
import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;
/**
* @author SKJ
* @version 1.0.0
*/
public class PhoneNumberMIDlet extends javax.microedition.midlet.MIDlet {
private Form form ;
private Display display ;
private TextField phoneNumber ;
public void startApp()
{
try
{
this.display = Display.getDisplay(this) ;
this.initForm() ;
// Setting the current display
this.display.setCurrent(this.form) ;
}
catch(Exception e)
{
this.display.setCurrent(new Alert("in Constructor") ) ;
}
}
public void pauseApp(){
}
public void destroyApp(boolean unconditional) {
}
public void initForm()
{
// Initializing the items
initTextFieldPhoneNumber() ;
// Initializing the forms
this.form = new Form("") ;
this.form.append( this.phoneNumber ) ;
}
public void initTextFieldPhoneNumber()
{
this.phoneNumber = new
TextField("TextFieldLabel","111",10,TextField.PHONENUMBER) ;
}
}
Emulator used for taking screen shot : Nokia 6650
Example Code: Textfield (URL)
/*
* TextFieldURL.java
*/
import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;
/**
* @author SKJ
* @version 1.0.0
*/
public class URLMIDlet extends javax.microedition.midlet.MIDlet
{
private Form form ;
private Display display ;
private TextField url ;
public void startApp()
{
try{
this.display = Display.getDisplay(this) ;
this.initForm() ;
// Setting the current display
this.display.setCurrent(this.form) ;
}
catch(Exception e)
{
this.display.setCurrent(new Alert("in Constructor") ) ;
}
}
public void pauseApp(){
}
public void destroyApp(boolean unconditional) {
}
public void initForm()
{
// Initializing the items
initTextFieldURL() ;
// Initializing the forms
this.form = new Form("") ;
this.form.append( this.url ) ;
}
public void initTextFieldURL()
{
this.url = new
TextField("TextFieldLabel","abc",10,TextField.URL ) ;
}
}
Emulator used for taking screen shot : Nokia 6650
Every application needs to interact with the user. Commands offer one of the best forms of user interaction. They are the mobile equivalents of the desktop’s ‘Command Button’. They could serve many purposes. Some of them are: · Programming the soft keys of mobile phones · Alternative user input · Automatic menu generation
The Command class has the following constructor: · public Command (String label, int commandType,int priority)
Thus the constructor of command needs three items of information: · Label · Type · Priority
Label The label string is shown to the user to represent a command. In commands having command types other than SCREEN, the label value may be overridden by a system specific label which is more appropriate for the command on the device.
Type The type of command refers to the intended use of the command. This is practically used by the device to present the commands at the appropriate place according to the user interface of the device. The placement of the command on the left soft key or the right soft key depends upon the type of the command.
The following 8 types of commands are there: · public static final int BACK · public static final int CANCEL · public static final int EXIT · public static final int HELP · public static final int ITEM · public static final int OK · public static final int SCREEN · public static final int STOP
Priority Priority value is used to describe the importance of a command relative to other commands on the same screen. A lower number indicates a greater importance. If two commands will have the same priority and type then there order depends upon the order in which they are coded.
Commands can be added to the instances of class Displayable or one of its sub classes. Also any class which wants to listen and react to the events generated by the commands should implement the CommandListener interface. The CommandListener interface contains one method namely:
Example Code: CommandListener (Method - commandAction) public void commandAction( Command com, Displayable disp )
{
if ( disp == form1 )
{
if ( com == this.back )
{
this.parent.setDisplayable( this.list ) ;
}
}
}
This code shows an example of implementing the action for back command in form1. Whenever the user will press the back command in form1 this code will set the current display to list.
The Ticker class implements a user interface element that contains a piece of text which runs continuously across the display. It is like the ‘marquee’ element of Hyper Text Mark-up Language (HTML). Most of the devices implement it as a continuously running stream of text. But there are some devices which have other impressive implementations of this class.  The features of the Ticker class are as follows: · Direction is determined by the implementation. This is normally left to right or vice a versa. But some devices have it scroll from bottom to top or vice versa. · Speed of scrolling is determined by the implementation. · There is no way for the programmer to start or stop the ticker as desired. · The ticker is normally always scrolling continuously except in some cases for saving the power when a device is inactive for some time. · The same ticker may be shared by several Screen objects.
The tickers could be used to communicate important information to users, for example it could be used to have it represent a stock market ticker.
BEST PRACTICE The look and feel of the Ticker changes from device to device. For example the Ticker will generally move from right to left on most devices but in SonyEricsson T610 it moves vertically not horizontally.
Example Code: Ticker /* * TickerMIDlet.java * * Created on January 6, 2004, 4:23 AM */
import javax.microedition.midlet.*; import javax.microedition.lcdui.*;
/** * * @author SKJ * @version 1.0.0 */ public class TickerMIDlet extends javax.microedition.midlet.MIDlet { private Display display ; private Form form ; private Ticker ticker ; private StringItem sItem ;
public void startApp() { this.display = Display.getDisplay(this) ;
// Initialize the user interface elements init() ;
this.display.setCurrent(this.form); }
public void init() { //initializing form, string item and ticker this.form = new Form("Form 1") ;
this.sItem = new StringItem ("Ticker \n","ABC Company's Share Price") ; this.form.append(this.sItem) ;
this.ticker = new Ticker ("ABC 42.45,BBX 32.70.09,CDS 119.3") ;
//setting ticker on form this.form.setTicker(ticker) ; }
public void pauseApp() { }
public void destroyApp(boolean unconditional) { } }
The Image class is used for holding the graphical image data. Images are of two types: · Immutable Immutable images can normally be created by loading image data from:
o Resource bundles o Files o Network
Once created, immutable images may not be modified.
The following objects require only immutable images: o Alert o Choice o Form o ImageItem · Mutable These images are created in the off screen memory area. These could be painted by the application after having created a Graphics object expressly for painting on them.
While making games and other graphical applications, both immutable and mutable images are made use of. |
