Membuat Toolbar Sederhana dengan Visual Basic 6

Toolbar dibuat untuk mempercepat pengguna mengakses ke fungsi yang paling umum digunakan dari sebuah program. Toolbar dapat digunakan berdiri sendiri atau sebagai pelengkap untuk struktur menu program. Dalam tutorial ini, kita akan menciptakan sebuah toolbar yang akan terlihat seperti ini (toolbar dilingkari):

1. Buat form baru dengan tambahan menu file dan help (Tanpa ini pun gpp, :P)

2. Kita disini akan menggunakan dua kontrol. Yang pertama adalah kontrol Imagelist, yang berisi gambar yang akan digunakan untuk tombol toolbar. Kontrol kedua adalah Toolbar sendiri. Kedua kontrol tersebut berada di Microsoft Windows Common Control. Untuk mengaktifkannya pilih menu Project dalam IDE VB dan pilih Component:

Maka akan keluar Components dialog box, lalu check pada Microsoft Windows Common Controls 6.0 (SP6),

Klik OK.  ImageList dan Toolbar, bersama dengan TreeView, ListView, Slider,StatusBar, ProgressBar, TabStrip, dan ImageCombo akan muncul di toolbox seperti terlihat dibawah:. (Kita fokus pada ImageList dan Toolbar)
3. Double-click pada ImageList control untuk dimasukkan di form:

ImageList control tidak dapat diakses oleh user dan tidak akan terlihat pada saat dijalankan. Fungsi dari ImageList control adalah untuk membuat tempat penyimpanan images yang akan digunakan sebagai kontrol nantinya. masukkan images ke dalam ImageList control.

Klik icon ImageList, lalu klik F4 untuk masuk ke property list dan nama ImageListimlToolbarIcons.
4. Klik ImageList control pada form, kilk kanan dan pilih Properties dari context menu. Maka akan mucul property page untuk ImageList:
Pada  General tab, pilih 16 x 16.
5. Klik Images tab. Sehingga Property Pages dialog terlihat seperti gambar di bawah ini:

Klik Insert Picture button, pilih image, dan atur Key property untuk semua gambar yang anda perlukan. Disini kita memakai image button yang sudah tersedia secara default di vb, folder: \Program Files\Microsoft Visual Studio\Common\Graphics\Bitmaps\TlBr_W95. Folder tersebut berisi standard toolbar images. Untuk image pertama, klik New.bmp, seperti gambar dibawah ini:
Klik  Open button memilih image keluar dari kotak dialog “Select picture” (Juga bisa double-clicked pada “New.bmp” file). Images akan muncul di Images area dari Images tab pada Property pages, Dapat dilihat di gambar bawah. Pada Key area, Ketik New.

Ulangi proses diatas untuk membuat “Open”, “Save”, “Print”, dan “Help”, menggunakan:

Open.bmp
Save.bmp
Print.bmp
Help.bmp

Sampai Property Pages dialog terlihat seperti ini:
Klik Ok untuk menutup Property Pages dialog
6. Selanjutnya kita akan memasukkan toolbar control ke dalam form. double-click Toolbar control pada toolbox. Secara default, toolbar akan berada di sebelah atas form, dibawah menu.
7. Klik Toolbar, Klik F4 untuik memunculkan jendela properties, dan buat (Nama) property ketbrMenuOpts. lalu, klik kanan toolbar dan pilih Properties untuk masuk ke Property Pages dialog, seperti yang terlihat di bawah ini. Pada General tab, set ImageList menjadi “imlToolbarIcons” (ImageList sudah dimasukkan di form) – ingat, toolbar harus mendapatkan images dari images yang disimpan dalam ImageList control. set Styleproperty ke “1 – tbrFlat” (default -nya “0 – tbrStandard”).
Perbedaan standard dan flat toolbar style yaitu
1. Standard, semua tombol muncul


2. Flat, semua tombol flat, akan muncul apabila di klik



8. Pada Buttons tab di Property Pages dialog, Klik Insert Button command button, dan set properties seperti berikut:

 o     Set Key property menjadi  “New”. Key property dari toolbar button adalah string yang secara unik mengidentifikasikan button-buttons yang diberikan pada toolbar. Pada contoh program, Key property digunakan untuk mengidentifikasikan mana saja button yang di klik.

 o     Set ToolTipText property menjadi “New”. Ini adalah teks yang akan muncul di label kuning kecil ketika pengguna menggerakkan mouse di atas tombol

o       Set Image property menjadi “1″ atau “New”. Ini mengikat gambar di ImageList control ke sebuah button pada toolbar. value untuk Image property disini mengacu ke salah satu Index atau Key property dari image yang diinginkan pada ImageList control.

Property Pages dialog box akan terlihat seperti gambar di bawah ini:

Klik “Insert Button” lagi. Biarkan Key, ToolTipText, dan Image properties, set Style property menjadi  “3 – tbrSeparator”. Jika anda melihat kembali screen-shot yang menunjukkan Flat toolbar Style, anda akan melihat garis vertikal yang membagi setiap button di dalam toolbar. Selanjutnya setting Style property dari setiap button menjadi “3 – tbrSeparator”. Kotak dialog Property Pages akan terlihat seperti berikut:

Untuk menyelesaikan setting-an toolbar, pada setiap klik “Insert Button”, set properties sebagai berikut:

Index (don’t type in – VB will supply automatically)	Key	Style	ToolTipText	Image
3	Open	0 – tbrDefault	Open	2 (or “Open”)
4		3 – tbrSeparator
5	Save	0 – tbrDefault	Save	3 (or “Save”)
6		3 – tbrSeparator
7	Print	0 – tbrDefault	Print	4 (or “Print”)
8		3 – tbrSeparator
9	Help	0 – tbrDefault	Help	5 (or “Help”)
10		3 – tbrSeparator

Klik OK untuk menutup kotak dialog Property Pages

Sekarang kita akan menguji button mana yang ditekan user. Untuk melihat button di klik, test Index atau Key property dari Button object (gunakan standart object.property syntax, seperti “Button.Index” atau “Button.Key”). Contoh programini akan menggunakan “Button.Key”. ikuti codingan berikut:

Private Sub tbrMenuOpts_ButtonClick(ByVal Button As MSComCtlLib.Button)

Select Case Button.Key
Case “New”
mnuFileNew_Click
Case “Open”
mnuFileOpen_Click
Case “Save”
mnuFileSave_Click
Case “Print”
mnuFilePrint_Click
Case “Help”
mnuHelpAbout_Click
End Select

End Sub

10. Jalankan program. Ketika kamu klik pada toolbar button (contohnya: “Print”), Kode menu yang sesuai akan tereksekusi:



sekian terimakasih !!!
semoga bermanfaat !!!!

Tweet