Разработка пользовательского интерфейса Типовые проектные решения Бреслав А. А. Содержание    Сложность пользовательского интерфейса Model-View-Controller Паттерны, часто используемые при разработке интерфейса  Mediator  Composite  Command … Бреслав А.

Download Report

Transcript Разработка пользовательского интерфейса Типовые проектные решения Бреслав А. А. Содержание    Сложность пользовательского интерфейса Model-View-Controller Паттерны, часто используемые при разработке интерфейса  Mediator  Composite  Command … Бреслав А.

Разработка
пользовательского
интерфейса
Типовые проектные
решения
Бреслав А. А.
Содержание



Сложность пользовательского интерфейса
Model-View-Controller
Паттерны, часто используемые при
разработке интерфейса
 Mediator
 Composite
 Command
…
Бреслав А. А.
Паттерны проектирования. Введение
Графический интерфейс
пользователя (GUI)


Много объектов
Много настроек
 размеры
 внешний
…

и расположение
вид
Асинхронное взаимодействие
 нет четкой последовательности действий
 никто не знает, куда пользователь нажмет
следующий момент

в
Сложное поведение
 одно
событие может повлечь много других
событий
Бреслав А. А.
Паттерны проектирования. Введение
Выводы

UI сложен сам по себе
 обладает
сложной структурой
 обладает сложной логикой
 обладает собственными ограничениями,
продиктованными соображениями usability
Смешивание логики UI и логики
приложения вредит и тому, и другому
 UI нужно программировать отдельно от
всего остального

Бреслав А. А.
Паттерны проектирования. Введение
Архитектура UI-приложения

Необходимо разделить логику UI и
вычислительную логику («бизнес-логику»)
приложения
 Логика приложения может существовать без UI
 или возможны разные варианты UI для одной и той же
логики
в общем случае не может существовать без
логики приложения
 UI

Для этого применяется архитектура
Model-View-Controller
Бреслав А. А.
Паттерны проектирования. Введение
Model-View-Controller
Появилась в стандартной библиотеке
SmallTalk
 Описана в GoF
 Используется в

 MFC
(Document-View)
 Swing (Data Models)
Бреслав А. А.
Паттерны проектирования. Введение
Структура MVC

Модель (Model)
 Содержит всю бизнес-логику приложения
 Может существовать автономно
 Не знает об остальных частях архитектуры

Представление (View)
 Отвечает
за отображение данных модели для
пользователя
 Принимает пользовательский ввод

Контроллер (Controller)
 Отвечает
за взаимодействие модели и
представления
 Часто интегрируется с представлением
Бреслав А. А.
Паттерны проектирования. Введение
Роли компонент MVC

Может существовать множество
представлений для одной модели
 это
могут быть как различные по структуре
отображения (таблица, диаграмма)
 так и одинаковые (много окон редактора для
одного документа)

Контроллер
 вызывает
методы модели в соответствии с
действиями пользователя
 возможно, отвечает за обновление представления
при изменении модели
Бреслав А. А.
Паттерны проектирования. Введение
Тестирование UI

Тестировать UI трудно
 трудно
воспроизвести действия
пользователя
 трудно проверить реакцию системы

Частичное решение – подмена
представления
 Создаем
тестовое представление, не
меняя контроллер и модель
 Тестовое представление эмулирует ввод и
проверяет реакцию системы
Бреслав А. А.
Паттерны проектирования. Введение
Три понимания MVC
«Чистая» реализация
 Реализация, описанная в GoF
 Реализация, использованная в MFC


Существенные отличия: понимание
того, что такое контроллер
Бреслав А. А.
Паттерны проектирования. Введение
«Чистая» реализация MVC
Модель не знает о контроллере
 Модель не имеет непосредственной
связи с представлением
 Представление не знает о контроллере
 Представление не имеет
непосредственной связи с моделью
 Контроллер полностью реализует связь
между моделью и представлением

