CHAPTER #8 DESAIN KONTROL, MENUBAR, TOOLBAR, STATUSBAR DAN FORM MDI

Modul IT210 Pemrograman Visual Fakultas Teknologi Informasi – Universitas Kristen Satya Wacana

CHAPTER #8 DESAIN KONTROL, MENUBAR, TOOLBAR, STATUSBAR DAN FORM MDI Setiap aplikasi yang berbasis Windows, kita akan menemukan kelebihan di dalamnya seperti menubar, toolbar, statusbar dan form MDI(Multiple Document Interface). Pada bahasan ini akan dijelaskan bagaimana membuat menubar, toolbar, statusbar dan form MDI.

8.1. Mendesain Menu Menubar merupakan bagian sangat penting dalam setiap aplikasi Windows. Menubar memberikan kesan sangat tinggi terhadap sebuah aplikasi yang dilengkapi dengan kontrol ini. Keunggulan pemakaian menubar adalah kita dapat mengorganisasi semua aksi dalam aplikasi, kemudian dapat mengelompokkan berdasarkan kedekatan fungsi masing-masing dan menjadikannya sebuah antar muka yang dinamis.

Gambar 8.1. Contoh Menubar Pada gambar 8.1, kita dapat melihat bagaimana istimewanya sebuah aplikasi yang dilengkapi dengan menubar. Daftar menubar dikelompokkan berdasarkan kesamaan fungsi yang dimiliki masing-masing. Kita dapat melihat beberapa kelompok menu, yaitu : File, Edit, View, Insert dan Tools. Pada menu Tools, kita dapat melihat submenu yang menjadi anggota kelompok menu Tools. Jika mendesain dengan menggunakan menubar, kiata akan mendapatkan kemudahan dalam menempatkan berbagai aksi yang terdapat dalam sebuah aplikasi. Kita dapat menyusun aksi kedalam kelompok tertentu. Menubar merupakan kontrol yang digunakan untuk membangun daftar menu dalam aplikasi Windows. Kita dapat membuat menubar dengan langkahlangkah sebagai berikut: ✔ Letakkan kontrol menustrip yang ada dalam kelompok menu dan toolbar pada toolbar pada toolbox ke dalam area form.

Jasson Presttiliano, ST; Dian W. Chandra, S.Kom; Yos Richard Beeh, ST;

1


Gambar 8.2 Kontrol Menubar ✔

Langkah berikutnya, kita dapat menyisipkan menu standar atau menentukan itemnya. Kita dapat menyisipkan menu standar dengan mengklik kanan pada kontrol menustrip, lalu pilih Insert Standards Items.

Gambar 8.3 Insert Standard Items


2


Gambar 8.4 Menu Standard Untuk menyisipkan menu yang ditentukan sendiri, kita dapat melakukannya dengan mengetik item menu yang diperlukan langsung di dalam lokasi penyisipan menu item.

Gambar 8.5 Menambahkan menu secara langsung ✔

Langkah berikutnya adalah mengatur berbagai properties yang dimiliki itemitem menu. Text merupakan properties untuk mengatur tulisan menu item. Image merupakan properties untuk mengatur gambar menu item.


3


ShortCutKeys merupakan properties untuk mengatur tombol shortcut yang memanggil aksi menu item. Checked merupakan properties untuk mengatur tampilan tanda checklist pada daftar menu.

Gambar 8.6 Setting proerties ✔

Langkah berikutnya, kita harus menyisipkan kode program ke dalam setiap item menu yang telah didesain. Baris program merupakan aksi setiap menu item. Dalam event item menu, kita dapat menambahkan program sesuai dengan keperluan.

Gambar 8.7 Menambahkan event


4


8.2. Mendesain Toolstrip Toolstrip merupakan kontrol yang digunakan untuk mebangun tomboltombol toolbar. Pada setiap apilkasi Windows, kita akan selalu melihat tombol-tombol toolbar. Kita dapat membuat toolbar dengan langkah-langkah berikut. ➢ Letakkan kontrol toolstrip ke dalam wilayah form.

Gambar 8.8 Kontrol Toolbar ➢

Langkah berikutnya, kita dapat menyisipkan tombol standar atau menentukan itemnya sendiri.  Untuk menyisipkan tombol standar, kita dapat mengklik kanan pada kontrol toolstrip, lalu pilih Insert Standards Items.

Gambar 8.9 Menambahkan Toolbar standar 

Untuk menyisipkan tombol yang ditentukan sendiri, kita dapat mengetik item-item yang diperlukan langsung didalam area toolbar. Ada beberapa jenis toolbar yang disediakan oleh toolstrip, antara lain: label, button, combobox dan lain-lain.


5


➢

Langkah berikutnya, kita dapat menyisipkan item yang terdapat dalam toolbar combobox dan caranya seperti pada pertemuan minggu lalu. Untuk membuat daftar dalam toolbar combobox, anda terlebih dahulu memilih toolbarnya, kemudian buka bagian properties items. Pada collection, kita daftar.

Gambar 8.10 Item untuk combobox ➢

Langkah berikutnya, kita harus menyisipkan kode program kedalam setiap item toolbar yang telah didesain. Baris-baris program merupakan aksi dari setiap item toolbar. Event yang sering digunakan pada toolbar tergantung jenis kontrol dalam toolbar. Kalau menggunakan toolbar dengan kontrol button, maka aksi yang biasa digunakan bisa klik atau klik ganda. Namun kalau menggunakan kontrol combobox, dapat menggunakan event TextChanged.

Gambar 8.11 Menambahkan event pada combobox

