Desain User Interface | Untuk memudahkan penggunaan aplikasi atau program yang kita buat, makan user interface atau antarmuka pengguna haruslah cukup intuitif dan konsisten. Misalkan sebuah aplikasi inventory pastinya akan mempunya form untuk menampilkan daftar gudang, daftar barang, daftar transaksi barang dan sebagainya. Form-form yang memiliki tujuan serupa harus memiliki layout yang sama, dalam artian memiliki posisi button yang sama, posisi grid juga sama, dan sebagainya. Untuk itu kita bisa saja membuat beberapa form dan menambahkan control ke dalamnya satu persatu, kemudian kita ulangi kembali langkah2 tersebut untuk semua form yang diperlukan…. Sungguh kerja keras yang luar biasa 🙂 …. Namun sebagai programmer kita harus juga kerja cerdas. Di sinilah Visual Inheritance akan membantu kita mempermudah hal tersebut.
Artikel ini adalah lanjutan dari artikel berseri tentang Tutorial Membuat Aplikasi Inventory Sederhana Menggunakan VB.net dan Database MySQL.
Masih ingat dengan konsep Inheritance di OOP? Dengan menggunakan inheritance kita bisa membuat sebuah class yang merupakan turunan dari class yang lain dengan class hasil turunannya mewariskan (inherit) semua sifat (properties dan methods) dari superclass-nya. Dan kalau kita perhatikan Form juga adalah sebuah class, artinya kita juga bisa membuat sebuah class turunannya. Di sinilah istilah Visual Inheritance menjadi relevan, karena seluruh tampilan visual, berupa layout dan posisi control, seperti Button, Panel, Label, dan sebagainya otomatis akan diwariskan kepada Form turunannya, sehingga keinginan kita membuat sebuah User Interface yang konsisten bisa dicapai dengan coding seminimal mungkin.
Untuk Aplikasi Inventory Sederhana yang sedang kita buat ini, kita memerlukan 2 (dua) buah form dengan tampilan layout Button yang konsisten, untuk mempermudah pengguna, yaitu
- Pertama, form untuk melihat daftar barang dan daftar transaksi
- Kedua, form untuk proses tambah atau edit barang dan transaksi
Sesuai desain aplikasi yang sudah kita buat sebelumnya, desain form untuk menampilkan daftar barang dan daftar transaksi harus memiliki sejumlah Button untuk proses Tambah, Ubah, dan Hapus. Action tambahan lainnya adalah Button untuk Refresh dan Cetak Data. Maka desainnya kita buat seperti ini.
[collapsed title=Spoiler: Desain Form List] 
[/collapsed]
Sedangkan form untuk proses penambahan dan pengubahan data cukup memiliki Button untuk Simpan saja, seperti ini.
[collapsed title=Spoiler: Desain Form Edit Data] 
[/collapsed]
Seluruh control dalam template tersebut harus kita set property Modifer sebagai Protected, agar kita bisa mengubah property masing-masing control tersebut di dalam form turunannya.
[collapsed title=Spoiler: Ubah Modifier Semua Control] 
[/collapsed]
Untuk menambahkan form turunan dari template yang sudah kita buat di atas maka, maka silakan buka Form Dialog Add New Item, dan pilih Inherited Form seperti gambar di bawah ini, kemudian berikan nama form turunan dan klik tombol [Add]
[collapsed title=Spoiler: Add New Item Dialog] 
[/collapsed]
Berikutnya akan muncul Dialog Box yang meminta kita untuk memilih Form superclass, atau Form template layout yang akan kita pakai sebagai parent, seperti tampak pada gambar di bawah ini.
[collapsed title=Spoiler: Select Parent Form] 
[/collapsed]
Jika kita kita buka file frmItemList.Designer.vb, maka ada kata kunci penting yang menandakan bahwa frmItemList adalah turunan (inherit) dari frmList. Seperti terlihat di gambar ini.
[collapsed title=Spoiler: Inheritance – Designer Code] 
[/collapsed]
Tambahkan semua form yang kita perlukan, meliputi Form Daftar Barang, Form Edit Barang, Form Daftar Barang Masuk, Form Edit Barang Masuk, dan seterusnya, sehingga keseluruhan Solution kita menjadi seperti gambar di bawah ini.
[collapsed title=Spoiler: Struktur File Solution] 
[/collapsed]
Setelah selesai, maka kita dapat mengubah dan menambahkan control yang kita inginkan ke Form Turunannya, misalkan contoh untuk Form Entry Data Master Barang seperti gambar di bawah ini.
[collapsed title=Spoiler: Contoh Desain Form Edit Barang] 
[/collapsed]
Mudah-mudahan penjelasan tentang Visual Inheritance dapat dipahami dengan mudah, dan silakan kunjungi link di bawah ini untuk mengunduh source-code sementara.
[collapsed title=Spoiler: Download Source Code Di Sini] Dibuat menggunakan Visual Studio 2013, Silakan Download Source Code Di Sini [/collapsed]
Salam PojokProgrammer ^_^
.