Разработка веб-редактора для описания лексико-семантических шаблонов на визуальном языке, Реализация клиентской части приложения - Разработка веб-редактора для описания лексико-семантических шаблонов на визуальном языке
Реализация клиентской части приложения
На языке JavaScript, в соответствии с диаграммой классов, представленной в приложении Б, были разработаны объекты клиентской части приложения. В ходе разработки, возникла необходимость в создании класса "WebForm", который содержит обработчики событий для кнопок и объектов веб-редактора. Так же необходим метод "init", который, при запуске веб-формы связывает компоненты с их обработчиками событий. Так, всем кнопкам были назначены функции обработки события "onClick", а так же инициализирован обработчик события выделения графического объекта на диаграмме.
Реализация графического представления объектов
Библиотека для генерации векторных изображений Raphael. jsпредоставляет возможности по рисованию таких объектов как прямоугольник, эллипс, текст или линию. Однако, для создания объектов в соответствии с рисунком 2.7 необходимо соединить два объекта - прямоугольник и текст. Для этого используется "set", он объединяет объекты в массив, при этом, в XML представлении, они объединяются в тэг <g> или <group>. Даже после такого объединения фигуры будут вести себя как два отдельных объекта, поэтому было необходимо разработать алгоритм по их совместному передвижению при перетаскивании по холсту при нажатой кнопке мыши.
Функция "drag()" - предоставляет стандартный алгоритм для перемещения объектов, однако она может быть измененная по усмотрению разработчика, путем переопределения трех функций: начало передвижения, передвижение и окончание передвижения. Названия у них могут быть различными, главное, что их необходимо передать как параметры в функцию "drag"в правильном порядке. Прежде всего, для того, чтобы у объектов текста и прямоугольника была ссылка друг на друга, при создании объекта, определим для них атрибуты"pair": прямоугольник имеет значением атрибутатекст, а текст - прямоугольник. Таким образом, два объекта будут связаны друг с другом.
Для того, чтобы пользователю было видно, что фигура выделена и ее можно перетаскивать по холсту, выделим ее с помощью затемнения. Это действие производится в функции "preMoving", которая определяет действия, выполняемые над объектом при начале движения. После этого, необходимо вычислить начальные координаты фигуры. Ввиду того, что объектом может быть не только прямоугольник, но и эллипс, необходимо сделать проверку на тип фигуры, т. к. координаты разного типа фигур задаются по-разному. Вне зависимости от того, на какую из фигур попал пользователь (текст или прямоугольник), благодаря ассоциативной связке посредством атрибута "pair" возможно вычислить координаты парного элемента. На этом задачи функции заканчиваются. Функция "move" определяет порядок движения для пары фигур. Фактически, она меняет координаты xи y от ранее определенных в первой функции, в зависимости от передвижения. Функция "postMoving"убирает выделение объекта (затемнение), которое было сделано на первом шаге. Разработанные функции передвижения будут актуальны для всех подобных типов фигур - пар объектов фигура-текст, даже если текст не будет помещен внутри.
Для определения уникального внешнего вида объектов был создан класс Design, определяющий их внешний вид. При создании нового объекта необходимо указать его цвет, цвет и размер текста в нем и вид курсора мыши при наведении на объект. Таким образом было выделено два объекта - "Lookup"и "Token". Их графическое представление проиллюстрировано на рисунке 3.1:
Рисунок 3.1. Графическое представление объектов "Token" и "Lookup"
Для отображения начала и окончания диаграммы было решено сделать отличающиеся фигуры - эллипсы. При чем, Начало будет обозначено синим цветом, а выходы - зеленым и красным в соответствии с тем, желательный этот выход или нет (см. пункт 2.2). Графическое представление этих объектов представлено на рисунке 3.2:
Рисунок 3.2. Графическое представление начала и окончания выражения правила шаблона
Похожие статьи
-
Для того, чтобы строить диаграммы в соответствии с рисунком 2.7, необходимо реализовать алгоритм соединения двух объектов линией. Для отображения линии...
-
В ходе работы были достигнуты следующие результаты: Проведен обзор платформы GATE и языка для описания лексико-семантических шаблонов JAPE. Выявлена...
-
В ходе исследования был разработан веб-редактор для визуального языка в соответствии с требованиями, выделенными в главе 2, по результатам опроса...
-
Проектирование визуальных конструкций Вторая глава описывает процесс трансформации текстового языка JAPE в визуальный язык, который позволит описывать...
-
Для того, чтобы интерпретировать XML представление в язык JAPE, был использован язык преобразования XSLT [18]. Данный язык и будет служить транслятором,...
-
"WWWSQLDesigner" позиционируется как абсолютно бесплатный, доступный для пользователей, универсальный веб-редактор, значительно упрощающий процесс...
-
В главе рассмотрены существующие решения веб-редакторов, позволяющих создавать разного типа диаграммы и генерировать на их основе программный код. Так же...
-
JAPE позволяет анализировать текст на основе регулярных выражений. Грамматика этого языка состоит из фаз, которые сдержат в себе набор шаблонов и/или...
-
Ввиду того, что для языка JAPE не предусмотрен специализированный редактор, разработчики рекомендуют использовать Vim[10] или Eclipse[11], ассоциировав...
-
Лингвистический процессор GATE GATE представляет собой инфраструктуру для разработки и развертывания компонентов программного обеспечения, которые...
-
Введение - Разработка веб-редактора для описания лексико-семантических шаблонов на визуальном языке
Объем неупорядоченной и неструктурированной текстовой информации неуклонно растет, поэтому задача ее быстрой и качественной обработки актуальна сегодня...
-
База данных SQLite - Разработка мобильного приложения расчета и учета оплаты коммунальных услуг
Платформа Android предоставляет функции управления базой данных, которые позволяют сохранять сложные коллекции данных. Android также поставляется с...
-
Проектирование модели - Разработка программного приложения "Калькулятор коммунальных услуг"
При проектировании информационных систем предметная область отображается моделями данных нескольких уровней. Число используемых уровней зависит от...
-
Сеть Петри это двудольный направленный граф с маркировкой, ребра которого задают причинно-следственные отношения "события-условия" и именуются дугами....
-
Приложение разрабатывается в соответствии с паттерном проектирования Model-View-Presenter (MVP), который является производным от Model-View-Controller...
-
Общее описание программного обеспечения, реализующего разработанный алгоритм Основной идеей дипломного проекта, является реализация алгоритма...
-
Описание средств разработки, Разработка приложения, Описание программы - Разработка компьютерных игр
При реализации поставленной задачи были освоены компоненты графического движка Unity 3d. 1) Интерфейс графического движка Unity 3D, необходимого для...
-
Множество D с двумя заданными на нем операциями (плюс) и (умножение) называется диоидом, если выполнены следующие аксиомы: § Ассоциативность. §...
-
Описание алгоритмов Рассмотрим один из основных алгоритмов, задействованных в программе, - алгоритм передвижения мяча. Блок-схема алгоритма изображена на...
-
Концепция построения программы Список всех классов приведен на рисунке 3.1. Рисунок 3.1 - Диаграмма классов программы В качестве главного класса...
-
- рисуем графический примитив, например, эллипс у рыбки; - накладываем сверху на эллипс другой графический объект так, чтобы он закрывал часть эллипса; -...
-
Разработка клиент-серверной части проекта, то есть связь между клиентским приложением и базой данных, реализуется при помощи специальной библиотеки MySQL...
-
В качестве доступного инструментария были рассмотрены две открытые кроссплатформенные библиотеки для разработки C++ приложений WxWidgets и Boost ,...
-
Цель Работы - изучить приемы создания и использования шаблонов классов. - Теоретические сведения Достаточно часто встречаются классы, объекты которых...
-
Adobe Dreamweaver Adobe Dreamweaver - это HTML-редактор от компании Adobe, который на сегодняшний день очень известный. Первая его версия была выпущена в...
-
Стек технологий При выборе стека технологий основное внимание уделялось следующим факторам, в порядке убывания значимости: § Кроссплатформенность; §...
-
3.1 Описание программного модуля Jadex - это агент, ориентированный на собственный механизм принятия решений, взаимодействуя с XML и Java файлами,...
-
Поворот точки относительно центра на заданный угол: X = o. X + (p. X-o. X) * cos(angle) - (p. Y-o. Y) * sin(angle) Y = o. Y + (p. X-o. X) * sin(angle) +...
-
Сравнение аналогов - Разработка программы для реализации редактора временных графов синхронизации
Поскольку конечной целью работы был редактор сетей Петри, интегрированный с внешней библиотекой алгебраических вычислений, было рациональным рассмотреть...
-
В ходе разработки было создано пять форм, обеспечивающих взаимодействие между пользователем и приложением: - начальное окно выбора учебного года, курса и...
-
Введение - Разработка программы для реализации редактора временных графов синхронизации
Математическое моделирование дискретно-событийных динамических систем является относительно молодым направлением науки теории управления. Разработка...
-
Поскольку клиентская часть представляет собой приложение на базе операционной системы Android, то для ее разработки был выбран рекомендуемый...
-
Можно выделить три основных метода разработки программного обеспечения: 1. Конструкторы программ (Аlgoritm2, Devel Studio, MnCreator, Game Maker и др.)....
-
Рентгеновский симулятор - это аппарат для определения величины и положения (ориентации и удаления от излучателя) области облучения, а также маркирования...
-
В ходе разработки программы было использовано программное обеспечение Microsoft® Windows® "Подключение к удаленному рабочему столу" для извлечения...
-
В программе присутствуют следующие основные модули: - PlatformManager - DeviceManager - ScenariosManager - ScenarioEngine - ExportManager - ImportManager...
-
Разработка приложений ведется на языке Java, для этого потребуется специальное программное обеспечение. Самые новые версии системного программного...
-
Для слоя приложений чаще всего важен выбор не самого приложения, а той технологии, в соответствии с которой приложение создается. Это связано с тем, что...
-
Завершив выбор схемы работы системы и общего принципа работы ее частей и выбрав тип базы данных, следует перейти к выбору языка программирования....
-
Объектно-ориентированные языки - Инструментальные средства разработки экспертных систем
В главе 12 мы уже обращали ваше внимание на то, что формат правил хорошо согласуется с представлением знаний в форме "при выполнении условий СЬ ..., С"...
Разработка веб-редактора для описания лексико-семантических шаблонов на визуальном языке, Реализация клиентской части приложения - Разработка веб-редактора для описания лексико-семантических шаблонов на визуальном языке