Разработка веб-редактора для описания лексико-семантических шаблонов на визуальном языке, Реализация клиентской части приложения - Разработка веб-редактора для описания лексико-семантических шаблонов на визуальном языке

Реализация клиентской части приложения

На языке 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. Графическое представление начала и окончания выражения правила шаблона

Похожие статьи




Разработка веб-редактора для описания лексико-семантических шаблонов на визуальном языке, Реализация клиентской части приложения - Разработка веб-редактора для описания лексико-семантических шаблонов на визуальном языке

Предыдущая | Следующая