Trong series bài viết này mình sẽ hướng dẫn các bạn cách triển khai MVVM trong WPF. cũng như sẽ cố gắng giải thích rõ hơn về lợi ích khi phát triển ứng dụng bằng mô hình này.
1.Mô hình MVVM là gì?
Hình minh họa sau đây cho thấy ba lớp của MVVM và sự tương tác của chúng.
View Class
- Là nơi chứa các visual element, như window, page, user control,..
- View tham chiếu đến View Model thông qua DataContext property.
- Bạn có thể sử dụng converters để custom lại giá trị được binding từ View Model lên View. xem thêm converters ở đây
- code-behind của view nên được dùng để đinh nghĩa các code login liên quan đến giao diện hoặc các chức năng liên quan đến giao diện mà bạn khó tthuwjc hiện bằng xaml
View Model Class
- implement các properties và command mà view có thể data bind.Nó thông báo cho view bất cứ state changes thông qua notification events thông qua INotifyPropertyChanged và INotifyCollectionChanged interfaces.
- Nó cũng có thể đùng để implement data validation thông qua IDataErrorInfo hoặc INotifyDataErrorInfo interfaces.
- View model có thể định nghĩa các trạng thái logic mà view thể hiện trực quan cho người dùng.
Model Class
- Là các lớp có UI, đóng gói dữ liệu và logic nghiệp vụ của ứng dụng. chúng trách nhiệm quản lý dữ liệu của ứng dụng và đảm bảo tính nhất quán và hợp lệ của nó bằng cách đóng gói các quy tắc nghiệp vụ bắt buộc và logic xác thực dữ liệu.
- model classes không reference trực tiếp đến view hoặc view model classes và không phục thuộc vào implement của view hoặc view model classes.
- model classes thường tạo tra property và collection change notification events thông qua INotifyPropertyChanged và INotifyCollectionChanged interfaces. Việc này cho phép chúng dễ dàng bị ràng buộc dữ liệu trong View. Các model classes đại diện cho các bộ sưu tập các đối tượng thường xuất phát từ ObservableCollection<T> class
- Các lớp mô hình thường cung cấp xác thực dữ liệu và báo cáo lỗi thông qua IDataErrorInfo hoặc INotifyDataErrorInfo interfaces.
2. So sánh mô hình MVC và MVVM
Bên trên là hình So sánh mô hình MVC và MVVM. Bạn có đọc chi tiết hơn ở bài viết sau https://blogs.msdn.microsoft.com/erwinvandervalk/2009/08/14/the-difference-between-model-view-viewmodel-and-other-separated-presentation-patterns/
3.Ví dụ mô hình 3 lớp đơn giản và vấn đề
GLUE code
chúng ta sẽ bắt đầu với mô hình 3 lớp và xem vấn đề của nó gì gì ? MVVM giải quyết vấn đề đó ra sao ?
Khi bạn nhìn vào sơ đồ khối kiến trúc ba lớp, bạn sẽ nhận thấy rằng các trách nhiệm được phân phối hợp lý với mỗi lớp.Nhưng khi bạn thực sự bắt đầu viết mã, bạn thấy rằng một số lớp bị buộc phải thực hiện EXTRA WORK mà có lẽ họ không nên làm
EXTRA WOR này là code nằm giữa UI – Model và Model – data access. chúng ta tạm gọi nó là “GLUE” code
Có hai loại logic chính sẽ có trong GLUE code:
1.Mapping logic( Binding logic): Mỗi tầng được kết nối với các tầng khác thông qua các thuộc tính, bộ tập hợp phương thức. Ví dụ, một textbox có tên là kiểu txtCustomerName ‘trên lớp giao diện người dùng sẽ được ánh xạ tới thuộc tính của “CustomerName” của lớp customer .
txtCustomerName.text = custobj.CustomerName; // mapping code
2. Transformationlogic : format dữ liệu trong mỏi tầng thì khác nhau. ví dụ chúng ta có lớp “Person” với thuộc tính Gender kiểu string với 2 giá trị
“F” ( Female) và “M” ( Male) , nhưng trên UI chúng ta sẽ dùng checkbox để hiển thị là Nam hay Nữ
if (obj.Gender == "M") // transformation code
{chkMale.IsChecked = true;}
else
{chkMale.IsChecked = false;}
Hầu hết các lập trình viên sẽ viết “GLUE” code trong tần UI, đặt biệt trong file code behind ví dụn file “XAML.CS”
Điều gì xảy ra nếu tôi muốn đi trước một bước và sử dụng mã GLUE trên các công nghệ UI khác nhau như MVC, Windows form hoặc di động ?
Chúng ta thấy khả năng sử dụng lại trên các công nghệ UI khác nhau thực tế là không thể, vì code UI behind bị ràng buộc rất nhiều với công nghệ UI.
Vậy thì MVVM sẽ giúp gì cho chúng ta trong việc giải quyết vấn đề trên? Câu trả lời sẽ được hé mở trong bài tiếp theo …
Bài 2: Tạo một ứng dụng với MVVM đơn giản – Từng bước triển khai MVVM trong WPF
Tham khảo
- https://www.codeproject.com/Articles/819294/WPF-MVVM-step-by-step-Basics-to-Advance-Level
- https://msdn.microsoft.com/en-us/library/gg405484(v=pandp.40).aspx#sec10
Pingback: Bài 2: Tạo một ứng dụng với MVVM đơn giản – Từng bước triển khai MVVM trong WPF | Phạm Duy Anh