РАЗРАБОТКА WEB- СОВМЕСТНОГО РЕДАКТИРОВАНИЯ …€¦ · Цель работы - спроектировать и реализовать web-клиент

МИНОБРНАУКИ РОССИИ

ТОМСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ

Факультет информатики

Кафедра программной инженерии

УДК 681.03

ДОПУСТИТЬ К ЗАЩИТЕ В ГАК

Зав. кафедрой, проф., д.ф.-м.н.

________________ О.А. Змеев

«___» ___________ 2012 г.

БАКАЛАВРСКАЯ РАБОТА

РАЗРАБОТКА WEB-КЛИЕНТА ДЛЯ СИСТЕМЫ

СОВМЕСТНОГО РЕДАКТИРОВАНИЯ ДИАГРАММ

по основной образовательной программе подготовки бакалавров

010400 – Информационные технологии

Лапов Андрей Владимирович

Руководитель ВКР, к.т.н.,

доцент

____________А.Н.Моисеев подпись

«_____»__________2012 г.

Автор работы

студент группы № 1481

_____________А.В.Лапов подпись

Электронная версия дипломной работы помещена

в электронную библиотеку. Файл

Томск – 2012

2

Реферат

Выпускная квалификационная работа 47 страниц, 21 рисунок, 7 таблиц, 14

источников, 3 приложения.

WEB 2.0, СОВМЕСТНОЕ РЕДАКТИРОВАНИЕ, MICROSOFT ASP.NET,

JAVASCRIPT, AJAX, COMET, ОБЪЕКТНО-ОРИЕНТИРОВАННЫЙ

ПОДХОД, WEB-ПРИЛОЖЕНИЕ.

Объект исследования - система совместного редактирования диаграмм.

Цель работы - спроектировать и реализовать web-клиент для системы

совместного редактирования диаграмм.

Методы исследования - объектно-ориентированный анализ и

проектирование, тестирование.

Основные результаты - разработан web-клиент в виде скрипта

JavaScript, который исполняет браузер пользователя, web-шлюз в виде

ASP.NET приложения, которое предоставляет web-клиенту необходимую

информацию с серверной части системы, оповещает ее об изменениях на

web-клиенте, а также оповещает web-клиента об изменениях на сервере.

Работа web-шлюза с web-клиентом ведется асинхронно, без полной

перезагрузки страницы браузером пользователя.

3

Оглавление

ВВЕДЕНИЕ .................................................................................................................................... 5

1 СИСТЕМА СОВМЕСТНГО РЕДАКТИРОВАНИЯ ДИАГРАММ ................................... 7

Актуальность системы ................................................................................................... 7 1.1

Особенности системы ..................................................................................................... 7 1.2

Архитектура системы ..................................................................................................... 8 1.3

Язык описания логики представления .......................................................................... 8 1.4

2 ПРОЕКТИРОВАНИЕ КЛИЕНТА ....................................................................................... 11

Модель вариантов использования ............................................................................... 11 2.1

Сценарии вариантов использования ........................................................................... 15 2.2

2.2.1 Создать диаграмму ................................................................................................ 15

2.2.2 Открыть диаграмму ............................................................................................... 16

2.2.3 Создать элемент ..................................................................................................... 16

2.2.4 Изменить свойство элемента ................................................................................ 17

2.2.5 Обработать создание элемента ............................................................................. 17

2.2.6 Обработать изменение свойства элемента .......................................................... 18

2.2.7 Выслать приглашение в проект ............................................................................ 18

Основные элементы системы ...................................................................................... 19 2.3

2.3.1 Web-шлюз ............................................................................................................... 19

2.3.1.1 Структурные диаграммы ................................................................................... 19

2.3.1.2 Диаграммы взаимодействия ............................................................................. 24

2.3.2 Web-клиент............................................................................................................. 24

2.3.2.1 Структурные диаграммы ................................................................................... 24

2.3.2.2 Обновление свойств .......................................................................................... 29

2.3.2.3 Диаграммы взаимодействия ............................................................................. 30

3 РЕАЛИЗАЦИЯ ..................................................................................................................... 31

Реализация web-шлюза ................................................................................................. 31 3.1

Реализация взаимодействия web-шлюза и web-клиента ........................................... 32 3.2

4

Реализация web-клиента ............................................................................................... 32 3.3

3.3.1 Машина разбора языка описания логики представления .................................. 33

3.3.2 Графическое отображение элементов ................................................................. 33

4 РУКОВОДСТВО ПОЛЬЗОВАТЕЛЯ .................................................................................. 35

ЗАКЛЮЧЕНИЕ............................................................................................................................ 41

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ .................................................................. 42

Приложение А. Контекст системы ............................................................................................ 44

Глоссарий .................................................................................................................................. 44

Модель предметной области................................................................................................... 45

Приложение Б. Пример функций машины разбора языка описания логики представления

....................................................................................................................................................... 46

Приложение В. Пример использования библиотеки Raphaeljs............................................... 47

5

ВВЕДЕНИЕ

В настоящее время сеть Интернет развивается довольно быстро. Это

связано с появлением новых и развитием старых подходов к реализации веб-

сервисов и веб-приложений. Одной из новых методик проектирования

систем является Web 2.0, которая появилась впротивовес старому Web 1.0.

Данный термин был определен Тимом О’Рейли в 2005 году. Web 2.0 не

является технологией или каким-то особым стилем Web-дизайна, а

определяет комплексный подход к организации, реализации и поддержке

