midp low level user interface

30
MIDP Low Level User Interface PemrogramanAplikasi Mobile Marsel Willem Aipassa, S. Kom.

Upload: rozene

Post on 21-Jan-2016

87 views

Category:

Documents


0 download

DESCRIPTION

MIDP Low Level User Interface. PemrogramanAplikasi Mobile. MIDP Low Level User Interface. Dengan menggunakan High Level User Interface seperti Form, List dan Field Input, programmer tidak perlu khawatir tentang menggambar pixel layar atau mengatur posisi teks pada layar . - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: MIDP Low Level User Interface

MIDP Low Level User Interface

PemrogramanAplikasi MobileMars

el

Wil

lem

Aip

assa,

S.

Kom

.

Page 2: MIDP Low Level User Interface

Marsel Willem Aipassa, S. Kom.

MIDP Low Level User InterfaceDengan menggunakan High Level User Interface seperti Form, List dan Field Input, programmer tidak perlu khawatir tentang menggambar pixel layar atau mengatur posisi teks pada layar.

Dengan menggunakan Low Level User Interface, programmer memiliki kendali penuh terhadap layar, menggambar sebuah garis, menggambar gambar beranimasi dan lain sebagainya.

Page 3: MIDP Low Level User Interface

Marsel Willem Aipassa, S. Kom.3

Low Level User Interface (LO-UI)

Suatu kelemahan ketika menggunakan HI-UI adalah program tidak memiliki kendali penuh sebuah layar.

Ada saatnya dimana kita ingin menggambar suatu garis atau animasi dan mengatur pixel pada layar.

Kelas yang akan dipelajari adalah kelas Canvas dan kelas Graphic yang memiliki metode untuk menggambar garis, kotak, sudut dan teks.

Page 4: MIDP Low Level User Interface

Marsel Willem Aipassa, S. Kom.4

Canvas

Canvas adalah subclass dari Displayable. Kelas ini harus di-extend ke kelas kita untuk dapat menggunakan fungsi-fungsi yang ada.

Sistem koordinat dari Canvas dimulai dari nol. Pojok kiri atas dari layar berkkordinat (0,0). Koordinat x bertambah dari kiri kekanan. Dan koordinat y bertambah dari atas ke bawah.

Pojok kanan bawah layar berkoordinat (getWidth-1, getHeight-1).

Page 5: MIDP Low Level User Interface

Marsel Willem Aipassa, S. Kom.5

SistemKoordinat

Page 6: MIDP Low Level User Interface

Marsel Willem Aipassa, S. Kom.6

Contoh “Hello World”

Page 7: MIDP Low Level User Interface

Marsel Willem Aipassa, S. Kom.7

Contoh “Hello World”

Page 8: MIDP Low Level User Interface

Marsel Willem Aipassa, S. Kom.8

Event Key

Subclass dari Canvas dapat merespon sebuah event tombol dengan metode-metode sebagai berikut:

Untuk mendapatkan “String” nama sebuah kunci, digunakan metode getKeyName(int keyCode)

keyPressed(int keyCode)

Dipanggil ketika keypad ditekan

keyRepeated(int keyCode)

Dipanggil ketika keypad diulang

keyReleased(int keyCode)

Dipanggil ketika keypad dilepas

Page 9: MIDP Low Level User Interface

Marsel Willem Aipassa, S. Kom.9

Game Action

Kelas Canvas mendefenisikan Game Action sebagai berikut: UP, DOWN, LEFT, RIGHT, FIRE, GAME_A, GAME_B, GAME_C, GAME_D.

Untuk menterjemahkan keyCode yang didapat ke dalam Game Action digunakan fungsi getGameCode(keyCode).

Jika suatu program akan merespon key UP, biasanya menggunakan KEY_NUM2. Akan tetapi metode tidaklah sesuai jika bekerja untuk perangkat yang berbeda layout keypad. Dalam kasus ini dibutuhkan fungsi getGameCode.

Page 10: MIDP Low Level User Interface

Marsel Willem Aipassa, S. Kom.10

Contoh Event Key

Page 11: MIDP Low Level User Interface

Marsel Willem Aipassa, S. Kom.11

Event Pointer

Selain Event Key, program MIDP dapat juga menangani Event Pointer.

public boolean hasPointerEvents(). Akan mengembalikan nilai true jika sebuah perangkat mendukung pointer yang bersifat ditekan dan dilepaskan.

public boolean hasPointerMotionEvents(). Akan mengembalikan nilai true jika, sebuah perangkat mendukung event gerakan dari pointer.

Page 12: MIDP Low Level User Interface

Marsel Willem Aipassa, S. Kom.12

Event Pointer (2)

Sebuah event di-generate lewat aktifitas pointer sebagai berikut: protected void pointerPressed(int x, int y) protected void pointerReleased(int x, int y) protected void pointerDragged(int x, int y)

Page 13: MIDP Low Level User Interface

Marsel Willem Aipassa, S. Kom.13

Graphic

Graphic adalah kelas utama untuk menulis teks, menggambar, garis, kotak dan sudut.

Kelas ini memiliki metode untuk menentukan warna, font, dan stroke.

Page 14: MIDP Low Level User Interface

Marsel Willem Aipassa, S. Kom.14

Warna

Kelas Display memiliki metode untuk mengecek apakah suatu perangkat mendukung layar berwarna atau layar monochrome.

