CHAPTER #7 APLIKASI WINDOWS FORM 2 (KONTROL- KONTROL TINGKAT LANJUT)

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

CHAPTER #7 APLIKASI WINDOWS FORM 2 (KONTROLKONTROL TINGKAT LANJUT) Kita sudah mengenal beberapa kontrol-sederhana yang ada pada visual C# dan bagaimana cara mempergunakannya. Tentunya kita sudah tidak sabar lagi untuk mengenal beberapa kontrol lain yang lebih keren dan mencoba mempergunakannya untuk menambah kemampuan aplikasi yang akan kita buat. Penasaran? Ayo kita menuju ke pembahaan kontrol-kontrol tingkat lanjut pada Visual C#...

7.1 PictureBox dan OpenFileDialog PictureBox merupakan kontrol yang digunakan untuk menampilkan gambar. Kontrol PictureBox memiliki properties Image yang akan digunakan untuk menentukan file gambar yang akan ditampilkan dalam PictureBox dengan memilih properties Image, kemudian klik pada konfigurasi […] di sebelah kanan properties Image, maka akan muncul jendela import yang digunakan untuk memasukkan file gambar seperti pada Gambar 7.1. Pada jendela yang terlihat di Gambar 7.1 tersebut, kita dapat mengambil gambar dari komputer ke dalam kontrol PictureBox. Untuk melakukan hal ini, tekan tombol Import… untuk mengambil file gambar yang ada pada direktori komputer kita.

Gambar 7.1 Jendela Import File Gambar Ada beberapa properties yang sering digunakan dalam kontrol PictureBox, properties tersebut antara lain: 1. Image Menentukan file gambar yang akan ditampilkan dalam kontrol PictureBox. 2. Sizemode Mengatur ukuran tampilan file gambar dalam kontrol PictureBox. Terdapat beberapa nilai yang bisa kita pilih, yaitu: a. Normal Nilai standar dan gambar yang ditampilkan sesuai dengan ukuran normalnya. Fokus gambar dimulai dari bagian kiri atas. b. StrecthImage Menampilkan file gambar sesuai dengan ukuran kontrol PictureBox. c. CenterImage Menempatkan file gambar pada posisi tengah dalam kontrol PictureBox. Ukuran gambar normal.

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

1


d. AutoSize Mengatur kontrol PictureBox mengikuti ukuran file gambar. Jika kita menggunakan properties image secara manual, tentunya hanya dapat melihat satu macam gambar saja pada saat aplikasi dijalankan. Untuk dapat membuka sebuah dialog untuk memilih file yang akan ditampilkan di dalam PictureBox pada saat aplikasi dijalankan maka kita mempergunakan kontrol OpenFileDialog. Dengan menggunakan kontrol OpenFileDialog maka kita dapat membuka file gambar yang kita inginkan untuk kemudian ditampilkan dalam kontrol PictureBox. Selain itu kontrol ini juga dapat membuka file-file jenis lainnya sesuai dengan properties Filter pada file tersebut dan kontrol apa yang akan menampung isi dari file tersebut. Properties yang sering digunakan dari kontrol ini antara lain : 1. FileName Menentukan lokasi dan nama file yang akan dibuka oleh kontrol OpenFileDialog. 2. Filter Menentukan jenis file yang dapat dibuka oleh kontrol OpenFileDialog. Kali ini kita akan membuat sebuah aplikasi untuk memilih gambar dari dalam direktori komputer kita dan kemudian membukanya dalam sebuah PictureBox. Untuk itu diperlukan sebuah kontrol PictureBox ditengah-tengah form, kemudian terdapat sebuah kontrol Button untuk memicu terbukanya kontrol OpenFileDialog. Untuk itu kita dapat mendesain tampilan antarmuka dari aplikasi ini seperti yang terlihat pada Gambar 7.2.

Gambar 7.2 Antarmuka Aplikasi Memilih Gambar Konfigurasi dari kontrol-kontrol tersebut dapat kita lihat pada Tabel 7.1. Tabel 7.1 Properties Aplikasi Memilih Gambar Kontrol PictureBox1 OpenFileDIalog1 Button1

