Menggunakan Ribbon Controls Pada Delphi 2009 (Win32)

Grup KPPDI 1 November 2009

Salah satu fitur menarik pada Delphi 2009 Win32 adalah Ribbon Control, sebuah touch-up pada GUI yang meniru GUI MS Office 2007.

Gambar di samping adalah contoh penggunaan Ribbon Control pada aplikasi sederhana. Contoh ini tidak menyertakan glyph/icon pada tiap item menu, tapi sudah mewakili bagaimana Ribbon Control ini mempercantik tampilan aplikasi Anda.

Sebelum mulai menggunakannya, kita akan melihat hirarki Ribbon Control dan subset-subsetnya.

Ribbon Control awalnya adalah ide Microsoft, namun diadopsi oleh vendor-vendor software, termasuk Codegear dan TMS Softwate. Penggunaan Ribbon Control harus menyertakan lisensi dari Microsoft.

MENGGUNAKAN RIBBON CONTROL
Mari kita mulai menggunakan Ribbon Control.

Seperti biasa, kita buat sebuah aplikasi baru pada Delphi 2009

Kita mengguanakan VCL Forms Application - Delphi. Andi tentu tahu kenapa ;)
Sebuah form, Form1, akan dibuatkan untuk kita. Ini nantinya akan menjadi form utama. Dalam tutorial kita kali ini, saya menggunakan sebuah MDI Form sebagai main form, dan form-form lain akan menjadi MDIChild. Anda tentunya dapat memilih opsi lain. Tak masalah, ini bukan inti topik.
Berikut beberapa properti yang saya atur:
FormStyle: fsMDIForm
Position: poScreenCenter
WindowState: wsMaximized
Selanjutnya save projek kita.
Kita tambahkan sebuah ribbon ke form. Komponen ini defaultnya berada di page Ribbon Controls.

Letakkan TRibbon ke form (Form1). Tampilan Form1 sekarang seperti gambar berikut:

Kita lihat, TRibbon memiliki warna default domonan biru. Ini disebut Ribbon Style. Kita akan melihat style-style lainnya nanti. Silahkan lanjutkan membaca.
Kini kita dapat mengubah Caption dari Ribbon ini. Saya mengganti Robbon1 menjadi Luna – My First Ribbon. Sesuaikan punya Anda J
Nah, saatnya kita menambahkan komponen ke Ribbon ini. Komponen VCL non-ribbon tak dapat ditambahkan ke ribbon control, kecuali beberapa komponen yang terdapat di page Ribbon Control pada poin 2 di atas.
Lakukan klik kanan pada Ribbon1, kemudian pilih Add Tab

Sebuah tab baru akan ditampilkan pada Ribbon1, klik pada tab ini dan ganti property Caption, di sini saya menggantinya menjadi Page 1.

Anda dapat menambahkan beberapa tab sesuai kebutuhan Anda. Saya hanya butuh satu, jadi silahkan Anda lanjutkan sendiri J
Setelah Tab, kita tambahkan Group, di mana kontrol-kontrol akan diletakkan. Kita mulai dengan klik kanan pada Tab yang pertama dan pilih Add Group

Sebuah Group akan dibuatkan untuk kita. Kita tentu saja boleh mengubah Caption untuk Group ini sesuai kebutuhan kita. Bila suka, buatlah beberapa group.
Sampai di sini, sebuah Ribbon untuk form kita telah berhasil dibuat.
Karena Ribbon Style default saat pertama kali membuat ribbon adalah Luna (dominan biru), maka akan terlihat janggal jika Form1 tetap berwarna clBtnFace. Nah, silahkan ganti property Color milik Form1 menjadi clSkyBlue.

Bagaimana? Menarik bukan?
Menambahkan control ke Ribbon.
Kontrol-kontrol pada ribbon ditambahkan dari sebuah ActionManager.

Tambahkan sebuah ActionManager (page Additional) ke Form1, kemudian ubah property ActionManager dari Ribbon1 ke ActionManager1. Kemudian tambahkan juga sebuah ImageList dari page Win32 ke Form1, lalu set property Images dari ActionManager1 ke ImageList1. Tambahkanlah beberapa gambar pada ImageList1. OK. Berikutnya action-action yang akan dipakai. Klik ganda pada ActionManager1. Muncul dialog berikut:

Tambahkan beberapa action dan atur properti Name, Caption dan ImageIndex tiap action. Kemudian drag and drop tiap action ke group-group yang sesuai (dengan kebutuhan Anda). Saya membuatnya seperti berikut:

Untuk menambahkan separator (seperti pembatas dua action pada group Master Data), drag and drop tombol "Drag to create Separators" pada dialog Action Manager ke group yang sesuai.
Kini tambahkan kode. Klik ganda pada salah satu action pada group dan ketikkan kodenya.
misalnya untuk action Data User, saya memasukkan kode:
[sourcecode language='delphi']
ShowMessage('Anda menglik data user.');
[/sourcecode]
Save kembali projek kita. Tekan F9 untuk melihat hasilnya.