Home » Delphi » Component » Menggunakan Ribbon Controls Pada Delphi 2009 (Win32)

Menggunakan Ribbon Controls Pada Delphi 2009 (Win32)

November 1, 2009

Posted by Joko Rivai under Component

29 Comments

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:
```
<br>  ShowMessage('Anda menglik data user.');<br>
```
Save kembali projek kita. Tekan F9 untuk melihat hasilnya.

Cheers! It works!

Bagaimana dengan style-style Ribbon lainnya? Berikut contohnya:

Contoh Style Obsidian

Contoh Style Silver

Mudah-mudahan tutorial ini ada manfaatnya. Happy coding J

Comments

comments

29 Responses to Menggunakan Ribbon Controls Pada Delphi 2009 (Win32)

Hery LiemNovember 3, 2009 at 3:09 pm

Mas Joko, lama ngga ketemu, lg cuti dari FB
Ribbon control di D2009 bikin app lebih keren! Saya jg lagi nunggu D2010 tp, msh susah dapetnya…
Mas Joko, bisa minta diajarin lg?
Saya pake shellexecute untuk menjalankan 2 perintah DOS,

misal perintah ke-1:
ShellExecute(Handle, ‘open’, PChar(‘command.com’), PChar(‘/c copy D:Data1*.* D:Data2′), nil, SW_HIDE);

lalu perintah ke-2:
ShellExecute(Handle, ‘explore’, PChar(‘d:data2′), nil, nil, SW_SHOW);

masalah muncul pas dipake di PC yg lelet, jadi sebelum perintah ke-1 selesai, perintah ke-2 udah dijalankan, hasilnya ngga sesuai kan?

gimana caranya supaya setiap perintah bisa dieksekusi hingga selesai baru perintah berikutnya dijalankan (juga untuk lebih dari 2 perintah)

thanks sebelumnya mas Joko, u are the best!
New Post

Reply
igenNovember 18, 2009 at 5:54 pm

btw ni bisa dpake di delphi 7 ga?? thx yow… tas informasinyah…
New Post

Reply
- Joko RivaiNovember 21, 2009 at 3:04 pm
  
  Gak juga. Soalnya di Delphi 7 belum ada Ribbon Control
  New Post
  
  Reply
BowoMarch 4, 2010 at 4:35 am

mas joko .. saya pake delphi 7 .. cuman saya bermasalah sama Quick report nya… Kasus nya saya mau print kertas ukuran customs. waktu develop pake d7 itu kertas padahal dah di setting sesuai ukuran nya, bahkan di settingan printer default udah saya buat sesuai dengan ketentuan. Tapi ketika saya downgrade pakai delphi 6 .. baru mau .. kenapa ya Quick report D7 selalu mengambil default papper nya ke letter. Trus baik nya D7 itu pakai report nya apa ?? Rave ?? saya jg sudah coba rave .. cuman kelemahan rave standard D7 itu masalah connectionnya cuman di tentukan 3. YI : ADO, BDE, dan satu lagi apa gitu .. saya develop aplikasi pakai myDac. di Rave ndak ada kontrol koneksinya. kalau Quick report kan langsung nyambung dataset ajah .. Pls help masukan nya .. D7 report nya yang langsung nyambung dataset pakai apa .. thx ..
New Post

Reply
vierm_186May 20, 2010 at 3:14 am

Mas,, ni saya lagi,.. hoa3x… kok di main form yang saya beri tribbon klo di run ada tombol maximize gak bisa ilang walaupun di properties main formnya sudah saya hilangkan..
terimakasih
New Post

Reply
- Joko RivaiMay 20, 2010 at 7:36 pm
  
  Itulah masalahanya Mas. Ribbon bawaan Delphi gak mendukung pengaturan properti ini….
  New Post
  
  Reply
ariestoNovember 23, 2010 at 11:47 pm

Mas Joko, klo yang di autoCAD 2010 itu pake komponen apa yah…. kok bisa ditambahkan TMainMenu di Form Ribbon Controlnya, saya udah coba hasilnya TmainMenunya tidak bisa/ menyatu dengan Ribbon Controlnya seperti di AutoCad 2010 UI
New Post