Properties Name Sizemode Name Name Text

Nilai picGambar StretchImage open btnOpen Open

Perhatikan kode 7.1 berikut yang merupakan kode program untuk membuka sebuah dialog dan memilih file yang ingin dibuka, ketika kita mengklik btnOpen. Kita menggunakan exception handling karena ada kemungkinan file yang akan kita buka corrupt atau rusak sehingga tidak dapat dibuka pada PictureBox.


2


Kode 7.1 try {

OpenFileDialog open = new OpenFileDialog(); open.Filter = "Image Files(*.jpg; *.jpeg; *.gif; *.bmp)|*.jpg; *.jpeg; *.gif; *.bmp"; if (open.ShowDialog() == DialogResult.OK) { picGambar.Image = new Bitmap(open.FileName); }

} catch (Exception) { throw new ApplicationException("Failed loading image"); }

Sedangkan kode selengkapnya dari aplikasi memilih gambar ini dapat kita lihat pada Kode 7.2. Kode 7.2 using using using using using using using

System; System.Collections.Generic; System.ComponentModel; System.Data; System.Drawing; System.Text; System.Windows.Forms;

namespace ChoosePicture { public partial class Form1 : Form { public Form1() { InitializeComponent(); } private void btnOpen_Click(object sender, EventArgs e) { try { OpenFileDialog open = new OpenFileDialog(); open.Filter = "Image Files(*.jpg; *.jpeg; *.gif; *.bmp)| *.jpg; *.jpeg; *.gif; *.bmp"; if (open.ShowDialog() == DialogResult.OK) { picGambar.Image = new Bitmap(open.FileName); } } catch (Exception) { throw new ApplicationException("Failed loading image"); } }

}

}

Apabila aplikasi ini dieksekusi, hasilnya adalah seperti pada Gambar 7.3 dan Gambar 7.4. Gambar 7.3 adalah jendela dialog yang muncul ketika kita mengklk tombol open. Pada bagian ini kita dapat memilih file gambar yang ingin kita tampilkan dalam PictureBox. Sedangkan Gambar 7.4 adalah hasil dari load picture.


3


Gambar 7.3 Jendela Dialog untuk Memilih Gambar dari Komputer

Gambar 7.4 Hasil Eksekusi Aplikasi Memilih Gambar

7.2 ComboBox dan ListBox Sebelumnya kita telah mempelajari CheckBox dan RadioButton yang berguna untuk memberi pada user beberapa pilihan. Namun bila pilihan tersebut bersifat dinamis dan bisa bertambah atau berkurang sesuai dengan program yang diberikan, maka tampilan form akan terlihat kurang rapi karena banyaknya item yang tampil untuk memberikan suatu pilihan. Kini kita akan mengenal dua macam kontrol yang berguna untuk memilih juga, namun yang akan tampil hanyalah semacam TextBox, sehingga tidak memakan tempat. Kedua control tersebut adalah ComboBox dan ListBox. Perbedaan mendasar dari ComboBox dan ListBox adalah pada bentuk dan banyaknya item yang dapat dipilih. Pada ComboBox, user dapat mengklik control ini sehingga muncul sebuah daftar item yang dapat dipilih dalam bentuk drop down (ditarik ke bawah) dan user hanya dapat memilih satu dari sekian banyak item yang ditawarkan. Sedangkan ListBox akan memunculkan daftar item yang dapat discroll ke atas maupun ke bawah, pada kontrol ini user dapat memilih lebih dari satu item. Properties dan event yang sering dipergunakan pada kedua control ini adalah: 1. property Items Item yang dapat dipilih oleh user, untuk mengisi item secara langsung pada bagian dapat dilakukan seperti mengisi array, yaitu dengan mengklik tombol …


4


di samping kanan property ini (ada tulisan Collection), kemudian kita dapat mengisikan item-itemnya dipisahkan dengan tombol Enter pada keyboard. Untuk mengisikan item ini melalui program, maka perlu ditulis sebuah kode sebagai berikut untuk ComboBox maupun untuk ListBox (perlu diingat, item baru yang ditambahkan akan muncul di bawah item-item sebelumnya): this.namaKontrol.Items.Add("nama item");

