Dosen : yasdinul Huda

1. MODUL PSB_6
J2ME (Java 2 Micro Edition)
A. Tujuan :
1. Memahami event handling level rendah dalam MIDP
2. Menggambar dan menampilkan teks, line, Rectangle, Rounded Rectangle, Arc dan Triangle
3. Menentukan warna, huruf, dan coretan untuk operasi menggambar menggunakan subclass
canvas
B. Dasar Teori
1. Event Handling Level rendah dalam MIDP
Pada latihan 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.
Satu kelemahan ketika hanya menggunakan komponen user interface level tinggi adalah
program tidak memiliki kendali penuh sebuah layar. Ada saat dimana kita ingin menggambar
sebuah garis, gambar beranimasi dan mempunyai kendali untuk mengatur pixel pada layar.
Pada modul ini, kita akan berhadapan langsung dengan layar. Kita akan mempelajari class
Canvas, dimana akan menjadi pendukung dari proses menggambar kita. Kita juga akan
menyelidiki ke dalam class Graphic, dimana memiliki metode untuk menggambar garis, kotak,
sudut, dan teks. Kita juga akan membahas huruf, warna dan gambar.
2. 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.
Canvas menggambarkan metode-metode event handling kosong. Aplikasi harus
mengesampingkan mereka untuk handle event. Class Canvas menggambarkan sebuah metode
abstrak yang disebut paint(). Aplikasi menggunakan class Canvas harus menyediakan sebuah
implementasi untuk metode paint().
Canvas memiliki kemampuan berinteraksi dengan pengguna melalui mekanisme event
handling. Event handling ini dapat berupa antisipasi terhadap key event, game action dan pointer
event. Perangkat komunikasi, telepon seluler ataupun PDA, memiliki resolusi tampilan yang
sangat beragam.

2. Untuk mengetahui dimensi Canvas terkait dengan tampilan perangkat mobile, disediakan
method getWidth() dan getHeight(). MIDP 2.0 menyediakan fungsionalitas full screen mode.
Tetapi tidak semua perangkat mobile mendukung hal ini. Setting mode ini dapat dilakukan
dengan memanggil setFullScreenMode(boolean).
3. Sistem Koordinat
Gambar 1 menampilkan 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.
Gambar 1. Sistem Koordinat
Pojok kanan bawah pada layar memiliki koordinat (getWidth()-1,getWidth()-1). Setiap
perubahan yang terjadi pada ukuran yang diberikan untuk area menggambar pada Canvas
dilaporkan kepada aplikasi oleh metode sizeChanged(). Ukuran yang tersedia pada Canvas
mungkin saja berubah jika ada pergantian antara mode layar full dan normal atau penambahan
dan pengurangan sebuah komponen seperti Command.
Inti dari program ini adalah metode paint(). Set pertama dari pemanggilan metode adalah
membersihkan layar.
g.setColor(255, 255, 255 );
g.fillRect(0, 0, getWidth(), getHeight());

3. Graphics memiliki method-method untuk menggambar dan mengisi bentuk-bentuk yang
sederhana.
Tabel 1. Method untuk menggambar bentuk‐ bentuk sederhana
4. Event Key
Subclass dari Canvas dapat merespon sebuah event tombol dengan metode-metode sebagai
berikut :
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).
C. Percobaan
Gambar 2. File Percobaan Latihan 1 - 3

4. Latihan 1: Menggambar dan menampilkan teks, line, Rectangle, Rounded Rectangle, Arc dan
Triangle
Latihan 1 menjelaskan cara menggambar/menampilkan teks, garis, persegi panjang, persegi
panjang bulat, busur, segitiga dalam satu aplikasi kecil. Mengacu pada semua latihan pada
modul sebelumnya, dalam latihan 1 kita masih menerapkan beberapa method dan variabel
dan menggabungkannya ke dalam sintak aplikasi canvas berikut. Di sini kita membuat List
jenis implisit disebut CanvasDrawList dan didefinisikan semua elemen ke dalamnya.
Penggunaan kelas Canvas untuk menarik semua grafik atau gambar yang ditampilkan pada
emulator sebagai berikut:

