MVVM Pattern (Lý thuyết)

Mẫu thiết kế Model-View-ViewModel (MVVM) giúp tách biệt lớp business và presentation của ứng dụng khỏi phần giao diện (UI) của nó. Việc duy trì phần tách biệt giữa lớp ứng dụng và UI giúp chỉ ra những vấn đề trong việc phát triển và thiết kế và có thể giúp ứng dụng của bạn trở nên dễ dàng để kiểm thử, bảo trì và phát triển hơn.

Bằng việc sử dụng mẫu thiết kế MVVM, phần giao diện (UI) của ứng dụng, presentation và business được tách thành 3 lớp riêng biệt: View bao hàm UI và UI logic (code behind); View Model bao hàm presentation và state; Model bao hàm business và data.

Các lớp trong MVVM và sự tương tác giữa chúng

IC448690

Tương tự như những mẫu thiết kế có sự tách biệt phần presentation khác, điểm mấu chốt trong việc sử dụng mẫu MVVM hiệu quả nằm ở việc hiểu cách thích hợp để tác động mã nguồn của chương trình vào đúng những lớp cần thiết, và hiểu những cách thức mà những lớp này tương tác trong những ngữ cảnh khác nhau.

View Class

Chịu trách nhiệm xác định cấu trúc và thể hiện những gì mà người dùng thấy trên màn hình. Trong trường hợp lý tưởng, phần code-behind của lớp View chỉ cần duy nhất một constructor gọi phương thức InitializeComponent. Trong một số trường hợp, code-behind có thể bao gồm đoạn mã UI logic thực thi visual behavior khó hoặc không hiệu quả để thể hiện trong XAML, chẳng hạn như các chuyển động phức tạp, hoặc khi mã nguồn cần tính toán một cách chính xác các thành phần hiển thị của view.

Trong Silverlight và WPF, các expression cho việc kết buộc dữ liệu (data bingding) trong view được thực hiện thông qua data context của nó. Trong MVVM, data context của nó được đặt cho view model. View model thực thi các thuộc tính (property) và các dòng lệnh (command) mà view có thể kết buộc và thông báo cho view biết mỗi khi có thay đổi thông qua các sự kiện thông báo thay đổi. Đó hoàn toàn là mối quan hệ một-một giữa view và view model của nó.

Nhìn chung, view là những lớp dẫn xuất Control (Control-derived classes) hoặc lớp dẫn xuất UserControl (UserControl-derived classes). Tuy nhiên, trong một số trường hợp, view có thể được đại diện bởi một mẫu dữ liệu (data template) xác định các thành phần giao diện (UI elements) được sử dụng để đại diện cho một đối tượng khi nó được hiển thị. Bằng việc sử dụng các mẫu dữ liệu (data template), người thiết kế (designer) có thể định nghĩa cách một view model được vẽ ra (render) như thế nào hoặc có thể chỉnh sửa phần mặc định của nó mà không phải thay đổi đối tượng bên dưới, hoặc hành vi của control được sử dụng để hiển thị.

Những mấu dữ liệu (data template) có thể xem như là các view mà không có phần code-behind. Chúng được thiết kế để kết buộc cho một kiểu view model xác định bất kể khi nào một view model được yêu cầu hiển thị ra giao diện bên ngoài. Vào thời điểm thực thi, view, đã được định nghĩa bởi mẫu dữ liệu, sẽ tự động được tạo và data context của nó được đưa vào view model tương ứng.

Trong WPF, bạn có thể liên kết một mẫu dữ liệu với một kiểu view model ở mức ứng dụng (application level). WPF sau đó sẽ tự động đưa mẫu dữ liệu này vào bất kì đối tượng view model của kiểu đã được định nghĩa bất kể khi nào chúng được hiển thị trên giao diện. Trong Silverlight, bạn phải định nghĩa rõ ràng mẫu dữ liệu cho một đối tượng view model bên trong control dùng để hiển thị nó.

Tóm lại, view có những đặc trưng chính sau:

– View là một thành phần tể hiện, như là cửa số window, page, user control hoặc mẫu dữ liệu. View định nghĩa những control được chứa trong view và khung hiển thị và kiểu của chúng.

– View tham chiếu view model thông qua thuộc tính DataContext của nó. Những control trong view là dữ liệu ràng buộc các thuộc tính và dòng lệnh được thực thi bởi view model.

– View có thể điều chính việc kết buộc dữ liệu giữa view và view model. Ví dụ, view có thể sử dụng các bộ chuyển đổi giá trị để định dạng dữ liệu được hiển thị trên giao diện, hoặc nó có thể sử dụng luật kiểm tra (validation rules) để kiểm tra dữ liệu người dùng nhập vào.