Sedangkan untuk mengambil nilai dari item yang kita pilih, kita dapat gunakan kode sebagai berikut (hanya berlaku jika yang dipilih hanya satu item saja): string pilihan = (string)this.cmbBahasa.SelectedItem;

2. event SelectedIndexChanged Event ini akan bereaksi pada saat kita mengubah pilihan pada ComboBox atau ListBox, sehingga tidak diperlukan pemicu lain seperti Button. Khusus untuk ComboBox, terdapat sebuah property yang digunakan untuk memilih jenis ComboBox tersebut. Property tersebut bernama DropDownStyle, yang memiliki beberapa nilai sebagai berikut: 1. Simple ComboBox akan berlaku seperti layaknya sebuah TextBox, Pada mode ini, ComboBox tidak dapat menampilkan daftar item-item yang dapat dipilih. 2. DropDown ComboBox dapat menampilkan item-item yang dapat dipilih, namun user masih dapat memasukkan teks secara manual sebagai pilihannya. 3. DropDownList ComboBox dapat menampilkan item-item yang dapat dipilih, dan user hanya dapat memilih satu dari item-item yang ada di dalam daftar pilihan. Sedangkan untuk ListBox, terdapat sebuah property yang digunakan untuk banyaknya pilihan yang dapat diambil dari ListBox tersebut. Property tersebut bernama SelectionMode, yang memiliki beberapa nilai sebagai berikut: 1. None Tidak ada item yang dapat dipilih 2. One Hanya dapat memilih satu item 3. MultiSimple Dapat memilih lebih dari satu item dengan cara mengklik mouse item yang dipilih satu persatu atau menekan spasi untuk setiap pilihan yang kita inginkan. 4. MultiExtended Dapat memilih lebih dari satu item dengan menekan shift atau memblok itemitem yang dipilih dengan menggunakan mouse. Sebagai contoh kita akan membuat sebuah aplikasi yang menggunakan sebuah ComboBox yang itemsnya kita buat secara manual. Pada aplikasi ini, kita dapat memilih bahasa untuk ucapan terima kasih. Untuk tampilan bagi aplikasi ini dapat kita lihat pada Gambar 7.5.

Gambar 7.5 Antarmuka Aplikasi Ucapan Terima Kasih Untuk membuat aplikasi tersebut diperlukan beebrapa kontrol dengan konfigurasi seperti yang tertera pada Tabel 7.2.


5


Tabel 7.2 Properties Aplikasi Ucapan Terima Kasih Kontrol Label1 Label2

ComboBox1

Properties Name Text Name Text Font.Size Font.Name Font.Bold Name DropDownStyle Item

Nilai lblBahasa Bahasa: lblTrims [Terima Kasih] 12 Tahoma true cmbBahasa DropDownList Indonesia Inggris Mandarin Jepang Jerman Spanyol

Isi dari program ini cukup sederhana, bila yang dipilih adalah index ke-0 (Indonesia), maka lblTrims akan berubah menjadi terima kasih dalam bahasa Indonesia. Begitu pula kalau yang dipilih indeks lainnya, maka lblTrims akan berubah sesuai dengan bahasa yang dipilih pada cmbBahasa. Kali ini kita memiliki 6 macam item bahasa saja. Kode program selengkapnya dapat dilihat pada Kode 7.3. Kode 7.3 using using using using using using using


namespace Thanks { public partial class Form1 : Form { public Form1() { InitializeComponent(); } private void cmbBahasa_SelectedIndexChanged(object sender, EventArgs e) { if (this.cmbBahasa.SelectedIndex == 0) //Indonesia { this.lblTrims.Text = "Terima Kasih"; } else if (this.cmbBahasa.SelectedIndex == 1) //Inggris { this.lblTrims.Text = "Thank You"; } else if (this.cmbBahasa.SelectedIndex == 2) //Jepang { this.lblTrims.Text = "Arigato"; } else if (this.cmbBahasa.SelectedIndex == 3) //Jerman { this.lblTrims.Text = "Danke"; } else if (this.cmbBahasa.SelectedIndex == 4) //Mandarin {


6


this.lblTrims.Text = "Xie Xie Ni"; } else if (this.cmbBahasa.SelectedIndex == 5) //Spanyol { this.lblTrims.Text = "Gracias"; } string pilihan = (string)this.cmbBahasa.SelectedItem; }

}

}

