Xây dựng ứng dụng WPF với mẫu thiết kế MVVM

Việc xây dựng giao diện người dùng của một ứng dụng phần mềm trong thực tế là không hề dễ dàng. Nó có thể là sự “hòa trộn” không rõ ràng của dữ liệu, thiết kế tương tác, thiết kế đồ họa, sự liên kết, vấn đề bảo mật, unit testing… Có rất nhiều mẫu thiết kế thông dụng có thể giúp giải quyết phần nào vấn đề, nhưng thực sự việc tách biệt và ánh xạ nhiều mối liên hệ có thể khá khó khăn. Đôi khi chúng ta sử dụng những mẫu thiết kế phức tạp đòi hỏi phải viết code nhiều vì nền tảng giao diện người dùng (UI platform) không đáp ứng được. Điều chúng ta cần là một nền tảng (platform) giúp xây dựng những giao diện (UI) bằng cách sử dụng những mẫu thiết kế đơn giản, có khả năng kiểm thử theo thời gian, có thiên hướng nghiêng về phía lập trình. Và Windows Presentation Foundation (WPF) cung cấp đúng những gì chúng ta cần.

Quá trình hình thành Model-View-ViewModel

Từ khi con người bắt đầu tạo ra các giao diện người dùng của phần mềm, có rất nhiều mẫu thiết kế phổ biến giúp việc này trở nên đơn giản hơn. Ví dụ, mẫu thiết kế Model-View-Presenter (MVP) trở nên phổ biến trong nhiều nền tảng lập trình giao diện người dùng khác nhau. MVP là một biến thể của mẫu thiết kế Model-View-Controller (MVC) được dùng trong vòng vài thập kỉ trở lại đây. Trong trường hợp bạn chưa từng sử dụng mô hình MVP trước đó thì sau đây là một trình bày ngắn gọn về mô hình này: những gì bạn thấy trên màn hình được gọi là View, dữ liệu mà nó hiển thị lên gọi là Model và Presenter “móc” 2 phần kia lại với nhau. View phụ thuộc vào Presenter để lấy dữ liệu, tương tác với dữ liệu đầu vào, cung cấp các phép kiểm tra dữ liệu đầu vào đó trước khi xử lý chúng và nhiều tác vụ khác nữa.

Vào năm 2004, Martin Fowler đã phát hành một bài viết có tựa đề Presentation Model (PM). Mẫu thiết kế PM này tương tự với MVP trong việc tách biệt View từ hành vi (behavior) và trạng thái (state). Phần thú vị của mẫu thiết kế này là phần trừu tượng của View được tạo ra, gọi là Presentation Model. Theo Fowler, Presentation Model thường xuyên cập nhật View của nó để cả hai luôn đồng bộ với nhau.

Vào năm 2005, John Gossman, hiện tại là trong những kiến trúc sư về WPF và Silverlight tại Microsoft, đã công bố mẫu thiết kế Model-View-ViewModel (MVVM) trên blog của mình. MVVM gần như giống hoàn toàn với PM của Fowler khi cả hai mẫu thiết kế mô tả một sự trừu tượng của View chứa hành vi và trạng thái của View. Fowler đã giới thiệu PM với ý nghĩa là tạo ra một lớp trừu tượng độc lập với nền tảng giao diện của View, trong khi đó Gossman giới thiệu MVVM như là một cách được chuẩn hóa để tận dụng những tính năng cốt lõi của WPF để đơng giản hóa việc tạo ra những giao diện người dùng.

Trong bài viết của Glenn Block có tựa đề “Prism: Patterns for Building Composite Applications with WPF” trong ấn bản số ra vào tháng 9/2008 của tạp chí MSDN, Glenn hướng dẫn xây dựng ứng dụng composite cho WPF. Khái niệm ViewModel không được đề cập đến trong toàn bộ bài viết. Thay vào đó, khái niệm Presentation Model được sử dụng để mô tả phần trừu tượng của View.

MVVM_architecture

