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


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


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


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


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


Me.RichTextBox1.Cut()

End If

End Sub

Private Sub popCopy_Click(ByVal sender As System.Object, _

ByVal e As System.EventArgs) Handles popCopy.Click


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


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


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


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


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


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


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 8 (mdi)

Documents

Transcript of modul 8 (mdi)