Menambahkan Image/Icon Pada Komponen Buatan Sendiri pada Component Pallete Delphi

Kilas Balik

Jika kita membuat komponen sendiri, tentunya kita ingin agar komponen ada icon yang merepresentasikan fungsi dari kegunaan komponen tersebut, bukan hanya icon default delphi, sehingga selain memudahkan kita dalam mengidentifikasi komponen, juga terlihat lebih professional.

Gambar 1 Komponen Buatan dengan Icon Default


Gambar 2: Komponen Dengan Icon Customized

Awal mula saya membuat komponen, saya puyeng bagaimana bisa menambahkan icon pada komponen buatan sendiri. Tidak semua tutorial yang terdapat di Internet yang berdasarkan pengalaman penulisnya, bisa benar-benar sukses dipraktekkan di komputer saya. Lebih parahnya lagi, kebanyakan tutorial didasarkan dengan menggunakan image editor delphi jadul yang support hanya 16 warna. Ya gak keren lah. Selain juga males kalo harus install delphi jadul sekedar hanya untuk menggunakan image editornya.

Ada juga tutorial yang cukup mantep, menggunakan XN Resource Editor dalam membuat resource file image (.dcr) untuk icon komponen Delphi. Bahkan dalam tutorial tersebut, penulisnya menggunakan Delphi XE, sialnya, dia bilang, bahwa image komponen delphi (XE) hanya support 4 bit warna alias 16 warna. Sial! Ini mah sama aja dengan mengikuti aturan jadul untuk delphi jadul. Moh ah!

Ketika saya coba donwload XN Resource Editor di sourceforge, saya coba buka .dcr nya komponen Zeos.. Wow! Image yang digunakan mempunyai kedalaman warna sampai 32 bit! So, omong kosong kalo image untuk komponen Delphi dibatasi hanya 4 bit atau 16 warna saja (kecuali kalo delphi jadul mungkin).

Gambar 3: Komponen Zeos Menggunakan Image 32 bit warna

DCR File

Sebelum melangkah lebih jauh dalam , alangkah baiknya kita kenal dulu dengan perangkat-perangkat dasar dalam pembuatan icon atau image untuk komponen.
DCR file atau file dengan akhiran .dcr adalah file resource yang digunakan untuk menyimpan gambar bmp dengan cara tertetu yang kelak digunakan sebagai gambar icon pada komponen yang terlihat saat design time.

DCR file sama dengan file resource yang lain biasanya berakhiran .res, hanya saja digunakan untuk keperluan khusus sebagaimana di atas. Selain .dcr dan .res, file .exe ataupun .dll bisa pula difungsikan sebagai file resource.

Untuk membuat file dcr kita bisa menggunakan aplikasi XN Resource Editor yang bisa didownload secara gratis di link http://sourceforge.net/projects/portableapps/files/XN%20Resource%20Editor%20Portable/
Jika file .res berfungsi sebagai file resource sebagaimana file .dcr, bisakah kita menggunakan file .res untuk menggantikan file .dcr untuk keperluan icon/image komponen buatan sendiri di delphi? Salah satu tutorial yang saya dapatkan di google, menunjukkan step by step bagaimana kita bisa memanfaatkan file .res untuk menggantikan file .dcr dalam memberkan image/icon pada komponen. Sayangnya, saya sudah coba berkali-kali ternyata hasilnya nihil. Dan pada kenyataannya, baik pada komponen gratis atau komersil, mereka semua menggunakan file .dcr. Padahal kalo bisa sih, memang asik, karena kita bisa membuat file .res cukup dengan IDE delphi saja (saya menggunakan Delphi XE).

Step By Step Creating Delphi Component Icon

Yang kita lakukan pertama kali adalah kita membuat file .dcr yang menyimpan file gambar untuk komponen kita. Saya menggunakan XN Resource Editor, untuk melakukannya. Namun sebelumnya, kita akan membuat komponen sebagai kelinci percobaan. Jika Anda telah mempunyai komponen buatan yang hendak Anda beri icon, maka langkah pembuatan komponen dapat Anda abaikan.

Membuat Komponen dalam Package