Web-ресурсов. Основным отличием социальных сервисов Web 2.0 от первого

поколения является то, что Web 2.0 позволяет пользователям работать с

сервисами совместно.

Примером использования такого подхода является сервис Документы

Google [12]. Данный сервис позволяет, кроме всего прочего, редактировать

документы офисного типа в режиме реального времени сразу нескольким

пользователям. Совместное редактирование документов так же

предоставляет набор программных продуктов Microsoft SharePoint Products

and Technologies [13] (или SharePoint) компании Microsoft. К

вышесказанному можно добавить, что существует и множество других

подобных сервисов, некоторые из которых бесплатны, а стоимость

остальных невысока.

Совместная работа над документами очень важна для эффективной

командной работы в любой организации, в том числе и в организации,

занимающейся разработкой программного обеспечения. При проектировании

программного обеспечения большую часть документов составляют

диаграммы UML, при проектировании баз данных – диаграммы ER и др., для

моделирования бизнес-процессов – диаграммы SADT и др. Но большинство

сервисов, которые предоставляют возможность совместного редактирования

документов, ориентированы на документы офисного типа. Исходя из этого,

можно утверждать, что имеется потребность в системе, позволяющей

совместно редактировать диаграммы в режиме реального времени.

6

Разработка системы, которая предоставляет совместную работу с

диаграммами разного типа, уже ведется [1,14].

Целью настоящей работы является разработка web-клиента для данной

системы.

Для достижения поставленной цели требуется решить следующие

задачи:

• Реализовать машину разбора языка описания логики представления

• Реализовать графическое отображение элементов диаграммы

• Реализовать шлюз для взаимодействия с системой

Для решения задач использовались следующие инструменты.

Технология Microsoft ASP.NET применена для реализации web-шлюза, так

как данная технология содержит инструменты для реализации асинхронной

работы с клиентом, имеет преимущества в скорости перед скриптовыми

языками, а так же уже существуют библиотеки .NET с помощью которых

можно реализовать постоянное соединение с серверной частью системы.

Скриптовый язык JavaScript используется для реализации клиентской части

системы. Библиотека JQuery используется для реализации пользовательского

интерфейса, так как упрощает работу с языком JavaScript. Библиотека

Raphaeljs используется для реализации отображения элементов диаграммы на

экране пользователя, так как позволяет рисовать векторные изображения в

формате svg. Технология Ajax long polling используется для реализации

асинхронного взаимодействия web-клиента с web-сервером.

7

1 СИСТЕМА СОВМЕСТНГО РЕДАКТИРОВАНИЯ

ДИАГРАММ

В данном разделе рассмотрены актуальность и основные особенности

системы совместного редактирования диаграмм.

Актуальность системы 1.1

В настоящее время команда разработчиков может состоять из

множества специалистов и, так как при формировании команды большее

внимание уделяется способностям того или иного специалиста, нежели его

географическому расположению, группа высококвалифицированных

разработчиков может быть разбросана по всему миру, что напрямую влияет

на работу команды в целом.

Исходя из вышесказанного, можно утверждать, что для эффективной

работы команды программистов необходима система, позволяющая

совместно редактировать документы, в том числе диаграммы, при

проектировании программного приложения. Данная система позволит

достичь максимума интерактивности при работе с артефактами проектов.

Особенности системы 1.2

Система совместного редактирования диаграмм будет обладать

следующими ключевыми особенностями [1]:

Многопользовательская работа с диаграммами с синхронизацией в

режиме реального времени.

Расширяемость – возможность быстрого и удобного добавления

функционала к системе.

Кроссплатформенность.

Устойчивость клиента к изменению функционала системы.

8

Архитектура системы 1.3

С точки зрения разработки web-клиента архитектура системы имеет

следующий вид (рисунок 1).

Рис. 1. Архитектура системы

Разделение web-приложения на клиента и шлюз необходимо, так как

любое web-приложение состоит из двух частей. Клиентская часть, которая

выполняется браузером пользователя, обычно реализуется в виде скрипта

JavaScript. Серверная часть, которая предназначена для генерации html-

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

Таким образом, клиент, который отображает и предоставляет

пользователю возможность работы с диаграммами, взаимодействует с

сервером через шлюз. Клиентская часть системы выполняется на стороне

пользователя. В случае web-клиента, выполняется браузером пользователя.

Серверная часть находится на отдельном сервере и отвечает за хранение,

синхронизацию диаграмм и метаданных системы. Шлюз к серверной части

так же находится на отдельном сервере и предоставляет клиентской части

системы доступ к данным серверной части.

Язык описания логики представления 1.4

Одной из ключевых особенностей системы является специальный

язык описания логики представления, который используется для решения

задачи клиент-серверного взаимодействия. Клиент, который содержит

машину разбора языка описания логики представления, будет разбирать

данные, полученные от сервера, в формате определенным языком и

представлять их в удобном для обработки виде. Таким образом, решается

9

проблема кроссплатформенности клиентских приложений при расширении

функционала системы.

Объектная модель языка разметки [1] отображена на рисунке 2.

Рис. 2. Объектная модель языка разметки

Из модели, представленной на рисунке 2, следует, что элемент, из

которого стоится графическое представление, имеет два набора свойств

данных (DataProperty): свойства модели (modelProperties) и свойства

визуальной модели (viewProperties), которые синхронизируются с

соответствующими свойствами на сервере. А также каждый элемент имеет

графическое представление (Presentation), которое состоит из набора свойств

представления (PresentationProperty), и графических примитивов

