MERANCANG KOMPONEN GRADASI WARNAFORM

PADA BORLAND DELPHI

Oleh: Ipin B. A. dan Carwoto*)

Program aplikasi dengan beberapa formyang warnanya sama, terkesan monoton.sedangkan program aplikasi d.engan warna formberbeda-beda, jika pilihan warnanya tidak tepat,akan terlihat sangat kontras serta terkesan"semrawut", Untuk menghindari hal di atasdalam merancang aplikasi perlu menggunakanform dengan warna bergradasi.

Form dengan warna bergradasi sanggupmemberi kesan artistik tertentu, sehingga dapatmengurangi kejenuhan pemakai aplikasi (user),Disamping itu, form dengan warna bergradasibisa membimbing pandangan user ketika beralih

Sedangkan form default-nya tidak memilikiproperti ini. oleh karena itu, untuk memberigradasi warna pada form, kita harusmerancangnya sendiri.

Pada kesempatan ini, akan dibahasbagaim ana cara merancang komponen untukmemberi gradasi warna pada form. Komponenhasil rancangan ini dapat didaftarkan pada daftarComponent Palette agar dapat secara praktisdipakai setiap kali dibutuhkan.

Perancangan KomponenLangkah pertama yang harus dilakukan

dalam merancang komponen adalah memilih

Gambar l. Kotak Dialog KomponenExpert

dari form dengan wama tunggal tertentuke form lain dengan warna tunggal lainnya sec araperlahan.

Ada komponen pada Component PaletteBorland Delphi yang sudah memiliki propertigradasi warna, yaitu komponen TChart.

menu Eile I New I eomponentJetelah munculkotak dialog seperti pada Gambar l, isilah kotakQlass Name dengan nama komponen yang akandibuat. Pada kotak Ancestor type, pilihlahkonnponen dari mane kita akan meiiurunkaiikomponen yang akan dibuat.

Sebagai contoh, Pilihlah kotak ClassName dengan "TGradasi" dan Ancestor typedengan oTCustomPanel". Pada kotak palette

') Ipin Bustanul AriJin, Carwolo,keduanya adalah mahasiswa Program Studi Teknik ElektroFakultas Teknik Universitas Diponegoro, Semarang.

ti{,

;

i4,

ffi-^--!^-r 41

Page, pilihlah halaman dimana komponen akan

diletakkan. Kita dapat memilih sembarang

halaman yang terdapat pada Component Palette

seperti Standard, Data Access, Data Controls, dan

seterusnya. Dalam contoh ini komponen

diletakkan pada halaman "CLIcK".Bila Kita mengklik button Create Unit,

maka Delphi akan membuat kerangka unit untukmenuliskan kode-kode program. Untuk membuatkomponen Gradasi Warna Form, ketikkan kode-kode program seperti yang dapat dilihat pada

listing GRADASI.PAS di bawah ini" "ProcedureRegister" seperti terlihat pada baris nomor 102-

105 akan otornatis dibuat setelah kita mengklikbutton Create Unit. Prosedur ini mendaftarkan

kelas TGradasi ke Component Palette bagian''CLIcK". Tanpa pendaftaran ini, komponentersebut tidak akan muncul pada ComponentPalette.

Komponen TGradasi yang akandirancang ini berupa custom panel dengan align:alTop, tinggi : I00, default warna awal: putih,dan default warna akhir: hitarn. Constructor padaprogram, seperti pada baris nomor 46 sampaidengan baris nomor 54, berfungsi untuk mensetproperti-properti yang dibutuhkan sebagaikondisi default komponen TGradasi. Prosedur"TGradasi.Paint", berfungsi untuk mewarnaikomponen TGradasi dengan tingkat warna yangberubah dari warna awal hingga warna akhir.Sedangkan prosedur "TGradasi,WarnaKeRGB",untuk mengkonversi warna dari tipe TColormenjadi warna prirner (Red,Green,Blue).Sebaliknya procedure "TGradasi.RcBkeWarna"untuk rnenggabungkan warna-warna primermenjadi tipe TColor Berikut adalah Iistingprogram GRADASI.PAS selengkapnya.

Listing GRADASI.PAS - Turbo Pascal/I)elphi

1

2

3

4

5

5-l

I9

1-0

l_1

L21_3

L4L516L71B

19202L22232425262128293031323334J5363738

/ /erogram/ /vite/ /copyright

: Gradasi Warna Form: GRADASI. PAS: 1998, CLIcK Software House.

II

uSeswindows, Messages, Sysutifs, Classes, Graphics, controls, Ilolms, Dialogs,Extctrfs;

typeTcradasi = class (TcustomPanel)pr j.vateFAwalwarna : Tco1or;FAkhirlilarna : TCoIoriFonPaint : TNotifyEvent,Procedure SetAwalwarna (Awai.walna:TColor),Proceciure SeE.Akhirwarna (Akhlrwarna : TColor) ;