1. Pada Delphi (punya saya Delphi XE), pilih menu FileNewPackage
2. Simpan project package tersebut dengan nama SpyPack
3. Pada jendela Project Manager, klik kanan, pilih menu Add NewOther
4. Pada kotak dialog New Items pilih Delphi Files  Component klik Ok
5. Pada kotak dialog New Component pada kotak Search ketikkan Tcomponent
6. Pada kolom Component Name pilih TComponent, kemudian klik Next
7. Pada isian Class Name, isikan: TSpyAgent
8. Pada isian Pallete Page, isikan: SpyPack kemudian klik Finish
9. Pada dialog Save As pilih ketikkan: spyagent.pas


Gambar 4: SpyPack setelah ditambahkan komponen TSpyAgent

Membuat File Dcr

1. Pilih gambar untuk icon komponen yang akan disimpan di file dcr dengan ukuran 24x24 pixel
Anda bisa aja sih, merancang gambar icon langsung melalui XN Resource Editor, tapi bagi saya cara itu terlalu lama (selain juga paling hasilnya jelek he he he :P), cara termudah cari gambar apa saja yang sesuai (bisa dari harddisk Anda atau lebih baiknya cari di iconfinder.com) berapapun kedalaman warnanya, set ukurannya menjadi 24x24 pixel (gunakan Photoshop atau apalah... pokok e jadi 24x24 pixel. Kalo pake Photoshop aja nggak bisa, sono ke laut! Nyebur kagak usah kembali. Malu-maluin negara aja heheheh... wkakakakakakak) , kemudian simpan sebagai file .bmp.

Langkah 1: Gambar yang mau saya jadikan icon

Langkah 2: Saya atur menjadi 24x24 pixel dengan menu Image Size Photoshop

2. Buka XN Resource Editor, pilih FileNew, kemudian pilih ResourceImport Image Resource
3. Pilih gambar .bmp hasil dari photoshop tadi

Gambar 5:Image bmp setelah diimport di resource editor

4. Beri nama icon tersebut dengan nama class komponen yang dimaksud, dengan semua huruf dijadikan kapital (untuk memberi nama, klik pada angka 1 diatas, kemudian tekan tombol F2). Jadi kalo misalnya nama kelas komponennya TButton, maka nama icon tadi menjadi TBUTTON, dalam contoh di atas, nama kelas komponennya adalah TSpyAgent maka nama iconnya menjadi TSPYAGENT.

Gambar 6: File dcr yang gambarnya telah diberi nama

5. Simpan file resource tersebut dengan nama yang sama dengan nama file unit komponen hanya saja dengan ekstensi .dcr. Jadi sesuai contoh di atas, file unit komponen buatan kita adalah spyagent.pas, maka file dcr nya menjadi spyagent.dcr.
6. Simpan seluruh file tersebut: package, file unit spyagent.pas, dan resource spyagent.dcr dalam satu folder yang sama

Memasang Komponen Buatan Sendiri dalam IDE Delphi

Sebelum menginstall komponen buatan sendiri ke IDE Delphi, kita harus menambahkan satu baris kode pada kode sumber package agar file dcr ikut tercompile sehingga gambar bisa muncul pada komponen kita di pallete page Delphi. Untuk melakukannya:

1. Pada jendela Project Manager, klik kanan SpyPack.bpl, kemudian pilih View Source

Gambar 7: View Source

2. Tambahkan ketikan {$R 'spyagent.dcr'} sehingga source berubah sebagai mana gambar berikut:

Gambar 8: Kode Sumber package

3. Simpan semua file, kemudian build file package tersebut, kemudian pilih install. Semua menu-menu tersebut dari klik kanan pada file package.

Gambar 9: Menu Build dan Install

4. Buat project baru, yang ada form nya, pada pallete page component SpyPack, Anda akan lihat komponen baru kita nongol dengan manisnya

Gambar 10: Komponen TSpyAgent


Jika Anda tertarik untuk melihat materi-materi tutorial yang saya dapatkan dari google siapa tahu di komputer Anda bisa diterapkan, Anda bisa donwload di
http://www.ziddu.com/download/21402510/materihtmldelphicomponenticon.7z.html dan http://www.ziddu.com/download/21402511/Delphi_IDE_Component_Icon_Generation.pdf.html