midlet programming part ii n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
MIDlet Programming: Part II PowerPoint Presentation
Download Presentation
MIDlet Programming: Part II

play fullscreen
1 / 68

MIDlet Programming: Part II

452 Views Download Presentation
Download Presentation

MIDlet Programming: Part II

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. MIDlet Programming: Part II Low-level UI Pinata Winoto

  2. Overview • Introduction • Canvas (Painting) • Graphics (Lines, Rectangles, and Arcs) • Fonts and Styles • Redrawing and Double-buffering • Image and Animation • Event Handling

  3. Why Low-level UI? • Higher flexibility in UI design • Higher artistic value (colors and palettes) • Better event handling (pointer or keys) • Fit game-design requirement • Drawbacks: • more complex programming! • More device dependent

  4. Common Components • Package javax.microedition.lcdui.* • Canvas • Low-level control over the display • No title (unlike a screen) • Graphics • Provides methods to draw lines, rectangles, images, etc. to a Canvas or an Image. • Use a Canvas method paint(Graphics g) to render • Images • Artistic features in Portable Network Graphics format

  5. Show to the display Draw shapes Identify what we can use Graphics: drawLine() drawRect() Etc. Canvas: paint() repaint() Display: isColor() numColors() Retrieve and draw images Canvas Canvas: getWidth() getHeight() isDoubleBuffered() Etc. Graphics: drawImage() Image: createImage() Structure

  6. Overview • Introduction • Canvas (Painting) • Graphics (Lines, Rectangles, and Arcs) • Fonts and Styles • Redrawing and Double-buffering • Image and Animation • Event Handling

  7. Canvas • Create a class by extending Canvas class publicclass MyCanvas extends Canvas { protectedvoid paint(Graphics g) { } ……. } • Instantiate our canvas myCanvas = new MyCanvas(); myDisplay.setCurrent(myCanvas); myCanvas.repaint();

  8. Height Width Canvas Dimension Use getWidth() and getHeight()

  9. Default Coordinate System • Similar to J2SE (width, 0) (0, 0) (width, height) (0, height)

  10. How the Coordinate Work • Coordinate determine the upper-left position of the pixel --- NOT the position of the pixel • If we draw a line from (0, 0) to (3, 3) the result are 4 pixels, which can be shown as follow: (0, 0) (3, 3)

  11. Draw Background publicclass MyCanvas extends Canvas { protectedvoidpaint(Graphics g) { intwidth = getWidth(); intheight = getHeight(); //// draw a black background (default color of paint) //// g.fillRect(0, 0, width, height); } }

  12. Paused Resuming Show a red rectangle What If No Background? • Overlapping after a Paused! Background is used to clean any unwanted image…

  13. Why paint()? (OO concept ) • Both Canvas and Screen are subclasses of Displayable (remember that?) • paint( ) is the abstract method defined in the class Displayable! • Screen has implemented paint() (we don’t need to care of it!) • paint() in Canvas is still an abstract method, we need to implement it!

  14. paint() Properties • The destination is the display or back buffer (if we use double-buffering which will be explained later) • The clip region must at least one pixel • The Canvas default color is black • Default font will be used • Solid stroke will be used • The default coordinate system is in effect • The Canvas is visible

  15. repaint() • The method paint() is never to be called directly! • Use repaint() to update the display • finalvoidrepaint() --- request the canvas to be repainted • finalvoidrepaint(intx, inty, intwidth, intheight) --- request a specified region to be repainted • Will discuss it in “Redrawing and Double-buffering”

  16. Overview • Introduction • Canvas (Painting) • Graphics (Lines, Rectangles, and Arcs) • Fonts and Styles • Redrawing and Double-buffering • Image and Animation • Event Handling

  17. Graphics • A class for drawing objects/shapes into a Canvas • Not extendable! • Two ways to instantiate it • paint(Graphics g) • To paint on the Canvas • Lifetime: until the painting end • Graphics g = Image.getGraphics() • To draw on the top of a mutable image (will be explained later) • Lifetime: until the lifetime of the image

  18. Important Methods • Draw a line: • drawLine(intx1, inty1, intx2, inty2) • Set stroke style: • setStrokeStyle(intstyle) • Set the current color: • setColor(intred, intgreen, intblue) • setGrayScale(intscale), etc.

  19. Important Methods (cont’) • Draw a rectangle: • drawRect(int x, int y, int width, int height) • drawRoundRect(int x, int y, int width, int height, int arcWidth, int arcHeight) • fillRect(int x, int y, int width, int height) • fillRoundRect(int x, int y, int width, int height, int arcWidth, int arcHeight) • Draw an arc: • drawArc(int x, int y, int width, int height, int startAngle, int arcAngle) • fillArc(int x, int y, int width, int height, int startAngle, int arcAngle)

  20. Draw a Line w/ a Stroke Style • Default coordinate system • drawLine(intx1, inty1, intx2, inty2) • Draw a line from (x1, y1) to (x2, y2) • setStrokeStyle(intstyle) • SOLID (default) or DOTTED • Affect Arcs, Lines, Rectangles, Rounded Rectangles

  21. Set the Current Color (RGB) • 24 bits RGB (8 bits each), range: 0 – 255 each • setColor(255, 0, 0) • Strong red, no green and blue • setColor(0, 255, 0) • Strong green, no red and blue • setColor(0, 0, 255) • Strong blue, no red and green • setColor(0, 200, 255) • Light blue • setColor(255, 255, 255) or setColor(0, 0, 0) • Pure white or black If the device does not support 24 bits color, then the Java machine will map the RGB color to the closest color 

  22. Set the Current Color (Grayscale) • 8 bits grayscale: 0 – 255 • setGrayScale(0) • Pure black • setGrayScale(255) • Pure white • May not appear correctly in a color display! 

  23. Draw Rectangles • Border only: • drawRect(int x, int y, int width, int height) • drawRoundRect(int x, int y, int width, int height, int arcWidth, int arcHeight) • Filled: • fillRect(int x, int y, int width, int height) • fillRoundRect(int x, int y, int width, int height, int arcWidth, int arcHeight)

  24. Draw Rectangles (Examples)

  25. Draw Rectangles (Rounded) g.fillRoundRect(10, 10, 100, 100, 100, 20) Increase arcWidth Using: (…, 20, 20)

  26. g.drawArc(20, 20, 150, 150, 0, 270) Draw Arcs • drawArc(int x, int y, int width, int height, int startAngle, int arcAngle) • fillArc(int x, int y, int width, int height, int startAngle, int arcAngle) • Inside a rect (x, y, width, height) • startAngle: 0o (3:00), 90o(12:00), 180o (9:00), etc. • arcAngle: counter-clockwise

  27. Draw Arcs (Examples) g.fillArc(20, 20, 150, 150, 0, 360) g.fillArc(20, 20, 150, 100, 45, 270) g.fillArc(20, 20, 150, 150, 0, 225)

  28. Overview • Introduction • Canvas (Painting) • Graphics (Lines, Rectangles, and Arcs) • Fonts and Styles • Redrawing and Double-buffering • Image and Animation • Event Handling

  29. Fonts & Styles (1) • Request a default font: • static Font getDefaultFont( ) • Request a new font: • static Font getFont(intface, intstyle, intsize) • Face: • 0 or FACE_SYSTEM • 32 or FACE_MONOSPACE • 64 or FACE_PROPORTIONAL

  30. Fonts & Styles (2) • Style: • 0 or STYLE_PLAIN • 1 or STYLE_BOLD • 2 or STYLE_ITALIC • 4 or STYLE_UNDERLINED • Size: • 8 or SIZE_SMALL • 0 or SIZE_MEDIUM • 16 or SIZE_LARGE

  31. Fonts & Styles (3) • Both face and size can only have a single value • Style can have multiple value, using OR (|) Font font = Font.getFont( Font.FACE_SYSTEM, Font.STYLE_BOLD | Font.STYLE_ITALIC, Font.SIZE_LARGE); • If no such a font, system will return the closest one

  32. Fonts & Styles (4) • Set a font: • voidsetFont(Font font) • Example: Font myfont = Font.getFont(Font.FACE_SYSTEM, Font.STYLE_BOLD, Font.SIZE_LARGE); g.setFont(myfont);

  33. Text Position (1) • drawString(String str, int x, int y, int anchor) • drawChar(char chr, int x, int y, int anchor) • x and y are the Anchor coordinate of the text • The available positions of the Anchor are • LEFT / HCENTER / RIGHT for x • TOP / BASELINE / BOTTOM for y

  34. HCENTER|TOP RIGHT|TOP LEFT|TOP PolyUChess LEFT|BASELINE RIGHT|BASELINE RIGHT|BOTTOM LEFT|BOTTOM HCENTER|BOTTOM g.drawString(“PolyUChess”, 50,10, Graphics.LEFT|Graphics.TOP) HCENTER|BASELINE Text Position (2) • The combinations of the Anchor positions • Example:

  35. g.drawString(“PolyUChess”, 50,10, Graphics.LEFT|Graphics.TOP) Text Position (Example) (50, 10) as the TOP|LEFT of the Text

  36. Fonts & Styles (Example)

  37. Remarks on Font Styles • STYLE_PLAIN is superseded by other STYLE • We can have BOLD and ITALIC at the same time • PLAIN and ITALIC = ITALIC

  38. Other Methods • int getFace( ), int getStyle( ), int getSize( ) • boolean isPlain( ), boolean isBold( ), boolean isItalic( ), boolean isUnderlined( ) • drawSubstring(String str, int offset, int length, int x, int y, int anchor) • drawChars(char[ ] data, int offset, int length, int x, int y, int anchor) • Etc. You may learn them later …..

  39. Overview • Introduction • Canvas (Painting) • Graphics (Lines, Rectangles, and Arcs) • Fonts and Styles • Redrawing and Double-buffering • Image and Animation • Event Handling

  40. repaint( ) • We cannot call paint( ) directly, but we can call repaint( ) to invoke paint( ) publicvoidpaint(Graphicsg) { …… } publicvoidrun( ) { ….. repaint( ); }

  41. Example P3Demo1c.avi

  42. Pitfalls • Asynchronous call! • A repaint( ) may run before another repaint( ) finished rendering the display • Solutions: • serviceRepaint( ) --- protect a repaint( ) until it finished the rendering • callSerially( ) --- using “serial queue” (in multithreading) • Flickering • Solutions: Double-buffering

  43. Potential flickering Flickering (Tearing) • Flickering may appears when multiple things are animated simultaneously Source of problem: Low computational speed and high speed of the updating of display memory What we want in the display Frame 1 Frame 2 What we get Frame 1 transition frame Frame 2

  44. Double Buffering • Double-buffering is a common method to solve flickering --- render the display at once Frame 1 Frame 2 What in display Show it at once What in the buffer memory Frame 1 transition frame Frame 2

  45. Double Buffering (cont’) • Some (old) devices do not support double-buffering • How to check: use method isDoubleBuffering( ) • Solution: create your own double-buffering mechanism (you need an image buffer for it) • Should we write it by ourselves? YES • Flickering could be a serious problem in games (source of epilepsy seizure!) • Good programming practice! • More codes 

  46. publicclass MyCanvas extends Canvas { protected Image imgBuff; int width = getWidth(); int height = getHeight(); boolean dblBuff = true; MyCanvas( ) { //// constructor: create imgBuff if no DoubleBuffered //// if (!isDoubleBuffered( )) { dblBuff = false; imgBuff = Image.createImage(width, height); } } protectedvoidpaint(Graphics gReal) { Graphics g; //// use original graphic if it is DoubleBuffered, otherwise use imgBuff //// g = (dblBuff)? gReal : imgBuff.getGraphics( ); g.fillRect(0, 0, width, height); g.setColor(255, 0, 0); g.fillRect(10 + counter, 10 + counter, 10, 10); if (!dblBuff) //// copy to original graphic if not DoubleBuffered //// gReal.drawImage(imgBuff, 0, 0, Graphics.TOP|Graphics.LEFT); }

  47. Overview • Introduction • Canvas (Painting) • Graphics (Lines, Rectangles, and Arcs) • Fonts and Styles • Redrawing and Double-buffering • Image and Animation • Event Handling

  48. Images • Immutable images: • You cannot draw on an immutable image • Loaded from an image file using Image.createImage(Stringname) or Image.createImage(Imageimage) • Mutable images: • You can draw on a mutable image • Created using Image.createImage(intwidth, intheight) • However…. • We can copy an immutable image to a mutable image, and vice versa

  49. HCENTER|TOP RIGHT|TOP LEFT|TOP LEFT|VCENTER RIGHT|VCENTER Unlike in texts, we have VCENTER instead of BASELINE for anchor RIGHT|BOTTOM LEFT|BOTTOM HCENTER|BOTTOM HCENTER|VCENTER For image anchor Images (cont’) • Draw it to a Canvas using method: g.drawImage(Image imgName, intx, inty, intanchor);