(PresentationElement).

Использование данного языка можно рассмотреть на примере

некоторого графического элемента [1] на рисунке 3. Описывается элемент

пакет. У него есть одно модельное свойство – его имя. И четыре визуальных

свойства: координаты («x» и «y») и размер («width» и «height»). Элемент

состоит из трех графических примитивов: два блока и один текстовый блок.

В качестве базового языка для описания используется xml.

10

Рис. 3. Пример разметки

11

2 ПРОЕКТИРОВАНИЕ КЛИЕНТА

Модель вариантов использования 2.1

В рамках системы были определены следующие актеры:

Пользователь – идентифицировавший себя человек, который

использует систему для работы с диаграммами.

Сервер – серверная часть системы, отвечающая за хранение,

синхронизацию диаграмм и метаданных системы.

В ходе проектирования были выделены основные варианты

использования, представленные на диаграмме (рис. 4).

Рис. 4. Основные варианты использования

Вариант использования «Изменить свойство проекта» заключается в

изменении некоторого свойства проекта, например имени проекта.

Декомпозиция этого варианта использования представлена на рисунке 5.

12

Рис. 5. Декомпозиция варианта использования «Изменить свойство проекта»

Вариант использования «Работать с проектом» заключается в создании,

удалении, редактировании диаграммам проекта. Декомпозиция этого

варианта использования представлена на рисунке 6.

Вариант использования «Активировать лицензию для проекта»

выполняет активацию лицензии для созданного проекта с целью

дальнейшего приглашения в проект пользователей для совместной работы с

диаграммами проекта.

Вариант использования «Выслать приглашение в проект» выполняет

приглашение пользователя в проект для совместной работы с диаграммами

проекта.

Вариант использования «Получить тип диаграммы» заключается в

получении типа диаграммы. Выполняется при создании или открытии

проекта.

Вариант использования «Получить список элементов типов»

заключается в получении списка элементов типов для некоторой диаграммы.

Выполняется при получении типа диаграммы.

13

Вариант использования «Получить схему типа элемента» заключается

в получении схемы заданного типа элемента. Выполняется при получении

типа диаграммы.

Рис. 6. Декомпозиция варианта использования «Работать с проектом»

Вариант использования «Открыть диаграмму» заключается в открытии

созданной диаграммы с целью дальнейшей работы с ней.

Вариант использования «Получить состояние диаграммы» заключается

в получении текущего состояния запрашиваемой диаграммы. Выполняется

при открытии диаграммы.

Вариант использования «Работать с диаграммой» заключается в

создании, удалении редактировании элементов диаграммы. Декомпозиция

этого варианта использования представлена на рисунке 7.

Вариант использования «Изменить свойство элемента» заключается в

изменении некоторого свойства созданного элемента диаграммы.

Выполняется, например, при изменении координат элемента.

14

Вариант использования «Обработать создание элемента» заключается в

обработке сообщения сервера на создания нового элемента диаграммы.

Рис. 7. Декомпозиция варианта использования «Работать с диаграммой»

Вариант использования «Обработать удаление элемента» заключается в

обработке сообщения сервера на удаления созданного элемента диаграммы.

Вариант использования «Обработать изменение свойства элемента»

заключается в обработке сообщения сервера на изменения некоторого

свойства созданного элемента диаграммы.

15

Сценарии вариантов использования 2.2

Более детальное рассмотрение некоторых вариантов использования

представлено ниже.

В описании сценариев вариантов использования под системой

подразумевается клиентская часть системы.

2.2.1 Создать диаграмму

Таблица 1. Сценарий варианта использования «Создать диаграмму»

Имя варианта использования Создать диаграмму

Цель Создать диаграмму

Актеры Пользователь

Предусловия Выбран проект

Активатор Действия пользователя

Минимальные гарантии Диаграмма не будет создана

Актер Система

1. Задает имя новой диаграммы

2. Выбирает «создать новую диаграмму»

3. Проверяет допустимость имени диаграммы

4. Проверяет наличие необходимых данных для создания диаграммы данного типа

5. Создает новую диаграмму

Альтернатива 1

3. Проверяет допустимость имени диаграммы. Имя диаграммы не допустимо

4. Оповещает пользователя об ошибке


4. Проверяет наличие необходимых данных для создания диаграммы данного типа. Нет необходимых данных. Расширение (Получить тип диаграммы)

5. Возврат к пункту 5 основного сценария

16

2.2.2 Открыть диаграмму

Таблица 2. Сценарий варианта использования «Открыть диаграмму»

Имя варианта использования Открыть диаграмму

Цель Открыть диаграмму


Предусловия Выбран проект


Минимальные гарантии Диаграмма не будет открыта


1. Выбирает диаграмму в рамках проекта

2. Выбирает «Открыть диаграмму»

3. Проверяет наличие необходимых данных для открытия диаграммы данного типа

4. Включение (Получить состояние диаграммы)

5. Отобразить диаграмму пользователю


3. Проверяет наличие необходимых данных для открытия диаграммы данного типа. Нет необходимых данных. Расширение (Получить тип диаграммы)

4. Возврат к пункту 4 основного сценария

2.2.3 Создать элемент

Таблица 3. Сценарий варианта использования «Создать элемент»

Имя варианта использования Создать элемент

Цель Создать элемент


Предусловия Выбран документ


Минимальные гарантии Элемент не будет создан


1. Выбирает тип создаваемого элемента

2. Выбирает место создания элемента

