Mempelajari Listbox yang Owner-Draw Lazarus (Belajar Lazarus #13)

Bagaimana sudah dipahami betul artikel sebelumnya tentang Menambah Item ListBox? Sekarang kita akan mempelajari Listbox yang Owner-Draw pada Lazarus. Tehnik owner-draw adalah cara penggambaran sebuah kontrol yang dilakukan oleh pemilik (owner) dari kontrol tersebut. Biasanya owner-nya adalah form. Pada komponen ListBox, anda dapat menyatakan cara ini dengan mengatur properti Style yang menentukan apakah listbox bersifat standar atau owner-draw atau virtual.

• ListBox standar menampilkan data string.
• ListBox owner-draw dapat menampilkan gambar grafik, dan anda dapat menampilkan item dengan cara yang tidak standar. Untuk itu anda harus menuliskan program untuk menampilkan item pada ListBox.
• ListBox vortual artrinya item-item diberikan dinamik menggunakan event handler.

Desain visual Listbox Owner-Draw

Buat desain seperti gambar diatas:

Form1
Caption: Listbox Owner Draw

ListBox1
Name: LBWarna
Style:  OwnerDrawFixed
Font: Ikuti langkah seperti gambar di bawah ini, Font: Arial, Font style: Regular, Size: 11

ColorDialog1
Name: CSWarna

Desain non Visual ListBox Owner-Draw

Buat Procedure AddColor yang berfungsi untuk menambahkan nama warna pada ListBox dan nilai warna untuk setiap item. Procedure AddColor kita deklarasikan sebagai procedure private. Kenapa memilih private, baca alasannya di Jenis Variabel Lazarus Free Pascal.
private
  { private declarations }
  procedure AddColor(Warna: Array of TColor);

pada bagian implementation tuliskan:
procedure TForm1.AddColor(Warna: Array of TColor);
Var i : integer;
begin
  for i := Low(warna) to high(warna) do
  LBWarna.Items.AddObject(ColorToString(Warna[i]),TObject(warna[i]));
end;

Pada saat form diaktifkan, kita akan menambahkan beberapa item pada ListBox. Isikan event handler OnActivate dari Form1. Procedure ini akan memanggil procedure AddColor.
procedure TForm1.FormActivate(Sender: TObject);
begin
  AddColor([clNavy, clOlive, $008000FF, clRed]);
end;

Kita akan mencoba ListBox owner-draw, event yang penting adalah OnDrawItem pada listbox. Event ini terjadi pada saat item akan digambar ulang. Event ini terjadi pada saat program pertama kali menampilkan item dan setiap kali ada perubahan status, misalnya karena mouse bergerak ke sebuah item sehingga item tersebut akan disorot.
Tambahkan eventhandler OnDrawItem dari ListBox untuk menampilkan setiap item ListBox dengan warna tertentu:
procedure TForm1.LBWarnaDrawItem(Control: TWinControl; Index: Integer;
  ARect: TRect; State: TOwnerDrawState);
begin
  with Control as TListbox do
  begin
    //hapus
    Canvas.FillRect(ARect);
    //gambar item
    Canvas.Font.Color:=TColor(Items.Objects[Index]);
    Canvas.TextOut(ARect.Left, ARect.Top, LBWarna.Items[index]);
  end;
end;

Jika kita klik ganda pada ListBox, akan ditampilkan ColorDialog, dan jika kita memilih sebuah warna, maka warna tersebut akan ditambahkan ke ListBox. Isikan pada event handler OnDblClick dari ListBox:
procedure TForm1.LBWarnaDblClick(Sender: TObject);
begin
  if CDWarna.Execute then AddColor([CDWarna.Color]);
end;

Listing Lengkap Listbox yang Owner-Draw

unit ulistboxdraw;

{$mode objfpc}{$H+}

interface

uses
  Classes, SysUtils, FileUtil, Forms, Controls, Graphics, Dialogs, StdCtrls, Types;

type

  { TForm1 }

  TForm1 = class(TForm)
    CDWarna: TColorDialog;
    LBWarna: TListBox;
    procedure FormActivate(Sender: TObject);
    procedure LBWarnaDblClick(Sender: TObject);
    procedure LBWarnaDrawItem(Control: TWinControl; Index: Integer;
      ARect: TRect; State: TOwnerDrawState);
  private
    { private declarations }
    procedure AddColor(Warna: Array of TColor);
  public
    { public declarations }
  end;

var
  Form1: TForm1;

implementation

{$R *.lfm}

{ TForm1 }

procedure TForm1.AddColor(Warna: Array of TColor);
Var i : integer;
begin
  for i := Low(warna) to high(warna) do
  LBWarna.Items.AddObject(ColorToString(Warna[i]),TObject(warna[i]));
end;

procedure TForm1.FormActivate(Sender: TObject);
begin
  AddColor([clNavy, clOlive, $008000FF, clRed]);
end;

procedure TForm1.LBWarnaDblClick(Sender: TObject);
begin
  if CDWarna.Execute then AddColor([CDWarna.Color]);
end;

procedure TForm1.LBWarnaDrawItem(Control: TWinControl; Index: Integer;
  ARect: TRect; State: TOwnerDrawState);
begin
  with Control as TListbox do
  begin
    //hapus
    Canvas.FillRect(ARect);
    //gambar item
    Canvas.Font.Color:=TColor(Items.Objects[Index]);
    Canvas.TextOut(ARect.Left, ARect.Top, LBWarna.Items[index]);
  end;
end;

end.

Jalankan aplikasi, maka tampilannya akan seperti gambar di atas. Setiap item ditampilkan dengan warnanya sendiri. Ada warna yang bernama, ada juga warna yang ditampilkan dalam bilangan hexadecimal. Warna dalam hexadecimal adalah warna yang tidak ada namanya di dalam Lazarus. Demikian artikel Mempelajari Listbox yang Owner-Draw Lazarus (Belajar Lazarus #13), sampai jumpa pada seri belajar lazarus lainnya.