Efek Link Hovering dengan Delphi

Tulisan ini dico-pas dari tulisan saya sendiri di http://majolelo.tumblr.com/post/1178723848/efek-link-hovering-dengan-delphi

Banyak website menggunakan efek link hovering. Maksudnya adalah ketika kita mengarahkan mouse ke sebuah link, kursor akan berubah menjadi handpoint dan teksnya akan memiliki garisbawah (underline).

Nah, kalau di web sih, yang seperti itu biasa. Sekarang, mari kita terapkan efek tersebut ke dalam aplikasi desktop yang dikembankan dengan menggunakan Delphi.

Pertanyaannya, ngapain juga sih pakai efek link seperti itu? Dalam pandangan saya, ada nilai estetika dalam menggunakan efek seperti itu. Dalam aplikasi desktop, setiap aksi biasanya dipicu oleh penekanan tombol. Sekarang, seiring jalannya waktu, kita manfaatkan komponen label untuk memicu sebuah event. Tulisan ini akan mengarahkan para pemula programmer Delphi untuk membuat efek link hovering seperti halaman web.

Siapkan Komponen

Mari mulai dengan yang mudah dulu. Saya anggap Anda sudah buka Delphi dan membuat aplikasi baru.

Di atas form yang baru, letakkan komponen label. Ubah property ‘Caption’ menjadi, ‘About’ dan ubah property ‘Font’->’Color’ menjadi clBlue. Secara default, property ‘Name’ label ini adalah ‘Label1’. Untuk keperluan contoh, biarkan nama ini seperti adanya.

Siapkan Event

Setelah itu, pada jendela Object Inspector label tadi, klik tab Events. Double-click event ‘OnMouseEnter’. Secara otomatis Delphi membuat procedure yang menangani event ketika kursor mouse berada di atas label tersebut. Di sinilah kita akan mengubah property label itu secara program.

Kita tahu nama label itu adalah ‘Label1’. Untuk merubah agar fontnya menjadi underscore sangat mudah. Ketikkan satu baris ini di procedure yang sudah dibuat tadi. Kita tahu setiap komponen label mempunyai property ‘Font’ dan setiap property ini memiliki property ‘Style’. Jadi,

Label1.Font.Style

Nah, sekarang kita bisa berikan nilai property ‘Style’. Property ini bersifat enumerasi, oleh sebab itu, kita memberikan nilai diawali ‘[’ dan diakhiri ‘]’. Silahkan baca dokumentasi yang ada di Delphi untuk keterangan nilai apa saja yang bisa dimasukkan untuk property ini. Untuk keperluan contoh, masukkan nilai ‘fsUnderline’. Jadi, baris lengkap kode di atas akan menjadi,

Label1.Font.Style:=[fsUnderline];

Pada titik ini, kalau aplikasi dijalankan, label ‘About’ akan menjadi ‘About’ kalau dijalankan. Tapi, kalau mouse digerakkan keluar dari label, underline masih berlaku. Ini bukan yang kita inginkan. Oleh sebab itu, kita perlu akses satu event lagi, ‘OnMouseLeave’. Kita tinggal co-pas kode di atas dan mengubahnya menjadi seperti ini,

Label1.Font.Style:=[];

Dengan bahasa manusia, ketika mouse pergi, hilangkan style font.

Pada saat ini, label kita sudah bersifat seperti link hovering di web. Tinggal kita beri satu sentuhan sedikit lagi. Pada property ‘Cursor’ beri nilai ‘crHandpoint’.

Tantangan Banyak Label (Advanced Level)

Mudah bukan? Sekarang, misalkan Anda punya banyak label, dengan cara di atas, Anda akan harus meng-assign masing-masing label dengan event onMouseEnter dan onMouseLeave. Cara tersebut bisa saja berhasil, tapi gak praktis dan gak elegan. Tulisan berikutnya akan menjelaskan gimana caranya agar banyak label mempunyai efek yang sama dengan hanya meng-assign satu kali event saja.

Kembali ke contoh yang sudah dibuat di atas, kita buat tambah lagi komponen label ke atas Form. Secara default, label ini akan memiliki property ‘Name’ dengan nilai ‘Label2’. Ubah property ‘Caption’ menjadi ‘Help’, untuk contoh.

Pada event ‘OnMouseEnter’, jangan double-click, tapi klik tombol panah bawah pada dropdown combo box, dan pilih ‘Label1MouseEnter’.

Pada event ‘OnMouseLeave’, klik juga tombol panah bawah dan pilih ‘Label1MouseLeave’.

Pada titik ini, tugas Anda belum selesai. Ketika Anda mengarahkan kursor mouse di atas label ‘Help’, malah label ‘About’ yang memiliki underline. Tentunya, bukan ini yang kita inginkan. Kita perlu memodifikasi kode yang ada pada procedure Label1MouseEnter dan juga Label1MouseLeave.

Label1MouseEnter

Kita mulai dari sini. Kode kita pada awalnya adalah,

Label1.Font.Style:=[fsUnderline];

Di sini kita perlu mengubah Label1 menjadi sesuatu yang umum. Sesuatu yang mana, siapapun yang memicu event OnMouseEvent akan memiliki font underline. Ini bisa diselesaikan dengan melakukan typecasting. Typecasting terhadap apa? Di sini situasi menjadi menarik.

Anda perhatian procedure OnMouseEnter memiliki parameter Sender? Nah, inilah yang akan kita typecasting. Jadi, Label1, kita typecasting menggunakan TLabel. Kode di atas menjadi seperti ini.

TLabel(Sender).Font.Style:=[fsUnderline];

Label1MouseLeave

Dengan cara yang sama di atas, kita juga melakukan typecasting di procedure Label1MouseLeave, sehingga kodenya menjadi seperti ini.

TLabel(Sender).Font.Style:=[];

Dan, jadilah sudah. Mau seberapa banyakpun label yang ada dalam Form Anda, selama event OnMouseEnter dan OnMouseLeave diarahkan ke procedure yang sama, mereka akan memiliki efek link hovering yang sama.

Semoga berguna