Membuat Menu Utama Cantik Pakai Canvas

  Membuat Menu Manis Grid di Canvas

Tutorial membuat menu grid untuk aplikasi J2ME ini, sebenernya mirip dengan teori2 canvas j2me. Al. memiliki kemiripan pada logika penggambaran pada method paint() di Canvas. Hanya saja pada kali ini tidak menggunakan String yang di gambar di Canvas pada method paint() sebagai menunya, tapi menggunakan Image.

Langsung saja, saya akan menjelaskan code untuk membuat menu grid ini, perhatikan sepenggal code di bawah ini. 

Pada gambar di atas adalah atribut pada Class Canvas yang akan melakukan penggambaran menu grid.
Attribut2 nya al:

arrImageMenu : ini adalah Array yang nantinya akan menimpan Image, yang akan di tampilkan

itsXpos : ini adalah variable untuk menyimpan posisi X untuk penentu titik penggambaran

itsInitialXPos : ini untuk menyimpan awal posisi X penggambaran

itsInitialYPos : ini untuk menyimpan awal posisi Y penggambaran

itsHorisontalLength : ini untuk menentukan berapa jumlah grid horizontal yang kita inginkan

itsVericalLength : ini untuk menentukan berapa jumlah grid Vertical yang kita inginkan

itsImagePad : untuk menentukan jeda antara Image

Sekarang kita lihat pada Contructor class nya, perhatikan gambar di bawah.

Pada gambar di atas terdapat angka besar yaitu 1, 2, dan 3 yang menunjukan area kode tertentu. Penjelasan masing masing area adalah,

1 adalah area kode untuk meload file gambar dan meletakannya pada Array yang sudah di sediakan.

2 adalah area kode perhitungan untuk menentukan posisi awal penggambaran menu Grid, perhitungan itu saya buat hanya untuk kondisi pembuatan tutorial ini, anda bisa mencoba berexsperiment sendiri untuk membuat menu pada dimensi yang berbeda.

3 adalah area kode untuk menyimpan posisi awal pada variable initial tersebut.

Selanjutnya adalah proses penggambaran pada method paint() perhatikan gambar dibawah ini,

Pada gambar di atas terdapat angka besar yaitu 1, 2, 3, 4 dan 5 yang menunjukan area kode tertentu. Penjelasan masing masing area adalah,

1 adalah kode untuk membuat background dengan warna yang di cetak pada kode tersebut.

2 adalah kode untuk mereset nilai posisi ke dalam nilai posisi initial.

3 adalah kode untuk penaikan posisi Y untuk melakukan penggambaran pada baris selanjutnya, apabila di temukan panjang dari variable i adalah kelipatan dari variableitsHorisontalLength.

4 adalah kode untuk menggambar area seleksi yang di gambarkan oleh warna pink, yang mengelilingi menu yang di seleksi.

5 adalah kode untuk menggampar Image berdasarkan posisi X dan Y yang sudah di dapat dari kode sebelumnya, lalu menaikan posisi X sesuai dengan lebar Image dan variableitsImagePad.

Untuk selanjutnya adalah method keyPresses() . perhatikan gambar di bawah.

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

Semoga tutorial kecil ini bisa berguna,
Refrensi:
http://kinzoheavymetal.blogspot.com/2011/12/j2me-tutorial-membuat-menu-grid-di.html