Hasil eksekusi dari beberapa kasus pada aplikasi ucapan terima kasih ini dapat dilihat pada Gambar 7.6.

Gambar 7.6 Hasil Eksekusi Aplikasi Ucapan Terima Kasih

7.3 DateTimePicker DatetimePicker adalah kontrol yang digunakan untuk masukan data berupa tanggal atau waktu. Bentuknya yang seperti kalender akan memudahkan kita untuk memilih tanggal yang kita inginkan. Kontrol ini memiliki beberpa properties penting yang perlu kita ketahui, antara lain: 1. Format Mengatur bentuk data yang akan ditampilkan dalam kontrol. Format data yang dapat kita gunakan di antaranya: a. Long Tanggal dan waktu secara lengkap b. Short Untuk tanggal saja c. Time Untuk waktu saja d. Custom Didefinisikan sendiri oleh pengguna 2. Value Menyatakan nilai tanggal atau waktu yang sedang aktif pada kontrol DateTimePicker tersebut. 3. Showupdown Mengatur bentuk kontrol DateTimePicker sehingga bia mengubah nilai tanggal dengan menekan tombol up atau down yang disediakan kontrol tersebut. 4. Cursor Menentukan jenis kursor mouse saat berada tepat di atas kontrol. Di samping properties ada sebuah event khusus yang dapat digunakan untuk memicu reaksi dari program, event khusus tersebut bernama ValueChanged, event ini bereaksi ketika nilai atau value dari kontrol DatetimePicker diubah oleh pengguna.


7


Selain itu, ada beberapa method yang menyertai property value, method-method tersebut berhubungan dengan operasi nilai tanggal atau waktu. Method-method tersebut antara lain: 1. AddDays(int nilai) Menambah hari dengan nilai tanggal yang ada pada property value. 2. AddMonths(int nilai) Menambah bulan dengan nilai tanggal yang ada pada property value. 3. AddYears(int nilai) Menambah tahun dengan nilai tanggal yang ada pada property value. 4. AddHours(int nilai) Menambah jam dengan nilai waktu yang ada pada property value. 5. AddMinutes(int nilai) Menambah menit dengan nilai waktu yang ada pada property value. 6. AddSeconds(int nilai) Menambah detik dengan nilai waktu yang ada pada property value. Kali ini kita akan mambuat sebuah aplikasi untuk simulasi peminjaman buku di sebuah perpustakaan. Jadi kita akan membuat sebuah form untuk menset tanggal peminjaman dan tanggal pengembalian sebuah buku. Aplikasi ini memungkinkan saat kita memasukkan tanggal pinjam, otomatis tanggal pengembalian akan diset dengan aturan tanggal pinjam ditambah 7 hari. Untuk mewujudkan aplikasi perpustakaan sederhana tersebut, kita dapat mendesain tampilan dari program tersebut seperti yang terlihat pada Gambar 7.7.

Gambar 7.7 Antarmuka Aplikasi Perpustakaan Sederhana Untuk mendesain seperti pada Gambar 7.7, kita perlu mengatur konfigurasi setiap kontrol yang ada seperti yang tertera pada Tabel 7.3. Tabel 7.1 Properties Aplikasi Perpustakaan Sederhana Kontrol Label1

Properties Name Text Label2 Name Text Label3 Name Text TextBox1 Name DateTimePicker1 Name Value Format DateTimePicker2 Name Value Format Button1 Name Text

Nilai lblKode Kode Buku: lblPinjam Tanggal Pinjam: lblKembali Tanggal Kembali: txtKode dtpPinjam Tanggal Sekarang Long dtpKembali Tanggal Sekarang Long btnSimpan Simpan

Untuk mengubah value tanggal pada dtpKembali, kita perlu memberi event ValueChanged pada dtpPinjam. Event ini akan memicu perubahan value pada dtpKembali Kode program tersebut bisa dilihat pada Kode 7.4.


