Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Take the High Road when Creating MIDP User Interfaces : Page 3

MIDP supports a user interface framework that caters to mobile devices by providing a number of built-in controls. Find out how these controls enable the portability of applications between devices.


advertisement
Lists, Alerts, and Forms
List
The List control is used to display collections of information. List has three modes: IMPLICIT, EXCLUSIVE, and MULTIPLE. The EXCLUSIVE mode allows only one item to be selected at a time, such as with a group of radio buttons. The MULTIPLE mode allows multiple items to be selected, such as with a group of checkboxes. The IMPLICIT mode is similar to a menu. When a row is selected the application responds by performing some type of action. Figure 3 shows the same list displayed in different modes.

Figure 3. Examples of a List: : The list contains three rows where the third row wraps across lines and is the currently highlighted item. From left to right the modes are: IMPLICIT, EXCLUSIVE, and MULTIPLE.
Alert
Alerts are screens used in displaying messages to users. Generally an Alert will either be displayed for a specified duration of milliseconds or will wait until the user dismisses the message by pressing a button. The code snippet below displays an Alert and waits for the user to dismiss the message. When the OK command is selected, the application can respond to the command.

Alerts support multiple commands, so you can provide conditional prompts as well, allowing the user to respond to Yes/No or OK/Cancel type of questions. Figure 4 shows an Alert as the current display.

Command ok = new Command("OK", Command.ITEM, 1); Alert a = new Alert("Example Alert!"); a.addCommand(ok); a.setTimeout(Alert.FOREVER); a.setCommandListener(this); a.setString("Hey, your fly is open!"); Display.getDisplay(this).setCurrent(a);


Figure 4. Example of an Alert: In this example a command is registered with the alert and the timeout is set to Alert.FOREVER. This means that the message will be displayed until the user presses the softkey associated with the "OK" command.
 
Figure 5. Class hierarchy of Item types: Classes inheriting from Item are intended to be placed onto a Form to create user interfaces. Items by themselves cannot become the current display. They must always reside within a Form.
Form
Form is a type of Screen that can contain a number user interface controls. The controls placed on a Form must inherit from Item. See Figure 5 for a class diagram of Items. Items are appended to a form using the Form.append() method. Table 3 describes the types of Items in more detail.

Table 3. Types of user interface controls that can be appended to a Form.

Item



Description

StringItem

Text display field. StringItem can only display text. The user can highlight StringItems but the content cannot be edited.

TextField

Text entry field for entering data. TextField has the same characteristics of TextBox except that TextField inherits from Item and is used within Forms. TextField supports the same Input Constraints as TextBox.

ChoiceGroup

ChoiceGroup supports the ability to make selection from a group of related options. ChoiceGroup supports making a single selection from a group, behaving like a group of radio buttons, or making multiple selections like a checkbox group.

DateField

DateFields are used for displaying and editing time and date information. This field has three settings, DATE, which deals only with the date portion, TIME, which deals only with time, and DATE_TIME, which deals with both date and time information in the same field.

ImageItem

ImageItem is used to display an image within a form.

Gauge

Gauge can be placed on a form to visually indicate progress.

Spacer

Spacer is a special type of form component that is used as part of the form layout policy to provide spacing between components. Since Spacer is an Item, it contains methods for adding Commands and a label. However, since Spacer is intended for positioning other components rather than user interaction, attempting to add a Command or label to a Spacer will throw an IllegalArgumentException.

CustomItem

CustomItem is new in MIDP 2.0 and provides a way for application developers to write their own Form controls. Prior to MIDP 2.0 there was no way to create a custom Item control. Unlike other Items, CustomItem also has the ability to trap keypress events, allowing applications to respond to more than just the softkey Commands.


Figure 6 shows an example of a form containing a few controls. The Gauge control uses Item.LAYOUT_RIGHT to right-justify the Gauge. Figure 7 shows the MIDP editors for date and time fields.

Form Layout Policy
Form supports only one layout policy; however, there are a number of directives that can be used to control the layout. The Form layout policy is similar to FlowLayout used by AWT. A form will attempt to place as many Items in a row as possible. When the next Item to display does not fit into the remaining space, the Item will be placed on the next row.

To fine-tune the layout, MIDP 2.0 contains a special Item called Spacer. Spacer is a non-interactive, "invisible" Item that aids in controlling a Form's layout. A number of directives can also be used to align Items to the right, center, or left as well as to shrink and expand Items to fill available space on the row. Layout directives are specified by constants in the Item class.


Figure 6. Multiple Controls: The example Form is displaying several different controls.
 
Figure 7. Setting the Time: Here's the UI for editing date and time fields from a form. The user navigates to these views by selecting the <date> or <time> unit from within the form.




Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date