Sigit Purnomo

Tutorial GUI untuk Aplikasi Mobile (MIDlet): Command

Posted: March 6th 2008

Tutorial ini akan memberikan panduan mengenai bagaimana membuat Graphical User Interface untuk aplikasi mobile (MIDlet) dengan menggunakan teknologi Java. Pada tutorial kali ini, topik yang akan dibahas adalah bagaimana membuat menu untuk aplikasi mobile (MIDlet) menggunakan Command Class. Tools yang digunakan dalam tutorial ini adalah teks editor (Notepad, TextPad, dll) untuk menuliskan kode program dan Sony Ericsson SDK 2.2.3 for the Java(TM) ME Platform untuk proses built dan test. Anda juga bisa menggunakan Sun JAVA(TM) Wireless Toolkit 2.5 untuk proses build dan test aplikasi mobile yang akan dikembangkan.

#1: Create New Project
Proses pembuatan project baru dilakukan dengan menjalankan program KToolbar (versi Wireless Toolkit WTK2) dari Sony Ericsson SDK 2.2.3 for the Java(TM) ME Platform dari Start Menu. Tampilannya adalah sebagai berikut:

Proses selanjutnya adalah mengisikan Project Name dan MIDlet Class Name. Untuk tutorial ini, ProjectName-nya adalah TutotialMobileGUI-Command dan MIDlet Class Name-nya MobileGUI_Command (maaf, yang digambar salah :p). Perlu Anda ingat, MIDlet Class Name yang kita isikan nantinya harus sesuai dengan class yang kita buat waktu menuliskan kode program. Setelah kita meng-klik tombol Create Project, maka akan terbentuk direktori TutorialMobileGUI-Menu di direktori apps dari Sony Ericsson SDK 2.2.3 for the Java(TM) ME Platform dengan sub direktori bin, classes, lib, res, dan src.

#2: Write the Code
Proses berikutnya adalah menuliskan kode program dengan menggunakan teks editor. Saya tidak akan membahas baris demi baris kode program yang akan kita buat melainkan bagian intinya saja. Untuk membuat menu, selain menggunakan class List kita juga dapat menggunakan class Command yang ada di package javax.microedition.lcdui dengan parameter commandType ITEM atau SCREEN. Menu utama yang akan kita buat pada tutorial ini terdiri dari “Write Message”, “Inbox”, “Outbox”, “Drafts”, dan “Sent Messages”. Langkah pertama adalah membuat command yang akan digunakan dengan kode program sebagai berikut:


...

private Command writeCommand = new Command("Write Message",Command.SCREEN,2);
private Command inboxCommand = new Command("Inbox",Command.SCREEN,2);
private Command outboxCommand = new Command("Outbox",Command.SCREEN,2);
private Command draftsCommand = new Command("Drafts",Command.SCREEN,2);
private Command sentCommand = new Command("Sent Messages",Command.SCREEN,2);
private Command exitCommand = new Command("Exit", Command.SCREEN,1);

/* Pembuatan command dengan commandType ITEM
private Command writeCommand = new Command("Write Message",Command.ITEM,2);
private Command inboxCommand = new Command("Inbox",Command.ITEM,2);
private Command outboxCommand = new Command("Outbox",Command.ITEM,2);
private Command draftsCommand = new Command("Drafts",Command.ITEM,2);
private Command sentCommand = new Command("Sent Messages",Command.ITEM,2);
private Command exitCommand = new Command("Exit", Command.ITEM, 1);
*/

...

Pembuatan command dapat dilakukan dengan memanggil konstruktor class Command dengan statement Command(String label, int commandType, int priority), dimana label menunjukkan label dari command yang akan ditampilkan pada display, commandType menunjukkan tipe dari command yang akan dibuat (ITEM, SCREEN, OK, CANCEL, STOP, EXIT, BACK, dan HELP), dan priority menunjukkan level prioritas dari command yang akan dipetakan ke keypad dari setiap device oleh AMS (Application Management Software). Proses mapping command ke keypad untuk masing-masing device dapat berubah tergantung dari tipe command yang ditentukan (lihat hasil testing pada gambar di bawah). Setelah command dibuat, maka langkah selanjutnya adalah menambahkan command-command tersebut ke form dengan kode sebagai berikut:


...
menuList.addCommand(writeCommand);
menuList.addCommand(inboxCommand);
menuList.addCommand(outboxCommand);
menuList.addCommand(draftsCommand);
menuList.addCommand(sentCommand);
menuList.addCommand(exitCommand);
...

Proses mendeteksi command mana yang di pilih oleh user dan proses apa yang akan dikerjakan setelah user mengklik menu tersebut dapat dilakukan dengan kode program sebagai berikut:


/*
String label = c.getLabel();
if (label.equals("Write Message"))
{
   showWriteForm();
}
else if (label.equals("Inbox"))
{
   showInboxForm();
}
else if (label.equals("Outbox"))
{
   showOutboxForm();
}
else if (label.equals("Drafts"))
{
   showDraftForm();
}
else if (label.equals("Sent Messages"))
{
   showSentForm();
}
else if (label.equals("Exit"))
{
   destroyApp(true);
}
else if (label.equals("Back"))
{
   mainMenu();
}
*/