8


Kode 7.4 private void dtpPinjam_ValueChanged(object sender, EventArgs e) { this.dtpKembali.Value = this.dtpPinjam.Value.AddDays(7); }

Kode selengkapnya dari aplikasi perpustakaan sederhana ini bisa kita lihat pada Kode 7.5. Kode 7.5 using using using using using using using


namespace PerpusSederhana { public partial class Form1 : Form { public Form1() { InitializeComponent(); } private void dtpPinjam_ValueChanged(object sender, EventArgs e) { this.dtpKembali.Value = this.dtpPinjam.Value.AddDays(7); } private void btnSimpan_Click(object sender, EventArgs e) { string pesan; pesan = "Buku dengan Kode:"; pesan = pesan + this.txtKode.Text; pesan = pesan + "\nPinjam:"; pesan = pesan + this.dtpPinjam.Value; pesan = pesan + "\nKembali:"; pesan = pesan + this.dtpKembali.Value; MessageBox.Show(pesan); } }

}

Hasil eksekusi dari aplikasi ini bisa kita lihat pada Gambar 7.8 dan Gambar 7.9. Pada Gambar 7.8 kita dapat melihat saat dtpPinjam diubah, yaitu akan muncul tampilan semacam kalender yang bisa kita pilih tahun, bulan dan tanggalnya. Sedangkan perubahan akan terjadi secara otomatis pada dtpKembali begitu kita selesai memilih tanggal pada dtpPinjam. Bila kita mengklik tombol Simpan, maka akan tampil pesan berupa informasi peminjaman dan pengembalian buku dengan kode yang telah kita masukkan dalam txtKode. Karena format data pada dtpPinjam dan dtpKembali bernilai Long, maka waktu peminjaman juga akan ditampilkan. Hal ini dapat kita lihat pada Gambar 7.9.


9


Gambar 7.8 Bentuk Kalender pada DateTimePicker

Gambar 7.9 Hasil Eksekusi Aplikasi Perpustakaan Sederhana

7.4 Timer Kadangkala kita melihat ada aplikasi yang sebuah komponennya berjalan seiring waktu, misalnya program untuk menghitung mundur, atau program stopwatch. Sebuah control yang dapat melakukan hal ini adalah Timer. Timer adalah sebuah kontrol yang yang berjalan seiering dengan interval waktu yang diberikan oleh pengguna. Sebuah Timer dapat mengatur kerja sebuah program dalam satuan waktu tertentu. Untuk itu kita kenali dulu beberapa properties yang sering dipakai dalam Timer: 1. Interval Berguna untuk satuan waktu bagi timer untuk melakukan event Tick. Dihitung dalam satuan milidetik atau 1/1000 detik. Jadi bila ingin timer berjalan pada waktu 1 detik, berarti kita harus mengisi nilai dari property ini sebesar 1000, sedangkan bila ingin 1 menit, maka kita dapat mengisinya sebesar 60000. 2. Enabled Bila variabel ini diset true, maka event Tick pada Timer akan mulai berjalan. Sedangkan bila property ini diset false, maka event Tick pada Timer tersebut tidak berjalan. Timer memiliki event khusus yang bernama Tick, di mana event ini akan terpicu setiap satuan waktu tertentu yang diberikan dalam nilai pada property Interval. Event Tick ini akan terus berjalan selama property Enabled pada Timer tersebut bernilai True. Jadi prinsipnya mirip dengan perulangan while. Kali ini kita akan mencoba jalannya Timer tersebut dengan membuat sebuah program untuk menghitung mundur waktu yang telah dimasukkan oleh user. Bila waktu habis, maka Timer akan berhenti dan muncul sebuah pesan bahwa waktu sudah habis. Untuk aplikasi hitung mundur sederhana ini, kita hanya akan menggunakan satu masukan yaitu detik. Kita bisa mengendalikan timernya dengan tombol Start dan Stop, bila waktu sudah habis, maka kita dapat me-reset waktu dengan menekan tombol Reset. Untuk mewujudkan aplikasi tersebut, lihat Gambar 7.10 sebagai rancangan antarmuka dari Aplikasi Hitung Mundur Sederhana tersebut.


