J2ME - Low Level UI

MIDP also gives you a low level component called Canvas for pixel level access. Low level components can be used to create basic drawings and create custom components. Canvas class should be extended for low level access. This class provides paint() method which has to be implemented for drawing on to the Canvas.

Method paint() takes a Graphics instance as parameter. With Graphics we can draw items like arc, rectangle, line, image, triangle, circle etc. Different parameters like fonts, colors, anchors can also be specified.

Determine Screen Size

To determine the screen size call methods getWidth() and getHeight().

Co-ordinate System

As the following picture shows pixel based coordinate system starts from upper left corner.

Anchor Points

Text and Images can also is drawn using anchor points using Anchor Points. Anchor points are used to decrease the calculations required when drawing a String/Image on a Canvas.

Anchor points are defined with two constants

Horizontal constants: LEFT, HCENTER, RIGHT. Vertical constants: TOP, BASELINE, BOTTOM.

The following figure shows various anchor points.


The image or text is drawn at X co-ordinate and Y Co-ordinate and the alignment of the image will be based on Horizontal and Vertical anchor constants.
Color

Color can be manipulated using Method setGrayScale() which gives you black and white colors and setColor() to set RGB Colours. When setColor() is called all subsequent operations are rendered in this color unless setColor() is called with another color. This method takes three parameters representing Red, Blue and Green hues to construct a color. Each of these parameters can have a value between 0 and 225.

Fonts

The Font class represents fonts and font metrics. You cannot create a Font Object by calling a Font constructor. The Font object is returned by the device when Graphics.getFont() and Font.getFont() is called. The system will return a handle to a compatible Font available with the system.

Then call Graphics.setFont(font) to set the font for all subsequent text operations.Method getFont() takes three parameters

• Face: Font face defines the font type. Example: FACE_MONOSPACE, FACE_PROPORTIONAL, FACE_SYSTEM
• Style: Decorations for the fonts. Example: STYLE_BOLD, STYLE_ITALIC, STYLE_PLAIN, STYLE_UNDERLINED
• Size: Size of the font. Example: SIZE_LARGE, SIZE_MEDIUM, SIZE_SMALL
  

Text Does not wrap on a Canvas

When you write a multiple line sentence on the canvas using Graphics.drawString(). The sentence will not wrap on a canvas and an algorithm has to be written to wrap the text using following procedure.

1. Find the Canvas height using Canvas.getWidth()
2. Find the Font width for each character using Font.charWidth()
3. As you parse through the sentence and wrap the text.

Images

The Image class is used to do all image manipulations. Images are of two types

Mutable Images: These are the new images created by the applications and on creation have a plain white background and your application has to draw on this background. These images are created as off-screen drawing and then can be displayed on to the canvas, form or alert.

Images can be placed on Alert, Choice, Form, or ImageItem objects. An immutable image can be converted to a mutable image by drawing the immutable image on to a mutable image.

Low level Event Handling

Following Canvas methods have to be implemented for event handling

Key Pressed: keyPressed(int keyCode)
Key Released: keyReleased(int keyCode)
Key Held Down: keyRepeated(int keyCode)

When a user presses a key on the mobile keypad. These event are passed to keyPressed() method. We can recognize the pressed key by analyzing the keyCode.MIDP defines the following key codes:

• KEY_NUM0
• KEY_NUM1
• KEY_NUM2
• KEY_NUM3
• KEY_NUM4
• KEY_NUM5
• KEY_NUM6
• KEY_NUM7
• KEY_NUM8
• KEY_NUM9
• KEY_STAR
• KEY_POUND

There may be other keys on the keyboard. These keys can be known by printing the keyCode in keyPressed() method. You can also use getKeyName() method to find the string printed on the pressed key. The keyCodes listed above are standard keys. Make sure you use only these keys for better portability.

Game Actions

MIDP has standard gaming related actions mapped to the keys.MIDP defines the following game actions:

• UP
• DOWN
• LEFT
• RIGHT
• FIRE
• GAME_A
• GAME_B
• GAME_C
• GAME_D