1. User Interface Summary Displayable ScreenCanvas FormAlertListTextbox Item DateFieldImageItemTextFieldStringItemGaugeChoiceGroup

2. Canvas  A type of screen that allows drawing and capturing keypad input  Abstract class – need to inherit and implement specific behaviors

3. Canvas  A type of screen that allows drawing and capturing keypad input  Abstract class – need to inherit and implement specific behaviors void paint(Graphics g) – carry out the drawing

4. Canvas  A type of screen that allows drawing and capturing keypad input  Abstract class – need to inherit and implement specific behaviors void paint(Graphics g) – carry out the drawing void repaint() – invoke to redraw Canvas (calls paint())

5. Canvas  A type of screen that allows drawing and capturing keypad input  Abstract class – need to inherit and implement specific behaviors void paint(Graphics g) – carry out the drawing void repaint() – invoke to redraw Canvas (calls paint()) void keyPressed(int keyCode) – invoked when key is pressed

6. Canvas  A type of screen that allows drawing and capturing keypad input  Abstract class – need to inherit and implement specific behaviors void paint(Graphics g) – carry out the drawing void repaint() – invoke to redraw Canvas (calls paint()) void keyPressed(int keyCode) – invoked when key is pressed void keyReleased(int keyCode) – invoked when key is released

7. Canvas  A type of screen that allows drawing and capturing keypad input  Abstract class – need to inherit and implement specific behaviors void paint(Graphics g) – carry out the drawing void repaint() – invoke to redraw Canvas (calls paint()) void keyPressed(int keyCode) – invoked when key is pressed void keyReleased(int keyCode) – invoked when key is released Key codes: Canvas.KEY_NUM0... Canvas.KEY_NUM9 Canvas.KEY_STAR... Canvas.KEY_POUND Canvas.LEFT... Canvas.RIGHT

8. Canvas  Treat as a regular Form void addCommand(Command c) void setCommandListener(CommandListenr l) void setTitle(String text) void setTicker(String text) int getWidth() Int getHeight()

9. Canvas  Treat as a regular Form Canvas gameView = new MahjongCanvas(); Display.getDisplay(this).setCurrent(gameView);

10. Canvas  Drawing takes place in void paint(Grpahics g);  Graphics class provides capabilities for drawing lines, rectangles, images void paint(Graphics g) { int red = 0x00FF000000; g.setColor(red); g.drawLine(x1, y1, x2, y2); int green = 0x0000FF00; g.setColor(green); g.drawRect(x, y, width, height); g.fillRect(x, y, width, height); int blue = 0x000000FF; g.setColor(blue); g.drawString(text, x, y, anchor); }

11. Canvas  Drawing takes place in void paint(Grpahics g);  Graphics class provides capabilities for drawing lines, rectangles, images void paint(Graphics g) { for (int i = 0; i < shapes.size(); ++i) { Shape s = (Shape) shape.elmentAt(i); this.setColor( s.getColor() ); s.draw( g ); }

12. Canvas  Placement of Text and Images (Anchor Points)  BASELINE, TOP, BOTTOM, RIGHT, LEFT, HCENTER, VCENTER g.drawLine(this.getWidth()/2, 0, this.getWidth()/2, this.getHeight()); g.drawLine(0, 20, this.getWidth(), 20); g.drawString("Canvas Caption", this.getWidth()/2, 20, Graphics.BASELINE | Graphics.HCENTER); g.drawLine(0, 50, this.getWidth(), 50); g.drawString("Canvas Caption", this.getWidth()/2, 50, Graphics.BASELINE | Graphics.LEFT); g.drawLine(0, 80, this.getWidth(), 80); g.drawString("Canvas Caption", this.getWidth()/2, 80, Graphics.BASELINE | Graphics.RIGHT); g.drawLine(0, 110, this.getWidth(), 110); g.drawString("Canvas Caption", this.getWidth()/2, 110, Graphics.LEFT | Graphics.TOP); g.drawLine(0, 140, this.getWidth(), 140); g.drawString("Canvas Caption", this.getWidth()/2, 140, Graphics.LEFT | Graphics.BOTTOM);

13. Canvas  Placement of Text and Images (Anchor Points)  BASELINE, TOP, BOTTOM, RIGHT, LEFT, HCENTER, VCENTER g.drawLine(this.getWidth()/2, 0, this.getWidth()/2, this.getHeight()); g.drawLine(0, 20, this.getWidth(), 20); g.drawString("Canvas Caption", this.getWidth()/2, 20, Graphics.BASELINE | Graphics.HCENTER); g.drawLine(0, 50, this.getWidth(), 50); g.drawString("Canvas Caption", this.getWidth()/2, 50, Graphics.BASELINE | Graphics.LEFT); g.drawLine(0, 80, this.getWidth(), 80); g.drawString("Canvas Caption", this.getWidth()/2, 80, Graphics.BASELINE | Graphics.RIGHT); g.drawLine(0, 110, this.getWidth(), 110); g.drawString("Canvas Caption", this.getWidth()/2, 110, Graphics.LEFT | Graphics.TOP); g.drawLine(0, 140, this.getWidth(), 140); g.drawString("Canvas Caption", this.getWidth()/2, 140, Graphics.LEFT | Graphics.BOTTOM);

14. Canvas  Placement of Text and Images (Anchor Points)  BASELINE, TOP, BOTTOM, RIGHT, LEFT, HCENTER, VCENTER

15. Lab  Create a class Rectangle that represents a 2D rectangle data members: ulx, uly, width, height methods:constructor void draw(Graphics g) void move(int dx, int dy)  Create a class ShapesCanvas that extends Canvas data members: collection of Rectnagles methods:constructor void paint(Graphics g) <-- override: draw shapes void keyPressed(int keyCode) <-- override