Báo cáo tìm hiểu mô hình mvvm

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ị

-1-

LỜI CẢM ƠN

Như vậy là hai năm học tại trường Đại học Quang Trung sắp kết thúc Đến lúc này tôi vẫn nghĩ mình thật may mắn khi được vào học tại trường Cơ sở vật chất của trường rất tốt, thầy cô giảng viên rất nhiệt tình, các thầy cô trong ban giám hiệu trường chăm lo tới sinh viên, tất cả điều đó đã để lại cho tôi những ấn tượng khó quên

Đặc biệt tôi xin dành nhiều tình cảm đến các thầy cô Công nghệ Thông tin Trong suốt hai năm học liên thông tại trường, các thầy cô đã tận tình chăm lo, dẫn dắt tôi trong quá trình học tập Trước khi vào học tại trường, tôi chưa bao giờ nghĩ các thầy cô lại có thể quan tâm, thân thiết với sinh viên đến như thế Tôi xin hứa sẽ cố gắng sống xứng đáng với những gì mà các thầy cô đã dạy bảo tôi

Báo cáo đồ án tốt nghiệp, đó chính là kỳ thi quan trọng nhất trong đời sinh viên, là

kỳ thi thể hiện chứng tỏ mỗi sinh viên đã học được những gì trong suốt các năm học tại trường Tôi sau hai năm nỗ lực, đã thật vinh sự và tự hào khi được tham dự kỳ báo cáo đồ

án tốt nghiệp này Trong suốt ba tháng, dựa vào sự nỗ lực của bản thân, được sự giúp đỡ của các thầy cô, tôi đã hoàn thành bản báo cáo đồ án tốt nghiệp chuyên ngành Công nghệ Thông tin Tôi xin chân thành cảm ơn thầy Thạc sĩ Đỗ Minh Đức, thầy đã tận tình chỉ bảo, hướng dẫn tôi, giúp tôi hoàn thành đồ án của mình

Một lần nữa, tôi xin cảm ơn tất cả các thầy cô, bạn bè đã chỉ bảo, giúp đỡ tôi về học tập cũng như đời sống Tôi sẽ luôn nhớ về những điều đó như một kỷ niệm khó quên trong đời sinh viên của mình

Tôi xin chân thành cảm ơn!

Quy nhơn, ngày 18 tháng 4 năm 2017

Sinh viên thực hiện

Nguyễn Thị Lệ

-2-

TÓM TẮT ĐỒ ÁN

Đồ án tốt nghiệp này trình bày một số hiểu biết cơ bản về mô hình MVVM (Model View ViewModel) cũng như vai trò của các thành phần MVVM trong lập trình WPF (Windows Presentation Foundation)

Tăng tính hiệu quả trong sự tương tác giữa designer và developer, tăng khả năng sử dụng lại các component, thay đổi giao diện chương trình mà không cần thiết phải viết lại code quá nhiều vì thế mà tôi chọn MVVM để nghiên cứu

Qua đó xây dựng phần mềm quản lý bán cà phê Phần mềm sẽ giúp thực hiện mọi công việc trong một quán cà phê, quản lý các thông tin về cà phê cũng như việc bán hàng Phần chính của đồ án tập trung giải thích mô hình MVVM trong lập trình WPF Các lớp trong mô hình MVVM

1 Model

Model là các đối tượng giúp truy xuất và thao tác tên dữ liệu thực sự

Đơn vị của Model chính là Class

2 ViewModel

ViewModel là lớp trung gian giữa View và Model ViewModel có thể được xem là thành phần thay thế cho Controller trong mô hình MVC Nó chứa các mã lệnh cần thiết để thực hiện data binding, command

ViewModel không mô tả giao diện sẽ trông như thế nào Nó chỉ mô tả cách mà View hoạt động và thông tin nào sẽ được cung cấp cho người dùng

3 View

View là phần giao diện của ứng dụng để hiển thị dữ liệu và nhận tương tác của người dùng

Một điểm khác biệt so với mô hình MVC, là nó có khả năng thực hiện các hành vi

và phản hồi lại người dùng thông quan tính năng binding, command

