MIDP Style Guide for the Java 2 Platform, Micro Edition

10.4 Colors, Fonts, Shapes, and Images

Application developers control what appears on a canvas screen: images, text, and simple shapes. They also control attributes such as the colors used, the fonts, whether lines are drawn with solid or dotted strokes, and so on.

10.4.1 Images

The guidelines for images drawn onto a canvas are the same as those for image items on forms: Images should be in PNG (portable network graphics) format, and application developers should consider saving them with limited colors to conserve resources. (See "Images" on page 92 for detailed information.)

10.4.2 Screen Attributes

For high-level screens, the MIDP implementation sets the colors, the stroke style used for drawing borders, and the font. (Application developers can request a font for some high-level entities, such as elements in lists, but there is no guarantee that the request will be honored.) The MIDP implementation makes its use of colors, fonts, and border styles available to the application developer.

Application Developers

Consider: If your application uses both canvas and high-level screens, provide a consistent visual appearance by using the same colors, fonts, and border styles as the system.

10.4.3 Coordinate System

Drawing on a canvas involves providing values such as the coordinates at which the object should be drawn, sometimes a height or a width, and so on. This requires an understanding of the coordinate system. The coordinate system has its origin at the upper-left corner. The X coordinates increase left to right, and the Y coordinates increase top to bottom, as shown in Figure 10.6.

The coordinates specify the points between pixels. The pixel at (1,1), then, would be drawn below and to the right of coordinate (1,1). It is the pixel bounded by the coordinates (1,1), (1,2), (2,1), and (2,2). Figure 10.7 shows that pixel.

10.4.4 Drawing and Filling Operations

Drawing a line in the coordinate system touches pixels at both ends. For example, drawing a line from the points (0,3) to (0,5) is three pixels long. Drawing a line from the points (1,1) to (1,1) would result in drawing the pixel shown in Figure 10.7.

Because of the coordinate system and the way that the drawing of lines is specified, filled and drawn (unfilled) shapes have different sizes. An unfilled shape is one pixel larger in width and height than a filled one.

MIDP Implementors

Strongly Recommend: To fill a rectangle with the origin (0,0), height 6, and width 8, fill in the pixels between coordinates (0,0), (0,8), (6,0), and (6,8), as shown in Figure 10.8. That is, starting at point (0,0) fill in the rectangle is made by drawing eight pixels right and six pixels down.

Figure 10.8. Filled Rectangle

Strongly Recommend: To draw a rectangle with the same origin, height, and width, draw it as though you are drawing lines from the pixel at point (0,0) to the pixel at point (0,8), from the pixel at point (8,0) to the pixel at point (8,6), and so on. The effect is that the height will be one pixel taller than the difference between Y coordinates, and the width will be one pixel longer than the difference between X coordinates. Figure 10.9 shows a rectangle that has been drawn.

Figure 10.9. Drawing a Rectangle

Application Developers and MIDP Implementors

Strongly Recommend: To draw a filled rectangle and a drawn rectangle that are the same size, you must request rectangles with different heights and widths. For example, consider an object like a progress gauge, which has a row of rectangles all of the same size, some of which are filled and some of which are drawn, as shown in Figure 10.10. If the filled rectangles to the left were drawn with a height of 15 and a width of 4, the hollow rectangles to the right would be drawn with a height of 14 and a width of 3.

Figure 10.10. Progress Gauge with Same-Size Hollow and Filled Rectangles

10.4.5 Anchor Points

Drawing a string or an image requires not only a coordinate but also an anchor point. An anchor point is a combination of a horizontal value (LEFT, RIGHT, or HCENTER) and a vertical value (TOP, BOTTOM, or VCENTER) that indicates which part of the string or image should be placed at the coordinate. Figure 10.10 shows the various anchor points.

Application Developers and MIDP Implementors

Strongly Recommend: Do not use the VCENTER value when specifying an anchor point for a string. (You can use any value when specifying an anchor point for an image.)