MODUL VIII APLIKASI WINDOWS LANJUT Teknik Elektro -UM A. TUJUAN Memahami komponen-komponen lanjut aplikasi Windows Form. Mampu menggunakan menu, menu popup, tool bar, dan status bar. Mampu menghasilkan aplikasi dengan konsep Multiple Document Interface (MDI). B. PETUNJUK Awali setiap aktivitas dengan doa, semoga berkah dan mendapat kemudahan. Pahami tujuan, dasar teori, dan latihan-latihan praktikum dengan baik dan benar. Kerjakan tugas-tugas praktikum dengan baik, sabar, dan jujur. Tanyakan kepada asisten/dosen apabila ada hal-hal yang kurang jelas. C. DASAR TEORI 1. Menu Keberadaan menu memungkinkan pemakai akhir untuk mengakses perintah-perintah dan fungsi-fungsi level atas dalam antarmuka yang familiar dan mudah dipahami. Di Windows Form, menu utama direpresentasikan oleh objek MenuStrip (atau MainMenu). Menu ini berperan sebagai container yang nantinya akan menampung item-item menu dalam struktur menu. 2. Menu PopUp Selain dalam bentuk menu bar, menu juga dapat diwujudkan sebagai popup. Jenis menu ini umumnya memerlukan pemicu misalnya klik kanan agar dapat ditampilkan. 3. Tool Bar Pada umumnya, tool bar menyediakan akses ke fitur-fitur dengan frekuensi penggunaan cukup tinggi yang juga dapat diakses melalui menu. Modul Praktikum Pemrograman Visual (PTI438) 44
Teknik Elektro -UM Di Windows Form, tool bar direpresentasikan oleh objek ToolBar, dan button-button di dalamnya direpresentasikan oleh objek ToolBarButton. 4. MDI Pada saat membuat aplikasi Windows, kita dapat menggunakan style aplikasi single-document interface (SDI) atau multiple-document interface (MDI). MDI menyediakan metodologi untuk menghasilkan antarmuka document-centric. Salah satu keuntungan dari MDI adalah mereduksi clutter dan meningkatkan efisiensi penggunaan ruang layar. D. LATIHAN 1. Menu Di VB.NET, menu-menu dihasilkan melalui objek MenuItem yang merepresentasikan bagian-bagian individu menu, misalnya File > New, Open, dan sebagainya. Langkah-langkah pembuatan menu diperlihatkan sebagai berikut: 1. Buat project aplikasi Windows. 2. Tambahkan komponen MenuStrip ke dalam form, kemudian buat dua buah menu utama bernama File dan Edit. 3. Di menu Edit, tambahkan submenu Cut, Copy, Paste, dan Select All. Untuk menyisipkan separator, gunakan menu drop down di sebelah teks Type Here. Atur propertinya seperti tabel berikut: Objek Properti Nilai ToolStripMenuItem Name mnufile &File ToolStripMenuItem Name mnuedit &Edit ToolStripMenuItem Name mnucut Cu&t ToolStripMenuItem Name mnucopy &Copy ToolStripMenuItem Name mnupaste &Paste ToolStripMenuItem Name mnuall &Select A&ll 4. Untuk melengkapi menu, Anda dapat menambahkan shortcut melalui properti ShortcutKeys. Modul Praktikum Pemrograman Visual (PTI438) 45
Teknik Elektro -UM Gambar 1 Menambahkan shortcut 5. Tambahkan kontrol RichBox, kemudian ubah nilai properti Dock menjadi Fill. Atur posisinya agar tidak tertindih menu bar. Hasil pembuatan menu diperlihatkan seperti Gambar 2. Gambar 2 Desain menu 6. Lengkapi kode programnya seperti berikut: Private Sub mnucut_click(byval sender As System.Object, _ ByVal e As System.EventArgs) Handles mnucut.click If Me.RichBox1.Selected <> "" Then Me.RichBox1.Cut() End If Private Sub mnucopy_click(byval sender As System.Object, _ ByVal e As System.EventArgs) Handles mnucopy.click If Me.RichBox1.Selected <> "" Then Me.RichBox1.Copy() End If Private Sub mnupaste_click(byval sender As System.Object, _ ByVal e As System.EventArgs) Handles mnupaste.click Me.RichBox1.Paste() Private Sub mnuall_click(byval sender As System.Object, _ ByVal e As System.EventArgs) Handles mnuall.click Me.RichBox1.SelectAll() 7. Jalankan aplikasi dan coba mengakses menu-menu yang tersedia. Modul Praktikum Pemrograman Visual (PTI438) 46
2. Menu PopUp Teknik Elektro -UM Langkah-langkah untuk mengimplementasikan menu popup diperlihatkan sebagai berikut: 1. Masih di project yang sama, tambahkan sebuah komponen ContextMenuStrip. 2. Buat menu item Cut, Copy, Paste, dan Select All pada ContextMenuStrip. Atur propert-properti Name dari menu popup, misal popcut, popcopy, poppaste, dan popall. 3. Untuk mengaitkan menu popup dengan kontrol, tetapkan nilai properti ContextMenuStrip di RichBox. 4. Lengkapi kode programnya. Private Sub popcut_click(byval sender As System.Object, _ ByVal e As System.EventArgs) Handles popcut.click If Me.RichBox1.Selected <> "" Then Me.RichBox1.Cut() End If Private Sub popcopy_click(byval sender As System.Object, _ ByVal e As System.EventArgs) Handles popcopy.click If Me.RichBox1.Selected <> "" Then Me.RichBox1.Copy() End If Private Sub poppaste_click(byval sender As System.Object, _ ByVal e As System.EventArgs) Handles poppaste.click Me.RichBox1.Paste() Private Sub popall_click(byval sender As System.Object, _ ByVal e As System.EventArgs) Handles popall.click Me.RichBox1.SelectAll() 5. Hasil pembuatan menu popup diperlihatkan seperti Gambar 3. Gambar 3 Menu PopUp Modul Praktikum Pemrograman Visual (PTI438) 47
3. Tool Bar Teknik Elektro -UM Sebagaimana ketika membuat menu melalui komponen MenuStrip, pembuatan tool bar yang memanfaatkan ToolStrip juga menyediakan item-item standar. 1. Masih di project yang sama, tambahkan sebuah komponen ToolStrip. 2. Untuk menambahkan item, gunakan menu drop down atau melalui ToolStrip Tasks. Sebagai contoh, tambahkan item Button, kemudian atur properti Name menjadi btncut. 3. Langkah berikutnya adalah menspesifikasikan image pada button, dengan cara mengklik tombol disebelah properti Image. Pilih local resource, kemudian klik Import untuk mencari file gambar yang akan digunakan. 4. Ulangi langkah no 2 dan 3 untuk menambahkan item Copy dan Paste. 5. Lengkapi kode programnya seperti contoh-contoh sebelumnya. 6. Jalankan aplikasi dan uji fungsionalitasnya. Gambar 4 Menambahkan tool bar 4. Multiple Document Interface (MDI) Dasar dari aplikasi MDI adalah form MDI parent, yaitu form yang berisi window-window MDI child. MDI child sendiri merupakan subwindow, di mana nantinya ia akan digunakan oleh user untuk berinteraksi dengan aplikasi MDI. Langkah-langkah pembuatan aplikasi dengan style MDI adalah sebagai berikut: 1. Buat aplikasi Windows baru. 2. Pembuatan project baru sekaligus akan menciptakan form pertama sebagai form default. Form ini nantinya akan kita fungsikan sebagai form induk (parent) sehingga Anda perlu mengatur properti IsMDIContainer menjadi True. Modul Praktikum Pemrograman Visual (PTI438) 48
Teknik Elektro -UM 3. Untuk melengkapi form induk ini, tambahkan komponen MenuStrip, kemudian buat dua buah menu utama bernama File dan Window. Objek Properti Nilai ToolStripMenuItem Name mnunew &New ToolStripMenuItem Name mnuhorizontal Tile Horizontally ToolStripMenuItem Name mnuvertical Tile Vertically ToolStripMenuItem Name mnucascade Cascade ToolStripMenuItem Name mnuarrange Arrange Icons ToolStripMenuItem Name mnuclose Close All 4. Untuk menampilkan daftar window yang terbuka, ubah nilai properti MdiWindowListItem pada komponen MenuStrip menjadi WindToolStripMenuItem. 5. Setelah pembuatan form induk selesai, lanjutkan dengan menambahkan item baru untuk membuat form anak (child form). Ubah nilai properti Name-nya menjadi frmchild. 6. Tambahkan kontrol RichBox ke dalam form anak, kemudian atur properti Anchor kontrol ini menjadi Top, Left, dan properti Dock menjadi Fill. 7. Lengkapi kode program di form induk. Private Sub mnunew_click(byval sender As System.Object, _ ByVal e As System.EventArgs) Handles mnunew.click ' Instansiasi frmchild Dim MDIChild As New frmchild ' Menetapkan current MDI Parent dari form MDIChild.MdiParent = Me ' Men-set title di child window MDIChild. = "Window " ' Menampilkan form MDIChild.Show() Private Sub mnuhorizontal_click( _ ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles mnuhorizontal.click Me.LayoutMdi(MdiLayout.TileHorizontal) Private Sub mnuvertical_click(byval sender As System.Object, _ ByVal e As System.EventArgs) Handles mnuvertical.click Me.LayoutMdi(MdiLayout.TileVertical) Modul Praktikum Pemrograman Visual (PTI438) 49
Teknik Elektro -UM Private Sub mnucascade_click(byval sender As System.Object, _ ByVal e As System.EventArgs) Handles mnucascade.click Me.LayoutMdi(MdiLayout.Cascade) Private Sub mnuarrange_click(byval sender As System.Object, _ ByVal e As System.EventArgs) Handles mnuarrange.click Me.LayoutMdi(MdiLayout.ArrangeIcons) Private Sub mnuclose_click(byval sender As System.Object, _ ByVal e As System.EventArgs) Handles mnuclose.click ' Menutup semua child window For Each ChildForm As Form In Me.MdiChildren ChildForm.Close() Next 8. Perhatikan, di form child kita tidak perlu menuliskan kode apa pun. 9. Jalankan aplikasi. Gambar 5 Apikasi MDI Latihan Kecil Sempurnakan pembuatan MDI agar mampu menghasilkan title yang unik pada child window, misalnya Window 1, Window 2, Window 3, dan seterusnya. Di mana nilai bilangan (urutan) dokumen di-generate secara dinamis. 5. Kotak Dialog Kelas MessageBox mendefinisikan method statis Show() yang dioverload guna menyediakan kotak dialog yang variatif. Sintaks umum dari method Show() diperlihatkan sebagai berikut: Show(teks [, judul] [, button] [, ikon]) Dengan demikian, bentuk kotak dialog yang paling sederhana direpresentasikan melalui kode program berikut: MessageBox.Show("Teks Kotak Dialog") Modul Praktikum Pemrograman Visual (PTI438) 50
Teknik Elektro -UM Gambar 1 Kotak dialog sederhana Bentuk-bentuk kotak dialog lainnya diperlihatkan sebagai berikut: MessageBox.Show("Teks Kotak Dialog", "Judul", _ MessageBoxButtons.YesNoCancel) Gambar 2 Kotak dialog Yes/No/Cancel MessageBox.Show("Teks Kotak Dialog", "Judul", _ MessageBoxButtons.AbortRetryIgnore, MessageBoxIcon.Information) Gambar 3 Menggunakan Ikon kotak dialog Untuk mendeteksi pilihan user, kita memanfaatkan nilai kembalian dari method Show(), yakni enumerasi DialogResult. Dim dlg As DialogResult dlg = MessageBox.Show("Teks", "Judul", MessageBoxButtons.YesNoCancel) Select Case dlg Case Windows.Forms.DialogResult.Yes Console.WriteLine("Yes clicked") Case Windows.Forms.DialogResult.No Console.WriteLine("No clicked") Case Windows.Forms.DialogResult.Cancel Console.WriteLine("Cancel clicked") End Select 6. Custom Control Terlepas dari kontrol-kontrol dan komponen-komponen yang tersedia, kita juga bisa menciptakan sendiri kontrol yang spesifik. Salah satu pendekatan paling praktis untuk melakukan hal ini adalah dengan Modul Praktikum Pemrograman Visual (PTI438) 50
pewarisan (ingat kembali materi pewarisan ). Teknik Elektro -UM Sekadar contoh sederhana, kita akan memperluas kelas Label untuk menghasilkan kelas RedLabel. 1. Tambahkan item kelas baru dan simpan dengan nama RedLabel.vb. 2. Lengkapi pendefinisian kelasnya seperti berikut: Public Class RedLabel Inherits Label Sub New() ' Misal men-set warna label Me.ForeColor = Color.Red End Class 3. Untuk memudahkan penggunaan kontrol, eksekusi project. Langkah ini akan mengakibatkan kelas RedLabel direpresentasikan dalam bentuk kontrol di Toolbox. 4. Sekarang kita bisa menggunakan kontrol RedLabel layaknya kontrol-kontrol lainnya. Modul Praktikum Pemrograman Visual (PTI438) 51
TUGAS PRAKTIKUM Teknik Elektro -UM 1. Tambahkan form login pada project MDI yang telah Anda buat. Gunakan pernyataan kondisional If untuk simulasi validasi identitas. Skenarionya cukup sederhana, di mana jika validasi berhasil, tampilkan form MDI; sebaliknya jika gagal, tutup aplikasi. 2. Tambahkan status bar di aplikasi MDI Anda, misal untuk menampilkan current time. TUGAS RUMAH 1. Buat custom control bernama NumericBox. Kontrol ini hanya dapat menerima masukan berupa bilangan. Buat juga kode untuk menguji fungsionalitasnya. Modul Praktikum Pemrograman Visual (PTI438) 52