Sự kết nối các thành phần trong MVVM là tạo mẫu cho phần View và giữ cho các View class tách biệt khỏi ViewModel, tính năng của được định nghĩa trong ViewModel, mỗi element nằm trong View đều được kết nối tới các Properties trong ViewModel bằng data bingding, ViewModel sẽ lấy dữ liệu từ Model Một điểm cần lưu ý là trong mô hình

-4-

MỤC LỤC

LỜI CẢM ƠN 1

TÓM TẮT ĐỒ ÁN 2

MỤC LỤC 4

DANH MỤC CÁC TỪ VIẾT TẮT 6

DANH MỤC CÁC HÌNH 7

DANH MỤC CÁC BẢNG 8

MỞ ĐẦU 9

CHƯƠNG 1 TÌM HIỂU VỀ MÔ HÌNH MVVM 11

1.1 Giới thiệu mô hình MVVM 11

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

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

1.1.3 Đặc điểm mô hình MVVM 16

1.2 Các lớp của mô hình MVVM 17

1.3 So sánh các mô hình MVC, MVP và MVVM 31

1.3.1 Mô hình MVC 31

1.3.2 Mô hình MVP 32

1.3.3 Mô hình MVVM 33

1.3.4 Khi nào thì sử dụng mô hình MVC, MVP, MVVM 36

CHƯƠNG 2: TỔNG QUAN VỀ LẬP TRÌNH WPF VÀ NGÔN NGỮ ĐÁNH DẤU XAML 37

2.1 WPF là gì? 38

2.2 Khác biệt lớn nhất của WPF và window Form 39

2.3 Sử dụng Entity framework Code first với CSDL SQL Server có sẵn 39

2.4 XAML là gì? 46

2.5 Tại sao lại sử dụng ngôn ngữ đánh dấu XAML? 47

-5-

2.6 Một số công cụ trong ngôn ngữ đánh dấu XAML 49

2.7 Kết luận 53

CHƯƠNG 3 PHÂN TÍCH THIẾT KẾ HỆ THỐNG PHẦN MỀM 55

3.1 Thực tế bài toán 55

3.2 Chức năng, nhiệm vụ 55

3.3 Khảo sát nghiệp vụ của hệ thống phần mềm bán cà phê 56

3.3.1 Cơ cấu tổ chức 56

3.3.2 Biểu đồ phân cấp chức năng 57

2.3.3 Biểu đồ sử dụng (Use case) 58

3.3.4 Xây dựng biểu đồ lớp 59

CHƯƠNG 4 XÂY DỰNG PHẦN MỀM BÁN CÀ PHÊ VỚI MÔ HÌNH MVVM [5] 60

4.1 Giao diện quản lý 60

4.2 Giao diện bán hàng 61

4.3 Kết quả và hướng phát triển 64

TÀI LIỆU THAM KHẢO 65

-6-

DANH MỤC CÁC TỪ VIẾT TẮT

-7-

DANH MỤC CÁC HÌNH

Hình 1 Kiến trúc mô hình lập trình MVVM 13

Hình 2 Quy trình mô hình MVVM 15

Hình 3 Mô hình MVC 31

Hình 4 Mô hình MVP 32

Hình 5 Mô hình MVVM 34

Hình 6 Giao diện designer trong WPF 37

Hình 7 Màn hình cập nhật Entity Framework Power Tools 41

Hình 8 Màn hình cài đặt Entity Framework Power Tools 41

Hình 9 Kết nối với Database 43

Hình 10 Hình quản lý bán 60

Hình 11 Hình quản lý khu vực 60

Hình 12 Hình quản lý Món 61

Hình 13 Hình giao diện bán hàng 61

-8-

DANH MỤC CÁC BẢNG

Bảng 1 So sánh giữa 3 mô hình MVC, MVP và MVVM 36 Bảng 2 Đối chiếu các công nghệ hiện có trong WPF 39 Bảng 3 Bảng so sánh công cụ hỗ trợ XAML 51

Tăng tính hiệu quả trong sự tương tác giữa designer và developer, tăng khả năng sử dụng lại các component, thay đổi giao diện chương trình mà không cần thiết phải viết lại code quá nhiều vì thế mà tôi chọn MVVM để nghiên cứu

