Разработка инструментов моделирования объектно-ориентированных программных систем основанных на языке UML и интегрированных среду Eclipse.

Save this PDF as:
 WORD  PNG  TXT  JPG

Размер: px
Начинать показ со страницы:

Download "Разработка инструментов моделирования объектно-ориентированных программных систем основанных на языке UML и интегрированных среду Eclipse."

Транскрипт

1 Разработка инструментов моделирования объектно-ориентированных программных систем основанных на языке UML и интегрированных среду Eclipse. Владимир Юрьевич Романов, Московский Государственный Университет им. М.В.Ломоносова Факультет Вычислительной Математики и Кибернетики

2 Раздел 3. Graphical Editing Framework базовый инструмент построения графического интерфейса для систем моделирования

3 Graphical Editing Framework GEF Draw2d Интерактивный уровень Отображение Модель-Вид Интеграция с верстаком Перерисовка Планировка Печать SWT canvas Уровень взаимодействия с аппаратурой

4 Введение в Draw2d Представляется отдельным подключаемым модулем Легковесная графическая система (работает на одном потоке управления) Используется GEF для рисования графических примитивов Обрабатывает события от мыши Изображения строятся из фигур аналогов окон Фигуры располагаются на различных уровнях изображения

5 Draw2d. Фигуры SWT Canvas Draw2d События: Фигура Paint Mouse Key Focus Фигура Фигура Фигура Фигура Фигура

6 Draw2d легковесная система Графическая система работает в рамках одного легковесного потока управления Графические объекты (фигуры) трактуются как окна не прямоугольной формы В отличие от «прямоугольных» графических систем фигуры позволяют создавать сложные изображения не потребляя много ресурсов системы Фигуры могут быть вложены друг в друга Фигуры могут принимать фокус ввода Фигуры могут принимать события от мыши Фигуры имеют собственную координатную систему Фигуры имеют собственный курсор

7 Порядок рисования и поиска фигур в иерархии 1 Фигуры образуют дерево Родители отсекают детей по границам Последний нарисованный наверху Поискнажатоймышьюфигурыв обратном порядке

8 Функциональные возможности фигур (1) Регистрация и дерегистрация «слушателей» фигур Уведомление слушателей фигур о нажатии мыши над фигурой Уведомление слушателей о структурных изменениях в иерархии фигур, в перемещении и изменении размера фигур Манипуляция иерархией фигур Добавление и удаление фигур-детей Операции доступа к фигурам-родителям и фигурам-детям Задание планировщика размещения фигур Задание положения и размера фигуры

9 Функциональные возможности фигур (2) Задание курсора мыши, показываемого при проходе мыши над фигурой Задание подсказки, показываемой при проходе мыши над фигурой Задание фокуса ввода и считывание его текущего положения Описание прозрачности и видимости фигуры Выполнение преобразования координат Рисование фигуры

10 Подкласс фигур Shape Shape (Шейп) Могут сами себя заполнить и нарисовать границы с конфигурируемыми толщиной и типом линии границы Возможно рисование в режиме исключающего ИЛИ (XOR) Примеры подклассов класса Shape: Ellipse Triangle Rectangle Rounded Rectangle Polyline Polygon

11 Подкласс фигур Widget Widget (Управляющий элемент) Фигуры, позволяющие выполнять ввод информации в приложения использующие подключаемый модуль Draw2D Примеры управляющих элементов Button (Кнопка ) Check Box (Переключатель) Label (Метка)

12 Подклассы фигур Layer и Pane Layer (Уровень) и Pane (Панель) Эти фигуры предназначены для хранения фигур-детей. Позволяют выполнять масштабирование фигур Позволяют выполнять скруллинг (пролистывание) фигур Позволяют размещать фигуры на разных уровнях