5. Gambar 3. Hasil Percobaan Latihan 1
Tampilan gambar di atas dapat dipanggil melalui class canvas dalam aplikasi dengan
sintaks berikut:
class CanvasDraw extends Canvas implements CommandListener
Dalam sintaks ini dapat dilihat bahwa kita menciptakan sebuah kelas yang disebut
CanvasDraw yang meng-extends kelas canvas melalui kata kunci "extends".
Source Code CanvasDrawExample.java

7. Latihan 2: Menggambar teks dengan class CanvasBoxText
Bahasa pemrograman J2ME Class Canvas pada Latihan 2 digunakan untuk melukis dan
menggambar diagram. Menggunakan class canvas yang sama kita akan menggambar sebuah
kotak di sekitar teks sebagai class MIDlet teks, disebut CanvasBoxText yang meng extends
class canvas yang telah ditetapkan untuk menggambar kotak. Kode berikut menggunakan
metode yang berbeda untuk mendapatkan nilai-nilai sebagai berikut:
o int width = getWidth();
o int height = getHeight();
o g.setColor(255, 0, 0);
o g.fillRect(0, 0, width, height);
o g.setColor(0, 0, 255);
o String sandeep = "SANDEEP";
o int w = font.stringWidth(sandeep);
o int h = font.getHeight();
o int x = (width - w) / 2;
o int y = height / 2;
o g.setFont(font);
o g.drawString(sandeep, x, y, Graphics.TOP | Graphics.LEFT);
o g.drawRect(x, y, w, h);
Setelah menjalankan contoh Anda akan mendapatkan output seperti di bawah ini ..
Gambar 4. Hasil Percobaan Latihan 2 BoxTextCanvas
Dalam output Anda dapat dengan mudah mengetahui teks "SANDEEP" yang telah
ditampilkan dalam kotak. Seperti dinyatakan sebelumnya, kita membutuhkan kelas kanvas
untuk menggambar seperti jenis grafis dalam aplikasi J2ME.
J2ME Source Code "BoxTextCanvas.java"

8. Text Example in J2ME
Latihan 3: Menggambar Arc pada lokasi berbeda
Latihan 1 menjelaskan contoh menggambar Arc (busur), menggambar lengkungan pada
layar. Dalam Latihan 3 akan menunjukkan cara menggambar busur di lokasi yang berbeda.
Metode yang digunakan dalam aplikasi ini adalah sebagai berikut:
o g.setColor(255, 162, 117);
o g.fillRect(0, 0, width, height);
o g.setColor(0, 0, 255);
o g.fillArc(0, 0, width/2, height/2, 0, 90);
o g.setStrokeStyle(Graphics.DOTTED);
o g.setColor(0xffff00);
o g.drawRect(0, 0, width/2, height/2);

9. o g.setStrokeStyle(Graphics.SOLID);
o g.setColor(0, 0, 255);
o g.fillArc(width/2, 0, width/2, height/2, 0, -90);
o g.setStrokeStyle(Graphics.DOTTED);
o g.setColor(0xffff00);
o g.drawRect(width/2, 0, width/2, height/2);
o g.setStrokeStyle(Graphics.SOLID);
o g.setColor(0, 0, 255);
o g.fillArc(0, height/2, width, height/2, -90, -180);
o g.setStrokeStyle(Graphics.DOTTED);
o g.setColor(0xffff00);
o g.drawRect(0, height/2, width, height/2);
Setelah menjalankan contoh Anda akan mendapatkan output seperti di bawah ini ..
Gambar 5. Hasil Percobaan Latihan 3 Arc pada lokasi berbeda

10. Arc MIDlet Example.
D. Permasalahan
1. Perhatikan perbedaan Latihan 1 dengan Latihan 2 dan 3. “Pada Latihan 1 menerapkan
CommandListener sedangkan Latihan 2, 3 tidak menerapkan”… Jelaskan alasannya!
2. Implementasikan CommandListener pada Latihan 2 dan Latihan 3, serta tambahkan beberapa
elemen displayable screen pada kedua latihan tersebut!.
E. Laporan Resmi
Analisa program anda di atas (Latihan 1 dan Permasalahan) dan buat kesimpulan/komentari
untuk masing-masing konstruktor dan method yang ditampilkan pada Emulator.