Qua đó xây dựng phần mềm quản lý bán cà phê Phần mềm sẽ giúp thực hiện quản

lý các thông tin về cà phê cũng như việc bán hàng

2 Mục đích nghiên cứu đề tài

Việc thực hiện xây dựng hệ thống giúp tôi nắm vững, hiểu rõ hơn về mô hình MVVM trong lập trình WPF cũng như các phần mềm xây dựng và hỗ trợ cho phần mềm ứng dụng

Phần mềm này giúp cho việc quản lý các công việc trong quán cà phê trở nên đơn giản, nhanh chóng và thuận tiện

Phần mềm có giao diện hài hòa, dễ nhìn, linh hoạt, năng động hơn và đáp ứng được yêu cầu ngày càng cao trong công tác quản lý bán cà phê, quản lý danh mục món… và nhu cầu của người sử dụng

3 Ý nghĩa khoa học và thực tiễn

Sau khi hoàn thiện đề tài và tiến hành viết phần mềm thành công thì phần mềm bước đầu sẽ được triển khai tại một số cửa hàng vừa và nhỏ, nhằm giúp cho vấn đề quản lý và mua bán của các của hàng được diễn ra một cách thuận lợi

Phần mềm có thể áp dụng vào cuộc sống hàng ngày để quản lý bán cà phê, danh mục cà phê ở một địa điểm nào đó trên toàn quốc khi có nhu cầu mà đến cả những người

có ít kiến thức về công nghệ cũng có thể sử dụng

4 Cấu trúc đề tài

-11-

CHƯƠNG 1 TÌM HIỂU VỀ MÔ HÌNH MVVM 1.1 Giới thiệu mô hình 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

Đặt biệt, MVVM thường được sử dụng trong lập trình các ứng dụng WPF và Silverlight, nó cho phép chúng ta dễ dàng thay đổi giao diện GUI (Graphical User Interface) của ứng dụng mà không cần phải thay đổi code quá nhiều Việc triển khai MVVM cho project thực sự đơn giản hơn nhiều so với những gì mà người ta tưởng tưởng

về nó

Đa số các ứng dụng thuộc bất kì nền tảng nào cũng có thể chia thành hai phần: giao diện (View) và dữ liệu (Model) Vì việc tách riêng các phần này, cần phải có một phần trung gian nào đó nối kết hai phần này lại, và chúng tạo nên một mô hình (pattern)

Quen thuộc và phổ biến nhất với chúng ta là mô hình MVC (Model – View – Controller) Có thể nói MVC là một mô hình tiêu chuẩn bởi sự logic và hợp lý của nó Điều này làm cho việc xuất hiện một mô hình phát triển ứng dụng mới có thể khiến bạn

-12-

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

-13-

Hình 1 Kiến trúc mô hình lập trình MVVM

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

-14-

1.1.2 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ị

-15-

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

Thực tế việc sử dụng pattern này trong quá trình phát triển các ứng dụng WPF hoặc Silverlight mang lại cho developer nhiều lợi ích, có thể kể đến như sự tương tác hiệu quả giữa designer và developer, khả năng sử dụng lại các component hay việc thay đổi giao diện chương trình mà không cần thiết phải viết lại code quá nhiều…

Có một vài đánh giá sai lầm về MVVM đại loại như: “MVVM chỉ thích hợp với các project có giao diện phức tạp”, hay “MVVM sẽ làm phình to kích thước cũng như chi phí đối với các ứng dụng nhỏ” Và một nhận xét nữa về đó là: “MVVM không cân bằng (scale)” Theo ý kiến chủ quan thì những nhận xét như thế này chỉ phù hợp khi nói đến cách thức cài đặt cũng như kiến thức về MVVM của developer chứ không phải bản thân của MVVM pattern Nói cách khác, nếu bạn mất hàng giờ đồng hồ để triển khai MVVM,

điều đó có nghĩa là bạn đang thực hiện sai phương pháp

Hình 2 Quy trình mô hình MVVM

- Với mô hình ba lớp chúng ta đã tách biệt được khá rõ ràng giữa các tầng giao diện,

