midp low level user interface

MIDP Low Level User Interface

PemrogramanAplikasi MobileMars

el

Wil

lem

Aip

assa,

S.

Kom

.

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.

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.

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

Marsel Willem Aipassa, S. Kom.5

SistemKoordinat

Marsel Willem Aipassa, S. Kom.6

Contoh “Hello World”

Marsel Willem Aipassa, S. Kom.7

Contoh “Hello World”

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

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.

Marsel Willem Aipassa, S. Kom.10

Contoh Event Key

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.

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)

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.

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.

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.

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.

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.

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

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.

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

Marsel Willem Aipassa, S. Kom.21

Anchor Points (2)

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.

Marsel Willem Aipassa, S. Kom.23

Menggambar Garis

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

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)

Marsel Willem Aipassa, S. Kom.25

MenggambarKotak (2)

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.

Marsel Willem Aipassa, S. Kom.27

MenggambarSudut (2)

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.

Marsel Willem Aipassa, S. Kom.29

Menggambar Image (2)

Marsel Willem Aipassa, S. Kom.30

Terima Kasih

Tugas:

Buatlah aplikasi jam analog berbasis low level user interface.