2.1 Membuat Aplikasi Berbasis Dialog Dengan Wizard

Aplikasi Pocket PC dengan E-Visual C++ ris_nandar@yahoo.com Lisensi Dokumen: Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari IlmuKomputer.Com. Bab 2 Membuat Aplikasi Berbasis Dialog 2.1 Membuat Aplikasi Berbasis Dialog Dengan Wizard Aplikasi dengan arsitektur Dialog merupakan arsitektur yang paling sederhana dibandingkan dengan struktur Document/View. Aplikasi dengan jenis Dialog standar tidak ada fasilitas untuk Menu utama dan penyimpanan pada file, tentu saja fitur tersebut dapat ditambahkan dengan source code tambahan yang lebih kompleks. Embedded Visual C++ atau EVC menyediakan Wizard untuk membuat aplikasi Dialog pada menu File New. Lalu masukkan parameter aplikasi yang akan dibuat seperti pada tampilan dibawah ini : 1

` 1. Pilih Tab Projects lalu pilih WCE Pocket PC PC 2003 MFC AppWizard (exe) pada jendela disebelah kiri 2. Pada kolom Project name, isi dengan nama project yang akan dibuat, disini namanya PocketPCDialog. Lokasi aplikasi dapat dipilih pada kolom Location dibawah kolom nama project 3. Pada jendela sebelah kanan bawah, tertera bahwa aplikasi yang dibuat kompatibel dengan Pocket PC yang berbasis prosessor Windows CE ARM4 dan Windows CE Emulator 4. Setelah selesai klik tombol OK 2

Struktur MFC pada pocket dengan menggunakan Wizard ada 3 jenis yaitu : 1. Single document with Doc List : Aplikasi dapat menggunakan 1 tampilan/view dengan document yang berbeda beda, misalnya pada aplikasi MS Word. 2. Single document : Aplikasi menggunakan 1 tampilan/view dengan 1 document. 3. Dialog based : Aplikasi dengan menggunakan jendela yang sederhana tanpa ada menu. Karena pada bab ini akan menjelaskan cara membuat aplikasi dengan dialog maka pilihlah pilhan yang terakhir yaitu Dialog based, lalu pilih bahasa yang akan digunakan. (Disini menggunakan bahasa Inggris/English). Klik tombol Next > untuk melanjutkan. 3

Pada langkah ke-2, Wizard akan menanyakan apakah anda akan menggunakan fasilitas Windows Sockets atau menggunakan ActiveX Control/OCX. Pada halaman ini juga anda dapat merubah judul dialog yang akan muncul sewaktu aplikasi dijalankan. Contoh ini tidak menggunakan fasilitas tersebut jadi anda bisa melewatkan bagian ini. Klik tombol Next > untuk melanjutkan. 4

Di langkah yang ke-3, bagi para pemula pilih bagian pertama ke Yes, Please agar Wizard membuat komentar yang sangat berguna tentang fungsi yang akan ditambahkan secara otomatis. Pada pertanyaan kedua, pilih pilihan pertama jika anda menggunakan file DLL terpisah misalnya file DLL yang dikhususkan untuk menangani grafik, tentu saja anda harus menyisipkan file DLL tersebut ke dalam Pocket PC anda agar aplikasinya berjalan. Untuk pertanyaan kedua, aplikasi akan menambahkan file DLL pada aplikasi tersebut yaitu pada file aplikasi yang berakhirkan.exe sehingga jumlah besar filenya akan bertambah. Pada contoh sekarang pilihlah pada pilihan pertama, yakni pilihan pada As a shared DLL. Langkah ke-4 merupakan langkah terakhir sebelum Wizard membuat aplikasi tersebut secara otomatis. Setelah anda yakin, klik tombol Finish. 2.2 Contoh Menggunakan Control Pada Dialog Disini akan dibahas tentang cara menggunakan control pada EVC. Setelah pembuatan dialog dengan menggunakan App Wizard, anda dapat menambahkan Control pada dialog yang baru dibuat dengan berpindah ke mode Editor. Pada jendela sebelah kiri pilih Tab ResourceView, klik dua kali pada resource Dialog lalu klik dua kali lagi pada tulisan IDD_POCKETPCDIALOG_DIALOG. Jendela yang aktif / sebelah kiri akan berpindah ke mode desain dialog. Buatlah dialog yang berisi kumpulan control seperti dibawah ini : 5

Pertama tama, masukkan control yang akan digunakan dari toolbox Control lalu tempelkan control tersebut pada dialog. Setiap control mempunyai ID/penanda yang unik pada setiap Aplikasi. Untuk merubah ID pada control, klik kanan pada control tersebut lalu pilih Properties, setelah muncul window yang menampilkan atribut dari control tersebut, ganti nama ID-nya seperti pada gambar diatas. Penamaan ID tergantung dari programmer tetapi sebaiknya ID tersebut mempunyai penanda yang konsisten bahwa ID tersebut berupa Tombol, List Box, Label, dsb. Setelah selesai, kita akan memberi variabel kepada control tersebut agar kita dapat mengaksesnya dengan mudah pada pemrogramannya. Pilih menu View pada menu utama lalu pilih ClassWizard... Ctrl + W. Menu tersebut juga dapat diakses dengan meng klik kanan pada dialog tersebut lalu pilih ClassWizard. Setelah muncul jendela Class Wizard, pilih tab Member Variables. 6

Untuk menambahkan variable pada control yang telah dibuat, pilih ID IDC_BTN_TAMBAH lalu klik tombol Add Variable disebelah kanan jendela. Pada kolom Member variable name: isi nama variable yang akan dialokasikan pada control. Disini nama variablenya m_btntambahitem. Pada Wizard, EVC akan menambahkan kata m_ pada setiap variable yang akan ditambahkan untuk menandakan bahwa variable ini akan digunakan pada dialog dengan jenis variabel Public (bisa diakses dari luar). Penamaan tersebut juga dapat dirubah oleh programmer tetapi sebaiknya penamaan variabel tersebut mengikuti anjuran yang telah baku dalam pembuatan aplikasi dengan EVC. Dialog ini juga menampilkan pilihan Category yaitu menandakan bahwa nama variabel ini berjenis Control dan Control ini turunan / inheritance dari class CButton yang berarti tombol tersebut berupa class yang mempunyai sifat yang sama dengan class CButton. Kita akan menambahkan variabel pada control selanjutnya yaitu pada ID IDC_EDIT_ITEM, lakukan hal yang sama seperti sebelumnya. Pada control ini, kita akan menamakan variabel tersebut m_edtnamaitem. Disini kategori variabelnya berjenis Value dengan tipe CString atau teks, dengan 7

variabel jenis Value kita hanya mengakses variabel teks tersebut secara langsung tanpa melalui class control. Cara ini dilakukan jika aplikasi hanya mengambil/mengisi teks tersebut dengan cara yang lebih sederhana. Pada variabel selanjutnya, beri nama variabel tersebut m_lbkumpulanitem dengan kategori control dan turunan dari class CListBox. Setelah selesai klik tombol OK untuk keluar dari jendela MFC Class Wizard. EVC akan menambahkan variabel variabel yang telah dibuat kedalam dialog. Untuk menambahkan action sewaktu tombol Tambahkan ke listbox, klik dua kali pada tombol tersebut, EVC akan menampilkan nama fungsi yang akan dibuat. Biarkan nama fungsinya ke nama standard, lalu klik tombol OK untuk menambah & merubah isi fungsi tersebut. Tambahkan listing kode dibawah ini : // start code UpdateData(); m_lbkumpulanitem.addstring(m_edtnamaitem); // end code Baris UpdateData() mempunyai fungsi untuk menyimpan data yang tersimpan pada EditBox ke variabel m_edtnamaitem yang telah dialokasikan. Kembali ke mode desain dialog, kita akan menambahkan action ketika item pada listbox dipilih. Klik kanan pada ListBox lalu pilih menu Events 8

Pada jendela kiri pilih LBN_SELCHANGE lalu klik tombol Add and Edit untuk menambahkan fungsi tersebut. Tambahkan listing kode dibawah ini : // start code m_lbkumpulanitem.gettext(m_lbkumpulanitem.getcursel(), m_edtnamaitem); UpdateData(FALSE); // end code code diatas mengambil teks dari listbox lalu menyimpannya kedalam variabel m_edtnamaitem. Pada baris selanjutnya fungsi UpdateData(FALSE) merupakan kebalikan dari fungsi yang ditulis pertama kali. Fungsi ini berfungsi untuk menampilkan variabel m_edtnamaitem agar tampil pada layar/dialog. Terakhir, kita akan menambahkan fungsi untuk menambah item pada listbox sewaktu aplikasi dimulai. Pada jendela Workspace di sebelah kiri, pilih tab ClassView lalu pada bagian CPocketPcDialogDlg klik dua kali pada OnInitDialog(). Fungsi tersebut dipanggil pertama kali sewaktu aplikasi dijalankan dan sebelum Dialog dimunculkan pada layar. Dibawah baris // TODO: Add extra initialization here tambahkan baris seperti dibawah ini : // start code CString snamaitem = _T("item no :"); for(int i = 0; i < 5; i++) { CString snoitem; snoitem.format(_t("%d"), i); m_lbkumpulanitem.addstring(snamaitem + snoitem); } // end code Perlu diingat bahwa teks pada Pocket PC menggunakan karakter UNICODE. Karakter UNICODE tersebut ditandai dengan fungsi _T. Fungsi tersebut akan menambahkan 5 tulisan pada listbox ketika aplikasi dimulai. Untuk menjalankannya, kita akan menggunakan Emulator Pocket PC 2003 yang telah diinstall sebelumnya. Pada bagian WCE Configuration pilih Win32(WCE emulator) debug lalu set targetnya ke POCKET PC 2003 Emulator. Lalu jalankan aplikasi tersebut dengan memilih tombol tanda seru! di sebelah kanan. 9

Tampilan akhir yang akan muncul di Pocket PC akan seperti dibawah ini : Menutup aplikasi dilakukan dengan menekan tombol OK disebelah kanan atas aplikasi. Perlu diketahui bahwa aplikasi yang berbasis Dialog akan menutup aplikasi setelah tombol OK dipilih, berbeda dengan aplikasi yang berbasis Document yang akan non aktif/resident setelah tombol OK dipilih. Selamat, anda telah membuat aplikasi pertama untuk Pocket PC!! BIOGRAFI. Lahir di Bandung, Agustus 1975. Lulus dari SMUN 9 Bandung pada tahun 1994 kemudian melanjutkan studi Ilmu Komputer di Universitas Padjadjaran. Belajar programming mulai dari Web Programming tetapi sekarang lebih menekuni ke Software Industri dengan pemrograman Pocket PC & Visual Programming dengan menggunakan Embedded Visual C++ dan Visual C++ dengan berbasis Object Oriented Programming dan Microsoft Foundation Class (MFC ). Dalam mengembangkan bahasa C di indonesia, saat ini penulis juga mengurus milist pemrograman Visual C++ di indo-visualc@yahoogroups.com Informasi lebih lanjut tentang penulis ini bisa didapat melalui: Web : www.risnandar.com Email : ris_nandar@yahoo.com 10