mã xử lý, cơ sở dữ liệu Tuy nhiên cũng tồn tại các nhược điểm như code trùng lặp giữa các tầng Không phân biệt được ngôn ngữ định nghĩa giao diện, xử lý, cơ chế tương tác giữa các tầng dữ liệu…

- Mô hình MVVM trong WPF giải quyết được các vấn đề trên (mô hình MVVM tồn tại trong nhiều công nghệ lập trình khác) Tận dụng sức mạnh của ngôn ngữ XAML (đó cũng là lý do để chúng ta cần phát triển ứng dụng chuyển sang WPF mà winform không làm được) chúng ta phân tách được việc định nghĩa giao diện, xử lý giao diện, xử lý logic,

xử lý dữ liệu

- Có thể nói MVVM trong wpf là 1 nền tảng lập trình bất đồng bộ mạnh mẽ giữa các tầng: giao diện, xử lý logic, CSDL

- Mô hình MVVM nhằm mục đích tách bạch mã giữa các chức năng khác nhau của

1 ứng dụng Do đó nâng cao khả năng kế thừa, tái sử dụng mã Đồng thời dễ dàng trong việc bảo trì và quản lý mã nguồn

- Mô hình lập trình MVVM trong wpf chia ứng dụng làm 3 tầng như sau:

-17-

- Model là tầng định nghĩa các lớp tương tác với CSDL (đối với các ứng dụng

CSDL), hay các lớp lưu trữ thông tin chung để tương tác trong ứng dụng đối với các ứng dụng bất kỳ

- View là tầng giao diện

- ViewModel là tầng trung gian giữa View và Model Làm nhiệm vụ chính điều phối giữ liệu giữa View và Model để thực hiện các thao tác xử lý như thêm, sửa, xóa… 1.1.3.1 Ưu điểm

MVVM sẽ tạo sự tương tác hiệu quả giữa designer và developer

Tăng khả năng sử dụng lại các thành phần hay việc thay đổi giao diện chương trình

mà không cần thiết phải viết lại code quá nhiều

Thể hiện tính chuyên nghiệp trong lập trình, phân tích thiết kế Do được chia thành các thành phần độc lập nên giúp phát triển ứng dụng nhanh, đơn giản, dễ nâng cấp, bảo trì…

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

- Trong mô hình MVVM : View là giao diện đồ họa hiển thị giao diện người dùng

và tương tác với chúng.Nếu bạn đang viết một ứng dụng WPF View có thể là UserControl , Window hoặc Page tuy nhiên trong ứng dụng Silverlight ,View sẽ Silverlight UserControl , Silverlight Page , Silverlight Child Window (một pop up)

- Đầu tiên để tạo 1 View , bạn cần tham chiếu đến ViewModel tương ứng

đến DataContext của View nó cho phép bắt đầu liên kết Property và Command của

ViewModel để tương ứng điều khiển ,tiếp xúc đến View.Để tiếp cận bạn chỉ cần tham chiếu đến DataContext theo các cách sau :

-19-

+ Cách 2 :

Đầu tiên chúng ta sẽ tìm hiểu cấu trúc thƣ mục của mô hình MVVM

Bao gồm 1 class ViewModelLocator cùng tên file có chứa các thuộc tính chỉ đọc trả

về giá trị là các class ViewModel để View có thể binding đến mà không cần phải Binding trực tiếp từng class nhƣ cách 1

về class ViewModel cần binding>"

-22-

- View nhận biết và theo dõi ViewModel nhưng không biết Model

- ViewModel thì nhận biết được Model có nhiệm update dữ liệu từ Model lên View

- Model thì không biết View cũng như ViewModel

- DAL có nhiệm vụ là save dữ liệu từ Model xuống Database

Bạn không nên hiện thực 1 ICommand trong Model vì Model không biết sự tồn tại của View , Model không có mối quan hệ nào với giao diện ,nhưng bạn có thể tiếp xúc với Model trực tiếp từ ViewModel để hiện thực ICommand bằng cách tạo DataTemplate cho Domain Entity đặc biệt bạn muốn từ DomainModel nhưng phải phân tích đúng hướng và theo mục đích vì sẽ phát sinh một số vấn đề không đúng đắn khi truyền dữ liệu từ Model đến View thống qua ViewModel như sau