13 Класс LightweightSystem Выполняет отображение панелей (canvas) SWT в модуль Draw2d. Содержит 3 компоненты: Корневая фигура класса LightweightSystem. Является «родительской» фигурой для корневой фигуры приложения. Наследует графическое окружение SWT: шрифт, основной и фоновый цвета Диспетчер событий: класс SWTEventDispatcher транслирует события SWT в соответствующие события Draw2D. Отслеживает какие события в фокусе, в какую фигуру направлены события мыши, для какой фигуры запрошена подсказка Менеджеробновления. Отвечаетзаперерисовкуиобновлениефигур. Метод performupdate() вызывается когда приходит запрос на перерисовку canvas на которых рисуются фигуры. Менеджер хранит списокфигуркоторыеизмененыилидолжныбытьперерисованы. Умалчиваемый менеджер DeferredUpdateManager позволяет выполнять обновления асинхронно, запрашивая выполнение этой работы через поток управления интерфейса пользователя.

14 Обработка событий

15 Основные возможности. Границы GroupBoxBorder - предоставляет границы используемые для группирования управляющих элементов TitleBarBorder границы аналогичные границам окон CompoundBorder граница, состоящая из двух границ FrameBorder аналог TitleBarBorder. Может использоваться для создания фигур внутри границ FocusBorder окружает фигуру границами, аналогичными изображению границ фигуры в фокусе LineBorder окружает фигуру линией заданной ширины MarginBorder невидимые границы (отступ от изображения фигуры) SchemeBorder границы имитирующие тени ButtonBorder границы имитирующие кнопку

16 Основные возможности. Планировщики (Layout) Планировщики используются для задания размеров и положения фигур-детей данной фигуры. FlowLayout располагает фигуры в строки или колонки DelegatingLayout делегирует размещение фигур локаторам этих фигур. Фигура должна предоставить экземпляр подкласса класса Locator в качестве ограничения (constraint) этой фигуры XYLayout помещает фигуру в пределы (положение и размеры) заданные прямоугольником ScrollPaneLayout используется для прокрутки изображения фигурспомощьюлинеекпрокруткииполяпросмотра (viewport). ViewportLayout используется для управления полем просмотра

17 Основные возможности. Уровни Уровни (Layers) прозрачные фигуры, предназначенные для использования панелях уровней (LayersPanes). Методы containspoint() и findfigureat() переопределяются так, что бы нажатие мышью «проходило сквозь» уровень FreeformLayer предоставляет дополнительные возможности уровня, который не имеет границ по всем четырем направлениям. Они не имеют фиксированных границ и начала. Их фигуры-дети могут иметь отрицательные координаты ConnectionLayer разновидность FreeformLayer, позволяющийдобавлятьфигуры-ребра (connection). LayerPanes фигуры предназначенные для хранения уровней. Предназначеныдлясоздания, добавления, вставки, хранения, переупорядочивания уровней

18 Ребра, декорации ребер, якоря и локаторы

19 Основные возможности. Локаторы (Locators) Классы, реализующие интерфейс Locator, предназначены дляразмещенияфигурприсоединенныхкребрам. Единственный метод интерфейса: void relocate(ifigure target); Подклассы класса ConnectionLocator используются для размещения фигур, которые присоединены к ребрам (connection). Они могут быть использованы для размещения стрелок на концах ребер или для размещения на ребрах другихобозначений (adorns) илинадписей. Локаторы предполагают, что фигура остается присоединенной к ребру в определенном месте при перемещении ребра

20 Основные возможности. Предопределенные локаторы ArrowLocator предназначен для размещения стрелок на ребрах EndpointLocator предназначен для размещения конечных точек ребра MidpointLocator предназначен для размещения фигур в середине ребра ConnectionEndpointLocator - предназначен для размещения фигур в начале или конце ребра RelativeLocator предназначен для задания положения фигуры в относительныхкоординатах (от 0 до 1)

21 Основные возможности. Якоря ребер (Anchors) Anchor (якорь) представляет способ присоединения ребра к фигуре. Вычисляет точку соединения и сообщает зарегистрированным слушателям что конец ребра передвинут ChopboxAnchor вычисляет точку пересечения ребра и фигуры, при условии что ребро направлено к центру фигуры LabelAnchor подкласс класса ChopboxAnchor. Ребро должно быть направлено к текстовой метке (label). Положение якоря зависит от центраметки. EllipseAnchor вычисляет точку пересечения ребра и эллипса, при условии что ребро направлено к центру эллипса XYAnchor для задания якорей с фиксированной позицией

