MIDP Programming

MIDP ProgrammingMIDP Programming

THE LOW-LEVEL USER-INTERFACE API

<Module>/<Chapter> 2 of <total>

Chapter ObjectivesChapter 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 ClassThe 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 ClassThe Canvas Class


Screen AttributesScreen 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 Painting and the Graphics ClassClass

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 Painting and the Graphics ClassClass


DemoDemo

Use Canvas to paint: A maximum Circle at the center of the

screen An image at the center of the screen


The Coordinate SystemThe 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 SystemThe Coordinate System


Coordinate TranslationCoordinate 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 Demo

Now use tranlate() with your previous demo


Colors and GrayscaleColors 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 ArcsDrawing 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 ArcsDrawing Lines and Arcs


Clipping RectangleClipping 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:1. 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);

2. 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 RectangleClipping Rectangle


DemoDemo

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


FontsFonts

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 PointsAnchor 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 TextRendering 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)


DemoDemo

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


ImagesImages

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);


LabLab

1. Write a splash screen for your MIDlet

2. Write a ProgressBar class

3. Write an analog clock


SummarySummary

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

Documents

Transcript of MIDP Programming