Trước hết bạn chọn vấn đề bảo mật cho ứng dụng thì ko nên để các view ràng buộc đối với thuộc tính từ Model một cách trực tiếp như vậy ,ViewModel nên có thuộc tính riêng của mình gọi là FirstName đại diện cho FirstName của model PersonModel

Khi code theo hướng này , ViewModel sẽ là mặt nạ cho mặt thật là Model và View

sẽ không biết đến Model chứa dữ liệu của bạn đem lại tính bảo mật cấu trúc dữ liệu cao hơn

TH bạn chọn giải pháp nhanh , tức nhiên là độ bảo mật thấp tốt nhất bạn nên hiện thưc INotifyPropertyChanged cho cả ViewModel và Model , vì khi View thay đổi Model thì ViewModel chưa nhận biết được sự thay đổi đó từ Model

Trước khi đi sâu hơn vào phần ViewModel chúng ta nên biết qua một số khái niệm

kỹ thuật WPF

-23-

* ViewModel

- MS cung cấp cho bạn 1 không gian tên cho các nhà thiết kế giao diện WPF và Silverlight , nó thì có sẵn trong http://schemas.microsoft.com/expression/blend/2008 Expression Blend là 1 tool thiết kế giao diện cho WPF/Silverlight, nó là 1 SDK cung cấp các behavior mở rộng , behavior là cách đóng gói các tương tác vào các thành phần tái sử dụng để kéo thả vào trong giao diện.Expression Blend cũng cung cấp tính năng dữ liệu mẫu cho phép các nhà thiết kế UI với dữ liệu giả lập.Xét về MVVM , dummy data như là một mô hình thử nghiệm của ViewModel

- Thêm một không gian tên vào View dùng tiền tố d đặt tên cho nó :

- d:DataContext cho phép bạn thêm vào dữ liệu giả lập muốn thể hiện trong thời điểm thiết kế trước biên dịch thay vì dữ liệu thực.Với kỹ thuật này ta có thể thêm 1 dummyViewModel tại thời điểm thiết kế giao diện, giúp cho nhà thiết kế UI có cái nhìn tổng quan về dữ liệu

- Thêm 1 file XAML đại diện cho 1 dummyViewModel là người thiết kế có 1 dữ liệu giả lập để sử dụng.Ví dụ về dummyViewModel cho Person View (Continues )

* Command trong WPF/Silverlight

- Một trong các đặc tính thú vị của WPF/Silverlight là interface ICommand và cách thức hoạt động của nó

- ICommand hiện thực 2 phương thức Execute và CanExecute cho phép bạn điều khiển việc thực hiện lệnh

-24-

- Bằng cách sử dụng Binding và hiện thực ICommand bạn có thể code 1 ViewModel thực hiện nhiều lệnh nhận được từ View và binding đến Control trên View như Button , Link

- IComand cho phép bạn điều khiển lệnh dựa trên những điều kiện thay đổi trên ViewModel ví dụ như chỉ có thể thực hiện lệnh Save trên View với điều kiện trên ViewModel đã thực hiện OnPropertyChanged một lần nghĩa là đã edit trên view

Thông thường bạn cần trình bày các command trong ViewModel như là các thuộc tính public để tạo ràng buộc giữa View & ViewModel.Trình bày 1 thuộc tính Icommand công cộng trong ViewModel cho phép View có thể binding đến chúng.Bạn có thể hiện thực ICommand với nhiều cách và cũng cần hiện thực một số presentation logic trong ViewModel để quyết định lệnh có thể không không thể thực hiện

+ Cách 1 thông thường là tạo 1 thuộc tính public có kiểu Icommand ở mức độ truy cập private để ước lượng các presentation logic hợp lý trong ViewModel

