User Interface Summary

Displayable

Screen Canvas

Form Alert List Textbox

Item

DateField ImageItem TextFieldStringItem Gauge ChoiceGroup

Canvas A type of screen that allows drawing and capturing keypad input

Abstract class – need to inherit and implement specific behaviors

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

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

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

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

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

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

Canvas Treat as a regular Form

Canvas gameView = new MahjongCanvas();

Display.getDisplay(this).setCurrent(gameView);

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

}

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

}

}

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

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

Canvas Placement of Text and Images (Anchor Points)

BASELINE, TOP, BOTTOM, RIGHT, LEFT, HCENTER, VCENTER

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