Teknik Elektro -UM
MODUL VIII APLIKASI WINDOWS LANJUT
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 ToolStripMenuItem ToolStripMenuItem ToolStripMenuItem ToolStripMenuItem ToolStripMenuItem ToolStripMenuItem
Properti Name Text Name Text Name Text Name Text Name Text Name Text
Nilai mnuFile &File mnuEdit &Edit mnuCut Cu&t mnuCopy &Copy mnuPaste &Paste 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 RichTextBox, 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.RichTextBox1.SelectedText <> "" Then Me.RichTextBox1.Cut() End If End Sub Private Sub mnuCopy_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles mnuCopy.Click If Me.RichTextBox1.SelectedText <> "" Then Me.RichTextBox1.Copy() End If End Sub Private Sub mnuPaste_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles mnuPaste.Click Me.RichTextBox1.Paste() End Sub Private Sub mnuAll_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles mnuAll.Click Me.RichTextBox1.SelectAll() End Sub
7. Jalankan aplikasi dan coba mengakses menu-menu yang tersedia.
Modul Praktikum Pemrograman Visual (PTI438)
46
Teknik Elektro -UM
2. Menu PopUp 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 RichTextBox. 4. Lengkapi kode programnya. Private Sub popCut_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles popCut.Click If Me.RichTextBox1.SelectedText <> "" Then Me.RichTextBox1.Cut() End If End Sub Private Sub popCopy_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles popCopy.Click If Me.RichTextBox1.SelectedText <> "" Then Me.RichTextBox1.Copy() End If End Sub Private Sub popPaste_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles popPaste.Click Me.RichTextBox1.Paste() End Sub Private Sub popAll_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles popAll.Click Me.RichTextBox1.SelectAll() End Sub
5. Hasil pembuatan menu popup diperlihatkan seperti Gambar 3.
Gambar 3 Menu PopUp
Modul Praktikum Pemrograman Visual (PTI438)
47
Teknik Elektro -UM
3. Tool Bar 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 ToolStripMenuItem ToolStripMenuItem ToolStripMenuItem ToolStripMenuItem ToolStripMenuItem ToolStripMenuItem
Properti Name Text Name Text Name Text Name Text Name Text Name Text
Nilai mnuNew &New mnuHorizontal Tile Horizontally mnuVertical Tile Vertically mnuCascade Cascade mnuArrange Arrange Icons 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 RichTextBox 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.Text = "Window " ' Menampilkan form MDIChild.Show() End Sub Private Sub mnuHorizontal_Click( _ ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles mnuHorizontal.Click Me.LayoutMdi(MdiLayout.TileHorizontal) End Sub Private Sub mnuVertical_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles mnuVertical.Click Me.LayoutMdi(MdiLayout.TileVertical) End Sub
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) End Sub Private Sub mnuArrange_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles mnuArrange.Click Me.LayoutMdi(MdiLayout.ArrangeIcons) End Sub 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 End Sub
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 direpresentasikan melalui kode program berikut:
paling
sederhana
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
Teknik Elektro -UM
pewarisan (ingat kembali materi pewarisan ☺). 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 Sub 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
Teknik Elektro -UM
TUGAS PRAKTIKUM 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 NumericTextBox. Kontrol ini hanya dapat menerima masukan berupa bilangan. Buat juga kode untuk menguji fungsionalitasnya.
Modul Praktikum Pemrograman Visual (PTI438)
52