Reply
- Joko RivaiNovember 27, 2010 at 9:39 am
  
  Itu bukan TMainMenu, tapi RibbonTab seperti contoh di atas.
  Delphi 2009 masih miskin fitur ribbonnya.
  Untuk fitur-fitur lebih banyak dan tampilan lebih menarik, silahkan gunakan TMS Components Pack .
  Silahkan download versi trial untuk uji-coba.
  New Post
  
  Reply
RiagilFebruary 15, 2011 at 8:55 am

mas joko… cara buat menu pake ribbon di delphi 2010 seperti program SI Akuntansi sampeyan gimana? Penerimaan Kas gambarnya Uang backgroundnya hijau… gitu mas,,
New Post

Reply
- Joko RivaiFebruary 20, 2011 at 4:28 am
  
  Itu aku pake TMS Component Suite. Ribbonnya lebih bagus daripada DevExpress maupun ribbon bawaan Delphi.
  New Post
  
  Reply
riagilMarch 28, 2011 at 8:16 am

mas joko…. aku kesulitan buat multiform yang rapi pake ribbon, form utama bisa ketutupan…
New Post

Reply
- Joko RivaiMarch 29, 2011 at 2:09 am
  
  Itu bug ribbon control. Saya belum tau apakah di Delphi XE sudah ada perbaikan…
  New Post
  
  Reply
  - riagilMarch 29, 2011 at 5:05 am
    
    trus mas kalo pake ribbon punya TMS Component sama ndak bug nya??
    New Post
    
    Reply
Joko RivaiMarch 29, 2011 at 7:54 am

riagil :
trus mas kalo pake ribbon punya TMS Component sama ndak bug nya??

Kalo yang TMS sangat bagus….
New Post

Reply
RiagilMarch 30, 2011 at 12:55 am

mas joko punya tutorial membuat aplikasi sederhana pake ribbon, atau contohnya dengan banyak form pastinya tetep pake ribbon.. kalo ad aq minta mas, soalnya googling2 lum ktemu, pengen belajar….
New Post

Reply
ramdhaniMarch 31, 2011 at 1:42 am

Mas…salam kenal

saya mau tanya…gmn cara kita membuat procedure yang propertiynya dapat d warisi oleh procedure lainya /(inherited)…..
bisa kasih contoh skrip sederhananya…..

trims…
New Post

Reply
Joko RivaiMarch 31, 2011 at 1:15 pm

ramdhani :

Mas…salam kenal

saya mau tanya…gmn cara kita membuat procedure yang propertiynya dapat d warisi oleh procedure lainya /(inherited)…..
bisa kasih contoh skrip sederhananya…..

trims…

Prosedur tidak mempunyai properti. Jadi gak dapat diwariskan. Apakah maksud Anda Objek?
New Post

Reply
ramdhaniApril 1, 2011 at 6:38 am

ya mas…maksud saya objeknya…
New Post

Reply

Joko RivaiApril 2, 2011 at 2:34 pm

Berikut script sederhana, di mana TForm2 saya turunkan menjadi TForm3, keduanya memiliki prosedur yang sama, SetCaption().

Bedanya, yang di TForm2 diberi directive virtual, yang memungkinkan prosedur ini ditimpa (override) oleh turunannya. Prosedur ini ditempatkan dalam scope Public, sehingga dapat dipanggil dari instance TForm2.

Nah, TForm3, karena merupakan turunan TForm2, mewarisi prosedur SetCaption juga, dengan menambahkan directive override. Override memungkinkan method milik induk ditimpa oleh anaknya. Anak, TForm3, dapat mendefinisikan kode baru untuk method ini, bisa juga tidak melakukan apa-apa kecuali hanya memanggil method yang sama milik induk dengan menggunakan directive inherited. Atau, bisa juga melakuikan kedua-duanya.

