Menggunakan Ribbon Controls Pada Delphi 2009 (Win32)

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.

  1. 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.
  2. 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
  3. 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
  4. 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.
  5. 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?
  6. 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.
  7. 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>

  8. 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

37 thoughts on “Menggunakan Ribbon Controls Pada Delphi 2009 (Win32)

  1. 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!🙂

  2. 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 ..

  3. 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

  4. 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

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

  6. 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….

  7. 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…

  8. 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?

  9. 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🙂

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

  11. 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

  12. Mas tanya lagi ni…..

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

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

    • Pastikan semua path yang diperlukan telah ditambahkan ke Delphi Library Path. Kemudian pastikan semua package dalam Project Group terurut seperti gambar ini:
      Zeos Packages

      Lebih jelasnya ikuti di sini.

  14. 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

  15. mas saya mau tanya bagaimana caranya membuat ribbon transaksi, laporan, dan printing, dimana pada ribbon tersebut ada tanda panah kebawah. saya kok lum tahu saya mas

  16. Maaf Mas, saya membuat menu yang dimana dalam pemanggilan form2 nya saya letakkan di page control dan menjadi tab di pagecontrolnya. Masalah yang ingin saya tanyakan, ketika form A yang ada di dalam pagecontrol tersebut ketika memanggil form lain sebagai showmodal untuk mengambil data dan ketika menutup sambil mengirim data ke form A ada Error : Access violation at address 00C5E7EB in module ‘Project.exe’ Read of address 00000468

    Terimakasih sebelumnya

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s