Saat ini, kita telah memasuki bagian 4 dari artikel pembuatan picture viewer. Pada bagian sebelumnya, anda telah belajar bagaimana membuat dan mengatur form di Windows Forms Designer dan juga belajar beberapa properti dari elemen di Form. Hal itu merupakan hal yang sangat penting untuk melanjutkan ke tahap selanjutnya. Pada part 4 ini, anda akan menambahkan button di aplikasi picture viewer dan berbagai elemen lainnya.
Jika anda belum baca part sebelumnya, berikut daftar langkah-langkah pembuatan Picture Viewer:
- Programming Tutorial: Membuat Aplikasi Picture Viewer Sederhana Dengan Visual Studio Express (Part 1)
- Programming Tutorial: Membuat Aplikasi Picture Viewer Sederhana Dengan Visual Studio Express (Part 2)
- Programming Tutorial: Membuat Aplikasi Picture Viewer Sederhana Dengan Visual Studio Express (Part 3)
Sekarang, marilah kita melanjutkan tutorialnya. Bukalah Visual Studio Express 2012 dan buka kembali proyek atau aplikasi anda.
Menambahkan Control dan Button di Picture Viewer
Sekarang, anda perlu menambahkan control dan juga button, agar aplikasi anda dapat bekerja. Untuk memulainya, silahkan tambahkan checkbox pada form anda. Caranya adalah klik ‘toolbox’ dan klik dobel ‘checkbox’.
Maka, checkbox akan ada di form anda. Klik dan geser checkbox ke pojok kiri bawah untuk menempatkannya disana.
Setelah itu, perhatikan Properties Window. Carilah properti ‘Text’ dan ubahlah menjadi ‘Stretch’. Agar letak checkbox berada di tengah, cari properti ‘Dock’ dan gantilah menjadi ‘Fill’.
Sekarang, klik Toolbox kembali dan buka bagian ‘Container’. Klik dobel ‘FlowLayoutPanel’ untuk menambahkannya ke form. Kemudian, klik icon segitiga hitam pada FlowLayoutPanel yang anda tambahkan dan klik ‘Dock in Parent Container’. Maka, area FlowLayoutPanel akan mengisi seluruh area field paling bawah.
Sekarang, pastikan anda klik FlowLayoutPanel, klik Toolbox dan buka bagian Container. Klik dobel ‘Button’ untuk menambahkannya ke form. Lalu, klik ‘Button1’ yang ada di form dan tekan CTRL + C untuk meng-copynya. Kemudian, tekan CTRL + V sebanyak 3 kali, agar button ada 4. Seperti pada gambar dibawah ini:
Klik Button1 dan perhatikan Properties Window. Carilah properti ‘Text’ dan rubahlah menjadi ‘Buka gambar’. Kemudian pada Button2 ubah properti ‘Text’ menjadi ‘Bersihkan gambar’. Lalu, lakukan lagi di Button3 dengan mengubahnya menjadi ‘Memilih warna background’ dan untuk Button4 dirubah menjadi ‘Tutup’. Anda bisa membesarkan ukuran button dengan cara klik button dan klik dan drag pada kotak putih disekililing button.
Selanjutnya klik FlowLayoutPanel pada form. Perhatikan Properties Window dan carilah properti ‘FlowDirection’. Ubahlah menjadi ‘RightToLeft’ untuk mengurutkannya dari kanan ke kiri. Hasil akhirnya akan menjadi seperti ini:
Untuk mencoba aplikasi yang anda buat ini, silahkan tekan saja tombol F5 untuk menjalankannya. Ketika anda klik button tersebut, tentu saja tidak terjadi apa-apa. Kita akan menambahkan perintah nantinya di button tersebut, agar bisa berjalan.
Memberikan nama pada tiap-tiap button
Agar anda tidak bingung dalam menggunakan button-button ini, anda harus memberikan nama terhadapnya. Klik button ‘Tutup’ dan cari properti ‘(Name)’ dan rubahlan menjadi ‘closeButton’. Lakukan hal yang sama dengan button lainnya dengan nama ‘backgroundButton’, ‘clearButton’, dan ‘showButton’.
Sekarang, klik dobel pada button ‘Buka’ dan secara otomatis, Visual Studio akan membuka tab baru dengan nama ‘Form1.vb’. Isi dari tab tersebut adalah seperti berikut:
Sekarang, buka kembali tab ‘Form1.vb (Design)’ dan klik dobel pada button ‘Bersihkan’. Lakukan hal tersebut ke tombol lainnya, termasuk ‘Checkbox’. Sehingga, pada tab ‘Form1.vb’, isinya menjadi seperti berikut:
Sebelum kita melanjutkan ke tahap selanjutnya, mari kita simak apa yang baru saja anda lakukan
Event Handler
Ketika anda mengklik dobel button, otomatis kode dari button tersebut akan dimunculkan di tab baru. Itu dinamakan Event Handler karena program anda akan menjalankan event handler di setiap peristiwa seperti klik, drag, dan lain sebagainya. Ketika anda klik button yang lain, secara otomatis kode dari button tersebut akan ditaruh dibawah dari event handler pada button sebelumnya.
Menambahkan Dialog Component
Langkah selanjutnya adalah menambahkan ‘Dialog Component’. Dialog Component adalah sebuah komponen untuk menambahkan fungsi dialog kepada user, sehingga pengguna aplikasi kita dapat menggunakannya. Untuk menambahkan dialog component, klik Toolbox dan buka bagian ‘Dialog’. Klik dobel ‘OpenFileDialog’ dan juga ‘ColorDialog’. Dua komponen tersebut akan berada di bagian bawah, seperti pada gambar dibawah ini:
Namun untuk saat ini, fokuslah ke OpenFileDialog1 dulu. Klik OpenFileDialog1 dan perhatikan Properties Window. Ubahlah propertinya menjadi seperti dibawah ini:
- Atur Properti ‘Filter’ menjadi: (Anda bisa copy dan paste)
JPEG Files (*.jpg)|*.jpg|PNG Files (*.png)|*.png|BMP Files (*.bmp)|*.bmp|All files (*.*)|*.*
- Atur Properti ‘Title’ menjadi: Pilihlah gambar
Penjelasan Properti dari OpenFileDialog
Properti Filter pada OpenFileDialog berfungsi untuk menentukan jenis file apa saja yang dapat anda buka melalui Picture Viewer. Seperti pada contoh diatas, file gambar yang dapat dibuka adalah *.jpg, *.png, dan *.bmp. Sehingga, anda bisa menentukan file apa saja yang dapat dibuka dengan menggunakan Properti Filter.
Sedangkan Properti Title berfungsi sebagai judul saat Window OpenFileDialog muncul. Ketika anda klik button ‘Buka’, maka window akan terbuka beserta judul dari window tersebut.
Sekarang, lakukan penyimpanan proyek agar proyek anda tidak hilang.
Ringkasan
Dalam part 4 ini, anda telah belajar:
- Menambahkan control dan button pada Picture Viewer
- Memberikan nama pada tiap-tiap button
- Penjelasan singkat tengtang Event Handler
- Menambahkan Dialog Component
- Penjelasan properti dari OpenFileDialog
Pada part selanjutnya, kita akan mulai belajar menambahkan script VB ke button. Jadi, tetap kunjungi Windowsku, Pusat Informasi Komputer dan Windows untuk mengetahui caranya!