Web Teknologi 3 (MKB721C) Minggu 10 Page 1

MINGGU 10MINGGU 10Web Teknologi 3 (Web Teknologi 3 (MKB721C)MKB721C)

• Pokok Bahasan:– Programming a Custom User Interface

• Tujuan Instruksional Khusus:– Siswa memahami bagaimana membuat dan mengembangkan

Custom User Interface

Agenda

• Programming a Custom User Interface

• Class Canvas

Class Canvas di Java ME

Abstract Class Canvas• Definisi: The Canvas class is a base class for writing

applications that need to handle low-level events and to issue graphics calls for drawing to the display. 

• Canvas is the heart of MIDP’s custom user-interface API.

• Canvas class is interchangeable with standard Screen classes, so an application may mix and match Canvas with high-level screens as needed. 

• For example, a List screen may be used to select the track for a racing game, and a Canvassubclass would implement the actual game.

Action & Event Canvas

• The Canvas provides the developer with methods to handle game actions, key events, and pointer events (if supported by the device)

• The key events are reported with respect to key codes, which are directly bound to concrete keys on the device, use of which may hinder portability. Portable applications should use game actions instead of key codes.

Canvas & Displayable lainnya• Kesamaan:

– Canvas class allows the application to register a listener for commands

• Perbedaan:– Canvas class requires applications to subclass it in order to use

it. The paint() method is declared abstract, and so the application must provide an implementation in its subclass. 

– Other event-reporting methods are not declared abstract, and their default implementations are empty (that is, they do nothing). This allows the application to override only the methods that report events in which the application has interest.

– Several new listener interfaces would need to be created, one for each kind of event that might be delivered. An alternative would be to have fewer listener interfaces, but this would require listeners to filter out events in which they had no interest.

