SERi 2 : a simPle samPle oF VisuaL midLET - PART 4

PART 4 : melengkapi kode

Merupakan bagian terakhir adalah melengkapi kode untuk menyempurnakan midlet.
di bagian ini hal yang perlu ditambahkan adalah
a) membaca data yang diinputkan ke dalam textfield
b) membaca pilihan dari list
c) menampilkan nama dan sapaan yang sesuai dengan gender pada alert

untuk kepentingan tersebut gunakan source view :

3 poin di atas terjadi sesuai dengan eventnya masing - masing.semua event tersebut terjadi pada saat tombol tertentu ditekan.
gunakan navigator dan pilih method(lambangnya lingkaran merah) commandAction,

dan otomatis kode program untuk mengatur event akan muncul.


kira2 akan terlihat seperti di atas.
untuk poin a, tambahkan dulu variabel nama untuk menyimpan nama yang diinput. tempatnya saat event untuk cmdSubmit, seperti di gambar berikut:

untuk memperoleh data dari textfield digunakan method getString().
data kemudian disimpan ke variabel nama.

setelah alert ditampilkan akan ditentukan kalimat yang tampil berdasarkan
gender yang dipilih. untuk mengetahui gender yang dipilih index pada list perlu dibaca
dengan method getSelectedIndex() dan tulisan pada alert dapat diatur/dirubah dengan method setString().

jika laki - laki/ male(yang berarti index yang terpilih adalah satu)
tampilkan "Selamat datang MR. BLa - bLa - bLa (sesuai input nama)" pada alert

kemungkinan lain saat yang dipilih gender wanita/ female tampilkan "Selamat datang MRs. BLa - bLa - bLa (sesuai input nama)" pada alert


Kode sudah ditambahkan dan run kembali midletnya, kurang lebih berikut hasilnya :

SERi 2 : a simPle samPle oF VisuaL midLET - PART 3

PART 3: membuaT FLOW(ALUR) MIDlet di flow view

dengan adanya tombol di tampilan maka alur dan arah perpindahan tampilan dapat dibuat. Pembuatan alur dilakukan dengan memilih tombol dan mengarahkan ke tampilan tujuan. Setelah tampilan dilengkapi dengan komponen2, berikut hasil yang terlihat pada flow view :



pertama ketika pertama aplikasi dijalankan yang tampil adalah form. maka hubungkan started pada mobile device ke form.

Dan agar dapat kembali ke menu aplikasi saat tombol exit pada form ditekan maka hubungkan tombol exit dengan mobile device.


tombol next pada form akan menuju ke list dibuat dengan memilih tombol next dan mengarahkannya ke list.

untuk kembali dari list menuju ke form pilih tombol back arahkan ke form.

lengkapi alur dari list menuju ke alert saat tombol submit ditekan dan alur dari alert menuju form saat tombol ok ditekan.
kurang lebih hasilnya akan terlihat sebagi berikut :


setelah membuat alur jalannya midlet selanjutnya midlet di-run untuk memastikan alur yang berjalan sudah sesuai dengan alur yang direncanakan.

Alur perpindahan midlet sudah berhasil dibuat selanjutnya di PART 4 dijelaskan melengkapi kode program

SERi 2 : a simPle samPle oF VisuaL midLET - PART 2

di PART 2, tamPiLan 2 di MidLET bakaL diLenGKAPi denGan komPonen2.

komponen2 untuk tampilan sudah siap, Mari Isi degan komponen2 pelengkap dengan berpindah ke Screen view.

1) mulai dari form, aktifkan form yang akan diisi dengan memilih combo box di samping analyzer

form aktif lalu tambahkan komponen textfield (sebagai kotak isian nama),
tombol Ok dan exit. selain dengan drag komponen dari pallete, untuk menambahkan komponen bisa langsung dengan klik kanan pada tampilan yang aktif seperti berikut:


aktifkan tab properties untuk mengganti label yang akan tampil.

pilih dulu komponen yang akan dirubah lalu pada bagian label ganti sehingga tampil seperti gambar berikut :

ganti label pada textfield dengan "Your name :".

2) Rubah nama komponen dengan rename. komponen textfield dan tombol ok akan diakses saat coding, dan nama baru akan memudahkan untuk mengakses komponen tersebut. merubah nama komponen degan pilih komponen

klik kanan dan pilih rename, muncul kotak isian dan isikan nama baru untuk komponen.
rubah nama textfield menjadi txtNama
dan tombol ok menjadi cmdNext


perubahan nama komponen dapat dilihat melalui navigator.


3) Dengan step yang ada pi poin 2, langkah2 berikut dapat dilaksanakan.

pindah ke tampilan list tambahkan komponen 2 ListElement dan 2 tombol(tombol back dan tombol ok)

rubah judul list(title pada properties) menjadi OPsi gender:
ganti label listElement1 menjadi Male
ganti label listElement2 menjadi Female
ganti label tombol ok menjadi submit
rubah nama tombol ok menjadi cmdSubmit.


Lalu pindah ke tampilan alert,

tambahkan komponen tombol ok dan
rubah nama tombol ok menjadi cmdOk


cek navigator untuk memastikan perubahan komponen.



PART 2 selesai dan setiap tampilan telah dilengkapi dengan komponen2nya masing2 selanjutnya di PART 3 akan diperlihatkan cara membuat alur midlet pada flow view

SERi 2 : a simPle samPle oF VisuaL midLET - PART 1

SERI 2 - Sample visual midlet Yang simpel plus basic steps yg penting
mengupas pembuatan midlet dengan visual beserta steps basic nan mudah namun penting.

