J2ME Tutorial, Membuat Menu di Canvas

J2ME Tutorial, Membuat Menu di Canvas

Kali ini gw coba bikin tutorial untuk membuat menu menggunakan Class Canvas, memang tidak ada salahnya membuat menu menggunakan Class List pake type List.IMPLICIT. Tapi dengan menggunakan Canvas gw lebih leluasa untuk membuat menu sesuai dengan yang gw mau, istilahnya tidak terbatas dengan pilihan yang ada di Class List.

Rencananya cukup sederhana, gw mau bikin menu yang bisa di pilih pake tombol panah atas ama bawah, trus menunya tuh punya gambar norak yang sering mungcul di blog gw.

Sebelumnya gw mau ngasih info dulu spesifikasi gw waktu bikin menu ini,

OS : Microsoft windows vista asli

IDE : Eclipse yang udah di install plugins elipse me

Java : versi 1.6.0 pake emulator dari Sony Erricson

Spec diatas cuma informasi aja kok, dan kenapa gw pake eclipse karena gw dari dulu makenya eclipse. Gw pake netbean kalo lagi penasaran pengen membandingkan aja, alias iseng bukan kepalang.

Pertama yang gw lakukan adalah, gw bikin suatu Class turunan Canvas, yang nantinya akan kita tampilkan di Midlet kita. Lalu kita tulis logic kode menu yang kita inginkan pada method yang wajib di impelemtasi yaitu method paint.

Dari gambar diatas kita bisa liat kalau CanvasMenu adalah nama Classnya, statCursos adalah nama variable untuk menyimpan status kita sedang ada di menu yang mana. Sedangkan arrMenuText adalah variable yang menyimpan data text menu kita yang akan kita tampilan di layar. Kalau itsYpos adalah variable yang menyimpan status koordinay Y pada layar guna penggambaran menu. Untuk backgroundnya gw menggunakan variable background. Untuk melakukan pemanggilan terhadap gambar yang mana untuk background menu kita gw taroh di constructor dari Class CanvasMenu kita bisa liat

background = Image.createImage(“/bg.png”);

gw sendiri udah menyiapkan gampar bernama bg.png di recourse folder, kalian nanti bisa download file sourcenya.

Dari gambar adalah method paint yang memiliki parameter class Graphics yang bisa kita gunakan. Kode di atas menceritakan awalnya gw ngecek kalo background udah berhasil ke load di variable atau belum, kalau sudah maka akan menggambar ke layar dari posisi awal koordinat x=0 dan y=0 dengan posisi mepet atas dan kiri.

Lalu gw definisikan posisi koordinat y di variable itsYpos dengan nilai ¼ dari tinggi layar, dan melakukan looping pada arrMenuText, di setial looping gw cek nilai dari statCursor sedang ada di manakah beliau. Apabila cocok maka akan set warna jadi ungu dengan g.setColor(200,20,255) dan gambar kotak dengan g.fillRect() pada letak menu yang pas di cursornya, selanjutnya memberikan warna pada tulisan menu dengan warna biru dan mencetaknya. Lalu koordinat y naik sebesar 30 untuk melanjutkan menulis menu selanjutnya pada koordinay y yang baru.

Kalau gambar di atas adalam method keyPressed yang digunakan untuk memeriksa tombol yang kita tekan di ponsel kita, dari gambar di atas gw Cuma meriksa tombol panah atas dan bawah. Di dalamnya melakukan pengecekan untuk membuat cursor melakaukan seleksi pada menu yang tepat, tidak keluar dari arrMenuText yang ada, setelah itu gw refresh layar pake repaint().

Lalu kita tinggal menampilkan CanvasMenu kita di class Midlet kita seperti gambar di bawah ini.

Semoga tutorial kecil ini bisa berguna, dan kalau ada pertanyaan silahkan masukan di kolom komentar, gw coba jawab sebisa gw :p