Low Level UI

Low Level UI

Canvas

We use the Canvas class for low-level UI design and also to handle low-level events like pushing a button or clicking a pointer device. Here I won't go into the details. You can go through the API documentation. We will just go through some relevant points -

• Canvas is abstract. You must make your own class extending Canvas.
• You must override paint() method. This is the place to design your interface.
• The paint method accepts a Graphics object as argument, which is the handle for doing all 2D drawings.
• A call to the repaint() method actually executes the paint() method which redraws the specified drawing area.
• Remember repaint() or paint() does not erase what was previously drawn. To erase what was previously drawn in an area, we basically have to draw an object of the specified size and shape using the background color. Practically, there is no concept of erasing; it's just drawing over the previously drawn objects to hide them.
• The co-ordiante system of the canvas is like a computer screen. The origin (0,0) is at the top-left corner and x and y co-ordinates increase in the directions to the right and down.
• Each Canvas class automatically receives key events through the invocation of the keyPressed(int keyCode), keyReleased(int keyCode), and keyRepeated(int keyCode). The default implementations of these methods are empty, but not abstract, which allows you to only override the methods that you are interested in. Similar to the key events, if a pointing device is present, pointer events are sent to the pointerDragged(int x, int y), pointerPressed(int x, int y), and pointerReleased(int x, int y) methods.


• Canvas defines some constants to represent key codes e.g. KEY_NUM0, KEY_NUM1, KEY_STAR, KEY_POUND and other constant to capture game actions e.g. UP, DOWN, LEFT, RIGHT, FIRE, GAME_A, GAME_B, GAME_C, and GAME_D so that codes can be more logically written.
• Sometimes it is advisable to use game actions rather than key codes, as some portable devices might not have all the number keys on them.
• Canvas is highly used in game applications. For more features use another class GameCanvas included in javax.microedition.lcdui.game package. Canvas is also important in LBS applications as we need to draw maps and shapes e.g. to show your current location or denoting the nearest restaurants.

Graphics

Graphics object is used by the Canvas to do all 2D manipulation. (There is a separate API for 3D). Here we will just highlight a few aspects, the details can be found on the API documentation.

• It can draw basic shapes on the canvas e.g. rectangles, lines etc.
• A method like drawRect() will draw only the outline of a rectangle wheras fillRect() will draw a filled rectangle.


• There is no separate method to draw a circle. Use drawArc(). A call to drawArc(50, 50, 8, 8, 0, 360) will draw a circle of diameter 9 (yes, it is 8+1) with its center at (50,50).
• You can set the color using setColor() function. Once you set the color, all further drawing will use that color unless you change it.
• To erase the whole canvas, you can use
  setColor(Color.white);
  fillRect(0, 0, getWidth(), getHeight()); // remember to reset the color afterwards
• To output text, you need to use drawString() method. For positioning the strings horizontally and vertically, a number of anchors are available. To write "Hello World" at the top middle of the canvas, you need to use
  drawString("Hello World", 0, 0, Graphics.TOP | Graphics.HCENTER);
• Images can be drawn and positioned using the drawImage() function. However to show an image from file or from a network, you need to create an Image object first using createImage() function.