ONJava.com -- The Independent Source for Enterprise Java
oreilly.comSafari Books Online.Conferences.


AddThis Social Bookmark Button O'Reilly Book Excerpts: Learning Wireless Java

MIDP GUI Programming, Part 3

Related Reading

Wireless Java
Help for New J2ME Developers
By Qusay Mahmoud

by Qusay Mahmoud

Creating Low-Level GUI Components

This is the third and final in a series of articles from O'Reilly's Learning Wireless Java, by Qusay Mahmoud. This section from Chapter 5 focuses on the low-level MIDP GUI APIs and components.

In the high-level API, you have no control of what is displayed on the screen and very little freedom to "play" with the components programmatically. The implementation is responsible for selecting the best approach for the device. Some applications, however, such as games, may need more control over what is drawn on the screen. The MIDP javax.microedition.lcdui package also provides a low-level API for handling such cases.

In order to directly draw lines, text, and shapes on the screen, you must use the Canvas class. The Canvas class provides a blank screen on which a MIDlet can draw. For example, let's draw the string "HelloWorld" on the screen. There's a simple way to do this: subclass the Canvas class, which is an abstract class that extends Displayable, and override the paint( ) method. The resulting class, MyCanvas, is shown in Example 5-1.

The implementation of the paint( ) method uses the drawing capabilities of the javax.microedition.lcdui.Graphics class. In the paint( ) method, the drawing color is set to red, then a rectangle is drawn in the current color. The methods getWidth( ) and getHeight( ) return the width and height of the Canvas, respectively. The next call to setColor( ) sets the drawing color to white; then the string "Hello World!" is drawn in the top left corner of the screen.

Example 5-1: Subclassing Canvas

import javax.microedition.lcdui.*;
public class MyCanvas extends Canvas {
   public void paint(Graphics g) {
      g.setColor(255, 0, 0);
      g.fillRect(0, 0, getWidth(), getHeight(  ));
      g.setColor(255, 255, 255);
      g.drawString("Hello World!", 0, 0, g.TOP | g.LEFT);

Now, in order to view the MyCanvas, it must be instantiated and displayed. Since Canvas is a subclass of Displayable, it can be displayed the same way any other screen using the setCurrent( ) method. Example 5-2 shows the resulting MIDlet.

Example 5-2: Instantiating and displaying MyCanvas

import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;
public class MyMidlet extends MIDlet {
   public MyMidlet(  ) { // constructor
   public void startApp(  ) {
      Canvas canvas = new MyCanvas(  );
      Display display = Display.getDisplay(this);
   public void pauseApp(  ) {
   public void destroyApp(boolean unconditional) {

If you run this in the Wireless Toolkit emulator, you will see something similar to Figure 1. Note from Example 5-1 that the colors are set to red and white, but since a grayscale display is being used, the colors are mapped to appropriate shades of black and white. Try switching displays to see which devices give a better feel for the colors.

Screen shot.
Figure 1. Drawing "Hello World!" on a Canvas.

Drawing Graphics

The (0,0) coordinate represents the upper left corner of the display. The numeric value of the x-coordinate increases from left to right, and the numeric value of the y-coordinate increases from top to bottom. Applications should always check the dimensions of the drawing area by using the following methods of the Canvas class:

public int getHeight(  );
public int getWidth(  );

These two methods return the height and width of the displayable area in pixels, respectively.

The drawing model used is called pixel replacement. It works by replacing the destination pixel value with the current pixel value specified in the graphics objects being used for rendering. A 24-bit color model is provided with 8 bits each for Red, Green, and Blue (RGB). However, since not all devices support color, colors requested by applications will be mapped into colors available on the devices. A well-written application, however, may check if a device supports color. This can be done using the isColor() and numColors( ) methods of the Display class, which we covered earlier in the chapter.

The Graphics class provides the setColor() and getColor( ) methods for setting and getting the color. Unlike the AWT/Swing, however, there is no setBackground( ) and setForeground(), so you need to explicitly call fillRect( ), as shown in Example 5-1. Most of the other methods in the Graphics class are self-explanatory and similar to methods in the AWT version of this class. However, let's go over a few of them here to see how they work in the J2ME environment.

Pages: 1, 2

Next Pagearrow