Anda tentunya sudah mengenal istilah balok gulung atau Scroll Bar. Kalau Anda menggunakan perangkat lunak pengolah kata misalnya, maka jika tulisan yang Anda buat cukup panjang, maka pada bagian kanan jendela pengolah kata tersebut akan muncul sebuah balok yang dapat Anda naik turunkan untuk mencapai bagian dari halaman-halaman tertentu yang akan Anda cari. Nah, itulah yang disebut balok gulung.
Di Visual Basic juga dikenal adanya kontrol balok gulung. Hanya saja, kontrol balok gulung ini bukan merupakan bagian dari suatu jendela tertentu seperti contoh pengolah kata tadi, melainkan merupakan kontrol yang dapat berdiri sendiri. Kadangkala ada kontrol tertentu yang memunculkan balok gulung, tetapi balok gulung tersebut bukan merupakan kontrol balok gulung. Misalnya Anda membuat suatu listbox yang memiliki daftar cukup panjang, akan tetapi ukuran dari listbox tersebut agak kecil, maka kontrol listbox tersebut otomatis akan memunculkan sebuah balok gulung, karena tidak mampu menampung daftar yang dikandungnya, tetapi balok gulung tersebut bukan kontrol balok gulung.
Perhatikan gambar 1. Pada gambar tersebut, balok gulung yang muncul pada kontrol listbox bukan merupakan kontrol balok gulung, tetapi balok gulung tersebut muncul semata-mata karena listbox tidak mampu menampung seluruh isi yang dikandungnya.
Gambar 1.
Kontrol balok gulung pada Visual Basic cukup berguna untuk mengatur atau menunjukkan posisi suatu jangkauan nilai tertentu.
Maksudnya begini, misalnya ada sebuah jangkauan nilai dari 0 sampai dengan 10, maka jika posisi balok terletak di paling kiri berarti nilainya adalah 0, jika di tengah berarti nilainya adalah 5, jika di paling kanan maka nilainya adalah 10. Itu jika balok gulungnya horisontal. Jika vertikal maka dapat berarti jika posisi balok ada di paling bawah berarti bernilai 0 dan paling atas bernilai 10.
Untuk menambah pemahaman tentang penggunaan kontrol balok gulung ini, akan diberikan contoh sebuah program konversi warna.Program ini ditujukan untuk membantu menentukan warna berdasarkan angka heksadesimal dalam perancangan halaman HTML. Memang sekarang ini sudah banyak perangkat lunak yang dapat merancang halaman HTML secara visual dan dengan perangkat tersebut, warna-warna yang diinginkan tinggal dipilih dengan mengklik tombol mouse saja. Namun ada kalanya perancangan halaman HTML harus dilakukan secara teks dengan menuliskan tag-tag HTMLnya, misalnya untuk perancangan halaman HTML yang menggunakan bahasa skrip ASP atau PHP. Nah, pada keadaan seperti itu, program ini akan memiliki manfaat.
Gambar 2.
Sekarang mari kita buat program ini. Rancanglah form seperti gambar 2. Setelah selesai dengan perancangan form, ubahlah properti dari beberapa kontrol sebagai berikut:
| Kontrol | Properti | Nilai |
| Form | (Name) | frmWarna |
| Caption | Konversi Warna | |
| Text box 1 | BackColor | &H00000000& (Warna Hitam) |
| Text box 2 | Text | 00 |
| Text box 3 | Text | 00 |
| Text box 4 | Text | 00 |
| Label 1 | Caption | Red |
| Label 2 | Caption | Green |
| Label 3 | Caption | Blue |
| HScroll 1 | LargeChange | 20 |
| Max | 255 | |
| Min | 0 | |
| Small Change | 1 | |
| HScroll 2 | LargeChange | 20 |
| Max | 255 | |
| Min | 0 | |
| Small Change | 1 | |
| HScroll 3 | LargeChange | 20 |
| Max | 255 | |
| Min | 0 | |
| SmallChange | 1 | |
| Command button 1 | Caption | E&xit |
Properti dari balok gulung yang diubah di atas memiliki pengertian sebagai berikut:
- LargeChange: perubahan nilai yang terbesar karena bergesernya balok adalah sebesar 20 angka.
- Max: nilai maksimum dari balok gulung adalah 255.
- Min: nilai minimum dari balok gulung adalah 0.
- SmallChange: perubahan nilai yang terkecil karena bergesernya balok adalah sebesar 1 angka.
- Jika digunakan panah atas/bawah atau kiri/kanan pada keyboard untuk menggeser balok, ataupun dengan mengklik tanda segitiga di kanan/kiri kontrol balok gulung, maka yang didapat adalah perubahan nilai yang terkecil, yaitu 1.
- Jika digunakan tombol PageUp/PageDown untuk menggeser balok, maka yang didapat adalah perubahan nilai yang terbesar, yaitu 20.
- Perubahan nilai adalah bebas jika balok gulung digeser-geser dengan cara didrag oleh mouse.
| Listing 1. Program konversi warna Private Sub Command1_Click() End End Sub Private Sub HScroll1_Change() warna 'memanggil prosedur warna n = Hex$(HScroll1.Value) pj = Len(n) If pj = 1 Then n = "0" & n End If Text2.Text = n End Sub Private Sub HScroll2_Change() warna 'memanggil prosedur warna n = Hex$(HScroll2.Value) pj = Len(n) If pj = 1 Then n = "0" & n End If Text3.Text = n End Sub Private Sub HScroll3_Change() warna 'memanggil prosedur warna n = Hex$(HScroll3.Value) pj = Len(n) If pj = 1 Then n = "0" & n End If Text4.Text = n End Sub |
Pada kode program tersebut, terdapat sebuah prosedur buatan sendiri bernama warna. Untuk menambahkan prosedur tersebut, akan digunakan sebuah modul terpisah. Cara untuk menambahkan sebuah modul terpisah adalah sebagai berikut:
- Klik kanan pada project window.
- Pada menu yang muncul pilih add.
- Pilih module.
- Jika muncul kotak dialog, pilih module, lalu klik open.
| Listing 2. Prosedur warna Public Sub warna() frmWarna.Text1.BackColor = RGB(frmWarna.HScroll1.Value, _ frmWarna.HScroll2.Value, frmWarna.HScroll3.Value) End Sub |
Keterangan dari kode program di atas adalah sebagai berikut:
Prosedur Private Sub Command1_Click() merupakan prosedur yang digunakan untuk menutup/menghentikan program.
Prosedur Private Sub HScroll1_Change(), Private Sub HScroll2_Change(), dan Private Sub HScroll3_Change() memiliki fungsi yang sama, yaitu jika nilai dari balok gulung yang bersangkutan berubah (karena digeser), maka prosedur warna akan dipanggil. Kemudian nilai dari balok geser tersebut dikonversikan menjadi heksadesimal dan ditampung dalam variabel n. Jika variabel n hanya terdiri dari satu karakter, maka didepannya akan diberi angka nol. Setelah itu nilai n akan ditampilkan pada text2, text3, atau text4 sesuai dengan balok gulungnya.
Prosedur warna akan memberi warna latar belakang text1 sesuai dengan nilai HScroll1, HScroll2, dan HScroll3 yang diubah ke nilai RGB (Red, Green, Blue).
Running program tersebut adalah sebagai berikut:
Dengan menggeser-geser balok gulung yang ada, maka angka-angka pada text box yang bersangkutan akan berubah sesuai dengan warna yang nampak pada text box warna. Misalnya text box red akan mempunyai angka 03, green 25, dan blue AB, maka warna yang nampak tersebut akan memiliki bilangan heksadesimal 0325AB. Bandingkan dengan gambar 3.
Gambar 3.
