5 Juni 2018

Cara Mempercantik Form VB Net Supaya Terlihat Lebih Professional

Membuat aplikasi dengan VB .Net tidak hanya melibatkan kode, tetapi juga desain. Dan dalam banyak kasus, sebagian besar programmer menginginkan aplikasi yang dibuatnya memiliki antarmuka/tampilan atau Graphical User Interface (GUI) yang cantik dan menawan.

Untuk mempercantik aplikasi tersebut tentunya membutuhkan skill tambahan, terutama jika anda bekerja secara independen. Dan hal ini merupakan pekerjaan tambahan yang tidak boleh dikesampingkan, sebab antarmuka aplikasi berada di posisi ke-2 setelah fungsi utamanya sebagai sebuah aplikasi.
Cara Mempercantik Form VB Net Untuk mempercantik form VB .Net, kami hanya menggunakan sebuah plugin dari DevExpress. Kenapa memilih plugin ? Sebab kami sudah merasa nyaman dan bisa menghemat waktu ketika mengembangkan aplikasi, selain itu mendesain antarmuka aplikasi menggunakan aplikasi lain seperti Photoshop akan menghabiskan lebih banyak waktu, sehingga aktivitas coding tidak terlalu terbuang sia-sia.

DevExpress memiliki sebuah komponen bernama Look and Feel yang secara otomatis akan memberikan pilihan kepada seorang programmer untuk memilih default skin yang akan digunakan sebagai antarmuka aplikasi.

Di bawah ini adalah contoh screenshot aplikasi yang menggunakan komponen Look and Feel DevExpress :
Mempercantik Form VB Net Supaya Terlihat Lebih Professional Komponen Look and Feel DevExpress bisa ditambahkan secara manual maupun secara otomatis. Selain itu anda juga memiliki keleluasaan untuk memilih salah satu skin yang akan dijadikan sebagai default theme. Dan tentu saja anda bisa membuat baris kode tertentu untuk menyimpan pengaturan skin yang sudah dipilih ke dalam registry, sehingga pengguna aplikasi anda akan mendapatkan antarmuka yang sesuai keinginan dan pilihannya.

Mempercantik form untuk aplikasi yang anda buat dengan VB .Net dan plugin DevExpress ini bisa dilakukan dengan dua cara, yakni :
  1. Ketika anda membuat aplikasi menggunakan wizard DevExpress 
  2. Dengan menambahkan komponen Look and Feel
Jika anda memilih cara pertama, secara default anda akan dihadapkan dengan pilihan Ribbon Form. Antarmuka ini bisa dengan mudah anda temukan pada beberapa aplikasi terkenal seperti Microsoft Office 2013 dan Navicat.

Cara Mempercantik Form VB Net Dengan Wizard DevExpress

Cara ini kami sarankan untuk anda yang memprioritaskan aspek kepraktisan dan efektifitas waktu. Tahapannya dimulai dengan membuat sebuah proyek baru, selengkapnya silahkan ikuti panduan di bawah  ini :
  1. Tekan Ctrl N
  2. Pilih Visual Basic sebagai bahasa pemrogramman yang akan anda gunakan
  3. Pilih DevExpress Template Gallery
  4. Beri nama proyek dan tentukan direktori tujuan, kemudian pilih OK
    Mempercantik Form VB Net Dengan DevExpress
    Jika anda melakukan 4 langkah di atas dengan benar, maka anda akan dihadapkan dengan jendela berikut ini :
    Mempercantik Form VB Net Dengan Template Gallery DevExpress
    Di tahap ini anda diminta untuk memilih jenis form template yang akan anda gunakan. Kami biasanya memilih Blank Application, tapi anda bebas memilih jenis template yang anda inginkan. Silahkan pilih form template yang anda butuhkan atau inginkan.

    Perlu diketahui bahwa pemilihan Blank Application akan memberikan anda pilihan untuk mengubah template setelah proyek dibuat. Artinya Blank Application bisa diubah menjadi Ribbon Based, Toolbar Based maupun Tabbed UI Application.

    Jika sudah mendapatkan template form yang dibutuhkan, silahkan klik Create Project dan biarkan Visual Studio mengerjakan sisanya untuk anda.

    Ketika proyek selesai di buat, maka komponen Look and Feel sudah diintegrasikan secara default. Hal ini bisa dilihat dari properti Form1 yang memilik sub properti LookAndFeel. Anda bisa memilih salah satu skin yang akan dijadikan sebagai skin default untuk aplikasi yang dibuat.
    Mempercantik Form VB Net Dengan Template Gallery DevExpress
    Silahkan pilih salah satu skin dan jalankan aplikasi. Di bawah ini sample aplikasi menggunakan skin DevExpress Style :
    Mempercantik Form VB Net Dengan Template Gallery DevExpress
    Apakah anda bisa melihat perbedaannya? Mungkin anda berpikir bahwa perubahan hanya ada di title bar dan control box saja. Tapi perlu dipahami bahwa anda masih memiliki banyak pilihan skin (saat ini DevExpress menyediakan 43 skin yang bisa anda gunakan sebagai antarmuka aplikasi), dan masih akan lebih cantik ketika anda menambahkan kontrol lain seperti Group Control dan Simple Button (silahkan lihat screenshot pertama di awal artikel ini).

    Mempercantik Form VB Net Dengan Menambahkan Komponen LookAndFeel DevExpress

    Untuk memperindah tampilan aplikasi tanpa menggunakan wizard DevExpress, maka anda bisa menambahkan komponen LookAndFeel milik DevExpress. Caranya :
    1. Tekan Ctrl N
    2. Pilih Visual Basic sebagai bahasa pemrogramman yang akan anda gunakan
    3. Pilih Windows Form Application
    4. Beri nama proyek dan tentukan direktori tujuan, kemudian pilih OK
    Setelah mengikuti 4 langkah di atas, maka anda akan dihadapkan dengan proyek pengerjaan aplikasi.

    Cara mempercantik form secara manual ini menggunakan dua buah kontrol, yakni :
    1. Form Assistant; dan
    2. DefaultLookAndFeel
    Sedangkan caranya adalah sebagai berikut :
    1. Pada mode design, silahkan seret kontrol DefaultLookAndFeel ke form, pilih skin yang anda inginkan atau butuhkan
    2. Pada mode design, seret kontrol FormAssistant. Anda akan diberikan popup pilihan, pilih Convert to Skinnable Form.
    Mempercantik Form VB Net Agar Aplikasi Terlihat Professional
    Silahkan jalankan aplikasi anda, maka anda akan mendapatkan antarmuka yang lebih cantik, elegan dan tentunya kelihatan lebih professional.
    Mempercantik Form VB Net Menggunakan Plugin Itulah artikel dari kami mengenai cara mempercantik form VB Net dengan tujuan supaya aplikasi terlihat lebih professional. Terlepas dari itu semua, fungsionalitas dari aplikasi tetap harus diutamakan, sebab antarmuka/tampilan aplikasi adalah faktor pendukung.

    Note : Tutorial dalam artikel ini menggunakan Visual Studio Professional 2015 dan DevExpress 16.1.