+ Cách 2 tạo 1 lớp tùy chỉnh cho mỗi command kế thừa (inherit) từ Interface ICommand và trình bày nó trong ViewModel và sau đó bạn cần phải tạo các lớp command tùy chỉnh cho mỗi command có sẵn của ứng dụng , bạn sẽ nghĩ hướng tiếp cận này sẽ tốn thời gian và phản tác dụng khi phải làm lại những gì sẵn có của NET , nhưng đối với các lệnh chia sẽ xài chung cho toàn ứng dụng như Save , Delete , New , Redo , Undo bạn cần hiện thực lại các lệnh này một lần để sử dụng.Với các lệnh khác bạn có thể hiện thực theo phương pháp MVVM Command

- Silverlight 3.0 , 4.0 thì không hỗ trợ đặc tính Command có sẵn trong WPF nhưng nhờ vào interface ICommand bạn dễ dàng tạo 1 command được binding đến menu trong Silverlight và tái chế để sử dụng lại trong WPF mà không cần thiết để viết code riêng

- Một số tool của bên thứ 3 như Prism ,MVVM Light Toolkit có hiện thực ICommand theo kiểu riêng để tái sử dụng cho cả 2 WPF và Silverlight

- Đầu tiên tạo 1 Project có tên MVVM , các thư mục và các class hữu ích , trong đó

có cả phần hiện thực ICommand mà chúng ta sẽ tìm hiểu

-25-

- Lớp đầu tiên chúng ta xây dựng có tên là RelayCommand nằm trong thư mục Common, lớp này hiện thực interface ICommand (định nghĩa 1 generic Function<T> cho CanExecute , định nghĩa 1 Delegate<T> cho Execute), chúng được thêm vào trong hàm khởi tạo của class RelayCommand như sau :

- Bạn cần phải hiện thực các thực thi logic của 2 phương thức CanExecute & Execute đáp ứng lệnh phát ra từ View

-26-

- Trước tiên bạn cần hiện thực phương thức CanExecute , nó có nhiệm vụ đánh giá lệnh có thể hay không thể thực thi.Khả năng này được hỗ trợ cả trong WPF và Silverlight nhưng theo cách khác nhau.Ví dụ trong WPF có class CommandManager để quản lý sự thay đổi của UI.Khi UI thay đổi sẽ bắn ra yêu cầu thẩm định lại hành động của phương thức CanExecute một cách tự động ngược lại Silverlight không có lớp CommandManager này

- Code sau hiện thực 1 phương thức CanExeute đơn giản sẽ thêm 1 sự kiện mỗi khi

có sự yêu cầu đánh giá lại lệnh được hay không được thực thi

- Với các khai báo trên , bạn có thể khai báo command trong ViewModel với 1 truy cập private và phân công cho 2 lamda expression để hiện thực cụ thể command trong MVVM theo cách sau :

-27-

Bây giờ mỗi khi thay đổi Person, UI sẽ đánh giá lại lệnh, nếu Person không có giá trị, nút lệnh sẽ disable, bạn cần phải làm điều này ở Silverlight vì ko có class CommandManager

*ViewModel

- ViewModel phải đáp ứng 4 yêu cầu sau

+ Cung cấp dữ liệu hiển thị lên View

+ Cung cấp bộ lệnh cho View

+ Hiện thực interface INotifyPropertyChanged

+ Hiện thực interface IDataErrorInfo

INotifyPropertyChanged

-28-

- INotifyPropertyChanged đã có sẵn từ các phiên bản NET Framework.2.0 Nó nằm trong System.dll và được tiếp xúc thông qua namespace System.ComponentModel INotifyPropertyChanged cung cấp một cơ chế thông báo cho một client khi giá trị của một thuộc tính (hoặc của toàn bộ một đối tượng) đã thay đổi, nó trình bày một sự kiện PropertyChanged mà đòi hỏi một tùy chỉnh hiện thực trong các class kế thừa nếu bạn binding một đối tượng hiện thưc interface này với một nguồn dữ liệu XAML, ví dụ, các View sẽ nhận được thông báo mỗi lần thay đổi đối tượng

- Đến thời điểm này chúng ta nên nghĩ tất cả các đối tượng class hiện thực interface này như 1 đối tượng quan sát Oservable Object , nó là đối tượng kiểu trừa tượng abstract object type.Yêu cầu duy nhất cho đối tượng Oservable Object là hiện thực interface này,

