Creating Low-level UI in a MIDlet using Canvas Class

Using Canvas Class in a MIDlet

Many applications that we develop in J2ME use a high-level user interface consists of UI objects such as lists, radio buttons, check boxes, images, and text.
In J2ME, every MIDlet has one instance of the Display class, and the Display class has one derived class called the Displayable class. Screen and Canvas are the subclasses of Displayable class.

Fig.: Top-level User Interface Classes of LCDUI Package of MIDP

The Canvas class and its derivatives are used to gain low-level access to the display, which is necessary for graphic- and animation-based applications.
An instance of the Canvas class acts as an artist’s canvas on which we draw images that might include text.
Canvas class is the abstract base class for all canvas classes. It provides an abstract method named paint() which takes one parameter - object of type Graphics (class)
An instance of the Graphics class is similar to the artist’s tools that are used to draw an image. For example, color, lines, and arcs are some of the graphic tools available to create an image on the canvas
Displaying text using the Graphics class requires you to specify the height, width, and other characteristics that describe how each character of the text is to be drawn on the screen.

The canvas is divided into a virtual grid in which each cell represents one pixel.
Coordinates mark the column and row of a cell within the grid (shown below).

Fig. : Coordinates mark the column and row of a cell within a grid

The x coordinate represents the column, and the y coordinate represents the cell’s row.
The first cell located in the upper-left corner of the grid has the coordinate location of 0, 0, where the first zero is the x coordinate and the other zero is the y coordinate.
The values (in pixels) returned by the getWidth() and getHeight() methods can be used to draw an image at a given location that is proportional to the size of the canvas
The coordinates of the centre of the Canvas is calculated using the formula:

x = getWidth()/2

y = getHeight()/2

An image is drawn on a canvas using a virtual pen. The pen is dropped on the canvas at a specified coordinate, filling the cell with the color of ink used in the pen.
Cells change from their present color to the color of the ink as the pen is repositioned on the canvas. For example, a horizontal line forms on the canvas when the virtual pen is dragged horizontally across the canvas.
A virtual pen is used by instances of the Graphics class to draw rectangles, arcs, and other graphical image components on the canvas. We don’t directly create and use a virtual pen on the canvas object.

Graphical components used to create an image on a canvas are drawn on the canvas when the paint() method of the Displayable class is called. This is referred to as painting.
The paint() method is an abstract method that is used both by instances and derivatives of the Screen class and Canvas class
Derivatives from the Screen class have two predefined methods used to paint the screen. They are paint() and paintContent():
- The method paint() generally contains instructions that set parameters for drawing an image, such as defining the virtual pen.
- The other method is paintContent(), which is called at the end of the paint() method and contains statements to actually draw the image.
- The developer doesn’t become directly involved with the paint() method or the paintContent() method when building an application that uses the high-level user interface
In a MIDlet using low-level UI, the contents of the paint() method are statements that draw images on the screen.
The paint() method requires one parameter, which is a reference to the instance of the Graphics class created by your application
Here is a paint() method that draws a rectangle on the canvas:

The paint() method is not called directly by the programmer. Instead, it is called automatically by the setCurrent() method when the MIDlet is started.
We call the repaint() whenever the canvas or a portion of the canvas must be refreshed.
There are two versions of the repaint() method. One version requires no parameters and repaints the entire canvas.
The other version requires four parameters that define the region of the canvas that is to be repainted.
The first two parameters are the x and y coordinates for the upper-left corner of the region, and the last two parameters are the width and height of the region.

We specify a region of the canvas to repaint whenever only a portion of the canvas has changed and when we don’t want to waste time repainting the entire canvas, such as when an animated image is displayed on the screen. This is known as clipping.
Animation is the illusion of movement caused by rapidly changing images on the screen, where each image is slightly different from the previous image. Each image displayed on the screen is referred to as a frame. A key to successful animation is speed.
To bring animation in our MIDlet, we must change frames in such a way that users don’t notice the change. Typically, a small portion of a frame changes in an animated image.
The repaint() method is capable of repainting only the portion of the frame that changed rather than the entire frame, which dramatically reduces the time that is necessary to change a frame on the screen.
The serviceRepaints() method is another painting method used for developing a low-level user interface in a MIDlet. The serviceRepaints() method directs the device’s application manager to override outstanding requests for service with the repaint request.

The device’s application manager calls the showNotify() method immediately before the application manager displays the canvas.
We can define the showNotify() method with statements that prepare the canvas for display, such as initializing resources by beginning threads or assigning values to variables as required by your application.
The hideNotify() method is called by the application manager after the canvas is removed from the screen.
We can define the hideNotify() method with statements that free resources that were allocated when the showNotify() method was called. This includes deactivating threads and resetting values assigned to variables as necessary.