public boolean isColor(). Mengembalikan nilai true jika layar berwarna dan sebaliknya.

public int numColors(). Mengembalikan jumlah warna (atau level abu-abu untuk layar monochrome) yang didukung sebuah perangkat.

Page 15: MIDP Low Level User Interface

Marsel Willem Aipassa, S. Kom.15

Warna (2)

Untuk mengeset warna yang digunakan untuk metode grafik selanjutnya, digunakan metode setColor.

public void setColor(int RGB). Pada bentuk ini warna ditentukan dalam bentuk 0x00RRGGBB.

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

Untuk layar monochrome dapat digunakan fungsi setGrayScale(int value) untuk memlih nilai abu-abu untuk mengganti operasi menggambar.

Page 16: MIDP Low Level User Interface

Marsel Willem Aipassa, S. Kom.16

Font

Font memiliki tiga attribut yaitu bentuk, style dan ukuran. Font tidak bisa diciptakan oleh aplikasi, akan tetapi aplikasi meminta sistem memilih model font dan sistem akan mengembalikan font yang sesuai dengan font yang diminta.

Font adalah sebuah kelas tersendiri yang memiliki metode-metode untuk meminta sebuah font dari sistem.

Page 17: MIDP Low Level User Interface

Marsel Willem Aipassa, S. Kom.17

Font (2)

public static Font getFont(int face, int style, int size). Mengembalikan sebuah font dari sistem yang sesuai dengan atribut. Atribut face dapat berupa FACE_SYSTEM, FACE_MONOSPACE, atau FACE_PROPORTIONAL. Style dapat berupa STYLE_PLAIN, STYLE_BOLD, STYLE_ITALIC, dan STYLE_UNDERLINED. Size dapat berupa SIZE_SMALL,SIZE_MEDIUM, SIZE_LARGE.

public static Font getDefaultFont(). Akan mengembalikan font default yang digunakan oleh sistem.

public static Font getFont(int fontSpecifier). Dapat berupa FONT_INPUT_TEXT atau FONT_STATIC_TEXT.

Page 18: MIDP Low Level User Interface

Marsel Willem Aipassa, S. Kom.18

Contoh Font

Masukkan perintah berikut pada baris sebelum baris untuk menggambar String.

g.setFont(Font.getFont(Font.FACE_PROPORTIONAL, Font.STYLE_BOLD | Font.STYLE_ITALIC, Font.SIZE_MEDIUM));

Page 19: MIDP Low Level User Interface

Marsel Willem Aipassa, S. Kom.19

Stroke

Metode setStrokeStyle(int style) digunakan untuk menetapkan jenis stroke yang akan dipakai untuk garis sudut atau kotak

public void setStrokeStyle(int style). Style dapat berupa SOLID atau DOTTED.

Page 20: MIDP Low Level User Interface

Marsel Willem Aipassa, S. Kom.20

Anchor Points

Teks digambar sesuai dengan sebuah anchor points. public void drawString(String str, int x, int y, int

anchor)

Anchor harus merupakan sebuah kombinasi antara letak horisontal dan vertikal. Penggabungan ini menggunakan operasi bitwise OR (|).

Page 21: MIDP Low Level User Interface

Marsel Willem Aipassa, S. Kom.21

Anchor Points (2)

Page 22: MIDP Low Level User Interface

Marsel Willem Aipassa, S. Kom.22

Menggambar String

public void drawString(String str, int x, int y, int anchor). X dan Y merupakan koordinat dari anchor.

Page 23: MIDP Low Level User Interface

Marsel Willem Aipassa, S. Kom.23

Menggambar Garis

public void drawLine(int x1, int y1, int x2, int y2)

Page 24: MIDP Low Level User Interface

Marsel Willem Aipassa, S. Kom.24

MenggambarKotak

public void drawRect(int x, int y, int width, int height)

public void drawRoundRect(int x, int y, int width, int height, int arcWidth, int arcHeight)

public void fillRect(int x, int y, int width, int height)

public void fillRoundRect(int x, int y, int width, int height, int arcWidth, int arcHeight)

Page 25: MIDP Low Level User Interface

Marsel Willem Aipassa, S. Kom.25

MenggambarKotak (2)

Page 26: MIDP Low Level User Interface

Marsel Willem Aipassa, S. Kom.26

MenggambarSudut

public void drawArc(int x, int y, int width, int height, int startAngle, int arcAngle)

public void fillArc(int x, int y, int width, int height, int startAngle, int arcAngle)

O derajat terletak pada jarum jam 3.

Page 27: MIDP Low Level User Interface

Marsel Willem Aipassa, S. Kom.27

MenggambarSudut (2)

Page 28: MIDP Low Level User Interface

Marsel Willem Aipassa, S. Kom.28

Menggambar Image

public void drawImage(Image img, int x, int y, int anchor).

Perbedaan anchor pada drawString dan drawImage adalah BASELINE pada drawString dan VCENTER pada drawImage.

Page 29: MIDP Low Level User Interface

Marsel Willem Aipassa, S. Kom.29

Menggambar Image (2)

Page 30: MIDP Low Level User Interface

Marsel Willem Aipassa, S. Kom.30

Terima Kasih

Tugas:

Buatlah aplikasi jam analog berbasis low level user interface.