Low Level UI Programming

Back | Next

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. This lesson takes you through the nitty-gritty's of using these Low Level API's

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.

public void paint(Graphics graphics) {
  graphics.drawString("Salsa Drawings", 0, 0,
  Graphics.TOP|Graphics.LEFT);
}

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. All the Graphic methods use this co-ordinate system. Some of these methods are listed below.

drawLine(int x1, int y1, int x2, int y2)
drawRect(int x, int y, int width, int height)

J2ME: Canvas Coordinate System

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.

public void drawString(String text, int x, int y, int anchor);
public void drawImage(Image img, int x, int y, int anchor);

graphics.drawString("Salsa Drawings", 0, 0,Graphics.TOP|Graphics.LEFT);

Anchor points are defined with two constants

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

The following figure shows various anchor points.

MIDP: Canvas Anchors

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. Following examples give you the usage.

Graphics.setColor(255,255,255) for White.
Graphics.setColor(0,0,0) for black.
Graphics.setColor(50,50,50)
Graphics.setColor(100,100,100)
Graphics.setColor(60,10,105)

Following code listing gives you the idea to user colors.

public void paint(Graphics graphics) {
  graphics.setColor(255,255,255); // Set color to white
  graphics.fillRect(0, 0, getWidth(), getHeight());
  graphics.setColor(0,0,0); // Reset color to black
  graphics.drawString("This is a very boring MIDlet "+
       "and I wanna sleep!", 0, 0,
  Graphics.TOP|Graphics.LEFT);
}

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.

Font font = graphics.getFont();
Font font = Font.getFont(Font.FACE_SYSTEM, Font.STYLE_PLAIN, Font.SIZE_MEDIUM);

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

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.

I hope these pointers will help you creating a Canvas with wrapping 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.

Image.createImage(int width, int height)

Immutable Images: Immutable images are generally created by loading images from Input Streams and Image files.

Image.createImage(Image source)
Image.createImage(InputStream stream)

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.

Image source = Image.createImage(...);
Image copy = Image.createImage(source.getWidth(), source.getHeight());
Graphics g = copy.getGraphics();
g.drawImage(source, 0, 0, TOP|LEFT);

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:

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:

Applications can get game action by calling the getGameAction() These method can be used within keyPressed() method in the following manner

protected void keyPressed(int keyCode)
  {
    switch (getGameAction(keyCode))
    {
      case FIRE:
      case UP:
      case DOWN:
      case LEFT:
      case RIGHT:
    }
}


Game Actions can vary for various devices. For example, on some devices the game actions UP, DOWN, LEFT and RIGHT may be mapped to navigation keys. On other devices, mapping could be on the keys 2, 4, 6 and 8.

j2meSalsa goodies
Execute Low Level UI Sample online Select "Low Level UI API" on the online emulator on your left frame.
View Java source code of demo application
Download this code for deploying directly to WTK Click here to download Zip File Containing WTK compatible file structure.

Back | Next

site comments powered by Disqus

This page is a part of a frames based web site. If you have landed on this page from a search engine click here to view the complete page.