MIDP Programming

MIDP Programming THE LOW-LEVEL USER-INTERFACE API

Chapter Objectives • The Canvas Class • Painting and the Graphics Class • The Coordinate System • Colors and Grayscale • Drawing Lines and Arcs • Fonts • Drawing Text • Images • Clipping

The Canvas Class • Canvas is the basic building block of the low-level API. Canvas gives you direct access to the screen of a MIDP device. • It is derived directly from Displayable, it inherits the ability to have associated Commands, but it does not provide a title or the ability to contain other components. Canvas is an abstract class. • To use Canvas, you have to subclass it and implement the paint method to draw whatever you want to appear on the screen. • This class provides methods that allow you to draw lines, rectangles, and arcs, fill areas with a solid color, and render text onto the device's screen. • The Canvas class also has methods -- which you can override -- to receive notification of key presses and use of the pointer (on those devices that have one).

The Canvas Class

Screen Attributes • Display methods • public boolean isColor( ) • public int numColors( ) • Canvas methods • public int getWidth( ) • public int getHeight( ) • public boolean hasRepeatEvents( ) • public boolean hasPointerEvents( ) • public boolean hasPointerMotionEvents( ) • public boolean isDoubleBuffered( )

Painting and the Graphics Class • The Graphics class is used to draw graphics to the screen and it provides methods for simple 2D graphics such as text, images, lines, rectangles, and arcs. The Graphics class is used inside the paint() method of the Canvas class. • The function of the paint() method is to describe how the screen should be painted. The application does not call the paint() method directly but instead calls the repaint() method • The application may draw directly to the display or to an off-screen image buffer. An off-screen image buffer can be used to reduce the flicker that a user may see while the screen is being refreshed.

Painting and the Graphics Class

Demo • Use Canvas to paint: • A maximum Circle at the center of the screen • An image at the center of the screen

The Coordinate System • The origin of the coordinate system is at the upper left-hand corner of the screen. The positive direction for the X-axis is to the right and the positive direction for the Y-axis is down. The numbers represent locations between pixels and not the pixels themselves.

The Coordinate System

Coordinate Translation • The translate(x,y) method will translate the origin of the coordinate from 0,0 to x.y so that subsequent calculations will be referenced from x,y. Any drawing methods will implicitly add x,y to its coordinate parameters.

Demo • Now use tranlate() with your previous demo

Colors and Grayscale • The color model specified by MIDP represents a color as an RGB value with 8 bits to represent each of the red, green, and blue components. • public void setColor(int color) • public void setColor(int red, int green, int blue) • public void setGrayScale(int value) • There are several Graphics methods that retrieve the value of the color attribute: • public int getColor( ) • public int getRedComponent( ) • public int getGreenComponent( ) • public int getBlueComponent( )

Drawing Lines and Arcs • The shapes may be drawn with either a SOLID or a DOTTED stroke style. This is set by the setStrokeStyle() method. • A SOLID stroke style draws using a one-pixel wide pen that fills the pixel immediately below and to the right of the specified coordinate. • A DOTTED stroke style will paint a subset of the pixels that would have been painted using the SOLID stroke style. • Besides text and images, the shapes that can be drawn are rectangles and arcs. These can be either filled or drawn.

Drawing Lines and Arcs

Clipping Rectangle • It is possible to limit the region of the screen that actually gets painted. This can be done to increase graphical performance and reduce the flicker that the user will see. • A clipping rectangle can be defined that restricts what part of the screen gets updated. Only pixels that are within the clipping rectangle will be affected even though the paint() method may specify instructions for drawing outside the area. • The clipping rectangle can be set in one of two way: • Requesting a repaint of only a specific area of the screen. This is generally done outside of the paint() method. • Canvas.repaint(x,y, width, height); • Setting the clip region inside the paint method. • g.clipRect(x,y, width, height); Both of these methods will define the same clipping region.

Clipping Rectangle

Demo • Write a bounce ball on the canvas. The ball will bounce when it touch the edge of the screen

Fonts • The font determines the shape and size of the text it is used to render. The font attribute can be set or read using the following Graphics methods: • public void setFont(Font font) • public Font getFont( ) • You can also obtain a reference to it using the following static method of the Font class: • public static Font getDefaultFont( ) • A font has three independent attributes that determine the appearance of rendered text: • Face • Style • Size

Anchor Points • The positioning of text and images on the screen can be simplified by using anchor points which minimize the amount of calculations that must be performed when positioning text and images. • For example, to center a string at location (x,y) using anchor points, one just has to use the following statement: • drawString(string, x, y, Graphics.TOP | Graphics.CENTER);

Rendering Text • The Graphics class has four methods that you can use to draw text on a Canvas: • public void drawChar(char c, int x, int y, int anchor) • public void drawChars(char[ ] chars, int offset, int length, int x, int y, int anchor) • public void drawString(String str, int x, int y, int anchor) • public void drawSubstring(String str, int offset, int length, int x, int y, int anchor)

Demo • Write strings on the Canvas with different alignment according to user’s view: • LEFT • RIGHT • CENTER

Images • Creating ImagesThe Image class has four static methods that can be used to create an Image: • public static Image createImage(String name); • public static Image createImage(byte[] data, int offset, int length); • public static Image createImage(int width, int h); • public static Image createImage(Image source); • Drawing ImagesOnce you have an image (either mutable or immutable), you can draw it onto a Canvas in its paint( ) method using the following Graphics method: • public void drawImage(Image image, int x, int y, int anchor);

Lab • Write a splash screen for your MIDlet • Write a ProgressBar class • Write an analog clock

Summary • The Canvas Class • Painting and the Graphics Class • The Coordinate System • Colors and Grayscale • Drawing Lines and Arcs • Fonts • Drawing Text • Images • Clipping

MIDP Programming