cosc 4755

23
Cosc 4755 Low-level GUI APIs

Upload: elmer

Post on 24-Feb-2016

50 views

Category:

Documents


0 download

DESCRIPTION

Cosc 4755. Low-level GUI APIs. Low-Level API. Composed of Canvas and Graphics classes GameCanvas will be covered later on Canvas is an abstract class, where you must write your paint(Graphics g) method. There are numerous draw methods But we are “rolling our own” for most everything else. - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: Cosc  4755

Cosc 4755

Low-level GUI APIs

Page 2: Cosc  4755

Low-Level API

• Composed of Canvas and Graphics classes– GameCanvas will be covered later on

• Canvas is an abstract class, where you must write your paint(Graphics g) method.– There are numerous draw methods– But we are “rolling our own” for most everything

else.

Page 3: Cosc  4755

Canvas

• Canvas is a displayable object. So we extend a canvas class and implement the required abstract class paint(Graphics g).

• The simplest example is to draw something on the “screen”, known as the canvas

Page 4: Cosc  4755

Simple Canvas exampleimport javax.microedition.midlet.*;import javax.microedition.lcdui.*;public class LowLevel extends MIDlet{ private Display display; // The display for this MIDlet private myCanvas myCan; public LowLevel() { display = Display.getDisplay(this); myCan = new myCanvas(); } public void startApp() { display.setCurrent(myCan); //Canvas is a displayable object, like other screen objects myCan.repaint(); //force a redraw. } public void pauseApp() {} public void destroyApp(boolean unconditional) { }}class myCanvas extends Canvas { public void paint(Graphics g) { g.setColor(0,0,255); //set color to blue g.drawString("Hello World!",0,0,0); g.drawRect(getWidth()/2 -10, getHeight()/2 – 10, 20, 20); //draw square centered, with length of 20. }}

Page 5: Cosc  4755

Drawing Methods

• Graphics has the following methods– DrawArc Draws an elliptical arc – DrawChar Draws a character– DrawImage Draws a specified image– DrawLine Draws a line– DrawRect Draws an outline of rectangle– DrawRoundRec Draws a outline of rectangle with

rounded corners– DrawString Draws a specified string of characters.

Page 6: Cosc  4755

Drawing Methods (2)• And set of “fill” draw methods.

– fillArc, fillRect, fillRoundRect– Also a fillTraingle, which doesn’t have a draw method.

• Color– getColor()

• Returns an int RGB 0x00RRGGBB• Or getRedComponent, Green, and Blue

– SetColor(int red, int green, int blue)• Or SetColor(int RGB)

• Fonts (Note there may only be one system font)– SetFont(Font font)– getFont() which returns a Font

Page 7: Cosc  4755

Drawing Methods (3)

• From the canvas method, two very important methods:– getHeight()– getWidth()– You will need to know the pixel height and width of

the “screen” you are working with.• Every phone screen is likely to be a little different and

your app will have to deal with it.• Default emulators: ClamShell 170x220px, Msa

240x320px (one the examples pics are from).

Page 8: Cosc  4755

Examples of drawing• First for the rest of the example, assume the following class

exists, declared as myColor Color = new myColor();class myColor { //color in RGB format, so I don't have to remember them. int WHITE = 0x00FFFFFF; int BLACK = 0x00000000; int BLUE = 0x000000FF; int RED = 0x00FF0000; int GREEN = 0x0000FF00; int GRAY = 0x007F7F7F;}

Page 9: Cosc  4755

Drawing Example 1• Extending the basic example before,class myCanvas extends Canvas { Image myImage; public myCanvas() { try { myImage = Image.createImage("/pic.jpg"); } catch (Exception e) { myImage = null;} } public void paint(Graphics g) { //clear the screen to white g.setColor(Color.WHITE); g.fillRect(0,0, getWidth(), getHeight()); //now draw some stuff g.setColor(Color.BLUE); g.drawString("Hello World!",0,0,0); g.setColor(Color.BLACK); g.drawRect(getWidth()/2 -10, getHeight()/2 – 10, 20, 20); g.setColor(Color.GREEN); g.fillRect(20, 20, 20, 20); g.setColor(Color.RED); g.fillRoundRect(15, 55, myImage.getWidth() +10, myImage.getHeight()+10, 10, 10); g.drawImage(myImage, 20, 60, 0); //put image over rounded rectangle g.setColor(Color.GRAY); g.drawString("Triangle", 100, 75, 0); g.fillTriangle(100, 100, 120, 100, 110, 110); //attempt a circle. g.setColor(Color.RED); g.drawString("Circle!", 100, 35, 0); g.fillArc(100, 50, 20, 20, 0, 360); }}

Page 10: Cosc  4755

Event key actions.

• There are three empty methods that can be subclassed to handle key events.– keyPressed(int KeyCode)– keyRepeated(int KeyCode)– keyReleased(int KeyCode)– And the following KeyCodes are defined as

constants• KEY_NUM0, KEY_NUM1, KEY_NUM2, KEY_NUM3,

KEY_NUM4, KEY_NUM5, KEY_NUM6, KEY_NUM7, KEY_NUM8, KEY_NUM9, KEY_STAR, and KEY_POUND.

Page 11: Cosc  4755

Event Key actions (2)

• For “full keyboards”, with keycode to find out what the key pressed was– If (keycode >0) {char ch = (char)keyCode;}

• Using the getGameAction(int KeyCode) with can also use the following constants– UP, DOWN, LEFT, RIGHT, FIRE, GAME_A, GAME_B,

GAME_C, and GAME_D.• But you will have to figure out where the keys were

map too.

Page 12: Cosc  4755

Example 2class myCanvas extends Canvas { myColor Color = new myColor(); int x, y; public myCanvas() { x = getWidth()/2; y = getHeight()/2; } public void paint(Graphics g) { //clear the screen to white g.setColor(Color.WHITE); g.fillRect(0,0, getWidth(), getHeight()); g.setColor(Color.RED); g.drawString("Press a key to move the ball",0,0,0); g.fillArc(x-5, y-5, 10, 10, 0, 360); } public void keyPressed(int keyCode){ // what game action does this key map to?

int gameAction = getGameAction(keyCode);if(gameAction == RIGHT) { x += 5;} else if(gameAction == LEFT) {x -= 5;} else if(gameAction == UP) {y -= 5;} else if(gameAction == DOWN) {y += 5;}repaint(); // make sure to repaint

}}

Page 13: Cosc  4755

Example 3class myCanvas extends Canvas { myColor Color = new myColor(); char c; public myCanvas() { c = '?'; } public void paint(Graphics g) { //clear the screen to white g.setColor(Color.WHITE); g.fillRect(0,0, getWidth(), getHeight()); g.setColor(Color.RED); if (c == '?') { g.drawString("Press any key",0,0,0); } else { g.drawString("You Pressed:"+c,0,0,0); } } public void keyPressed(int keyCode){ if (keyCode >0) { c = (char)keyCode; } else { c = '?'; } // make sure to repaint repaint(); }}

Only the number keys worked with this emulator

Page 14: Cosc  4755

Adding Commands

• Commands can be added just like in MIDlets.

• This example, adds menus to change between the last 3 examples.– See website for

complete code: LowLevel.zip

private Command done, ex1, ex2, ex3;

public LowLevel() { display = Display.getDisplay(this); myCan = new myCanvas(); done = new Command("Exit", Command.EXIT,0); ex1 = new Command("Example1", Command.ITEM, 1); ex2 = new Command("Example2", Command.ITEM, 1); ex3 = new Command("Example3", Command.ITEM, 1); myCan.addCommand(done); myCan.addCommand(ex1); myCan.addCommand(ex2); myCan.addCommand(ex3); myCan.setCommandListener(this); }… public void commandAction(Command c, Displayable s) { if (c == done) { destroyApp(false); notifyDestroyed(); } else if (c == ex1) { myCan.switchEx(1); } else if (c == ex2){ myCan.switchEx(2); } else if (c == ex3){ myCan.switchEx(3); } }

Page 15: Cosc  4755

Adding Commands (2)

Note the different placement of the Menu items, between the 2 emulators.

Page 16: Cosc  4755

Fonts and Anchor Points

• DrawString(“Text”, int x, int y, int anchor)– Drawing the text is based on “anchor points”,

which are used to minimize the amount of computation required to place text.

– Anchor points are defined by • 1. horizontal (LEFT, HCENTER, RIGHT)• 2. vertical (TOP, BASELINE, BOTTOM)

– Using a bitwise OR • TOP|LEFT which also results in zero.

Page 17: Cosc  4755

Font placement Example Font f = g.getFont();String str = "Hello World";x = getWidth()/2;y =0;g.drawString(str,x, y, g.TOP |g.LEFT);y += f.getHeight();g.drawString(str, x, y, g.TOP|g.HCENTER);y += f.getHeight();g.drawString(str, x, y, g.TOP|g.RIGHT);y += f.getHeight();

//The next three should look the sameg.drawString(str,x, y, g.TOP |g.LEFT);y += f.getHeight();g.drawString(str, x + f.stringWidth(str)/2, y, g.TOP|g.HCENTER);y += f.getHeight();g.drawString(str, x + f.stringWidth(str), y, g.TOP|g.RIGHT);

Page 18: Cosc  4755

Changing the font

• In the graphics, there is a setfont method.– SetFont(Font f);– You can use Font.getFont to get the font you want

to set.– There are a couple of constants for getFont• Font.FACE_SYSTEM (system font)• Font.FACE_MONOSPACE• Font.FACE_PROPORTIONAL• Size is either SMALL, MEDIUM, or LARGE

Page 19: Cosc  4755

Changing the font (2)

• And last is the style– STYLE_PLAIN, STYLE_BOLD, STYLE_ITALIC, and

STYLE_UNDERLINED– Font.getFont(Font.FACE_SYSTEM,

Font.STYLE_BOLD, Font.SIZE_MEDIUM)• Returns the font, that is medium size, system, bold.

• NOTE: if you request a font that is not supported, it returns the standard system font.

Page 20: Cosc  4755

Font Exampleg.setFont(Font.getFont(Font.FACE_SYSTEM, Font.STYLE_PLAIN, Font.SIZE_LARGE));g.drawString("System Large Font", 0, 0, g.LEFT | g.TOP);

g.setFont(Font.getFont(Font.FACE_SYSTEM, Font.STYLE_PLAIN, Font.SIZE_MEDIUM));g.drawString("System Medium Font", 0, 15, g.LEFT | g.TOP);

g.setFont(Font.getFont(Font.FACE_SYSTEM, Font.STYLE_PLAIN, Font.SIZE_SMALL));g.drawString("System Small Font", 0, 30, g.LEFT | g.TOP);

g.setFont(Font.getFont(Font.FACE_SYSTEM, Font.STYLE_BOLD, Font.SIZE_MEDIUM));g.drawString("Bold Style", 0, 45, g.LEFT | g.TOP);

g.setFont(Font.getFont(Font.FACE_SYSTEM, Font.STYLE_ITALIC, Font.SIZE_MEDIUM));g.drawString("Italic Style", 0, 60, g.LEFT | g.TOP);

g.setFont(Font.getFont(Font.FACE_SYSTEM, Font.STYLE_UNDERLINED, Font.SIZE_MEDIUM));g.drawString("Underlined Style", 0, 75, g.LEFT | g.TOP);

g.setFont(Font.getFont(Font.FACE_MONOSPACE, Font.STYLE_PLAIN, Font.SIZE_MEDIUM));g.drawString("System Monospace", 0, 90, g.LEFT | g.TOP);g.setFont(Font.getFont(Font.FACE_PROPORTIONAL, Font.STYLE_PLAIN, Font.SIZE_MEDIUM));g.drawString("System Pproportional", 0, 105, g.LEFT | g.TOP);

Note: System font Large, medium and small are the same, because small and large are not supported in this emulator.

Page 21: Cosc  4755

Touch events

• Supported in the Canvas class• First you can check to see if the phone has

touchevents with– bool hasPointerEvents()– bool hasPointerMotionEvents()

• A Note, a big in emulators for SDK 3.0, These always come back true.

Page 22: Cosc  4755

Touch events (2)• three method are provided, there are empty by default.

you will need to override the methods with your own code

• protected void pointerPressed(int x, int y)– Called when the touch/pointer is pressed.

• protected void pointerReleased(int x, int y)– Called when the touch/pointer is released.

• protected void pointerDragged(int x, int y)– called when each time the pointer is moved.

• so as you slide your finger across the screen, it called every time your finger moves.

Page 23: Cosc  4755

QA&