3. Оповещает о создании нового элемента серверную часть системы

17

2.2.4 Изменить свойство элемента

Таблица 4. Сценарий варианта использования «Изменить свойство элемента»

Имя варианта использования Изменить свойство элемента

Цель Изменить свойство элемента




Минимальные гарантии Свойство не будет изменено


1. Выбирает элемент на диаграмме

2. Изменяет свойство некоторого элемента на диаграмме

3. Оповещает об изменении свойства элемента серверную часть системы

2.2.5 Обработать создание элемента

Таблица 5. Сценарий варианта использования «Обротать создание элемента»

Имя варианта использования Обработать создание элемента

Цель Обработать создание элемента

Актеры Сервер


Активатор Действия сервера

Минимальные гарантии Элемент будет создан


1. Оповещает систему о создании нового элемента на диаграмме

2. Создает новый элемент в локальном состоянии диаграммы

3. Отображает новое состояние диаграммы пользователю

18

2.2.6 Обработать изменение свойства элемента

Таблица 6. Сценарий варианта использования «Обработать изменение свойства элемента»

Имя варианта использования Обработать изменение свойства элемента

Цель Обработать изменение свойства элемента

Актеры Сервер


Активатор Действия сервера

Минимальные гарантии Свойство будет изменено


1. Оповещает систему об изменении свойства некоторого элемента

2. Изменяет свойство элемента в локальном состоянии диаграммы

3. Отображает новое состояние диаграммы пользователю

2.2.7 Выслать приглашение в проект

Таблица 7. Сценарий варианта использования «Выслать приглашение в проект»

Имя варианта использования Выслать приглашение в проект

Цель Выслать приглашение в проект


Предусловия Выбран проект и лицензия


Минимальные гарантии Приглашение не будет выслано


1. Задает Email пользователя

2. Выбирает "Выслать приглашение"

3. Проверяет существование пользователя по Email

4. Оповестить сервер о использовании лицензии для приглашения пользователя в проект

5. Сообщить пользователю, что приглашение выслано


3. Проверяет существование пользователя по Email. Пользователя не существует

4. Оповещает об ошибке


4. Оповестить сервер о использовании лицензии для приглашения пользователя в проект. Лицензия не действительна

5. Оповещает об ошибке

19

Основные элементы системы 2.3

Для реализации всех необходимых функций разрабатываемого web-

приложения, разработка разделяется на две части: серверную и клиентскую.

Под клиентской частью подразумевается часть приложения,

работающая на браузере пользователя в виде скрипта JavaScript. В данном

разделе определим термином «web-клиент» клиентскую часть

разрабатываемого приложения.

Под серверной частью подразумевается часть приложения, работающая

на отдельном сервере и выполняющая роль шлюза между клиентской частью

приложения, с помощью которой отображаются данные пользователю, и

серверной частью системы, на которой хранятся данные пользователя. В

данном разделе определим термином «web-шлюз» серверную часть

разрабатываемого приложения.

2.3.1 Web-шлюз

Служит для связи с серверной частью системы, для генерации web-

страниц, которые отображаются пользователю, для асинхронной связи с web-

клиентом.

2.3.1.1 Структурные диаграммы

Структура web-шлюза отображена на диаграмме классов (рис. 8).

Класс UserController служит для хранения информации об

авторизованном пользователе.

Класс User служит для хранения информации о конкретном

пользователе.

Класс ProjectClient служит для взаимодействия с сервером проектов.

20

Класс ProjectItem служит для хранения информации о конкретной

диаграмме проекта.

Класс ModelItem служит для хранения информации о модельной части

элемента диаграммы.

Класс ViewItem служит для хранения информации о визульной части

элемента диаграммы.

Класс ConcreteDiagramController предназначен для работы с некоторой

диаграммой. Содержит методы:

Метод OpenDiagram – предназначен для открытия конкретной

диаграммы. Входные параметры – экземпляры классов

ProjectClient и ProjectItem.

Метод ProcessMessage – предназначен для обработки сообщения,

посланного web-клиентом. Входной параметр – message типа

String.

Метод CreateItemOnClient – предназначен для создания элемента

на web-клиенте. Входной параметр – экземпляр класса ViewItem.

Метод CreateModelItemOnServer – предназначен для создания

модельного элемента на сервере. Входные параметры –

идентификатор типа элемента типа Guid и свойства элемента в

формате Dictionary<String, String>.

Метод CreateViewItemOnServer – предназначен для создания

визуального элемента на сервере. Входной параметр – экземпляр

класса ModelItem.

Метод UpdateViewPropertyOnServer – предназначен для

обновления свойства визуального элемента на сервере. Входные

параметры – идентификатор элемента типа Guid, имя свойства

типа String и заначение свойства типа String.

21

Метод UpdateViewPropertyOnClient – предназначен для

обновления свойства визуального элемента на web-клиенте.

Входные параметры – идентификатор элемента типа Guid, имя

свойства типа String и заначение свойства типа String.

Метод UpdateModelPropertyOnServer – предназначен для

обновления свойства модельного элемента на сервере. Входные



Метод UpdateModelPropertyOnClient – предназначен для

обновления свойства модельного элемента на web-клиенте.



Метод ShowAllItemsOnClient – предназначен для отображения

всех элементов данной диаграммы на web-клиенте.

Класс ProjectController предназначен для организации работы с

проектом. Предоставляет интерфейс контроллеру диаграмм для работы с

web-клиентом. Атрибут clientId – идентификатор клиента на CometServer-е