– View xác định và xử lý các hành vi (behavior) như là chuyển động hoặc chuyển tiếp được kích hoạt từ một sự thay đổi trạng thái trong view model hoặc thông qua sự tương tác giữa người dùng và giao diện.

– Code-behind của view có thể định nghĩa lớp giao diện để thực thi

ViewModel Class

ViewModel trong MVVM thực hiện việc tham chiếu các các” đối tượng” cần thiết cho View từ presentation logic và data. Không có bất kì tham chiếu trực tiếp nào đến View hoặc bất kì thông tin gì về việc implement cụ thể của View. ViewModel thực thi các câu lệnh và các thuộc tính mà View có thể kết buộc dữ liệu được và thông báo về sự thay đổi trạng thái cho View thông qua các sự kiện. Các câu lệnh và thuộc tính mà ViewModel cung cấp xác định chức năng được đề nghị bởi UI, nhưng View sẽ xác định cách chức năng đó được render như thế nào.

ViewModel chịu trách nhiệm phối hợp tương tác của View với các model class được yêu cầu. Thông thường, có một mối quan hệ 1-nhiều giữa các lớp các lớp ViewModel và Model. View có thể chọn để đưa ra các model class trực tiếp đến View để các control trong View có thể kết buộc dữ liệu trực tiếp đến chúng. Trong trường hợp này, các model class cần được thiết kế để hỗ trợ việc kết bôộc dữ liệu và các sự kiện thông báo sự thay đổi có liên quan.

ViewModel có thể chuyển đổi hoặc tính toán model data để nó có thể được View sử dụng dễ dàng. ViewModel có thể xác định các thuộc tính boe63 sung để hỗ trợ đặc biệt cho View; những thuộc tính này có thể được thêm vào một cách linh hoạt. Ví dụ: ViewModel có thể giá trị của hai trường để View có thể dễ dàng thể hiện hơn, hoặc nó có thể tính số kí tự còn lại trong phần input đối với những trường có độ dài kí tự giới hạn. ViewModel cũng có thể thực thi việc kiểm tra dữ liệu bnan đầu (data validation logic) để đảm bảo tính nhất quán của dữ liệu.

ViewModel cũng có thể xác định trạng thái logic mà View có thể sử dụng để đưa ra những sự thay đổi đồ họa trong UI. View có thể xác định những thay đổi về layout hoặc style có thể ảnh hưởng đến trạng thái của ViewModel. Thông thường, ViewModel sẽ xác định các câu lệnh và hành động có thể được mô tả trong UI và người dùng có thể thực thi. Một ví dụ phổ biến đó là khi ViewModel cung cấp câu lệnh Submit cho phép người dùng gửi dữ liệu đến một web service hoặc một nơi lưu trữ dữ liệu. View có thể chọn để mô tả câu lệnh bằng một nút nhấn (button) để người dùng có thể nhấn vào để gửi dữ liệu đi. Thông thường, khi câu lệnh ở trạng thái “unavailable”, các thành phần UI có liên quan của nó cũng bị vô hiệu hóa. Các câu lệnh là một cách để đóng gói các hành động của người dùng và tách biệt rõ ràng chúng khỏi phần UI.

Tóm lại, ViewModel có những đặc điểm chính sau:

– ViewModel không phải là lớp có tính chất đồ họa (non-visual class) và không chuyển hóa từ WPF hay Silverlight base class. Nó đóng gói phần representaion logic được yêu cầu để hỗ trợ cho một use case hoặc user task trong ứng dụng. ViewModel có thể kiểm thử độc lập với View và Model.

– Thông thường ViewModel không tham chiếu trực tiếp đến View. Nó thực thi các thuộc tính và câu lệnh để View có thể kết buộc dữ liệu. Nó thông báo cho View khi có bất kì sự thay đổi trạng thái nào thông qua các sự kiện (thông qua các interface INotifyPropertyChangedINotifyCollectionChaged).

– ViewModel phối hợp sự tương tác của View với Model. Nó có thể chuyển đổi hoặc tính toán dữ liệu để nó có thể dễ dàng được sử dụng bởi View và có thể thực thi các thuộc tính bổ sung mà không thể mô tả trên Model. Nó cũng có thể thực thi việc kiểm tra dữ liệu thông qua các interface IDataErrorInfo hoặc INotifyDataError.

– ViewModel có thể xác định các trạng thái logic mà View có thể mô tả cho người dùng.

