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.

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

Simple Canvas example import 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. }

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.

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

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

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 = 0x ; int BLUE = 0x000000FF; int RED = 0x00FF0000; int GREEN = 0x0000FF00; int GRAY = 0x007F7F7F; }

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

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.

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.

Example 2 class 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 }

Example 3 class 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

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

Adding Commands (2) Note the different placement of the Menu items, between the 2 emulators.

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.

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 same g.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);

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

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.

Font Example g.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.

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.

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.

Q A &