Бреслав А. А.
Паттерны проектирования. Введение
Оповещение в «чистой» MVC
model
controller
view
Input
Update
Changed
Update
Update
Бреслав А. А.
Паттерны проектирования. Введение
view
Плюсы «чистой» MVC

Минимизация зависимостей
 все

связи заключены внутри контроллера
Повторное использование
представлений
 можно
расценивать каждое отображаемое
поле как отдельную модель и собрать
композитный контроллер, объединяющий
контроллеры для таких микро-моделей
Бреслав А. А.
Паттерны проектирования. Введение
Минусы «чистой» MVC

Значительное дублирование структуры
 Представление
имеет структуру модели
 Методы контроллера повторяют логику
представления

Сложность реализации
 Много
классов
 Много оповещений
 Циклы оповещений
Бреслав А. А.
Паттерны проектирования. Введение
MVC, изложенная в GoF

Контроллер реализует только реакции
на действия пользователей
в
частности, модифицирует модель
Модель оповещает представление
 Представление читает данные из
модели (то есть знает о модели)

Бреслав А. А.
Паттерны проектирования. Введение
Оповещение в GoF-MVC
model
controller
view
Input
Update
Changed
Changed
Бреслав А. А.
Паттерны проектирования. Введение
view
Плюсы GoF-MVC

Контроллер легко подменить даже во
время выполнения
 контроллер

является стратегией
Реализация довольно проста
Бреслав А. А.
Паттерны проектирования. Введение
Минусы GoF-MVC
Представление жестко связано с
моделью
 Невозможно повторное использование
представлений

Бреслав А. А.
Паттерны проектирования. Введение
Версия MVC из MFC
(Document-View)

Представление и контроллер
реализуются одним классом
 Знают
друг о друге
 Знают о модели

Модель оповещает представлениеконтроллер
Бреслав А. А.
Паттерны проектирования. Введение
Оповещение в MFC-MVC
model
view/controller
Input
Update
Changed
Changed
Бреслав А. А.
Паттерны проектирования. Введение
view/controller
Плюсы MFC-MVC
Исключительная простота реализации
 Мало классов
 Мало оповещений

Бреслав А. А.
Паттерны проектирования. Введение
Минусы MFC-MVC
Логика контроллера не отделена от UI
 Классы View/Controller будут довольно
большими

Бреслав А. А.
Паттерны проектирования. Введение
Применение паттернов в MVC
Для оповещения об изменениях
используется Observer (Listener)
 В GoF-MVC контроллер является
стратегией (Strategy) взаимодействия
между представлением и моделью
 В «чистой» MVC контроллер является
посредником (mediator)

Бреслав А. А.
Паттерны проектирования. Введение
Mediator (Посредник)
Есть много объектов, связанных между
собой
 Задача: уменьшить количество
зависимостей
 Решение: вынести зависимости в
отдельный класс-посредник

Бреслав А. А.
Паттерны проектирования. Введение
Другие паттерны, связанные с UI
Composite (Компоновщик)
 Decorator (Декоратор)
 Proxy (Заместитель)
 Command (Команда)
 Memento (Хранитель)
 Prototype (Прототип)

Бреслав А. А.
Паттерны проектирования. Введение
Composite - Компоновщик
Структурирующий паттерн
 Составной объект выглядит так же как
одиночный
 Пример: оконный интерфейс

 Окно,
содержащее дочерние окна, имеет
тот же API, что и одиночное окно
Бреслав А. А.
Паттерны проектирования. Введение
Composite – реализация в Java
Общий интерфейс для композитных и
одиночных объектов
 Композитный класс

 реализует
этот интерфейс
 имеет набор дочерних объектов
 методы вызывают такие же методы от