Model Class

Model trong MVVM đóng gói business logic và data. Business logic được định nghĩa như bất kì application logic nào liên quan đến việc lấy và quản lý dữ liệu của ứng dụng và đảm bảo rằng bất kì business rule nào mà đảm bảo sự thống nhất của dữ liệu và việc kiểm tra chúng là bắt buộc. Để tối ưu hóa việc tái sử dụng, các model không nên chứa bất kì use case-specific hoặc user task-specific behavior hoặc application logic nào.

Thông thường, Model mô tả client-side domain model cho ứng dụng. Nó có thể định nghĩa các cấu trúc dữ liệu dựa trên data model của ứng dụng và bất kì business và valication logic nào hỗ trợ. Model cũng có thể bao gồm code để hỗ trợ việc truy xuất dữ liệu và caching, Thông thường, Model và data access layer được tạo ra như một phần của một data access hoặc service strategy, chẳng hạn như ADO.NET Entity Framework, WCF Data Service, hoặc WCF RIA Service.

Thông thường, Model thực thi các thành phần mà nó có thể dễ dàng kết buộc cho View. Điều này có nghĩa là nó hỗ trợ thông báo thuộc tính và collection bị thay đổi thông qua các interface INotifyPropertyChangedINotifyCollectionChanged. Thông thường các model class mô tả các collection của các đối tượng chuyển hóa từ lớp ObservableCollection<T> cung cấp việc thực thi INotifyCollectionChanged interface.

Model cũng có thể hỗ trợ việc kiểm tra dữ liệu và thông báo lỗi thông qua các interface IDataErrorInfo (hoặc INotifyDataErroInfo). Những interface này cho phép việc kết buộc dữ liệu của WPF và Silverlight được thông báo khi các giá trị thay đổi để UI có thể được cập nhật. Chúng cũng hỗ trợ việc kiểm tra dữ liệu và thông báo lỗi trong UI layer.

Tóm lại, Model có những đặc điểm chính sau:

– Các model class là những lớp non-visual đóng gói dữ liệu và business logic của ứng dụng. Chúng chịu trách nhiệm quản lý dữ liệu của ứng dụng và đảm bảo tính thống nhất của nó và kiểm tra bằng việc đóng gói các business rule và data valication logic được yêu cầu.

– Các model class không tham chiếu trực tiếp đến View và các ViewModel class và không có sự phụ thuộc vào cách chúng được thực thi.

– Thông thường các model class cung cấp các sự kiện thông báo thay đổi thuộc tính và collection thông qua các interface INotifyPropertyChangedINotifyCollectionChanged. Điều này cho phép chúng dễ dàng kiểm soát dữ liệu trong View. Các model class mô tả các tập hợp của các đối tượng thường chuyển hóa từ lớp ObservableCollection<T>.

– Thông thường các model class cung cấp việc kiểm tra dữ liệu và thông báo lỗi thông qua các interface IDataErrorInfo hoặc INotifyDataErrorInfo

– Thông thường các model class được sử dụng trong việc kết hợp với một dịch vụ hoặc nơi lưu trữ thực hiện việc truy xuất dữ liệu và caching.

 Sự tương tác giữa các lớp

Mẫu thiết kế MVVM đưa ra cách tách biệt rõ rệt giữa UI, presentation logic, business logic và dữ liệu của ứng dụng bằng cách tách thành các lớp riêng biệt. Các tương tác giữa View và ViewModel là phần quan trọng nhất để tìm hiểu, nhưng các tương tác giữa các model class và ViewModel cũng quan trọng không kém. Nội dung trình bày sau đây mô tả các pattern khác cho các tương tác này và mô tả cách thiết kế chúng khi bạn thực thi mẫu thiết kế MVVM trong các ứng dụng của bạn.

P/s: trong bài viết kế tiếp sẽ đi sâu vào phần thực thi mẫu thiết kế MVVM như thế nào, khi đó các bạn sẽ nắm rõ hơn cách thức hoạt động bên trong của mẫu thiết kế này, đồng thời sẽ có demo ứng dụng mẫu để các bạn dễ hình dung ứng dụng thực tế nó như thế nào.

2 thoughts on “MVVM Pattern (Lý thuyết)

  1. Cảm ơn bài viết!
    Nhưng mình vẫn chưa hiểu rõ.
    Bạn có thể giải thích thêm và cho ví dụ thực tế hơn được không?
    Nếu được bạn hãy mail cho mình nha! tontaigia@gmail.com
    Thanks!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s