Ноу Інти, лекція, реалізація wpf проекту за допомогою mvvm toolkit’а
Анотація: В лабораторній роботі будуть наведені завдання для самостійного виконання на закріплення пройденого теоретичної частини лекцій 8 і 9, а також розглянуто приклад побудови WPF проекту, реалізованого з використанням "легкого" MVVM toolkit'а. При вирішенні самостійної роботи спирайтеся на матеріали лекцій 8 і 9.
Мета лабораторної роботи: показати реалізацію паттерна Model-View-ViewModel на основі одного з існуючого безлічі MVVM toolkit 'ов. Дати уявлення про те, який з варіантів реалізації паттерна MVVM більш доречний в тій чи іншій ситуації. Закріпити знання, отримані в лекціях 8 і 9.
Завдання для самостійного виконання
- Використовуючи створений в лабораторній роботі №1 призначений для користувача елемент управління, який дозволяє задати часовий інтервал, розробити додаток (реалізоване на основі патерну MVVM) дозволяє планувати розпорядок сьогоднішнього дня. При розробці програми допускається використання будь-якого MVVM toolkit'а.
- Використовуючи створений в лабораторній роботі для користувача елемент управління, який дозволяє виробляти конвертацію валют, розробити додаток (реалізоване на основі патерну MVVM), що дозволяє вести лог грошових операцій користувача. При розробці програми допускається використання будь-якого MVVM toolkit'а.
Навчальний елемент. Реалізація патерну MVVM засобами Model-View-ViewModel Toolkit 0.1
Насправді MVVM - це просто патерн. і для його застосування не потрібні ніякі тулкіта. Все тулкіта - це просто хелпери, які полегшують Вам життя, позбавляючи від рутини. Згідно Вікіпедії зараз існує більше 14 різних MVVM toolkit 'ов.
У лекції №13 цілком детально було розглянуто патерн MVVM, тому опис використання MVVM toolkit 'а в наведеному нижче навчальному елементі буде гранично короткий і схематичне.
Більшість MVVM Toolkit 'ов включають шаблон для Visual Studio і (або) Expression Blend:
Мал. 14.1. Шаблон MVVM toolkit'а для Expression Blend
Якщо ми реалізуємо патерн MVVM засобами Model-View-ViewModel Toolkit 0.1, то даний тулку відразу створює наступну структуру файлів в проекті:
Мал. 14.2. Структура файлів в проекті, створеному за допомогою MVVM toolkit'а
Крок 1. Постановка завдання
Візьмемо якусь канонічну задачу. Наприклад, щоб відобразити список книг Новомосковскльного залу. У книги є:
Нехай до нас ходять Новомосковсктелі і раз у раз беруть книги почитати або повертають їх назад. Потрібно в будь-який момент знати, скільки примірників тієї чи іншої книги у нас залишилося, і чи можемо ми її видати.
Крок 2. Model
У розглянутій задачі модель буде складатися з одного простого класу: Book.cs
Крок 3. ViewModel
Напишемо ViewModel для нашої моделі: Book.cs
BookViewModel успадкований від класу ViewModelBase, який надає нам MVVM Toolkit. ViewModelBase в свою чергу, реалізує інтерфейс INotifyPropertyChanged і містить функцію OnPropertyChanged. Все це потрібно для того, щоб завжди можна було викликати подія "змінилося таке-то поле". Як видно в коді, при будь-якій зміні поля ми таку подію викликаємо і передаємо як параметр його назву. Потім на формі Біндінг може ця подія обробити і, як наслідок, інтерфейс і ViewModel завжди будуть один з одним синхронізовані.
Крім BookViewModel у нас є ще клас MainViewModel, вже згенерований і навіть пов'язаний з формою. Додамо в нього поле:
Крок 4. View
Це і є наше вікно, або User Control. У будь-якого FrameworkElement-а є поле DataContext. DataContext може бути будь-яким об'єктом, мати які завгодно поля, а його головне завдання - бути джерелом даних для Databinding-а. Форма у нас всього одна, DataContext для неї заповнюється в методі OnStartup, що в App.xaml.cs. Трохи модифікуємо те, що зробив нам MVVM Toolkit, вийде наступне: App.xaml.cs
Залишилося написати XAML-код форми. MainView.xaml
Зверніть увагу на конструкцію Binding в розмітці форми. Саме таким чином можна прив'язувати поля об'єкту, що знаходиться в DataContext-е, до атрибутів контролів. Ми не написали жодного рядка коду, але тим не менше при запуску отримаємо наступне:
Мал. 14.3. Результат проекту створеного за допомогою MVVM toolkit'а