дочерних объектов
Бреслав А. А.
Паттерны проектирования. Введение
Composite – пример кода (1)
public interface Processor {
void process(Object data);
}
public class CompositeProcessor implements Processor {
private final Processor[] children;
public CompositeProcessor(Processor... processors) {
children = processors.clone();
}
public void process(Object data) {
for (Processor child : children) {
child.process(data);
}
}
}
Бреслав А. А.
Паттерны проектирования. Введение
Composite – пример кода (2)
public class ValuePrinter
implements Processor {
public void process(Object data) {
System.out.println("value: " + data);
}
}
public class AddressPrinter
implements Processor {
public void process(Object data) {
System.out.println("address: " +
System.identityHashCode(data));
}
}
Бреслав А. А.
Паттерны проектирования. Введение
Composite – пример кода (3)
Processor valuePrn = new ValuePrinter();
valuePrn.process(10);
Processor addressPrn = new AddressPrinter();
Processor composite = new
CompositeProcessor(valuePrn, addressPrn);
composite.process(10);
/* Вывод:
value: 10
value: 10
address: 26399554
*/
Бреслав А. А.
Паттерны проектирования. Введение
Decorator





Задача: нужен объект с тем же интерфейсом,
что имеющийся, но добавляющий к
операциям дополнительные действия
Решение: создадим обертку, которая будет
выполнять дополнительные действия, а
остальное делегировать
Структурирующий паттерн
Частный случай Wrapper
Примеры
 checkedCollection
 FilterInputStream
Бреслав А. А.
Паттерны проектирования. Введение
Decorator – использование в UI

Создание дополнительных маркеров на
иконках
 стрелки
на ярлыках в Windows
 маркеры ошибок в Eclipse
Окна ввода с фильтрами
 Контроллеры с протоколированием

 поддержка
Бреслав А. А.
undo
Паттерны проектирования. Введение
Decorator – реализация в Java

Для описания API используется
интерфейс
 один
объект практически полностью
делегирует все действия другому

Возможна реализация с помощью
наследования и переопределения
методов
 такая
реализация не позволяет добавить
декоратор во время выполнения
Бреслав А. А.
Паттерны проектирования. Введение
Decorator – пример кода (1)
public interface TreeWalker {
void visit(Node node);
}
public class NoLeavesWalker implements TreeWalker {
private final TreeWalker impl;
public NoLeavesWalker(TreeWalker impl) {
this.impl = impl;
}
public void visit(Node node) {
if (node.getLeft() != null
|| node.getRight() != null) {
impl.visit(node);
}
}
}
Бреслав А. А.
Паттерны проектирования. Введение
Decorator – пример кода (2)
public class TreeSummer
implements TreeWalker {
private int sum = 0;
public void visit(Node node) {
sum += node.getData();
}
}
// Для суммирования значений только
// во внутренних вершинах
new NoLeavesWalker(new TreeSummer());
Бреслав А. А.
Паттерны проектирования. Введение
Proxy – Заместитель

Задача
 Инициализация
некоторого объекта – очень
трудоемкая операция
 Очень возможно, что полная инициализация не
понадобится
 То, что точно понадобится, можно получить
достаточно легко
 Нужно организовать ленивую инициализацию
Бреслав А. А.
Паттерны проектирования. Введение
Решение: Proxy

Вместо самого объекта использовать его
заместителя
 Поддерживает
тот же интерфейс
 Инициализирует только то, что легко
инициализировать
 Если понадобится, полностью инициализирует
объект и делегирует ему все действия

Специфичный случай декоратора
Бреслав А. А.
Паттерны проектирования. Введение
Proxy: пример

Картинки в документе HTML (или Word)
 Загрузка
– трудоемкое дело
 Для форматирования документа необходимо знать
только размеры
 Документ могут не прокрутить до очередной
картинки

Используем Proxy для картинок
 Информацию
о размерах получим быстро
 Изображения будем загружать в фоновом режиме
Бреслав А. А.
Паттерны проектирования. Введение
Command

Задача:
 вызов
операции из меню и toolbar
 постановка операций в очередь
 реализация undo
Решение: представить операцию в виде
объекта
 Паттерн поведения

Бреслав А. А.
Паттерны проектирования. Введение
Command – реализация в Java