Không giống như Presenter trong mô hình MVP, ViewModel không cần tham chiếu đến View. View kết buộc các thuộc tính trên ViewModel lần lượt thể hiện dữ liệu được lưu trữ trong các đối tượng mẫu (model object) và các trạng thái khác xác định cho View. Những kết buộc giữa View và ViewModel khá đơn giản để xây dựng vì một đối tượng ViewModel được thiế lập như một DataContext của một View. Nếu các giá trị thuộc tính trong ViewModel thay đổi, những giá trị thuộc tính mới tự động phát sinh sang View thông qua việc kết buộc dữ liệu. Khi một người dùng nhấn một nút trong View, một lệnh trong ViewModel được thực thi để thực hiện hành động được yêu cầu. ViewModel, chứ không phải View, thực hiện tất cả những phần sửa đổi được tạo ra cho dữ liệu mẫu (model data). Các lớp View không nghĩa rằng các lớp model tồn tại, trong khi ViewModel và model không hề biết View. Thực tế, model hoàn toàn không biết sự thật là View và ViewModel tồn tại.

Tại sao lập trình viên WPF thích dùng MVVM

Khi một lập trình viên trở nên quen thuộc với WPF và MVVM, và thật khó để phân biệt cả hai. MVVM hoàn toàn phù hợp với nền tảng WPF, và WPF được thiết kế để giúp cho việc xây dựng các ứng dụng sử dụng mô hình MVVM. Thực tế, Microsoft đã sử dụng MVVM bên trong để phát triển các ứng dụng WPF như là Expression Blend, trong khi phần nền tảng lõi WPF đã đang được xây dựng. Nhiều khía cạnh của WPF như là look-less control model và những mẫu dữ liệu (data templates), tận dụng điểm mạnh trong việc tách biệt phần hiển thị từ hành vi và trạng thái được đưa ra bởi MVVM.

Một khía cạnh quan trọng nhất của WPF làm cho MVVM trở thành mẫu thiết kế tốt để dùng là phần kết cấu kết buộc dữ liệu (data binding infrastructure). Bằng việc kết buộc các thuộc tính của View sang ViewModel, bạn có kết nối “lỏng” giữa View và ViewModel và bỏ hoàn toàn việc cần thiết phải viết code trong ViewModel để cập nhật trực tiếp View. Hệ thống kết buộc dữ liệu cũng hỗ trợ việc kiểm tra nguồn đầu vào quy định một cách được chuẩn hóa trong việc đưa ra các lỗi (validation errors) cho View.

Hai tính năng khác của WPF làm cho mẫu thiết kế này dễ sử dụng là các mẫu dữ liệu (data templates) và hệ thống tài nguyên (resource system). Những mẫu dữ liệu gắn các View sang các đối tượng ViewModel được hiển thị trong giao diện người dùng. Bạn có thể định nghĩa các template trong XAML và để hệ thống tài nguyên tự động định vị và áp dụng các mẫu này cho bạn vào thời điểm hoạt động (runtime). Bạn có thể tìm hiểu thêm về việc kết buộc và các mẫu dữ liệu trong bài viết này.

Ngoài các tính năng của WPF (và Silverlight) làm cho MVVM trở thành cách tự nhiên để xây dựng một ứng dụng, mẫu thiết kế này cũng rất phổ biến vì các lớp ViewModel dễ dàng để kiểm thử mức đơn vị (unit test). Khi phần tương tác của một ứng dụng nằm trong tập các lớp ViewModel, bạn có hể dễ dảng viết code để kiểm tra nó. Về mặt ý nghĩa nào đó, View và unit test là hai loại khác nhau của ViewModel. Ngoài ý nghĩ thúc đẩy việc tạo ra những phần kiểm tra hồi quy tự động (automated regression tests), khả năng kiểm thử của những lớp ViewModel có thể hỗ trợ trong việc thiết kế các giao diện người dùng. Khi bạn đang thiết kế một ứng dụng, bạn có thể quyết định những gì nên có trong View hoặc ViewModel bằng việc tưởng tượng rằng bạn có thể viết unit test cho ViewModel. Nếu bạn cò thể viết unit test cho ViewModel mà không cần phải tạo ra bất kì đối tượng UI nào, bạn cũng hoàn toàn có thể giới hạn ViewModel vì nó không phụ thuộc vào các thành phần hiển thị.

Cuối cùng, đối với những lập trình viên làm việc với những ngươi thiết kế đồ họa, việc sử dụng MVVM giúp dễ dàng hơn trong việc tạo một quy trình mềm dẻo giữa lập trình viên và đồ họa viên. Nhóm phát triển có thể tập trung vào việc tạo các lớp ViewModel, và nhóm thiết kế có thể tập trung vào việc tạo ra các View thân thiện với người dùng. Việc kết nối phần đầu ra của cả ai nhóm có thể ít liên quan hơn so với việc đảm bảo các kết buộc chính xác trong tập tin XAML của View.

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