типа Guid. Предназначен для идентификации отдельного соединения с web-

клиентом. Необходим для того, что бы класс CometServer правильно

перенаправил посланное web-клиентом сообщение. Методы:

Метод ProcessMessage – предназначен для обработки и

перенаправления сообщения, посланного web-клиентом,

контроллеру диаграмм. Входной параметр – message типа String.

Метод NotifyClient – предназначен для отправки сообщения web-

клиенту. Входные параметры – тип сообщения типа String и тело

сообщения типа String.

22

Рис. 8. Диаграмма классов Web-шлюза.

23

Класс ProjectControllerManager предназначен для работы с проектами.

Содержит в себе контроллеры, отвечающие за конкретный проект. Методы:

Метод RegisterController – предназначен для регистрации

контроллера проектов. Входной параметр –экземпляр класса

ProjectController.

Метод RemoveController – предназначен для удаления

контроллера проектов. Входной параметр – экземпляр класса

ProjectController.

Класс AsyncHandler предназначен для приема и первичной обработки

сообщения, посланного web-клиентом. Метод RequestWorker предназначен

для обработки сообщения посланного web-клиентом и перенаправления его

контроллеру проектов. Входной параметр – Объект, который содержит в себе

сообщение.

Класс CometServer предназначен для посылания сообщения web-

клиенту. Методы:

Метод RegisterClient – предназначен для регистрации

контроллера проектов. Входной параметр - clientId типа Guid.

Метод UnRegisterClient – предназначен для отмены регистрации

контроллера проектов. Входной параметр - clientId типа Guid.

Метод PushMessage – преднозначен для посылания сообщения

web-клиенту. Входные параметры – экземпляр класса

CommetMessage и clientId типа Guid.

Класс CometConnectionClient предназначен для хранения информации о

каждом зарегистрированном контроллере проектов.

24

2.3.1.2 Диаграммы взаимодействия

Для того, чтобы показать, как устроена работа web-шлюза, рассмотрим

в качестве примера обновление свойств некоторого элемента.

При изменении модельного свойства некоторого элемента

пользователем, web-клиент оповещает об этом web-шлюз, который, в свою

очередь, оповещает сервер об этом изменении. Данная ситуация показана на

диаграмме коммуникации (рисунок 9).

Рис 9. Оповещение сервера об изменении модельного свойства web-клиентом.

При изменении модельного свойства некоторого элемента на сервере,

сервер оповещает web-шлюз об изменении этого свойства, а web-шлюз

сообщает web-клиенту эти изменения. Как это происходит показано на

диаграмме коммуникации (рисунок 10).

2.3.2 Web-клиент

Служит для обработки и отображения данных, полученных через web-

шлюз, с серверной части системы.

2.3.2.1 Структурные диаграммы

Структура web-клиента отображена на диаграмме классов (рис. 11). В

основе данной диаграммы лежит объектная модель языка разметки (рис. 3).

25

Рис. 10. Оповещение web-клиента об изменении модельного свойства сервером.

Класс Object предназначен для хранения информации о некотором

элементе диаграммы. Атрибуты:

Атрибут modelGuid типа Guid содержит идентификатор

модельной части элемента.

Атрибут viewGuid типа Guid содержит идентификатор

визуальной части элемента.

Атрибут type типа String содержит название типа элемента.

Методы:

Метод Draw – предназначен для первоначального отображения

элемента.

Метод Redraw – предназначен для перерисовки элемента.

Класс Reference предназначен для хранения информации о связях

некоторого элемента. Атрибут – type типа String содержит название типа

элемента, на которое идет ссылка.

Класс Presentation содержит информацию о графическом

представлении элемента.

Класс DataProperty предназначен для хранения свойств модели и

визуальной модели. Метод SetVal – предназначен для установки значения

свойства элемента. Входной параметр - val типа String.

26

Класс PresentationProperty предназначен для хранения свойств

представления. Метод SetVal – предназначен для установки значения

свойства элемента. Входной параметр - val типа String.

Класс PresentationElement предназначен для хранения информации о

элементарном графическом примитиве.

Методы:

Метод Draw – предназначен для первоначального отображения

примитива.

Метод Redraw – предназначен для перерисовки примитива.

Класс LongPolling предназначен для реализации асинхронной работы с

web-шлюзом, реализуя технологию Ajax long polling. Атрибуты:

Атрибут clientId типа Guid содержит идентификатор текущего

подключения.

Атрибут eventObservers – Хэш-таблица: ключ - имя события типа

String, значение – ссылка на функцию-обработчик события.

Атрибут responseObservers - Хэш-таблица: ключ - имя ответа

типа String, значение – ссылка на функцию-обработчик события.

Класс Parser представляет собой машину разбора языка описания

логики представления. Метод Parse – Предназначен для разбора xml в

текстовом формате. Входной параметр – xml типа String.

Класс Drawer предназначен для графического отображения элементов

на экране пользователя.

Класс Raphael предоставляется библиотекой Raphaeljs, используется

классом Drawer для графического отображения элементов диаграммы на

экране пользователя.

27

Класс Controller предназначен для хранения всех элементов

диаграммы, для разбора данных, поступающих от web-шлюза и для

формирования данных для отправки web-шлюзу. Методы:

Метод Parse – Предназначен для разбора xml в текстовом

формате. Входной параметр – xml типа String.

Метод CreateObject предназначен для создания нового элемента

диаграммы. Входной параметр args – Хэш-таблица: ключ типа

String и значение типа String. Содержит информацию для