Интерфейс Command содержит метод для
запуска команды и, возможно, метод для
отмены команды
 часто

эти методы не имеют параметров
Каждый объект команды хранит все
параметры команды
 поэтому

возможно undo
Дополнительная функция: проверка
возможности применения/отмены команды
Бреслав А. А.
Паттерны проектирования. Введение
Command – пример кода (1)
public interface Command {
void execute();
void undo();
}
private Queue<Command> commandQueue =
new LinkedList<Command>();
private Stack<Command> undoStack = new Stack<Command>();
public void runNextCommand() {
Command command = commandQueue.remove();
undoStack.push(command);
command.execute();
}
public void undo() {
undoStack.pop().undo();
}
Бреслав А. А.
Паттерны проектирования. Введение
Command – пример кода (2)
public class IncCommand implements Command {
private final int index;
public IncCommand(int index) {
this.index = index;
}
public void execute() {
array[index]++;
}
public void undo() {
array[index]--;
}
}
Бреслав А. А.
Паттерны проектирования. Введение
Memento – Хранитель
Задача: сохранить текущее состояние
объекта так, чтобы потом его можно
было восстановить
 Применение:

 Сохранение
настроек UI
расположение окон
 содержимое строк ввода

 Undo
Бреслав А. А.
Паттерны проектирования. Введение
Memento – реализация в Java


Необходимо отдать наружу объект, хранящий
состояние, но не раскрывать структуру этого
состояния
Создается интерфейс Memento
 методы

для сериализации
Класс, состояние которого нужно хранить
 создает
inner-класс, реализующий Memento
 умеет возвращать текущее состояние
 умеет восстанавливаться из данного состояния
Бреслав А. А.
Паттерны проектирования. Введение
Memento – пример кода
interface Memento { ... };
public static class ComplexState {
private static class MyMemento implements Memento {
// ...
}
private int state; // that complex state 
public Memento getMemento() {
return new MyMemento(state);
}
public void restoreFromMemento(Memento memento) {
MyMemento myMemento = (MyMemento) memento;
state = myMemento.state;
}
}
Бреслав А. А.
Паттерны проектирования. Введение
Prototype
Новые объекты создаются по
известным образцам
 Применение:

 палитра
инструментов векторного
редактора
 создание шаблонов документов
Бреслав А. А.
Паттерны проектирования. Введение
Prototype – реализация в Java

Для копирования объектов можно
использовать
 Cloneable
 стандартный механизм
 плохо работает с наследованием
 Нарушает принципы ООП: объекты создаются не
конструктором
 Конструктор копирования
 создает объект, в точности повторяющий существующий

Прототипы могут быть статическими
константами
Бреслав А. А.
Паттерны проектирования. Введение
Prototype – пример кода (1)
public class Matrix {
private static final int N = 3;
public static final Matrix ONE = new Matrix();
static {
for (int i = 0; i < N; i++) {
ONE.matrix[i][i] = 1;
}
}
public static final Matrix ZERO = new Matrix();
private int[][] matrix = new int[N][N];
private Matrix() {}
public Matrix(Matrix proto) {
matrix = proto.matrix.clone();
}
}
Бреслав А. А.
Паттерны проектирования. Введение
Prototype – пример кода (2)
// Создание единичной матрицы
new Matrix(Matrix.ONE);
// Создание нулевой матрицы
new Matrix(Matrix.ZERO);
Бреслав А. А.
Паттерны проектирования. Введение
Источники



Э. Гамма, Р. Хелм, Р. Джонсон, Дж. Влиссидес,
«Приемы объектно-ориентированного
проектирования. Паттерны проектирования»
М. Гранд, «Шаблоны проектирования в Java»
Bruce Eckel, «Thinking in Patterns with Java»
 http://www.mindviewinc.com/
Бреслав А. А.
Паттерны проектирования. Введение
Вопросы
Бреслав А. А.
Паттерны проектирования. Введение