1 Delphi7 :: Membuat Menu Navigasi dengan DevExpress

Jika kita berbicara masalah tampilan aplikasi saya kira hal itu tidak akan ada habisnya mengingat teknologi yang terus berkembang dari masa ke masa. Ambil saja contoh Handphone yang dulunya hanya berwarna hitam putih dan hanya bisa untuk SMS dan Telpon Saat ini tampilan bahkan kemampuan dari sebuah handphone hampir menyerupai komputer.

Berkaitan dengan hal diatas, Saya sendiri menyadari bahwa Urusan Desain Tampilan memang hal yang paling utama untuk kenyamanan End User. Berangkat dari hal itu kali ini saya mau sharing tentang cara membuat Menu Navigasi di Delphi dengan memanfaatkan salah satu component delphi yaitu Dev Express. Sobat Tahu kan menu Navigasi itu seperti apa ? contoh hasil akhir yang kita inginkan adalah seperti di bawah ini

Cara membuatnya silahkan ikuti step-step berikut :

1. Silahkan Download dan Install component  DevExpress untuk delphi tujuh. Link Download ada pada postingan sebelumnya yang membahas cara membuat menu Office 2010 pada Delphi

2. Selesai install, silahkan buka Delphi Sobat

3. Masuk ke Pallete Win32 Tambahkan Komponen ImageList ke Form Sobat

4. Klik 2 kali Komponen ImageList kemudian Add (tambahkan 9 Icon ekstensi *.bmp atau *.ico) -> Apply -> OK

5. Masuk Ke Pallete Dev Express kemudian tambahkan komponen dxNavbar ke Form Sobat. atur property sebagai berikut :
Align = alLeft
OptionImage -> SmallImage = ImageList

6. Klik Dua kali komponen dxNavbar pada Form Sobat. Klik menu groups dan tambahkan 3 group. atur masing-masing property grup Sebagai berikut :
Caption = Terserah sobat
SmallImageIndex = Urutan gambar yang ada di ImageList / step 4 (di mulai dari 0). pilih salah satu misal 1

7. Masih pada Pengaturan dxNavbar, Klik menu Items dan tambahkan 6 Item. atur property masing-masing Item sebagai berikut :
Caption = Terserah Sobat
SmallImageIndex = Urutan gambar yang ada di ImageList / step 4 (di mulai dari 0). pilih salah satu misal 3

8. Masih pada Pengaturan dxNavbar, Klik menu Link Designer. Tambahkan Item 1 dan 2 ke Group 1, Item 3 dan 4 ke Group 2 dan Items 5 dan 6 ke Group 3 Caranya klik 1 kali pada salah satu group dan klik 1 kali pada item yang mau ditambahkan pada group tersebut kemudian klik button (+) atau bisa juga dengan drag and drop

9. Klik menu View kemudian Pilih Skin Menu Navigasi Sesuka Sobat.

10. Sampai disini, kita sudah berhasil membuat menu navigasi. akhir kata selamat mencoba :)

 

 

 

 

By Gery Riskiyanto