создания нового элемента.

Метод UpdateViewPropertyOnServer – предназначен для

обновления свойства визуального элемента на сервере. Входные



Метод UpdateViewPropertyOnClient – предназначен для

обновления свойства визуального элемента на web-клиенте.



Метод UpdateModelPropertyOnServer – предназначен для

обновления свойства модельного элемента на сервере. Входные



Метод UpdateModelPropertyOnClient – предназначен для

обновления свойства модельного элемента на web-клиенте.



28

Рис 11. Диаграмма классов Web-клиента.

29

2.3.2.2 Обновление свойств

Взаимодействие свойств модели (DataProperty) и свойств

представления (PresentationProperty) реализовано с помощью шаблона

проектирования «наблюдатель».

Реализация данного шаблона представлена на диаграмме классов

(рисунок 12).

Рис 12. Реализация шаблона проектирования «Наблюдатель»

При создании нового элемента на диаграмме, каждое Property

подписывает на свое изменение всех зависящих от него PresentationProperty с

помощью метода ObserverAdd. Таким образом формируется список observers.

С помощью метода ObserverRemove можно удалить некоторый

PresentationProperty из списка observers. При изменении своего значения (в

методе SetVal) Property оповестит всех подписанных на него

PresentationProperty с помощью метода Notify. С помощью метода Update

происходит обновление свойств PresentationProperty.

30

2.3.2.3 Диаграммы взаимодействия

Для того, чтобы показать, как взаимодействует web-клиент с веб-

шлюзом, на следующих диаграммах коммуникаций отображено обновление

свойств некоторого элемента.

Если пользователь изменил модельное свойство некоторого элемента,

web-клиент оповестит web-шлюз об этом изменении следующим образом

(рисунок 13):

Рис 13. Оповещение web-шлюза об изменении модельного свойства пользователем.

При изменении модельного свойства некоторого элемента на сервере,

web-шлюз оповестит web-клиент следующим образом (рисунок 14):

Рис 14. Оповещение web-клиента об изменении модельного свойства.

31

3 РЕАЛИЗАЦИЯ

Реализация web-шлюза 3.1

Для реализации web-шлюза было решено использовать технологию

Microsoft ASP.NET [4].

ASP.NET - технология создания web-сервисов и web-приложений от

компании Microsoft. Писать код для ASP.NET можно используя практически

любые языки программирования, входящие в состав .NET Framework. Кроме

того, данная технология имеет некоторые преимущества в скорости по

сравнению со скриптовыми технологиями.

Кроме этого, ASP.NET предоставляет инструмент [5] для реализации

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

для реализации удобной работы всей системы в целом.

Была реализована работа с пользователями:

Аутентификация пользователей

Регистрация пользователей

Работа с проектами:

Создание нового проекта

Изменение свойств проекта

Создание новой диаграммы

Работа с лицензиями для проекта:

Активация лицензии для конкретного проекта

Приглашение в проект пользователя для совместной работы по

активированной лицензии

Работа с элементами диаграммам проектов:

Создание элементов диаграмм

Редактирование свойств элементов диаграмм

32

Реализация взаимодействия web-шлюза и web-клиента 3.2

Для асинхронной работы web-шлюза с web-клиентом используется

асинхронный обработчик http-данных [6] на стороне web-шлюза, в связке с

технологией Ajax long polling на стороне web-клиента.

Для реализации асинхронного обработчика http-данных создан класс

AsyncHandler, который реализует интерфейс IHttpAsyncHandler [6].

Асинхронный обработчик http-данных позволяет во время своей

работы запускать дополнительный внешний процесс и продолжает работать,

не ожидая завершения внешнего процесса.

Ajax с long polling позволяет имитировать постоянное соединение web-

шлюза (далее - сервер) с web-клиентом (далее-клиент) следующим образом:

1) Первоначально отправляется запрос на сервер, используя технологию

Ajax.

2) Сервер не закрывает соединение с клиентом, пока не произойдет какое-

либо событие или не истечет таймаут.

3) При возникновении события сервер отправляет ответ на запрос

клиента.

4) Клиент тут же отправляет новый запрос.

Таким образом, Ajax long polling в связке с асинхронным обработчиком

HTTP-данных позволяет организовывать асинхронную работу клиента с

сервером. Это дает возможность моментально оповещать об изменениях в

состоянии диаграмм, как со стороны клиента, так и со стороны сервера.

Реализация web-клиента 3.3

Web-клиент реализован в виде скрипта JavaScript, который исполняется

браузером пользователя.

33

3.3.1 Машина разбора языка описания логики

представления

Для реализации машины разбора языка описания логики

представления, так как этот язык базируется на XML, было принято

использовать библиотеку jQuery [3]. Кроме прочих, использовались

следующие функции этой библиотеки:

функция parseXML(), которая разбирает текстовый файл в формате

xml и предоставляет его в объектном виде ;

find(), которая по имени тэга возвращает массив дочерних тэгов в

объектном виде.

Сама машина представляет собой набор функций, которые

обрабатывают каждый из возможных тэгов языка и на основе разобранных

данных возвращают сформированный объект.

Пример таких функций приведен в приложении Б.

3.3.2 Графическое отображение элементов

Для графического отображения элементов диаграммы в браузере на

экране пользователя было принято использовать библиотеку Raphaeljs [2].

Raphaeljs поддерживает следующие версии браузеров:

Firefox версии 3.0 и выше

Safari версии 3.0 и выше

Chrome версии 5.0 и выше