10


Gambar 7.10 Antarmuka Aplikasi Hitung Mundur Sederhana Untuk mendesain aplikasi seperti pada Gambar 7.10, kita perlu mengatur konfigurasi setiap kontrol yang ada seperti yang tertera pada Tabel 7.4. Tabel 7.4 Properties Aplikasi Hitung Mundur Sederhana Kontrol Label1

Label2 TextBox1 Button1 Button2 Button3 Timer1

Properties Name Text Font.Size Font.Name Font.Bold TextAllignment Name Text Name Name Text Name Text Name Text Name Interval Enabled

Nilai lblDetik 0 28 Arial Black true Middle Center lblInfo Masukan Waktu (Detik): txtDetik btnStart Start btnStop Stop btnReset Reset tmrHitung 1000 false

Kode program untuk menjalankan aplikasi ini, pertama-tama, kita harus memiliki sebuah variabel global, misalnya kita beri nama detik. Detik ini akan menjadi variabel yang terus menerus berubah. Ketika tombol start ditekan, maka lblDetik akan berubah dan variabel detik diisi oleh angka yang kita masukkan dalam txtDetik. Perhatikan Kode 7.6 untuk kode pada btnStart. Kode 7.6 private void btnStart_Click(object sender, EventArgs e) { this.lblDetik.Text = this.txtDetik.Text; this.detik = Convert.ToInt32(this.txtDetik.Text); this.tmrHitung.Enabled = true; }

Sedangkan untuk kode pada Timer, bisa dilihat pada Kode 7.7.


11


Kode 7.7 private void tmrHitung_Tick(object sender, EventArgs e) { if (detik > 0) { detik--; this.lblDetik.Text = Convert.ToString(detik); } else { this.tmrHitung.Enabled = false; MessageBox.Show("Waktu Habis", "Info"); } }

Kode selengkapnya dari aplikasi hitung mundur sederhana ini dapat dilihat pada Kode 7.8. Kode 7.8 using using using using using using using


namespace Countdown { public partial class Form1 : Form { public int detik; public Form1() { InitializeComponent(); } private void tmrHitung_Tick(object sender, EventArgs e) { if (detik > 0) { detik--; this.lblDetik.Text = Convert.ToString(detik); } else { this.tmrHitung.Enabled = false; MessageBox.Show("Waktu Habis", "Info"); } } private void btnStart_Click(object sender, EventArgs e) { this.lblDetik.Text = this.txtDetik.Text; this.detik = Convert.ToInt32(this.txtDetik.Text); this.tmrHitung.Enabled = true; } private void btnStop_Click(object sender, EventArgs e) { this.tmrHitung.Enabled = false; }


12


private void btnReset_Click(object sender, EventArgs e) { this.lblDetik.Text = this.txtDetik.Text; this.detik = Convert.ToInt32(this.txtDetik.Text); } }

}

Bila aplikasi tersebut dieksekusi, maka user bisa memasukkan angka dalam txtDetik, kemudian klik tombol Start (btnStart) untuk memulai. Untuk memberhentikan perhitungan di tengah jalan, cukup klik tombol Stop (btnStop), sedangkan untuk mereset angka kembali ke awal, klik tombol Reset (btnReset). Untuk hasil eksekusi dari aplikasi Hitung Mundur Sederhana ini dapat kita lihat pada Gambar 7.11.

Gambar 7.11 Hasil Eksekusi Aplikasi Hitung Mundur Sederhana Masih banyak kontrol-kontrol lain yang bisa kita pelajari, namun beberapa kontrol yang telah kita bahas ini adalah kontrol-kontrol tingkat lanjut yang paling sering dipakai. Banyak-banyaklah berlatih dan mencoba banyak jenis kontrol agar pengetahuan dan kemampuan pemrograman visual kita dalam C# semakin baik lagi.


13

CHAPTER #7 APLIKASI WINDOWS FORM 2 (KONTROL- KONTROL TINGKAT LANJUT)

Recommend Documents