Інструкція щодо розробки графічного інтерфейсу в середовищі NetBeans з застосовуванням шаблону MVVM. v0.1

Шаблон MVVM було розроблено для графічного фреймворку WPF я входить до складу.Net Framework починаючи з версії 3.0. Основною ідеєю цього шаблона є розділення графічних елементів користувацького інтерфейсу й логіки роботи програми, при чому логічний блок програми абсолютно не знає нічого про графічне представлення.

Рис.1 – загальна структура документу з використанням шаблону MVVM.

Основною ідею являється розділення коду логіки програми на модель (Model) і модель-представлення (View Model). Модель абсолютно нічого не знає про взаємодію з користувачем і містить код для виконання основних функцій програми, взаємодії з диском і базою даних. Модель-представлення відображає дані додатку у вигляді, який відповідає структурі графічного інтерфейсу, також вона містить команди (функції) які буде виконано в результаті взаємодії з користувачем (кліки по кнопкам, тощо).

Реалізацію цього шаблона для середовища.Net можна подивитись в багатьох місцях інтернеті, здебільшого на цьому ресурсі http://professorweb.ru/my/WPF/documents_WPF/level36/36_5.php, ми ж розглянемо особливості застосування в контексті Java та графічної бібліотеки SWING.

Оскільки SWING не має всіх можливостей WPF, а точніше декларативного створення інтерфейсу через XAML, контексту даних, команд, то ці концепції обходяться і емалюються наявними відповідниками, але бажано зберігати основну концепції, це зробить код більш чистим і легким в підтримці (класичний код роботи з GUI перетворюється в мішанину з обробників подій і змінних, які зберігають стан всередині класу форми).

Основна концепція MVVM прив’язка елементів моделі до елементів графічного інтерфейсу (Data Binding тиць 1, тиць 2), і ця концепція доступна в NetBeans завдяки бібліотеці Beans Binding, що правда вона не дуже детально задокументована.

Розглянемо приклад створення такого проекту в середовищі NetBeans.

1. Створюємо проект Java Application

2. Додаємо посилання на бібліотеку Beans Binding

3. Створимо клас для нашої моделі представлення:

public class MainModel {

private final PropertyChangeSupport propertySupport = new PropertyChangeSupport(this);

// bound property support

public void addPropertyChangeListener(PropertyChangeListener listener) {

propertySupport.addPropertyChangeListener(listener);

}

public void removePropertyChangeListener(PropertyChangeListener listener) {

propertySupport.removePropertyChangeListener(listener);

}

}

Цей код необхідний для автоматичного зв’язування інтерфейсу користувача з нашим класом.

4. Додамо поле даних, до якого будемо прив’язуватись з користувацького інтерфейсу.

a. Знаходячись всередині класу натискаємо комбінацію клавіш Alt+Insert.

b. Вибираємо Add Propery

c. Заповнюємо параметри нового атрибуту (обов’язково відмітивши параметр Bound)

Зверніть увагу на те, що прапорець Vetoable Change відмічати не треба.

5. Створимо порожню форму JPanel

Примітка: рекомендується створити окремі пакети для представлень та моделей (див. проект з прикладом)

6. Додамо нашу модель, до нашої форми.

a. Вводимо повне ім’я класу нашої моделі-відображення

b. Перейменовуємо змінну моделі

Бажано у всіх вікнах змінній для моделі надавати однакову назву, а саме model.

c. На закладці «Властивості» також можна змінити назву поля і область його видимості,наприклад оголосити змінну публічно, щоб вона була доступна з інших форм, або додати код, для генерації властивостей.

7. Наповнюємо форму графічними елементами.

8. Для кожного поля установлюємо ім’я і опцію, не генерувати поле класу, для поля, щоб не було спокуси отримувати доступ на пряму до графічного елементу, а лише через модель.

Результати цього кроку можна спостерігати в проекті версії:
2 (55f1851eee3d) Initial forms and model, no bindings yet

9. Додамо прив’язку для поля введення тексту до нашої моделі:

=>

Зверніть увагу, що на закладці Advanced можна задавати додаткові параметри для прив’язки, перевірте самі як вони працюють:

Update Mode – і читання і запис з моделі/лише запис в модель з інтерфейсу/однократне заповнення графічного контролу з моделі

Update Source When – обновлення підчас введення, чи після завршення введення (натиснення Enter, або Tab)
Conversion – використовує Converter, який дозволяє змінювати тип до якого ми прив’язуємося на довільний, наприклад властивість personBirdthDate типу Date, а текст бокс потребує рядок, в такому випадку необхідно написати свій DateConverter, який буде здійснювати двобічне перетворення типів.

Valication – попередня валідація введених користувачем даних, наприклад обмеження на введення тільки чисел.

10. Прив’яжемо jLabel3 (lblPersonName) аналогічно як текстове поле.

11. Прив’яжемо lblPersonName2 з використанням користувацької формули зв’язування

Результат в проекті версії:

3 (2a86321da5cb) Simple bindings.

Дата добавления: 2014-12-24