22 Основные возможности. Маршрутизаторы ребер (Routers) Router (маршрутизатор) используется для задания пути от одного якоря ребра до другого якоря ребра NullConnectionRouter просто рисует прямую линию от одного якоря до другого якоря AutomaticRouter базовый класс маршрутизаторов, которые предотвращают пересечение ребер BendpointConnectionRouter маршрутизатор для ломаной линии, точки который задает пользователь ManhattanConnectionRouter маршрутизатор для ломаной линии, отрезкикоторойвсегдарасположеноподуглом 90 градусов относительно друг друга

23 Построение диаграммы классов языка UML Узел графа на UML диаграмме классов

24 Структура узла графа на диаграмме классов

25 Создание фигуры содержимого узла public class CompartmentFigure extends Figure { public CompartmentFigure() { ToolbarLayout layout = new ToolbarLayout(); layout.setminoralignment(toolbarlayout.align_topleft); layout.setstretchminoraxis(false); layout.setspacing(2); setlayoutmanager(layout); setborder( new CompartmentFigureBorder() ); } public class CompartmentFigureBorder extends AbstractBorder { public Insets getinsets(ifigure figure) { return new Insets(1,0,0,0); } public void paint(ifigure figure, Graphics graphics, Insets insets) { graphics.drawline(getpaintrectangle(figure, insets).gettopleft(), temprect.gettopright()); } } }

