modul 8 (mdi)
-
Upload
maulidia-nurrohmani -
Category
Documents
-
view
73 -
download
1
description
Transcript of modul 8 (mdi)
Teknik Elektro -UM
Modul Praktikum Pemrograman Visual (PTI438) 44
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.
Teknik Elektro -UM
Modul Praktikum Pemrograman Visual (PTI438) 45
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 Text &File
ToolStripMenuItem Name mnuEdit Text &Edit
ToolStripMenuItem Name mnuCut Text Cu&t
ToolStripMenuItem Name mnuCopy Text &Copy
ToolStripMenuItem Name mnuPaste Text &Paste
ToolStripMenuItem Name mnuAll
Text &Select A&ll
4. Untuk melengkapi menu, Anda dapat menambahkan shortcut melalui
properti ShortcutKeys.
Teknik Elektro -UM
Modul Praktikum Pemrograman Visual (PTI438) 46
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.
Teknik Elektro -UM
Modul Praktikum Pemrograman Visual (PTI438) 47
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
Teknik Elektro -UM
Modul Praktikum Pemrograman Visual (PTI438) 48
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.
Teknik Elektro -UM
Modul Praktikum Pemrograman Visual (PTI438) 49
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 Text &New
ToolStripMenuItem Name mnuHorizontal Text Tile Horizontally
ToolStripMenuItem Name mnuVertical Text Tile Vertically
ToolStripMenuItem Name mnuCascade Text Cascade
ToolStripMenuItem Name mnuArrange Text Arrange Icons
ToolStripMenuItem Name mnuClose Text 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
Teknik Elektro -UM
Modul Praktikum Pemrograman Visual (PTI438) 50
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 di-
overload 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")
Teknik Elektro -UM
Modul Praktikum Pemrograman Visual (PTI438) 50
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
Teknik Elektro -UM
Modul Praktikum Pemrograman Visual (PTI438) 51
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.
Teknik Elektro -UM
Modul Praktikum Pemrograman Visual (PTI438) 52
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.