Создание нового визуального языка
Для того, чтобы иметь возможность сгенерировать и собрать созданный в QReal редактор визуального языка, потребуется QtSDK и исходные коды QReal. Если собирать редактор не требуется, этот шаг можно пропустить.
- Установить QtSDK, скачав с сайта http://qt.nokia.com/downloads. После установки с помощью утилиты Maintain Qt SDK убедиться, что установлена последняя версия Qt для компилятора MinGW и сам компилятор.
- Добавить пути до утилит qmake и mingw32-make в системную переменную PATH. Например, требуемые пути могут быть такими: C:\QtSDK\Desktop\Qt\4.8.1\mingw\bin и C:\QtSDK\mingw\bin.
- Получить исходные файлы QReal из репозитория системы контроля версий git по адресу https://github.com/qreal/qreal.git.
- Выполнить команды qmake qrealSbt.pro и mingw32-make в корневой папке исходных файлов. Дождаться окончания сборки.
Запускаем QReal. При запуске появляется диалоговое окно «Выберите новую диаграмму»:
Рисунок 1.
В этом диалоговом окне предлагается выбрать редактор визуального языка, с помощью которого мы будем создавать диаграммы. Для разработки нового визуального языка необходимо выбрать из списка предложенных редакторов «Meta Editor». Нажимаем «Готово».
Замечание. Если вы работаете со средой QReal впервые, в списке редакторов будет только необходимый в данном случае Meta Editor, как показано на рисунке 1.
Далее появляется основное рабочее пространство системы:
Рисунок 2.
Слева располагаются «Обозреватель логической модели», «Обозреватель графической модели» и «Редактор свойств». В обозревателе логической модели расположен корневой элемент для создания метамодели языка с именем по умолчанию «(Metamodel Diagram)». В обозревателе графической модели расположен графический образ логического элемента. Именно графические элементы отображаются на диаграмме, расположенной в центре рабочего пространства системы, которое называется сценой. При клике на этот элемент в обозревателе логической модели его свойства отображаются в «Редакторе свойств» в нижнем левом углу:
Рисунок 3.
Здесь имеется возможность заполнять и изменять все необходимые свойства элементов. Изменять имя элемента можно также после двойного клика по нему в любом обозревателе модели (имена изменяются синхронно в логической и графической модели). Справа расположены «Миникарта» и «Палитра». Миникарта является уменьшенной версией сцены. Палитра содержит перечень элементов выбранного редактора. В верхней части находится выпадающий список доступных редакторов визуальных языков:
Рисунок 4.
Создаем простейший визуальный язык, состоящий из одного элемента и одной связи. В палитре находим элемент «Meta Editor Diagram» и перетаскиваем его на сцену. Этот элемент появляется в графической и логической модели. Поскольку графическая модель привязана к сцене, то в ней автоматически выстраивается соответствующая древовидная иерархия. Также автоматически выстраивается иерархия элементов логической модели, в соответствии с графической моделью (рис. 5).
Замечание. Вообще у одного логического элемента может быть несколько графических представлений, поэтому структура логической модели может принципиально отличаться от структуры графической. Но для генерации нового редактора иерархия в логической модели должна полностью соответствовать графической. Поэтому для метаредактора есть синхронизация логической модели по графической. Однако для других редакторах такого нет, т.е. иерархию логической модели надо выставлять вручную.
Рисунок 5.
Добавляем элемент, соответствующий диаграмме будущего языка. Для этого находим в палитре элемент «Node» и перетаскиваем его внутрь элемента «(Meta Editor Diagram)». Автоматически в обозревателе логической модели элемент «(Node)» будет перенесён в элемент «(Meta Editor Diagram)».
Таким же образом добавляем элемент, соответствующий элементу диаграммы создаваемого языка.
Рисунок 6.
Создаем элемент, соответствующий связи нового языка. Для этого в палитре находим элемент «Edge» и перетаскиваем его внутрь элемента «(Meta Editor Diagram)».
Замечание. Советуем периодически сохранять текущую метамодель языка с помощью кнопки «Сохранить» на панели инструментов. При первом сохранении появится стандартное диалоговое окно сохранения файлов.
Теперь у нас созданы основы для всех элементов будущего языка.
Заполняем свойства элементов языка.
Начнем с элементов типа «Node», соответствующих диаграмме и элементу диаграммы. Для корректной генерации необходимыми для заполнения являются свойства «name» и «displayedName». Для нашего языка зададим одному из элементов имя «SimpleDiagram» и displayedName «Простая диаграмма», второму элементу имя «SimpleNode» и displayedName «Простой элемент».
Замечание. Поле «name» может содержать только латинские буквы и цифры, начинаться должно обязательно с буквы.
Но чтобы элемент имел графическое представление (чтобы его можно было видеть в палитре и на сцене), необходимо задать ему форму. Для этого находим в редакторе свойств «shape» и нажимаем по соответствующему ему полю («Кликните для выбора»). Появляется новая вкладка «Редактор форм», представляющий собой упрощенный вариант стандартного векторного редактора изображения с некоторыми дополнительными возможностями, специфичными для метаредактора среды QReal. Для элемента SimpleDiagram зададим форму эллипса с помощью кнопки «Рисовать эллипс» (
), а также добавим элементу отображение его имени с помощью кнопки «Добавить динамический текст» (
) (см. всплывающие подсказки иконок):
Рисунок 7.
Нажимаем кнопку «Сохранить». Закрываем вкладку с редактором форм. Для элемента SimpleNode аналогичным образом задаем форму прямоугольника. Помимо этого для того, чтобы элементы можно было соединять с помощью связей, на форме элемента указываем места, куда может присоединяться связь. Для этого находим кнопку «Добавить точечный порт»(
) и добавляем точечные порты на картинку на соответствующие места:
Рисунок 8.
Теперь рассмотрим элемент типа Edge. Аналогичным образом обязательными для генерации являются поля «name» и «displayedName». Укажем у данного элемента имя «SimpleEdge» и displayedName «Простая связь».
Заполним свойства для элемента «(Meta Editor Diagram)». Для генерации обязательным полем для заполнения помимо имени и displayedName является поле «nodeName». В этом поле необходимо указать имя (“Name”) элемента языка, который обязан быть корневым для любой диаграммы на этом языке. В нашем случае мы указываем имя элемента-диаграммы «SimpleDiagram». Текущему элементу дадим имя «SimpleEditor» и displayedName «Простой редактор».
Заполним свойства, необходимые для сборки нового редактора. Для этого обратимся к свойствам элемента «(Metamodel Diagram)». В обязательном порядке заполняем следующие свойства: name (В нашем случае «SimpleMetamodel») , “Directory to generated code” и «relative path to QReal Source Files». Поле “Directory to generated code” содержит абсолютный путь до папки, в которую мы хотим сохранить метамодель созданного языка в xml-формате. Заполним его в нашем случае, к примеру, «D:/test». Поле «relative path to QReal Source Files» содержит путь от папки, в которую мы собираемся сохранить метамодель языка (т.е. “Directory to generated code” ), до папки с исходными файлами QReal (т.е. в которой находится основной файл qreal.pro). В нашем примере заполним это поле так: «../qreal». При создании Ваших собственных языков эти поля могут отличаться от приведенных примеров.
Перед непосредственной генерацией необходимо заполнить настройки компилятора. На панели инструментов находим меню Настройки->Параметры
В появившимся диалоговом окне выбираем пункт «Компилятор», далее либо выбираем операционную систему из имеющихся, либо самостоятельно прописываем параметры генерации. В нашем случае выбираем «Windows»:
Рисунок 9.
Нажимаем кнопку «Генерировать редактор» на панели инструментов.
Замечание. Если не заполнены необходимые поля или заполнены некорректно, в нижней части экрана появляется окно с сообщениями об ошибках с ссылками на элементы, в которых замечены эти ошибки. После исправлений следует повторить попытку генерации.
В случае успешной генерации среда предлагает автоматически загрузить сгенерированный редактор:
Рисунок 10.
Нажимаем «Yes».
После окончания процесса загрузки в выпадающем списке палитры мы можем выбрать наш новый «Простой редактор»:
Рисунок 11.
На этом языке теперь мы можем создавать простейшие диаграммы:
Рисунок 12.