Seperti yang sudah dikemukakan di seri 1, visual midlet is more design,
more drag - drop n lesser coding. Pake visual midlet beban mikirin wujud tampilan midlet bisa dikurangi, tinggal pikir desain alur midletnya saja.

di Seri kedua ini akan dibuat contoh midlet yang simple n steps yang simpel namun penting. So Let's mulai bikin midletnya :

1) Skenario untuk alur midlet:

Alkisah midlet yang dibuat akan dimulai dari sebuah form isian untuk mengisi nama, kemudian saat tombol next ditekan, akan ada pilihan jenis kelamin. kemudian pilihan disubmit lalu sapaan serta nama yang diisikan akan ditampilkan melalui alert.


2) Komponen2 dari skenario di atas :
saat aplikasi mulai dijalankan ada form dengan textfield, tombol next(untuk melanjutkan ke pilihan gender) serta tombol exit (untuk keluat dari midlet)
lalu tampilan untuk memilih gender yang berupa list dengan tombol submit(untuk lanjut ke alert) dan back(kembali ke pengisian nama)
dan yang terkhir alert yang menampilkan nama serta sapaan degan tombol ok (kembali ke tampilan pengisian nama)

3) Design sudah didapatkan n komponen2 sudah ditemukan, Lanjutkan ke pembuatan.
buat project baru, klik kanan di source package, pilih visualMidlet,


isi dengan Nama SampleVisMIDlet klik finish.
akan muncul tampilan visual midlet default dengan flow view yang aktif

4) menuju ke Pallete di sisi kanan layar di bagian Displayables
Drag komponen list, alert dan form untuk tampilan lalu drop ke flow view berikut hasilnya :


BeRsambunG ke PART 2 : meLenGKAPi KomPonen.

Visual MidLeT : easieR waY 2 bikin MIDlet

NGiRiT waktu n Tenaga dengan Visual Midlet (Seri 1)
[Tulisan ini based on NETBEANS IDE 6.8 n Java(TM) Platform Micro Edition SDK 3.0]

Alkisah :

salah satu fitur yang ada di netbeans adalah visual midlet.visual midlet merupakan tampilan untuk menghasilkan kode program yang dipakai untuk membuat midlet(aplikasi yang bisa dipake di hape).


Yang namanya visual, nilai plusnya adalah more drag-drop, more design and lesser coding. And I Think bisa jadi alternatif yang Sangat baik buat sodara2 yg alergi coding but pengen bikin midlet(apalagi buat project wajib kuliah :D).

SERi 1 : Interfaces - antarmuka yang keliatan pas pake visual midlet

mengakrabi tampilan bakal sangat membantu penggunaan visual midlet. ada 4 buah view di visual midlet : source, screen, flow, analyzer

source : ini buat melihat kode yang dihasilkan oleh visual midlet,

Ga beda dengan kode program yang bisa dipake buat bikin aplikasi J2ME, cuma yang ini lebih terstruktur.

screen : merupakan preview dari tampilan yang kita buat
(misalkan form, alert, list, dll) n bisa dilihat juga detail komponen2nya(tombol2 yang ada di tampilan, n komponen2 laen seperti textfield, stringitem).

menambahkan komponen bisa lebih mudah melalui screen view(bisa diliat di seri 2: simple basic steps Later)

flow : tampilan untuk mengatur aliran midlet yang dibuat. pada flow view dapat ditentukan jalannya midlet mulai dari start n arah perpindahan tampilan midlet saat tombol ditekan. defaultnya seperti
gambar di bawah :


tampilan tersebut merupakan tampilan awal yang menunjukkan kondisi di hape saat start and paused.

analyzer : tampilan untuk memeriksa midlet yang dibuat, komponen yang ga kepake alias mubadzir bisa ketahuan lewat analyzer view.

itulah 4 view yang bisa dipake di visual midlet, so ada lagi tampilan di sisi kanan berupa pallete n properties.

pallete berisi komponen2 yang bisa dipakai untuk membuat midlet.
sedangkan properties bisa dipake untuk mengutak - atik komponen yang ada di midlet.

berikutnya Let's berkenalan dengan tab navigator.
barang ini biasanya terletak di sisi kiri bawah,bisa juga diaktifkan lewat menu window pilih menu navigating.

di flow n screen view, navigator dipakai untuk memeriksa komponen yang dibuat.

dari navigator jelas terlihat nama komponen dan tipe komponen di midlet.

sedangkan pas source view, navigator bakal sangat berguna buat meneliti dan menjelajahi kode program yang dihasilkan oleh visual midlet.

So demikian seri perdana visual midlet. dengan tulisan ini Penulis berHaRAP pembaca sekalian yang budiman dapat berkenalan dengan baik dengan tampilan di visual midlet sehingga kemudian hari dapat bekerja dengan intim bin mesra dengan tampilan2 tersebut.


SUMMARY :

1) Visual midlet bisa dipake untuk membuat midlet dengan lebih,
cukup mendesain dan kode program bakal dihasilkan

2) Antarmuka(interface) di visual midlet ada 4 view (tampilan) :
source : bagian 'kode program'nya midlet
screen : preview tiap tampilan yang dibuat beserta komponen2nya
flow : alur jalannya midlet n arah perpindahan tampilan pada midlet
analyzer : bagian untuk meneliti komponen mubadzir pada midlet yang dibuat

3) selain 4 view tersebut ada juga navigator, pallete n properties untuk memudahkan kerja membuat midlet.


selanjutnya SERI 2
mengupas pembuatan midlet dengan visual beserta steps basic nan mudah namun penting.