Key Events & Key Codes• MIDP defines the following key codes (ITU-T standard telephone

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

• Zero is defined to be an invalid key code. It is thus possible for an application to convert a keyCode into a Unicode character using the following code:

if (keyCode > 0) {

char ch = (char)keyCode;

// ...

}

• This technique is useful only in certain limited cases. In particular, it is not sufficient for full textual input, because it does not handle upper and lower case, keyboard shift states, and characters that require more than one keystroke to enter. For textual input, applications should always use TextBox or TextField objects.

• It is sometimes useful to find the name of a key in order to display a message about this key. In this case the application may use the getKeyName() method to find a key's name.

Game Action• Portable applications that need arrow key events and gaming-related events

should use game actions in preference to key codes and key names. MIDP defines the following game actions: UP, DOWN, LEFT, RIGHT, FIRE, GAME_A, GAME_B, GAME_C, and GAME_D.

• The application can translate a key code into a game action using thegetGameAction(int keyCode) method, and it can translate a game action into a key code using thegetKeyCode(int gameAction) method.

• Contoh: g == getGameAction(getKeyCode(g)) // (1)

k == getKeyCode(getGameAction(k)) // (2)

–Catatan:

• Expression (1) is always true. However, expression (2) might be true but is not necessarily true.

• The implementation is not allowed to change the mapping of game actions and key codes during execution of the application.

Commands

• It is also possible for the user to issue commands when a canvas is current.

• For some devices the keys used for commands may overlap with the keys that will deliver key code events to the canvas. If this is the case, the device will provide a means transparent to the application that enables the user to select a mode that determines whether these keys will deliver commands or key code events to the application.

• When the Canvas is in full-screen mode, if there is no command listener present, the device may choose to deliver key code events for keys that would otherwise be reserved for delivery of commands.

• Game developers should be aware that access to commands will vary greatly across devices, and that requiring the user to issue commands during game play may have a great impact on the ease with which the game can be played.

Event Delivery• event delivery methods:

– showNotify()

– hideNotify()

– keyPressed()

– keyRepeated()

– keyReleased()

– pointerPressed()

– pointerDragged()

– pointerReleased()

– paint()

• These methods are all called serially. That is, the implementation will never call an event delivery method before a prior call to any of the event delivery methods has returned. 

• The serviceRepaints()method is an exception to this rule, as it blocks until paint() is called and returns. This will occur even if the application is in the midst of one of the event delivery methods when it calls serviceRepaints().

Informasi tentang Canvas• Mendapatkan informasi ukuran kanvas

– Lebar Canbas: getWidth()

– Tinggi Canvas: getHeight()

• Full-screen mode: setFullScreenMode(true)– Catatan:

• Some Canvas implementations won’t occupy all the available screen space, reserving areas of the screen for information about the state of the device or other purposes.

• Setting full screen mode on or off may result in calls to the sizeChanged() method Canvas inherits from Displayable

• Each time your Canvas is shown, the showNotify() method will be called. If another Displayable is shown, or the application manager decides to run a different application, hideNotify() is called.

Paint & Repaint• The MIDP implementation calls a Canvas’s paint() method when the contents

of the Canvas need to be shown.

• The MIDP implementation passes a Graphics object to your paint() method. Graphicshas methods for drawing shapes, text, and images on a Canvas.

• Implementasi class Canvasimport javax.microedition.lcdui.Canvas;

import javax.microedition.lcdui.Graphics;

public class MyCanvas extends Canvas {

protected void paint(Graphics g) {

// do something

}

}

• Catatan: Canvas does not automatically clear itself when you call repaint(). If you want to change what’s on the screen, rather than adding to it, you should clear the screen in the paint() method.

Implementasi class Canvaspublic class MyCanvas extends Canvas implements CommandListener {

// class midlet / VMD

W10VMD myR;

//initialize

public MyCanvas(W10VMD myR) {

this.myR = myR;

}

// implementing Canvas

protected void paint(Graphics g) {

// do your code here

}

// implementing CommandListener

public void commandAction(Command c, Displayable d) {

// do your code here

}

}

Membuat object Canvas dari Screen Form/VMD

// initialize

myCanvas = new MyCanvas(this);

myCanvas.setCommandListener(myCanvas);

// change display from form to Canvas

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

Mendapatkan ukuran Screen to display

• Pada canvas digunakan:int w = getWidth();

int h = getHeight();

• Dari Form/VMDmyCanvas = new MyCanvas(this);

myCanvas.setCommandListener(myCanvas);

// 5 pixel digunalkan untuk meletakan command :-?

// 240 320 -> 240 295

int w = myCanvas.getWidth();

int h = myCanvas.getHeight();

Koordinat pada screen

• X coordinates increase in the right-hand direction, while Y coordinates increase in the downward direction

(0,0) x

y

Drawing and Filling Shapes

Konversi sumbu real ke screen

• Rumus konversi: – w = xoff + x– h = yoff - y Catatan:

• Width adalah lebar screen• Height adalah tinggi screen

w

h

y

x

w

h

y

x(xoff,yoff)

Working with Color

• Untuk mendapatkan dukungan device warnaisColor() & numColors()

• Set warna yang aktif:1.public void setColor(int RGB)

2.public void setColor(int red, int green, int blue)

• Mengambil warna yang aktif1.getRedComponent()

2.getGreenComponent()

3.getBlueComponent()

• Set grey scale pada screen–setGrayScale()

Catatan: 0 (black) to 255 (white).

Drawing Text

• The Graphics class makes it easy to draw text anywhere on the screen.

• Fungsi text yang tersedia:1. public void drawChar(char character, int x, int y, int anchor)

2. public void drawChars(char[] data, int offset, int length,

3. int x, int y, int anchor)

4. public void drawString(String str, int x, int y, int anchor)

5. public void drawSubstring(String str, int offset, int len,

6. int x, int y, int anchor)

Class Font • MIDP fonts are represented by a

1. Font Facea. FACE_SYSTEM

b. FACE_MONOSPACE

c. FACE_PROPORTIONAL

2. Font Stylea. STYLE_PLAIN

b. STYLE_BOLD

c. STYLE_ITALIC

d. STYLE_UNDERLINE

3. Font Sizea. SIZE_SMALL

b. SIZE_MEDIUM

c. SIZE_LARGE

• Fungsi untuk mendapat Face, Style & Size yang aktif1. getFace()

2. getStyle()

3. getSize()

Pengunaan FontString mystr = "Hello";

Font f = Font.getFont(

Font.FACE_PROPORTIONAL,

Font.STYLE_ITALIC,

Font.SIZE_SMALL);

g.setFont(f);

g.drawString(mystr, w/2, h/2, Graphics.TOP|Graphics.LEFT)

Review & Latihan W10

1. Buatlah Flow Diagram berikut ini– Command JalankanCommand akan

menampilkan class pada No 2

2. Buatlah class MyClass yang merupakan extend class Canvas dan implement interface CommandListener

Catatan: koordinat (0,0) di screen berada pada:X offset 10 pixelY offset 2/3 dari tinggi screen

3. Pada Grafis1. Garis dari pesedocode berikut

Limit = 150;

For (x = 0; x < limit; x+=5) {Gambar garis dari (x, 0) s/d (0, limit –x;

}

2. Gambar shape sebagai berikut1.Kotak pada ukuran 20x20 pixel pada posisi kordinat x=50 & y=50

2.Gambar kotak membulat 5 pixel dengan ukuran 20x20 pixel pada posisi x=70 & y=70 dan lengkung tinggi dan lebar 5 pixel

3.Gambar lingkaran dengan ukuran 20x20 pixel posisi x=90 & y=90 dari sudut 0 sampai 360

3. Gambar String Hdengan font FACE_PROPORTIONAL, Font.STYLE_ITALIC,Font.SIZE_SMALL