unit Unit2; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms, Dialogs, ExtCtrls; type TForm2 = class(TForm) Panel1: TPanel; protected private { Private declarations } public { Public declarations } Procedure SetCaption(const ACaption:String); virtual; end; TForm3 = class (TForm2) public procedure SetCaption(const ACaption:String); override; end; { TForm2 } implementation {$R *.dfm} procedure TForm2.SetCaption(const ACaption: String); begin Panel1.Caption := 'Called from Form2: '#13+ACaption; end; { TForm3 } procedure TForm3.SetCaption(const ACaption: String); begin inherited SetCaption('Called from Form3(Turunan Form2):'#13+ACaption); end;

Pemanggilan dapat dilakukan dari kedua class, baik TForm2 maupun TForm3:

unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms, Dialogs, StdCtrls; type TForm1 = class(TForm) Button1: TButton; Button2: TButton; procedure Button1Click(Sender: TObject); procedure Button2Click(Sender: TObject); private { Private declarations } public { Public declarations } end; var Form1: TForm1; implementation uses Unit2; {$R *.dfm} procedure TForm1.Button1Click(Sender: TObject); begin with TForm2.Create(Application) do begin SetCaption('TES CAPTION'); ShowModal; Free; end; end; procedure TForm1.Button2Click(Sender: TObject); begin with TForm3.Create(Application) do begin SetCaption('TES CAPTION'); ShowModal; Free; end; end; end.

Moga membantu

New Post

ramdhaniApril 3, 2011 at 4:52 am

Trims banyak mas….
saya paham dah konsepnya..
ilmu yang saya dapat ni akan saya kembangkan lebih jauh
New Post

Reply
RamdhaniApril 25, 2011 at 1:19 am

Mas…saya tanya lagi nih..

Kenapa Hasil Exe saya tidak bisa dipakai di komputer lain, Keluar pesan ” irtl140.bpl not found”, tapi kalo aplikasinya saya jalankan di Laptop saya bisa mas…yang terdapat instalan delphi

Mohon Bantuannya……

Biasanyan apa penyebabnya mas….
apakah bisa terjadi karena saya mengisntal komponen lain…
saya menggunaka Delphi 2010

Trims
New Post

Reply
RivalinaApril 25, 2011 at 4:59 am

Itu kompile pakeDelphi 2010 ya?
Coba Anda cek post ini:
http://jokorb.wordpress.com/2011/04/25/rtl140-bpl-not-found/
New Post

Reply
- RamdhaniApril 25, 2011 at 5:53 am
  
  Ya saya pakai D2010
  New Post
  
  Reply
RamdhaniApril 25, 2011 at 8:48 am

Mas tanya lagi ni…..

Gmn kita menampilkan laporan di client tapi databasesnya ada di server ,dengan menggunkan quickreport and Zeos…
New Post

Reply
RamdhaniMay 19, 2011 at 4:09 am

Asskum……
Mas…saya instal Zeos Failed….katanya “ZParseSql140.bpl Was Not found”…….
Help me Please…..
New Post

Reply
- RivalinaMay 19, 2011 at 8:38 am
  
  Pastikan semua path yang diperlukan telah ditambahkan ke Delphi Library Path. Kemudian pastikan semua package dalam Project Group terurut seperti gambar ini:
  
  Lebih jelasnya ikuti di sini.
  New Post
  
  Reply
RamdhaniJuly 10, 2011 at 6:29 am

ASkum….
mas gmn membuat aplikasi kita buat berjalan sendiri pada saat windows pertama kali aktif dan menampilkan icon dibawah tuh mas..kaya aplikasi-aplikasi yang lain ,trims
New Post

Reply
ramdhaniJuly 22, 2011 at 11:34 am

Mas Koneksi SQLServer 2008 pake zeos…gmn?.Saya dah coba pi gagal katanya DLL-nya gak ada….help me
New Post

Reply
Buyut Joko RivaiJuly 24, 2011 at 11:29 pm

File-file DLL dari foldernya MS SQL ServerBinn harus dicopy ke dalam folder aplikasi.
New Post

Reply