26 Создание фигуры узла графа public class UMLClassFigure extends Figure { public static Color classcolor = new Color(null, 255, 255, 206); private CompartmentFigure attributefigure = new CompartmentFigure(); private CompartmentFigure methodfigure = new CompartmentFigure(); public UMLClassFigure(Label name) { ToolbarLayout layout = new ToolbarLayout(); setlayoutmanager(layout); setborder( new LineBorder(ColorConstants.black, 1) ); setbackgroundcolor(classcolor); setopaque(true); // Фигура не прозрачна. } add(name); add(attributefigure); add(methodfigure); public CompartmentFigure getattributescompartment() { return attributefigure; } public CompartmentFigure getmethodscompartment() { return methodfigure; } }

27 Создание ребер графа PolylineConnection c = new PolylineConnection(); ChopboxAnchor sourceanchor = new ChopboxAnchor(classFigure1); ChopboxAnchor targetanchor = new ChopboxAnchor(classFigure2); c.setsourceanchor(sourceanchor); c.settargetanchor(targetanchor); ChopboxAnchor якорь с точкой пересечения при направлении к центру узла PolylineConnection - ребро графа

28 Создание декорации ребра графа PolygonDecoration decoration = new PolygonDecoration(); PointList decorationpointlist = new PointList(); decorationpointlist.addpoint( 0, 0); decorationpointlist.addpoint(-2, 2); decorationpointlist.addpoint(-4, 0); decorationpointlist.addpoint(-2, -2); decoration.settemplate(decorationpointlist); c.setsourcedecoration(decoration); PolygonDecoration декорация в виде ромба

29 Создание меток для ребер графа ConnectionEndpointLocator targetendpointlocator = new ConnectionEndpointLocator(c, true); targetendpointlocator.setvdistance(15); Смещение Label targetmultiplicitylabel = new Label("1..*"); относительно c.add(targetmultiplicitylabel, targetendpointlocator); конца ребра ConnectionEndpointLocator sourceendpointlocator = new ConnectionEndpointLocator(c, false); sourceendpointlocator.setvdistance(15); Label sourcemultiplicitylabel = new Label("1"); c.add(sourcemultiplicitylabel, sourceendpointlocator); Надпись на ребре ConnectionEndpointLocator relationshiplocator = new ConnectionEndpointLocator(c, true); relationshiplocator.setudistance(30); relationshiplocator.setvdistance(-20); Label relationshiplabel = new Label("contains"); c.add(relationshiplabel,relationshiplocator); Конечная (target) точка ребра?

30 Создание меток для ребер графа (2) Метка ребра графа

31 Сборка диаграммы (1) public class UMLClassFigureTest { public static void main(string args[ ]) { Display d = new Display(); final Shell shell = new Shell(d); shell.setsize(400, 400); shell.settext("umlclassfigure Test"); } } LightweightSystem lws = new LightweightSystem(shell); Figure contents = new Figure(); XYLayout contentslayout = new XYLayout(); contents.setlayoutmanager(contentslayout); // Вставка изображения lws.setcontents(contents); shell.open(); while (!shell.isdisposed()) while (!d.readanddispatch()) d.sleep(); Фигуры дети могут иметь произвольные координаты Корневая фигура

32 Сборка диаграммы (2) Image classimage = new Image(d, UMLEditorPlugin.class.getResourceAsStream("zonnon_object.gif")); Image attributeimage = new Image(d, UMLEditorPlugin.class.getResourceAsStream("zonnon_variable.gif")); Image operationimage = new Image(d, UMLEditorPlugin.class.getResourceAsStream("zonnon_procedure.gif")); Создание изображений пиктограмм. Изображения должны лежать в одной директории с файлом UMLEditorPlugin.class

33 Сборка диаграммы (3) Font classfont = new Font(null, "Arial", 12, SWT.BOLD); Label classlabel1 = new Label("Table", classimage); classlabel1.setfont(classfont); Label classlabel2 = new Label("Column", classimage); classlabel2.setfont(classfont); final UMLClassFigure classfigure1 = new UMLClassFigure(classLabel1); final UMLClassFigure classfigure2 = new UMLClassFigure(classLabel2); Создание секций - заголовков в узлах графа

34 Сборка диаграммы (4) Label attribute1 = new Label("columns: Column[]", attributeimage); Label attribute2 = new Label("rows: Row[]", attributeimage); Label attribute3 = new Label("columnID: int", attributeimage); Label attribute4 = new Label("items: List", attributeimage); classfigure1.getattributescompartment().add(attribute1); classfigure1.getattributescompartment().add(attribute2); classfigure2.getattributescompartment().add(attribute3); classfigure2.getattributescompartment().add(attribute4); Создание секции атрибутов Создание секции атрибутов

35 Сборка диаграммы (5) Размеры узлов графа определяются размерами их секций contentslayout.setconstraint(classfigure1, new Rectangle( 10, 10, -1, -1) ); contentslayout.setconstraint(classfigure2, new Rectangle(200, 200, -1, -1) ); Задание начального положения узлов графа

36 Сборка диаграммы (6) contents.add(classfigure1); contents.add(classfigure2); contents.add(c); Сборка графа из двух узлов и одного ребра

37 Graphical Editing Framework. Назначение (1) Показать модель графически Организовать взаимодействие пользователя с моделью Обработать ввод пользователя с помощью мыши и клавиатуры Интерпретировать этот ввод Предоставить механизмы обновления модели Сделать изменения отменяемыми/повторяемыми

38 Graphical Editing Framework. Назначение (2) Предоставить интеграцию с «верстаком» (workbanch) Eclipse Посредством действий и меню Инструментов и подключаемых модулей Действий привязанных к клавишам Где используется GEF? В Редактируемых частях (EditorParts) и Видах (Views) Влюбомместе «верстака» Eclipse

39 Компоненты GEF Визуализатор (Viewer) основа для показа и редактирования модели Адаптер управляющего элемента SWT Предоставляет возможность выбора (Selection) элементов Редактируемая часть (EditPart) элементы внутри визуализатора Инструмент (Tool) интерпретируетвводпользователя. Представляет режим ввода Палитра (Palette) показывает доступные инструменты Стек команд (CommandStack) хранит команды (Commands) для их отмены или повторного исполнения Область редактирования (EditDomain) объединяет все вместе Графический редактор (GraphicalEditor) для построения редактируемых частей

40 Графическое отображение модели Фигуры не входят в состав модели В качестве основы для построения модели можно выбрать (EMF, XML/DOM) GEF работает с любой моделью Требования к модели: Необходим механизм уведомлений (notifications) Механизм сохранения и восстановления состояния модели (persist & restore) Команды (commands) работающие над моделью

41 Редактируемые части Редактируемые части (EditParts) описывают как элементы модели отображаются в визуальные фигуры и как эти визуальные фигуры себя ведут в различных ситуациях Обычно каждому классу элемента модели соответствует класс потомок класса EditPart GraphicalEditParts предоставляют графическое представление модели. Графическое представление фигура. ConnectionEditParts предоставляют графическое представление в виде ребер (connection) TreeEditParts используются для представления модели в виде дерева из управляющих элементов дерева SWT

42 Graphical Editing Framework. Модель и визуализатор Модель Редактируемые части GraphicalViewer (визуализатор) Фигуры

43 Графическая редактируемая часть и редактируемое ребро Имеет фигуру которая представляет часть модели Должна быть наследником класса AbstractGraphicalEditPart Переопределяет метод AbstractGraphicalEditPart.createFigure создающий фигуру при ее первом запросе Переопределяет метод AbstractEditPart.refreshVisuals обновляющий фигуру при изменении модели Представляет соединение (connection) между двумя редактируемыми частями: началом (source) и концом (target) Ребра присоединены к якорям ребер (connection anchor)

44 Объекты общения - запросы Запрос объект общения содержит информацию необходимую для отложенного выполнения запроса Существуют три основных типа запроса: CreateRequests (запросы создания) используются для создания нового элемента модели. Для ребер используется подкласс CreateConnectionRequest. GroupRequests (запросы группы) помещает в один запрос несколько редактируемых частей. ChangeBoundsRequests типичный запрос группы, изменяющий положение и размеры редактируемыхчастей. LocationRequests (запросы размещения) хранят координаты мыши. Например, SelectionRequest хранит координаты внутри выбранной редактируемой части, что можно учесть при действии выполняемом над частью.

45 Обработка запросов и команд

46 Политики редактирования Политики редактирования (EditPolicy) вносят в редактируемыечастифункциональностьредактирования. Редактируемая часть без политики не делает ничего. Этот прием делегирования в объектно-ориентированном проектировании Позволяет разделить не связанные задачи редактирования Позволяет динамически менять поведение редактируемой части Все политики разделены на категории. Каждая редактируемая часть может иметь только одну политику для каждой категории

47 Категории политик редактирования (1) РольКомпонента этоглавнаярольдлявсех фундаментальных операций непосредственно включающих элемент модели редактируемой части. Например, для операции удаленияэлементамодели. Этарольподходитвтехслучаях, когда запрос ничего не делает с интерфейсом пользователя, а только работает с элементом модели. Роль Ребро это разновидность роли Компонента для ребер Роль Контейнер эта категория политик предназначена для операций над детьми редактируемой части Роль Планировка вычисляет координаты для запросов и определяет положение детей редактируемой части Роль Контейнер дерева - соответствует редактируемой части TreeEditParts и операциям над деревом

48 Категории политик редактирования (2) Роль Графический узел (Graphical Node) используется для установления соединениями графических частей и управления ими. Роль Непосредственное редактирование используется для редактирования. Выполняется при двойном нажатии мышью на фигуре

49 Команды Команды (commands) реально модифицируют модель Командыупрощаютредактированиемодели, поскольку предоставляют поддержку: отмены и повторного исполнения команды конструирования новых команд из имеющихся Команды порождаются политиками редактирования

50 Graphical Editing Framework. Модель и визуализатор Модель Редактируемые части GraphicalViewer (визуализатор) Фигуры Запрос Команда

51 Корневая редактируемая часть Корневая редактируемая часть (RootEditPart) нестандартная графическая часть создающая однородное окружение для реальных редактируемых частей представляющих модель Это интерфейс между графическим визуализатором и графическими частями модели Существуютдве реализациикорневыхчастей: ScalableRootEditPart и ScalableFreeformRootEditPart. Обе предоставляют возможности разбиения изображения на уровни и масштабирования изображения Реализация ScalableFreeformRootEditPart допускает отрицательные координаты и поэтому изображения не ограничено по всем четырем направлениям

52 Создание редактора UML диаграммы