if (c == writeCommand)
{
   showWriteForm();
}
else if (c == inboxCommand)
{
   showInboxForm();
}
else if (c == outboxCommand)
{
   showOutboxForm();
}
else if (c == draftsCommand)
{
   showDraftForm();
}
else if (c == sentCommand)
{
   showSentForm();
}
else if (c == exitCommand)
{
   destroyApp(true);
}
else if (c == backCommand)
{
   mainMenu();
}

Setelah selesai mengetik kode program aplikasi mobile (MIDlet), maka kode program harus kita simpan pada sub direktori src dari direktori project kita.

#3: Build and Test
Langkah terakhir adalah melakukan proses build dan test menggunakan Sony Ericsson SDK 2.2.3 for the Java(TM) ME Platform KToolbar. Proses build sendiri sebenarnya terdiri dari beberapa langkah, yaitu kompilasi sehingga file .java kita nantinya menjadi .class dan pre-verify untuk memfilter class-class yang invalid yang hasilnya berupa file .jar. Setelah selesai proses build, maka langkah selanjutnya adalah melakukan test dengan menggunakan emulator yang tersedia. Hasilnya test-nya adalah sebagai berikut:

Testing dengan Emulator Sony Ericsson W800

Testing dengan Emulator Sun JAVA(TM) Wireless Toolkit 2.5

Download File Tutorial (downloaded times)


13 responses to “Tutorial GUI untuk Aplikasi Mobile (MIDlet): Command”

  1. antodoroki says:

    Siip..pak. Laku buat yg lagi belajar AWM.
    btw ini baru GUI saja kan pak, blm implementasinya?
    Usul pak, gmn kalo hasil AWM yang bagus2 dipublish disini (plus nim yang buat).. lengkap dengan codingnya . Biar bisa pada belajar. Konsekuensinya AWM berikut ga boleh ada yg sama dengan disini. Jadi mancing inovasi terus, takutnya dari tahun ketahun cm mewariskan source code dari angkatan atas.
    Oh..y pak, yg diatas tmbah RMS sm webservice. Biar mak nyuzz…

    salam…

  2. fajar says:

    Pak saya juga lagi buat aplikasi pengolahan data pake aplikasi mobile bahasanya c#.mnurut bapa gmn?apakah bahasa tersebut bisa di gunakan. ini TA saya…
    kalau punya ide bisa sharing pak…databasenya sql 2005

  3. y_sigit_p says:

    #antodoroki:
    yup, masih tutorial GUI dasar, rencana nanti semakin lama semakin advanced topiknya… ditunggu aja… hmmm…. untuk idenya nanti nunggu server baru aja, soale quota saya ntar penuh hehehe…:p

    #fajar:
    sangat-sangat bisa sekali untuk device dengan OS Windows Mobile… sudah ada beberapa TA/Skripsi tentang topik tersebut yang diselesaikan oleh mahasiswa bimbingan saya… klo hanya sebatas di device ada SQL CE…

  4. plastick says:

    database SQL server 2005?? pake XML aje jar….

  5. asko says:

    Pak klo bahasa pemrograman Ruby apa hanya sebatas untuk web saja?
    bisa buat aplikasi mobile gak,Pak?

  6. y_sigit_p says:

    #asko:
    kalo Ruby sejauh yang saya tau tidak hanya untuk Web saja… yang untuk Web tuh Ruby-on-Rails…

    info lebih lengkap tentang Ruby, silahkan dibaca di sini

  7. fajar says:

    pak ada contoh TA/Skripsi yang mirip kayak punya saya ga pa?klo ada kirim ke email dong untuk referensi….dan materi2 yg lain
    Nant klo punya saya jadi saya akan kirim ke bapak juga….
    Oia, untuk pengolahan database di server menggunakan aplikasi web yg ter intergrasi dengan webservice dan di akses oleh aplikasi PDA. saya ga jadi pke sql 2005 krn dia ga bisa koneksi dgn aplikasi web dan webservice itu sendiri….klo menggunkan sql 2000 bisa ga pak?
    Thanx bgt

  8. fajar says:

    saya pending nih krn mentok di bahasa c# utk webservice and aplikasi web

  9. hilda says:

    thanks ya buat infonya!!!!!!!!!!!

  10. intan says:

    saat ini saya sedang tertarik dengn aplikasi mobile dengan j2me. tolong bantu ya mungkin ada tutorialnya yang menggunakan netbeans. trus koneksi databasenya pake apa ya?n bisa tidak gunakan gambar????makasih…

  11. cino says:

    mas… mau nanya saya,saya insttall SDK 2.5.4 kok malah pc saya langsung mati ya……??? dan saya cooba lagi sama…langsung mati lagi… knapa ya mas???

  12. devi says:

    mas mau tanya, tolong bantu ya mungkin mas ada tutorial aplikasi mobile dgn J2ME?? saya lgi bwt skripsi ttg aplikasi mobile msh bingung soalnya gak bnyak dpt referensi trus maunya pke database My SQL versi 5 bisa gak mas??? makasi…

  13. andre says:

    nice share.. klo bza mnta tutorial emulator android.. kn lg hot2nya tu

Leave a Reply

Your email address will not be published. Required fields are marked *

© 2021 Universitas Atma Jaya Yogyakarta
css.php