protectedpublicConstructox Create (Aowner:Tconponent) i OverrideiDestructor Destroyi OverrideiProcedure Paint, or,zerrideiProcedure WarnaKeRGB (Warna : Tcolor,'var R, G, B: Byte ) ,Eunction RcBKewarna (R,G, B: Byte) :TcoloftpublishedProperty Awalwarna : Tcolor Read EAwalwarna Write SetAwalwarnaiProperty Akhirwarna : Tcofor Read fAkhirwarna write SetAkbirwarna,Property OnPaint : TNotifyEvent Read EonPaint Write FonPaint,Property AIign,Property BevelInner,'Property BevelouteriProperty BevelWidth;Property Borderstyle;

394041"

424344454647484950s1troJL

5354qq

5657585950676253646s666758697077t/.

?3tq,

75-t 6

777879808182838485868188B990919293949596979899100101ta2103LA410s106

'Property BorderWidth;end;

procedure Register;

implementation

constructor TGradasi . create (Aowner: TComponent ) ;BeginInherited Create (Aowner) ;Contro1Style: =ControlStyle+ [ csReplicatable ] ;Align: =alTop;Height::100; :

FAwalWarna: =cIWhi te;FAkhi rWarna : =e1 BI ack ;End;

Procedure TGradasi . paint;Var I : fnteger;Rt, GL, B1 : Byte;R2, G2,82 : Byte;Rx, Gx, Bx : IntegeriBeginWith Inherited Canvas DoBeglnWarnaKeRGB ( FAwa1Warna, R1, GL, 81 ) ;WarnaKeRGB ( FAkhirWarna, R2, G2, 82 i ;For f::0 To Height-L DoBeginRx::Round(R1+ ( (I/ (Heighr-1) ) * (R2-R1) ) );Gx::Round(G1+ (, lf / (Height-1) ) * (G2-G1t ) );Bx::Round(81+ ( fi/ (Height-1)) * (F,2-e1)) ) ;Brush . Color : :RGBKeWarna ( Rx, Gx, Bx ) ;FillRect (Rect (0, f ,Wicith, Ii1)) ;End ;End;If Assigned (FOnPalnt) Then FOnpainr-- (SeLf i ;End;

Procedure TGradas i . WarnaKeRGB ( Wa rna : TCo 1 c r ; Va r R, G, B : Byt e ) ;BeginR: =Warna And $000000FF;G::Warna And $0000pF.00 Shr B;B: =Warna And $00FF0000 Shr 16;End;

Function TGradasi. RGBKewarna (R, G, B: Byte) : TColor,.BeginResult:= (R+G*$100+e*$10000) And $OOFFFFFF;End,.

Procedure TGradasi. setAwalwarna (Awalwarna: TColor) ;BeginFAwalWarna : :Awa1V[arna,.fnvalidate;End;

Procedure TGradasi . SetAkhirWarna (Akhirwarna : TColor) ;BeginFAkhi rWarna I =Akhi rWa rna ;fnvalidate;End;

procedure Register,.beginRegisterCcmponents (' CLfcK', ITGradasi ] ) ;end; . .

Ke halaman berikutnya. . .

Setelah menyelesaikan unit ini,kita dapat melakukan pengujiankomponen tersebut. Kemudianmendaftarkannya ke ComPonentPalette. Carany&, pilih menu

eomponent | [nstall ComPonent dan

isi kotak dialog Install Component"

Apabila Delphi telah selesai

mengkompilasi ulang ComPonentPalette, kita dapat menggunakan

Kemungkinan Pengembangan

GRADASI.PAS Yang dibahas

dalam tulisan ini adalah contoh yang

sederhana, karena hanYa mamPu

membuat gradasi warna dengan

komponen Gradasi Warna ini hanyadengan mengklik mouse padakomponen baru tersebut dan

menempatkannya pada form yangsedang kita rancang. Berikut iniadalah contoh tampilan form saat

perancangan setelah dibubuhikomponen Gradasi Warna, denganwarna awal: clA7ile, warna akhir:clGre€n, dan align: alClient.

Gambar 1. Forml yang dibubuhi gradasi \Yarna dengan warna awalAqua dan warna

akhir Green

perubahan gradasr

vertikal.Kita dapat

komponen ini

secara lurus

mengembangkansendiri sesuai

keinginan. Misalny&, untuk membuatgradasi warna secara lurushorisontal, warna yang bergradasidari suatu pusat lingkaran ke arahkeliling lingkar&r, dari pusat bujur

sangkar bergradasi ke arah sisi-sisinya, atau gradasi untuk bentuksegi banyak yang lain.

Selamat berkreasil

Daftar Pustaka1. Delphi 3 Help, Borland InternationalInc.,lgg72. Jogiyanto HM Teori dan Aplikasi Program Komputer bahasa Pascal Jilid I,

cet.v, Andi Offset, Yogyakarta, t9933. Pranata, A., Pemrograman Borland Delphi, penerbit ANDI, yogyakarta 1997