Opera версии 9.5 и выше

Internet Explorer версии 6.0 и выше

Данная библиотека предоставляет интерфейс для работы с векторной

графикой в формате SVG. Raphaeljs использует объектно-ориентированный

подход к процессу рисования. К примеру, при рисовании круга получается

34

объект Круг, который можно сохранить для дальнейшей работы с ним

(изменять свойство круга, удалить, обработать клик мышки на круг и т.д.).

Используя данную библиотеку, были реализованы следующие

графические примитивы:

Прямоугольник

Линия

Текст

Пример использования библиотеки приведен в приложении В.

35

4 РУКОВОДСТВО ПОЛЬЗОВАТЕЛЯ

Главная страница (рисунок 15).

Рис. 15. Скриншот главной страницы.

Для работы с приложением необходимо авторизоваться. Для этого

перейдите с главной страницы, используя ссылку «Log In».

Для работы с проектами перейдите по ссылке «Projects»

Что бы узнать, какие приглашения в проекты у вас есть, перейдите по

ссылке «Invites»

Страница авторизации (рисунок 16).

Для того, чтобы авторизоваться, необходимо ввести адрес электронной

почты и пароль и нажмите на кнопку «Log in»

Для того, чтобы зарегистрироваться, перейдите по ссылке «Register» и

заполните все запрашиваемые поля (рисунок 17).

36

Рис. 16. Скриншот страницы авторизации.

Рис. 17. Скриншот страницы регистрации.

37

Страница принятия приглашения в проект.

Для того, чтобы принять приглашение в проект, кликните по кнопке

«Accept» выбранного проекта.

Страница работы с проектами (рисунок 18)

Рис 18. Скриншот страницы работы с проектами

Отображается список ваших проектов и список проектов, к которым вы

согласились присоединиться.

Для того, чтобы начать работу с некоторым проектом, перейдите по

ссылке с именем этого проекта.

Для того, чтобы изменить метаданные проекта, перейдите по ссылке

«(edit)» соответствующего проекта

Для того, чтобы создать новый проект, перейдите по ссылке «Create

new project» и заполните все соответствующие поля.

Страница метаданных проекта (рисунок 19).

38

Рис 19. Скриншот страницы метаданных проекта

Отображается имя проекта и активированные лицензии для этого

проекта.

Для того, чтобы изменить имя проекта, задайте новое имя в поле «New

name» и нажмите на кнопку «Change project name»

Для того, чтобы активировать лицензию для выбранного проекта,

введите код лицензии в поле «License key» и нажмите на кнопку

«Activate project license»

Для того, чтобы выслать приглашение другому пользователю в

данный проект, необходимо в поле «Email» соответствующее

доступной лицензии ввести адрес электронной почты приглашаемого

пользователя и нажать на кнопку «Send invite»

Страница работы с определенным проектом (рисунок 20).

39

Рис 20. Скриншот страницы работы с определенным проектом

Отображается список созданных диаграмм.

Для того, чтобы создать новую диаграмму, введите имя диаграммы в

советующее поле и нажмите кнопку «Create new diagram»

Для того, чтобы начать работу с некоторой диаграммой, выберите ее из

списка диаграмм и нажмите на кнопку «Connect to diagram»

После выбора диаграммы вы можете начать работу с диаграммой. На

рисунке 21 отображен процесс редактирования диаграммы проекта. В

диаграмме «Diagram3» созданы 4 пакета и установлены связи между

ними.

40

Рис 21. Пример работы с диаграммой

41

ЗАКЛЮЧЕНИЕ

В рамках данной работы был рассмотрен язык описания логики

представления системы совместного редактирования диаграмм [1], на его

основе была разработана машина разбора данного языка. Так же было

реализовано графическое представление элементов, описанных с помощью

языка описания логики представления. Кроме этого, был спроектирован и

реализован web-шлюз, который асинхронно взаимодействует с web-клиентом

на браузере пользователя и предоставляет ему всю необходимую

информацию с серверной части системы.

Таким образом, все задачи выполнены и цель работы достигнута.

Web-приложение было протестировано в совместной работе

несколькими пользователями.

42

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

1. Моисеев А. Н. Концепция системы поддержки командной

разработки программного обеспечения с синхронизацией в режиме реального

времени / А. Н. Моисеев, А. М. Политов, М. О. Хомич // Информационные

технологии и математическое моделирование (ИТММ - 2011) : Матер. X

Всерос. науч. - практ. конф. с междунар. участием (25 - 26 ноября 2011 г.) -

Томск, 2011. - Ч. I. - С. 69 – 71

2. Raphael - JavaScript Library: сайт библиотеки Raphael [Электронный

ресурс] // URL: http://raphaeljs.com/ (дата обращения: 20.02.2012).

3. JQuery: The Write Less, Do More, JavaScript Library: сайт библиотеки

jQuery[Электронный ресурс] // URL: http://jquery.com/ (дата обращения:

20.02.2012).

4. Microsoft ASP.NET: официальный сайт Microsoft ASP.NET

[Электронный ресурс] // URL: http://www.asp.net/ (дата обращения:

16.02.2012).

5. Прокопенко С. Статья на Habrahabr: сomet для ASP.NET своими

руками [Электронный ресурс] // URL: http://habrahabr.ru/post/82015/ (дата

обращения: 25.03.2012).

6. Microsoft MSDN: пошаговое руководство. Создание асинхронного

обработчика HTTP-данных [Электронный ресурс] // URL:

http://msdn.microsoft.com/ru-ru/library/ms227433.aspx (дата обращения:

21.03.2012).

7. Центральный JavaScript ресурс: длинные опросы (long poll)

[Электронный ресурс] // URL: http://javascript.ru/ajax/comet/long-poll (дата

обращения: 01.05.2012).

8. Сайт, посвященный объектно-ориентированному анализу,

проектированию и программированию: шаблон проектирования

http://raphaeljs.com/

http://jquery.com/

http://www.asp.net/

http://habrahabr.ru/post/82015/

http://msdn.microsoft.com/ru-ru/library/ms227433.aspx

http://javascript.ru/ajax/comet/long-poll

43

«наблюдатель» [Электронный ресурс] // URL:

http://ooad.asf.ru/Pattern.aspx?IdKat=7&IdPat=38 (дата обращения: 01.04.2012).

9. Буч Г. Язык UML : руководство пользователя : пер. с англ. / Г. Буч,

Д. Рамбо, И. Якобсон. – М. : ДМК Пресс, 2006. – 496 с.

10. Ларман К. Применение UML и шаблонов проектирования : пер. с

англ. / К. Ларман ; под ред. А. Ю. Шелестовой. – 2–е изд. – М. : Издательский

дом "Вильямс", 2004. – 624 с.

11. Приемы объектно-ориентированного проектирования: паттерны

проектирования: пер. с англ. / Э. Гамма [и др.]. – СПб. : Питер, 2001. – 368 с.

12. Документы Google: Google docs [Электронный ресурс] // URL:

https://docs.google.com/ (дата обращения: 15.12.2011).

13. Домашняя страница Microsoft: главная страница продукта

SharePoint [Электронный ресурс] // URL: http://sharepoint.microsoft.com/ru-

ru/Pages/default.aspx (дата обращения: 15.12.2011).

14. Политов А. М. Клиент-серверное взаимодействие в системе

поддержки командной разработки с синхронизацией в реальном времени. / А.

М. Политов, В. В. Рахимов, М. О. Хомич // Материалы 50-й Международной

научной студенческой конференции "Студент и научно-технический

прогресс": Информационные технологии. - Новосибирск, 2012. - С. 42

http://sharepoint.microsoft.com/ru-ru/Pages/default.aspx

http://sharepoint.microsoft.com/ru-ru/Pages/default.aspx

44

Приложение А. Контекст системы

Глоссарий

• Web-клиент (синонимы: клиент) – клиентская часть системы, которая

отображает документы непосредственно на компьютере пользователя и

предоставляет возможность их редактировать.

• Web-шлюз (синонимы: шлюз) – шлюз между Web-клиентом и

сервером, в котором реализован интерфейс взаимодействия клиента с

сервером.

• Сервер – серверная часть системы, отвечающая за хранение,

синхронизацию диаграмм и метаданных системы.

• Схема типа элемента (синонимы: схема)– структурное описание типа,

из каких атомарных элементов он состоит, какими свойствами

обладает.

• Тип документа – совокупность данных, таких как список типов с

соответствующими схемами, необходимых клиенту для

предоставления пользователю возможности работы с документом.

• Тип элемента документа (синонимы: тип)– описание набора элементов

с общими свойствами.

• Экземпляр документа (синонимы: документ) – совокупность

элементов, их свойств и связей, представляющих собой некоторый

смысл в рамках предметной области.

• Элемент документа (синонимы: элемент) – экземпляр допустимого

типа элемента для данного документа.

Примечание: В некоторых разделах, где детально рассматривается

взаимодействие web-клиента с web-шлюзом, данные термины могут

заменяться на «клиент» (Web-клиент) и «сервер» (Web-шлюз).

45

Модель предметной области

На рисунке А.1 отображена понятийная модель предметной области,

сформированная на основе терминов, используемых в данной работе.

Рис. А.1. Модель предметной области

46

Приложение Б. Пример функций машины разбора языка

описания логики представления

Функция для разбора тэга «model»:

function ModelParse(model) { var properties; $(model).find('properties').each(function () { properties = DataPropertiesParse(this); }); return properties; }

Функция для разбора тэга «Properties»:

function DataPropertiesParse(properties) { var temp = new Array(); $(properties).find('property').each(function () { var property = new DataProperty(); property.I = property; for (var i = 0; i < this.attributes.length; i++) { switch (this.attributes[i].name) { case 'name': property.name = this.attributes[i].value; break; case 'type': property.type = this.attributes[i].value; break; default: break; } } temp.push(property); }); return temp; }

47

Приложение В. Пример использования библиотеки

Raphaeljs

Создание квадрата, с соответствующими аргументами, изменение его

атрибутов, подписка обрабатывающих функций при возникновении

определенных событий:

var rect = paper.rect(parseInt(x), parseInt(y), parseInt(width), parseInt(height)); rect.attr({ fill: "#fff", stroke: "#000", "stroke-width": 1 }); rect.drag(Move, Drag, StopDragging);

this.drawedElement = rect;

Далее мы можем изменять атрибуты этого объекта, и соответствующее ему

изображение будет автоматически перерисовываться:

var rect = this.drawedElement; var att; att = { x: parseInt(x), y: parseInt(y), width: parseInt(width),

height: parseInt(height), "stroke-width": 1 }; rect.attr(att);

Documents

РАЗРАБОТКА WEB- СОВМЕСТНОГО РЕДАКТИРОВАНИЯ …€¦ · Цель работы - спроектировать и реализовать web-клиент