Skip to main content

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

Desain Visual Listbox yang Owner-Draw Lazarus

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

Mrubah Font Listbox yang Owner-Draw


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.




Program Listbox yang Owner-Draw Lazarus

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.

Comments

Popular posts from this blog

Inilah Kelebihan dan Kekurangan SQLite

  Artikel ini akan membahas tentang, tipe data yang didukung SQLite,  kelebihan dari SQLite, kekurangan SQLite, kapan sebaiknya ketika menggunakan SQLite dan kapan sebaiknya kita tidak menggunakan SQLite. Merujuk dari id.wikipedia.org disebutkan bahwa SQLite merupakan sebuah sistem manajemen basisdata relasional yang bersifat ACID-compliant dan memiliki ukuran pustaka kode yang relatif kecil, ditulis dalam bahasa C. SQLite merupakan proyek yang bersifat public domain yang dikerjakan oleh D. Richard Hipp . SQLite adalah perpustakaan menakjubkan yang disematkan di dalam aplikasi yang menggunakan. Sebagai database mandiri, berbasis file, SQLite menawarkan serangkaian menakjubkan alat untuk menangani segala macam data dengan jauh lebih sedikit kendala dan kemudahan dibandingkan dengan host, proses berbasis (server) database relasional. Ketika sebuah aplikasi menggunakan SQLite, integrasi bekerja dengan panggilan fungsional dan langsung dibuat untuk file memegang data (yaitu ...

Penggunaan Komponen RadioGroup Lazarus Free Pascal (Belajar Lazarus #10)

Pada Tutorial Penggunaan Komponen RadioGroup Lazarus Free Pascal kali ini bertujuan untuk memahami cara penggunaan RadioGroup serta penerapan pernyataan / statement CASE. Untuk itu maka silahkan buka kembali proyek aplikasi kasiratk yang telah anda buat sebelumnya. Untuk mengingat kembali jika lupa silahkan buka kembali tutorial RadioGroup dan Validasi Data . KOMPONEN RADIOGROUP RadioGroup adalah gabungan dari komponen RadioButton dan komponen GroupBox, fungsinya sama dengan komponen RadioButton. Setelah program aplikasi kasiratk terbuka, ikuti langkah-langkah di bawah ini: LANGKAH-LANGKAH PENAMBAHAN KOMPONEN & PROPERTIES : Ubah aplikasi yang memakai RadioButton dengan RadioGroup, caranya dengan klik GroupBox, lalu tekan tombol Delete, maka ketiga komponen RadioButton didalamnya akan ikut terhapus. Tempatkan komponen RadioGroup di tempat GroupBox. Ubah Name menjadi RGBarang dan Caption-nya menjadi Nama Barang. Klik tombol [,,,] pada Properties Items milik komponen RGBar...

Aplikasi Demo Penggunaan Memo ComboBox ListBox dan CheckBox (Belajar Lazarus #14)

Mempelajari Listbox yang Owner-Draw Lazarus telah kita bahas pada artikel sebelumnya, sekarang mari kita buat Aplikasi Demo Penggunaan Memo ComboBox ListBox dan CheckBox . CheckBox memberi dua pilihan (bahkan tiga pilihan) kepada pemakai, properti yang berkaitan dengan pilihan pada CheckBox yaitu: Ubah property Checked menjadi True agar CheckBox dipilih secara default. Ubah AllowGrayed menjadi True agar CheckBox mempunyai 3 pilihan, yaitu checked , unchecked dan grayed . Property State menyatakan apakah CheckBox dalam keadaan checked ( cbChecked ), unchecked ( cbUnchecked ), atau grayed ( cbGrayed ). Memo dipakai untuk memasukkan data yang lebih dari satu barus. ListBox menampilkan daftar dan Anda dapat memilih item-itemnya: Property Items dibakai untuk mengisi pilihan-pilihan yang mungkin. ItemIndex menyatakan item yang dipilih.  MultiSelect menyatakan apakah dapat memilih lebih dari satu pilihan pada saat yang bersamaan. Sorted menyatakan apakah daftar terurut sec...