UI Components for Java ME


The true power of Java ME Low Level UI API.

Welcome

Welcome to UI Components for Java ME website. The idea on this page is to show how power the Java ME platform is, regarding UI development. Nobody has any doubt about the power of High Level UI components (e.g. List, TextBox, Form, etc.). However, when an application requires a more elaborated work on UI, that is when the Low Level UI API comes to the show.

In the following sections we will be talking about a personal project on Java ME, which uses this API. A set of fully canvas UI components were developed using the classes Canvas, Graphics and a little of creativity, so that you can see all what this API can do for you.

Come with me...

About the Author

Ernandes Mourão Júnior is Bachelor in Computer Science at University of Fortaleza, Brazil. He has 6+ years of experience on software development, working for companies in Brazil and USA. Since 2003, Ernandes has been working exclusively with mobility. He is also Java Certified Professional (i.e. SCWCD, SCBCP and SCMAD) .

For further information, see Ernandes' View Ernandes Mourao Jr's profile on LinkedIn.

About the Project

As previously mentioned, this project consists of the development of a set of Fully Canvas UI components on Java ME platform. It started in the begining of December 2006, when Ernandes received a demand from a friend. He was needing a specific component for an application, which was not supported by Java ME. This component is Grouped List. A kind of list that shows a its items grouped by a parent item. We will talk more about this component later on.

Since then, this project has been evolved with the addition of new components. Today this project has a lot of components. All of them totally Java ME MIDP 1.0 compliant, which enables them to work on any device that supports Java ME, even the oldest.

Let's see the components list...

List of Components

The ten components that comprise this project are:

  • Screen - The base class of all the components
  • List - A screen that shows a list of items, which are compounded of an image and a text
  • Detail List - A screen that shows a list of items, which can show many lines of information
  • Grouped List - A screen that shows a list of items, which are grouped by a parte item
  • Grid - A screen that shows a list of items, which has columns to show different information
  • DocList - A screen that shows a list of items, which has a different arrangement in the screen. All of them placed at the bottom of the screen.
  • Form - A screen that contains a arbitrary mixture of controls (e.g. TextField, CheckBox, RadioButton, etc.)
  • Calendar - A screen that shows a calendar
  • Image Viewer - A screen that shows an image
  • Text Box - A screen that shows a long text
  • Option Pane - A screen that shows some alert messages (i.e. Information, Warning, Error and Confirmation)

As the main features found in all the components, we can list:

  • Adaptable to any screen size
  • Customizable font and colors
  • High usability
  • Stylus support (for touch screen displays)
  • Low learning curve (use the same method names as High Level UI API)
  • Low footprint
  • Highly extensible
  • Skin Support

Screen

Screen is the base class of the components hierarchy in this project. It defines a fully visible area in the mobile device's display. Besides that, it also specifies all the base properties and behaviours expected from a screen component. In other words, all new screen components start extending this class.

As the main features provided by this class, we can list:

  • Full support to commands, such as in the High Level UI components
  • Double screen buffer
  • Background color or image
For further information, see Screen's page.

List

List is a screen that shows a list of items. Each item is compounded of an image and a single line text. A vertical scroll bar is provided whether all the items of the list do not fit in the display.

This component can be used in three diferent manners, regarding item selection: IMPLICIT, MULTIPLE and EXCLUSIVE. You just have to decide which type to use at the instantiation time.

Other components in this project extends List (ie. Detail List, Grouped List and Grid). We will talk about them in the next section.

For further information, see List's page.

Detail List

Detail List extends List, therefore it also has all the features inherited from its base class. The component's major feature is the support to multiple lines for a single item. Opposite to List, which supports only one. Each line, in turn, can also have its own image.

For further information, see Detail List's page.

Grouped List

The difference between Grouped List and the other components that extends List is the grouping feature. In this list you associate some child items to a parent item. So the child items can be expanded or collapsed by their parent. The number of grouping levels supported is infinite. Better. As much as fit in the screen's width.

For further information, see Grouped List's page.

Grid

Grid is one of the best components in this project. It is a kind of component that Java ME could not have left to provide to the developers. It is a single line text per item list. However, their items support columns. For each columns you can specify the name, width, type and alignment (i.e. LEFT, CENTER and RIGHT). As other features, we can list:

  • Column sorting according to the item's value type
  • Editable cells
  • Horizontal scroll bar
  • Customizable column color

For further information, see Grid's page.

DocList

DocList is a list of items, which has a different arrangement in the screen. All of them placed at the bottom of the screen. The selected item, in turn. receives a different highlight in the middle of the screen.

A interesting usage of this components is for main menu screens. Due to its good visual and items arrangement. In other words, it is perfect for your application's main screen.

For further information, see DocList's page.

Form

Form is a screen that can contains a arbitrary number of controls from different kinds: Text Field, Multiline Text Field, Date Field, Check Box, Radio Button, Image Control, String Control, List Box, Combo Box and Spacer. The controls inside the Form can be editied. This component also supports vertical scroll bar when there are many controls added.

Another good feature of this component is the screen adapter. It enables to add into a Form any component that extends Screen. In other words, a screen can be used as a control.

For further information, see Form's page.

Calendar

Calendar is a screen that shows a certain date in a calendar view. The calendar shows all the days in a given month and year. The selected date can be changed through the calendar's cursor. During the navigation, if the cursor crosses the calendar's edges, it changes the current month and even the year.

For further information, see Calendar's page.

Image Viewer

Image Viewer is a screen used to display an given image. This component provides horizontal and vertical scroll bars whether the image does fit in the screen area. Besides that, it can resize the image so that i fits completely in the screen. Avoiding the usage of scroll bar.

For further information, see Image Viewer's page.

Text Box

Text Box is a suitable kind of screen to display a long text. Besides of providing a vertical scroll bar, it also enables to align the text to different directions (i.e. LEFT, CENTER and RIGHT). In additional, the text can also be justified, as well as the component's layout can be set as NORMAL or PRINTING.

For further information, see Text Box's page.

Option Pane

Option Pane is alternative component to Alert from Java ME framework. It provides a faster set up of a message to be displayed. Because it uses a single call method, which all the necessary parameter are passed in at once.

A message can be categorized as INFO, WARNING and ERROR. For each type, a different image and color is shown in the screen. In additional, you can also create confirmation messages. Ideal for situations where the user's confirmation is necessary.

For further information, see Option Pane's page.