Low Level User Interface
 4.1 Tujuan Setelah mempelajari bab ini, Pelajar diharapkan mampu untuk : • Memahami event handling level rendah dalam MIDP • Menggambar dan menampilkan teks, gambar, garis, kotak, dan sudut • Menentukan warna, huruf, dan coretan untuk operasi menggambar • Memahami dan menggunakan class Canvas dan Graphic • Mengetahui bagaimana menggunakan GAME API • Menggambar grafik berskala 4.2 Pengenalan Pada bab sebelumnya, kita telah membahas tentang bagaimana cara membuat user interface level tinggi seperti list, form, dan field input. Mereka bersifat user interface level tinggi dan programmer tidak perlu khawatir tentang menggambar pixel layar atau mengatur posisi teks pada layar. Semua program telah menetapkan jenis komponen dan label elemen. Sistem tersebut akan menangani gambar pada layar, scrolling dan layout 4.3 Canvas Canvas adalah subclass dari Displayable. Itu adalah sebuah class abstrak yang harus di-extend sebelum sebuah aplikasi dapat menggunakan fungsi-fungsi yang ada. Canvas dapat digabungkan dengan subclass Displayable level tinggi yaitu Screen. Program dapat pindah ke dan dari Canvas dan Screen. 4.3.1 Sistem Koordinat Sistem koordinat dari Canvas adalah berbasis nol. Koordinat x dan y dimulai dengan nol. Pojok kiri atas dari Canvas berkoordinat (0,0). Koordinat x bertambah dari kiri ke kanan. Sedangkan koordinat y bertambah dari atas ke bawah. Metode getWidth() dan getHeight() mengembalikan nilai lebar dan tinggi berturut-turut. 4.3.2 ”Hello,World!” Gambar 2: Hello World MIDlet menggunakan canvas import javax.microedition.midlet.*; import javax.microedition.lcdui.*; public class HelloCanvasMIDlet extends MIDlet { private Display display; HelloCanvas canvas; Command exitCommand = new Command("Exit", Command.EXIT, 0); public void startApp() { if (display == null){ canvas = new HelloCanvas(this, "Hello, world!"); display = Display.getDisplay(this); display.setCurrent(canvas); } public void pauseApp() { } public void destroyApp(boolean unconditional) { } protected void Quit(){ destroyApp(true); notifyDestroyed(); } } class HelloCanvas extends Canvas implements CommandListener { private Command exitCommand = new Command("Exit", Command.EXIT, 0); private HelloCanvasMIDlet midlet; private String text; public HelloCanvas(HelloCanvasMIDlet midlet, String text) { this.midlet = midlet; this.text = text; addCommand(exitCommand); setCommandListener(this); protected void paint(Graphics g) { // membersihkan layar dengan mengisi semua layar dengan warna putih g.setColor(255, 255, 255 ); g.fillRect(0, 0, getWidth(), getHeight()); // mengatur warna tulisan dengan warna hitam g.setColor(0, 0, 0); // dan menulis sebuah text g.drawString(text, getWidth()/2, getHeight()/2, Graphics.TOP | Graphics.HCENTER); } public void commandAction(Command c, Displayable d) { if (c == exitCommand){ midlet.Quit(); } } } Dengan midlet “Hello,World!”, kita membuat sebuah class yang ber-extend Canvas class HelloCanvas extends Canvas implements CommandListener { Kemudian kita menambahkan perintah (“Exit”) dan mengatur command listener nya. addCommand(exitCommand); setCommandListener(this); Kita menciptakan command listener dengan mengimplementasikan class CommandListener. Ini berarti membuat class yang memiliki metode commandAction 4.3.3 Perintah Seperti halnya list, textBox, dan form, Canvas juga mempunyai Command yang disediakan dan dapat merespon untuk event Command. Langkah-langkah untuk menambahkan Command ke dalam Canvas adalah sama : 1. Buatlah objek Command. private Command exitCommand = new Command("Exit", Command.EXIT, 0); 2. Gunakan useCommand() untuk menambahkan perintah ke dalam canvas(atau Form, list, text box) addCommand(exitCommand); 3. Gunakan setCommandListener() untuk mendaftarkan class mana yang akan mendapat event command untuk perintah dalam Displayable. setCommandListener(this); 4. Buatlah sebuah commandListener dengan mengimplementasikan class commandListener dan menyediakan sebuah metode commandAction(). class HelloCanvas extends Canvas implements CommandListener { ... public void commandAction(Command c, Displayable d) { if (c == exitCommand){ 4.3.4 Event key Subclass dari Canvas dapat merespon sebuah event tombol dengan metode-metode sebagai berikut : keyPressed(int keyCode) Dipanggil ketika kunci ditekan keyRepeated(int keyCode) Dipanggil ketika kunci diulang keyReleased(int keyCode) Dipanggil ketika kunci dilepas Canvas mendefinisikan kode tombol ini : 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. Untuk mendapatkan “String” nama sebuah kunci, gunakan metode getKeyName(int keyCode). 4.3.5 Aksi Permainan Masing-masing kode tombol bisa dipetakan menjadi sebuah aksi game. Sebuah key code bisa dipetakan kepada aksi sebuah game. Class Canvas mendefinisikan aksi game ini : UP, DOWN, LEFT, RIGHT, FIRE, GAME_A, GAME_B, GAME_C, GAME_D. Sebuah program dapat menerjemahkan sebuah key code ke dalam aksi game menggunakan metode getGameAction(keyCode). Metode getKeyCode(int gameAction) mengembalikan key code yang berkaitan dengan suatu aksi game. Sebuah aksi game dapat memiliki lebih dari satu key code yang berkaitan dengannya. Jika terdapat lebih dari satu key code yang berkaitan dengan aksi game, hanya satu key code yang akan dikembalikan. Sebuah aplikasi perlu menggunakan getGameAction(int keyCode) daripada langsung menggunakan kode tombol yang telah didefinisikan. Secara normal, jika suatu program ingin merespon kunci “UP”, sebaiknya menggunakan kunci KEY_NUM2 atau key code yang spesifik untuk tombol UP. Program menggunakan metode ini tidaklah portable sejak sebuah perangkat memiliki layout kunci yang berbeda dan key code yang berbeda pula. KEY_NUM2 mungkin menjadi kunci “UP” untuk sebuah Pengembangan Perangkat Mobile do something 4.4 Grafik Class Graphic adalah class utama untuk menulis teks, menggambar, garis, kotak dan sudut. Dia memiliki metode untuk menentukan warna, huruf, dan coretan. 4.4.1 Warna Class Display memiliki metode untuk menentukan apakah sebuah perangkat memiliki fasilitas yang mendukung layar berwarna atau layar monochrome pada sebuah perangkat. 4.4.2 Huruf Sebuah huruf memiliki tiga atribut yaitu bentuk, type, dan ukuran. Huruf tidak diciptakan oleh aplikasi. Sebagai gantinya, sebuah aplikasi meminta sistem untuk memilih model atribut huruf dan sistem mengembalikan huruf yang sesuai dengan model atribut yang diminta. Sistem tidak menjamin akan mengembalikan semua atribut huruf yang dipilih. Jika sistem tidak memiliki huruf yang sesuai dengan permintaan, dia akan mengembalikan sebuah huruf hampir mirip dengan atribut yang diminta. Huruf adalah sebuah class yang terpisah. Seperti yang dinyatakan di atas, aplikasi tidak menciptakan objek huruf. Sebagai gantinya, metode-metode statis getFont() dan getDefaultFont() digunakan untuk meminta sebuah huruf dari sistem 4.4.3 Style Coretan Metode setStrokeStyle(int style) menetapkan style coretan bahwa akan digunakan untuk menggambar garis, sudut, dan kotak. Style coretan tidak mempengaruhi teks, gambar, dan operasi mewarnai. 4.4.4 Clipping Suatu bidang clipping adalah suatu kotak di dalam objek Graphics yang ada. Setiap operasi grafik hanya akan mempengaruhi pixel-pixel didalam area clip. Pixel yang berada diluar clipping tidak akan dipengaruhi oleh setiap operasi grafik. 4.4.5 Anchor Points Teks digambar sesuai dengan sebuah anchor points. Metode drawString() mengharap sebuah koordinat (x,y) sesuai dengan anchor points. public void drawString(String str, int x, int y, int anchor) Anchor harus suatu kombinasi horisontal yang konstan (LEFT,HCENTER, atau RIGHT) dan vertikal yang konstan (TOP, BASELINE, atau BOTTOM). Horisontal dan vertikal yang konstan harus dikombinasikan mengunakan operator bitwise OR (|). Ini berarti menggambar teks berhubungan dengan baseline dan horisontal tengah akan membutuhkan sebuah nilai anchor BASELINE | HCENTER. 4.4.7 Menggambar garis Satu-satunya metode grafik untuk menggambar garis didefinisikan sebagai : public void drawLine(int x1, int y1, int x2, int y2) Metode ini menggambar sebuah garis menggunakan warna yang tersedia dan coretan antara koordinat (x1,y1) dan (x2,y2). g.setColor(255, 0, 0); // red // garis dari pojok kiri atas ke pojok kanan bawah layar g.drawLine(0, 0, getWidth()-1, getHeight()-1); g.setColor(0, 255, 0); // green // garis horisontal pada tengah layar g.drawLine(0, getHeight()/2, getWidth()-1, getHeight()/2); g.setColor(0, 0, 255); // blue // garis horisontal pada bawah layar g.drawLine(0, getHeight()-1, getWidth()-1, getHeight()-1); g.setColor(0, 0, 0); // black // garis dari pojok kiri bawah ke pojok kanan atas layar g.drawLine(0, getHeight()-1, getWidth()-1, 0); 4.4.8 Menggambar kotak Metode grafik untuk menggambar kotak adalah : 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) Metode drawRect() menggambar sebuah kotak dengan pojok kiri atas pada koordinat (x,y) dan luas area (width+1 x height+1). Parameter yang sama ada bersama 4.4.9 Menggambar Sudut g.setColor(255, 0, 0); g.drawArc(18, 18, 50, 50, 0, 360); // menggambar sebuah lingkaran g.setColor(0, 255, 0); g.drawArc(40, 40, 100, 120, 0, 180); g.setColor(0, 0, 255); g.fillArc(100, 200, 80, 100, 0, 90); 4.4.10 Melukis gambar Gambar digambar dengan metode drawImage() public void drawImage(Image img, int x, int y, int anchor) Selama dengan drawString, x dan y adalah koordinat titik anchor. Perbedaannya adalah bahwa vertikal anchor tetap adalah VCENTER yang berdasar BASELINE. Anchor harus berupa kombinasi dari horizontal constant(LEFT, HCENTER atau RIGHT) dan vertical constant (TOP,VCENTER atau BOTTOM). Horizontal dan Vertical Constants dikombinasikan dengan menggunakan operator bitwise OR(|) 4.5 Game API MyCanvas.java : import javax.microedition.lcdui.*; import javax.microedition.lcdui.game.*; public class MyCanvas extends GameCanvas implements Runnable { private boolean running; private long delay; private int currentX, currentY; private int screenWidth; private int screenHeight; public MyCanvas() { super(true); screenWidth = getWidth(); screenHeight = getHeight(); currentX = screenWidth / 2; currentY = screenHeight / 2; delay = 20; } public void start() { running = true; Thread thread = new Thread(this); thread.start(); } public void stop() { running = false; } // The Game Loop public void run() { Graphics g = getGraphics(); while (running == true) { getInput(); drawScreen(g); try { Thread.sleep(delay); } catch (InterruptedException ie) {} } } private void getInput() { int keyStates = getKeyStates(); if ((keyStates & LEFT_PRESSED) != 0) { currentX = Math.max(0, currentX - 1); } if ((keyStates & RIGHT_PRESSED) != 0) { currentX = Math.min(screenWidth, currentX + 1); } if ((keyStates & UP_PRESSED) != 0) { currentY = Math.max(0, currentY - 1); } if ((keyStates & DOWN_PRESSED) != 0) { currentY = Math.min(screenHeight, currentY + 1); } } private void drawScreen(Graphics g) { g.setColor(0xffffff); g.fillRect(0, 0, getWidth(), getHeight()); g.setColor(0x0000ff); g.drawString("JEDI", currentX, currentY, Graphics.TOP|Graphics.LEFT); flushGraphics();