nó là abstract vì nó là class cơ sở base , tôi không muốn dùng nó trực tiếp.Cuối cùng chúng ta sẽ xác định các thuộc tính đã thay đổi dùng lamda expression

- Để bắt đầu , chúng ta tạo 1 class abstract có tên là Oservable Object nằm trong thư mục Common

- Mỗi đối tượng hiện thực interface này sẽ sử dụng chính nó như generic <T>

- Code trên khai báo một sự kiện PropertyChanged, nó yêu cầu 1 đối số PropertyChangedEventArgs chứa trên thuộc tính sẽ thay đổi nhờ đó ta xác nhận được tên thuộc tính của đối tượng <T> được truyền vào và phương thức OnPropertyChanged sẽ được gọi mỗi khi thuộc tính này bị thay đổi

IDataErrorInfo

-Interface IDataErrorInfo cũng nằm trong namespace System.ComponentModel.Nó đƣợc xây dựng nhằm mục đích cung cấp thông tin lỗi cụ thể cho 1 đối tƣợng binding với

-30-

giao diện người dùng hay trình khách (View) Interface này đã được MS giới thiệu trong Framework 1.0 ở dạng 1 cấu trúc khác nhưng nó trở nên phổ biến khi WPF/Silverlight xuất hiện Bạn sẽ dễ dàng dùng nó trong 1 ứng dụng WPF hoặc một ứng dụng ASP để hiện thực xác nhận dữ liệu trong 1 View

- IDataErrorInfo có 2 thuộc tính : Error và Item

+ Thuộc tính Error trình bày lỗi xác nhận hiện tại Đây là hiện thực thông thường nhất cho ứng dụng và bạn cũng có thể sử dụng XAML DataTemplate để hiển thị Validation Error

+ Thuộc tính Item được gọi mỗi khi 1 element trên View xác nhận cho phép gọi đến validation engine, validation engine này thay đổi các giá trị của nó hoặc yêu cầu xác nhận giá trị của nó

- Hiện thực Interface này trong BaseViewModel một cách thêm phương thức sau:

- Phương thức này là virtual để bạn có thể ghi đè override hiện thực trong mỗi ViewModel cụ thể.Ví dụ 1 PersonViewModel thì có quy tắc xác nhận giá tri Validation Rule khác nhau , quá trình như vậy không thật sự hữu hiệu , rất mất thời gian và không cần thiết vì bạn đã có các quy tắc xác nhận giá trị áp dụng cho các model cơ bản rồi , cách thông minh hơn là sử dụng Microsoft Enterprise Library bạn thường sử dụng trong Business Logic Layer tự xác nhận giá trị cả ViewModel và các model cơ bản khác nữa

-31-

- Để làm đƣợc điều đó , chúng ta sẽ tạo 1 class tên là ViewModelValidator để bạn có thể gọi ở bất kỳ đâu bạn cần xác nhận giá trị một thuộc tính của ViewModel hoặc nhận giá trị của toàn bộ đối tƣợng.Validation Application Block(VAB) kết hợp với Enterprise Library cung cấp cách xác nhận giá trị của 1 đối tƣợng Object

-32-

View đại diện cho các thành phần giao diện người dùng giống như CSS, jQuery, html Nó chỉ có trách nhiệm cho hiển thị các dữ liệu nhận được từ bộ điều khiển như là kết quả Điều này cũng biến đổi các model(s) vào giao diện người dùng

3.Controller

Controller chịu trách nhiệm xử lý các yêu cầu Nó nhận input từ người dùng thông qua View, sau đó quá trình dữ liệu của người dùng với sự giúp đỡ của Model và trả kết quả trở lại View Thông thường, nó hoạt động như điều phối viên giữa View và các Model

Ngày nay, mô hình này được sử dụng bởi nhiều framework phổ biến như Ruby on Rails, Spring Framework, Apple iOS Development và ASP.NET MVC

1.3.2 Mô hình MVP

Mô hình này là tương tự như mô hình MVC trong đó Controller đã được thay thế presenter Mẫu thiết kế này chia tách một ứng dụng thành ba khía cạnh chính: Model, View và Presenter