8.3. Mendesain StatusBar StatusStrip merupakan kontrol yang digunakan untuk membangun tombol-tombol statusbar. Pada setiap aplikasi Windows, kita akan selalu melihat status suatu keadaan. Kita dapat membuat statusbar dengan langkah-langkah sebagai berikut : ➢ Letakkan kontrol StatusStrip kedalam wilayah form.


6


Gambar 8.12 Kontrol Statusbar ➢

Langkah berikutnya, kita dapat membuat dan menyisipkan jenis kontrol yang bisa dijadikan statusbar. Beberapa jenis kontrol yang bisa dijadikan statusbar diantaranya adalah label, button dan progressbar.

Gambar 8.13 Kontrol yang dapat dipakai pada Statusbar


7


➢

Pengaturan properties setiap statusbar disesuaikan dengan jenis kontrol yang akan digunakan. Untuk mengatur statusbar dengan kontrol progressbar, maka akan perlu ditentukan properties seperti value, maximum, minimum dan step.

Gambar 8.14 Setting properties untuk Progressbar

8.4. Mendesain Form MDI Aplikasi MDI merupakan aplikasi dengan banyak antamuka. Aplikasi dengan model MDI akan menampilkan banyak dokumen secara bersamaan dan masing-masing dokumen ditampilkan dalam jendela tersendri. Aplikasi MDI terdiri atas: ● Satu form induk (MDIParents) ● Banyak form anak (MDIChilds)

8.4.1. Form Induk Form induk sama halnya form yang biasa. Untuk membuat form induk, kita perlu mengatur properties IsMDIContainer dan WindowState yang dimiliki oleh form. Nilai properties IsMDIContainer bertipe boolean, dimana nilai true berarti form dijadikan form induk, sedangkan nilai false berarti form merupakan form anak. Properties windowstate diset maximized.

Gambar 8.15 Setting properties untuk Form Induk


8


Supaya form induk menjadi lebih menarik, kita perlu menyisipkan berbagai kontrol seperti: menubar, toolbar dan statusbar. Dengan berbagai kontrol, sebuah form induk akan menjadi lengkap. Gambar berikutnya merupakan gambar sebuah form induk yang dilengkapi dengan kontrol-kontrol seperti menubar.

Gambar 8.16 Tampilan Form Induk dengan Desain Menunya

8.4.2. Form Anak Untuk membuat form anak, kita dapat melakukannya dengan menambahkan form baru ke dalam aplikasi yang dibuat. Untuk mengatur agar form yang ditambahkan menjadi form anak adalah dengan mengatur properties IsMDIContainer pada form bernilai false. Untuk menambah form baru ke dalam project dapat dilakukan dengan memilih menu: project --> Add Windows Form ...

Gambar 8.17 Cara menambahkan Windows Form Kemudian, template muncul. Langkah selanjutnya, pilih Windows Form dan akhiri dengan menekan tombol Add.


9


Gambar 8.18 Pilihan yang ada Setelah menambah form baru, maka tampilan project yang sedang dibuat menjadi seperti gambar 8.19

Gambar 8.19 Tampilan setelah menambahkan form yang baru Pada sebuah aplikasi, dapat saja diperlukan lebih dari satu form anak. Form anak yang lain dapat ditambahkan dengan cara yang sama seperti sebelumnya. Hal yang tidak kalah penting adalah perlu dibuat suatu aksi yang dapat memanggil form anak dari form induk. Lebih lanjut, dapat digunakan menubar. Memanggil form anak berarti memanggil objek (class) form. Berikutnya dapat dilihat perintah untuk memanggil form anak. form_anak variabel = new form_anak(); variabel.MDIParent = form_induk; variabel.Show(); atau variabel.ShowDialog(); Kita akan memanggil Form2 melalui aksi menu file->new. Artinya, kita harus menambahkan method untuk memanggil form anak ke dalam aksi klik dari submenu New yang ada pada menu File.


10


Gambar 8.20 Menambahkan event pada menu Kemudian, sisipkan baris program yang akan memanggil Form2 atau form anak. Private void mnnew_klik(object sender, EventArgs e) { Form2 frm_anak = new Form2(); frm_anak.MDIParent = this; frm_anak.Show(); } Gambar 8.21 memperlihatkan Form2 yang diletakkan dalam wilayah Form1 sebagai form induk dalam aplikasi MDI.

Gambar 8.21 Tampilan Form Induk dan form Anak


11


Tampilan form anak dalam form MDI dapat diatur tampilannya dengan menggunakan metode LayoutMDI. Ada beberapa layout MDI yang sering digunakan, diantaranya adalah :. Cascade merupakan layout yang digunakan untuk menampilkan semua form anak secara cascade atau menumpuk satu dengan yang lain ke bawah. ArrangeIcon merupakan layout yang digunakan untuk menampilkan semua form dan menyusun sepanjang bagian bawah form induk. TileHorizontal merupakan layout yang digunakan untuk menampilkan semua form anak secara sejajar dan memanjang ke arah horisontal. TileVertical merupakan layout yang digunakan untuk menampilkan semua form anak secara sejajar dan memanjang ke arah vertikal. Kemudian, dalam menu Windows-cascade, dapat disisipkan baris program seperti berikut: private void cascadeToolStripMenuItem_Klik(object sender, EventArgs e) { LayoutMDI(MDIlayout.Cascade); } Hasilnya dapat dilihat seperti gambar berikut: Layout yang lain dapat ditambahkan dengan cara yang sama, dan mengganti perintah MDILayout.Cascade dengan MDILayout yang diinginkan.


12

CHAPTER #8 DESAIN KONTROL, MENUBAR, TOOLBAR, STATUSBAR DAN FORM MDI

Recommend Documents