PBKK A - Tugas 4 - Menerapkan MVVM di Windows Presentation Foundation (WPF)

Link referensi tugas : Link referensi

MVVM (Model View View Model) adalah sebuah variasi dari MVC yang memisahkan view menjadi dua, yaitu view dan view model yang terhubung melalui data binding.

Berikut merupakan tutorial  menerapkan MVVM di Windows Presentation Foundation (WPF) :

1. Membuat Project Baru

Saya memilih jenis proyek Visual C#, Windows, WPF Application untuk membuat aplikasi desktop yang memakai WPF.

2. Membuat Model 

Yang dimaksud dengan model dalam MVVM adalah domain model atau entity yang nantinya disimpan ke database.  Seluruh nilai dan operasi yang berkaitan dengan permasalahan yang dihadapi (business logic) harus diletakkan disini! Saya akan membuat sebuah model baru dengan men-klik kanan nama proyek dan memilih Add, Class…. 

Saya memberi nama model ini sebagai ItemPenjualan yang kode programnya terlihat seperti berikut ini:

3. Membuat View

View pada Windows Presentation Foundation (WPF) dibuat dalam bentuk XML yang disebut sebagai XAML. Sama seperti view pada Windows Forms, view XAML ini juga didukung oleh sebuah class C#.

Saya mengubah kode program di MainWindow.xaml menjadi seperti berikut ini:

Bila saya menjalankan program, saya akan memperoleh tampilan seperti berikut ini:

4. Membuat Model View

View model adalah sesuatu yang menampung state/nilai yang ada diview sehingga command (dan controller bila ada) tidak perlu mengakses setiap control yang ada di view secara langsung. 

Saya akan membuat sebuah class baru dengan nama ItemPenjualanViewModel yang isinya seperti berikut ini:

5. Menghubungkan View, View Model, dan Model

Karena model sudah dibuat secara langsung di constructor view model, maka sekarang saya perlu menghubungkan view dan view model. 

Saya men-double click file MainWindow.xaml.cs dan mengubah kode program yang ada menjadi seperti berikut ini:

6. Menambahkan Binding

Data binding dilakukan agar saya tidak perlu mengakses sebuah TextBox untuk mendapatkan nilai harga. Saya hanya perlu mengakses property Harga milik view model.

Saya mengubah MainWindow.xaml menjadi seperti berikut ini:

Bila saya menjalankan program dan mengisi data, saya akan memperoleh hasil seperti pada gambar berikut ini:

Selain itu, sudah ada validasi bawaan bila saya memasukkan tipe data yang salah, namun saya dapat mengubah view dibagian dimana saya mendeklarasikan style untuk TextBox menjadi seperti berikut ini:

Bila terjadi kesalahan konversi data, saya akan memperoleh hasil seperti pada gambar berikut ini:

7. Menyimpan Model ke Database

Yang perlu kita persiapkan adalah menginstall entity framework dan Mysql Connector pada project kita. Yang perlu di perhatikan adalah mendownload versi yang sesuai antara entity framework dan mysql connector. Disini saya menggunakan Entity framework versi 6.0.0 dan Mysql Connector versi 6.8.7. Setelah itu kita tambahkan reference-nya.

Setelah menambahkan reference, kita perlu setting untuk koneksinya di App.config. Sesuaikan connection stringnya dari db sampai usernamenya,

8. Menambahkan Atribut pada Model

Selain itu, saya juga menambahkan sebuah atribut di model agar nilai property Id dihasilkan secara otomatis oleh database (melalui auto number):

9. Membuat Class Persistence Context

Class persistence context berefungsi untuk meng-generate model yang sudah kita buat menjadi sebuah table pada database. Disini saya membuat sebuah dengan nama LatihanContext.cs yang isinya seperti berikut ini:

10. Membuat History Context

Khusus untuk MySQL, mungkin karena dukungan EF 6 yang masih awal, tabel __migrationhistory yang dihasilkan secara otomatis malah memiliki kolom yang terlalu besar untuk di-index. Dengan demikian, setiap kali menyimpan data, saya akan memperoleh pesan kesalahan berupa Specified key was too long; max key length is 767 bytes. Untuk mengatasi permasalahan ini, saya perlu menambahkan sebuah HistoryContext yang isinya seperti berikut ini:

11. Menambahkan Fungsi Trigger pada View Model

Fungsi trigger menggunakan ICommand (sejenis Action di Java Swing). Berikut ini adalah perubahan yang saya lakukan pada file ItemPenjualanViewModel.cs:

12. Mengimport Database

Saya perlu mengimport database yang ada di github dengan nama wpf-practice.sql.

13. Menjalankan Program

Sekarang, bila saya menjalankan program, saya dapat melakukan eksekusi seperti pada gambar berikut ini: