Меню (4) в IntelliJ Idea разделено на три строки:

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

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

3. Строка с навигационной цепочкой («Хлебные крошки») - показывает расположение открытого файла относительно корневой папки проекта.

Информационная панель (5), расположенная внизу, показывает последние сообщения, процесс выполнения задачи в фоновом режиме (не видно на рисунке), например, загрузка недостающих библиотек и зависимостей, загрузка плагинов и др., расположение курсора в рабочей области по маске [строка]:[столбец], тип конца строки, кодировка файла и информация о ветке репозитория используемой системы контроля версий.

Достоинствами среды разработки IntelliJ Idea являются:

- Компактные функциональные области, что приводит к расширению рабочей области.

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

- Возможность перехода в полноэкранный режим.

Для создания клиентского приложения будет использоваться фреймворк React. Это современный фреймворк (выпуск в 2013 году), который работает только на уровне представлений, т.е. он производит обработку кода и на выходе получается только HTML код страницы. Данный фреймворк часто сравнивают с другими, например, AngularJS. Однако данное сравнение будет являться неправильным с точки зрения функциональности. React работает только с представлением, а Angular имеет модули отправки запросов, маршрутизации и др. Однако с 2013 года прошло довольно много времени, и разработчики написали множество библиотек, реализующих ту или иную функциональность.

React - это фреймворк, который реализует компонентную модель приложения, т.е. разработчик составляет все приложение из маленьких «кирпичиков». Например, для написания списка товаров можно будет сделать компонент, который будет являться контейнером для позиций в списке и компонент, описывающий одну позицию, и в необходимом месте вставить компонент_контейнер, в котором будут компоненты_позиции списка. Также в React используется способ написания компонентов на диалекте, который совмещает HTML верстку и код на JavaScript и называется JSX. Это покажется сначала необычным и неудобным, однако данный способ написания удобен и к нему быстро можно привыкнуть.

К преимуществам React можно отнести следующее:

- Компонентная модель приложения - побуждает разработчика писать небольшие компоненты.

- Сочетание HTML и JavaScript в JSX делает компоненты понятными.

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

- JavaScript ориентированный фреймворк - вся разработка ведется на «чистом» JavaScript, в отличии от Angular, который расширяет HTML дополнительными атрибутами.

Часто в паре с React используют библиотеку Redux. Это библиотека реализует хранилище состояний для JavaScript приложений. Данная библиотека реализует однонаправленный поток данных со специфичными событиями и слушателями. Идея библиотеки заключается в том, что в приложении есть глобальное хранилище состояний, из которого можно получить состояние объекта, а изменить напрямую нельзя. Необходимо создавать дополнительные функции, в которых объекты передаются в функцию-отправитель (Dispatch) и создаются события - Action. События генерируются функцией dispatch и отправляются в обработчик (reducer). Обработчик получает объект, в котором обязательно должно быть указано поле тип. Именно в обработчике происходит изменение состояния в хранилище.

Для начала написания функционала редактора следует сверстать интерфейс приложения. Для этого необходимо разбить всю область на крупные компоненты. В макете можно выделить следующие области:

1. Верхнее меню с выпадающими списками.

2. Верхнее меню с функциональными клавишами.

3. Три окна:

a. Окно проекта - в этом окне будет строится дерево элементов.

b. Окно элементов - в нем можно будет выбрать и переместить элемент верстки на рабочую область.

c. Окно свойств элемента - выбрав элемент, данное окно будет заполнено возможными для данного элемента свойствами, такими как ширина, высота, цвет фона и другие свойства.

4. Рабочая область.

5. Строка состояния.

Так как окна имеют схожий функционал, а именно все окна можно перемещать, закрывать и изменять размер, то можно вынести функции в отдельный класс, что позволит использовать данный функционал, если потребуется создать окно с другими функциями. Верхние горизонтальные меню похожи, но они имеют общие функции, например, во вкладке «File» чаще всего размещаются функции сохранения и открытия проектов. В то же время данные функции дублируются во втором горизонтальном меню. Для того чтобы не повторять написание функций было решено создать компонент высшего порядка - это функция, которая принимает как параметр компонент, например, меню с кнопками, дополняет компонент_меню функциями и возвращает его как результат. Компоненты высшего порядка позволяют выносить код из компонентов в отельные файлы, чтобы не загромождать и отделить представление от бизнес_логики, а также использовать в другом месте описанные функции.

Построение страниц из блоков решено реализовать следующим образом:

1. Функциональный элемент, например, input «обернуть» в блок div, что позволит изолировать элемент.

2. В блоке с элементом создать перекрывающий слой, который будет прозрачным, чтобы закрыть для пользователя возможность изменять элемент, например, вводить значения в input.

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

4. Блоки, состоящие из элемента и перекрывающего слоя, можно перемещать только в рамках блока рабочей области, изначально это белая область в середине.

Библиотека, реализующая возможность перемещения объектов (Drag and Drop) называется interact.js. Данная библиотека упрощает работу с элементами, которые необходимо перемещать. Пример определения возможности перемещения элементам описан ниже:

interact('.draggable-element').draggable({

inertia: false,

autoScroll: false,

restrict: {

restriction: ".workplace-container",

endOnly: true,

elementRect: {top: 0, left: 0, bottom: 1, right: 1}

},

onstart: function (event) {

},

onmove: function (event) {

let target = event.target,

x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,

y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

target.style.webkitTransform =

target.style.transform =

'translate(' + x + 'px, ' + y + 'px)';

target.setAttribute('data-x', x);

target.setAttribute('data-y', y);

},

onend: function (event) {

}

})

В первой строке происходит вызов функции и передача селектора, который в данном случае является классом, для определения того, какие элементы можно перемещать, а какие нет. Далее задаются дополнительные параметры и функции, которые будут применяться к элементам страницы, которые будут соответствовать селектору. В данном случае в качестве параметров передаются следующие значения:

1. inertia - этот параметр отвечает за инертность при передвижении элемента, то есть при резком перемещении элемента, даже после того как пользователь отпустит кнопку, элемент будет продолжать перемещаться по инерции.

2. autoScroll - этот параметр отвечает за возможность расширять и пролистывать родительский блок при приближении переносимого элемента к краю.

3. restrict - параметр, отвечающий за ограничения, в данном случае передается объект, в котором указан родительский блок, за границы которого выходить нельзя.

4. onStart - функция, которая вызывается при старте передвижения элемента.

5. onEnd - функция, которая вызывается при завершении передвижения элемента.

6. onMove - функция, которая вызывается при каждом движении элемента.

В данном случае выполняет функциональную нагрузку только onMove. В ней описана логика передвижения элемента, а именно нахождение координаты по оси X и Y, задание значения свойству «Transform», чтобы элемент отображался в рамках родительского элемента в правильном месте, также задаются значения двух атрибутов элемента, которые нужны для библиотеки interact и отвечают за расположение элемента при следующем старте передвижения. На официальном сайте библиотеки имеются хорошие примеры написания функционала для перемещения, изменения размеров и др., но документация, описывающая функции, не покрывает всех возможностей библиотеки, что очень замедляет работу с библиотекой, т.к. приходится смотреть в исходном коде примера возможности работы библиотеки.

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

1. Блок - элемент, который включает в себя другие элементы в том числе и блоки, и поле ввода (input). Блок представляет собой обычный блочный элемент «div» и предназначен для разделения рабочей области на несколько частей, которые могут быть оформлены по_разному, а также только блоки могут включать в себя другие элементы.

2. Поле ввода - тег input с атрибутом type равным text.

3. Поле выбора - тег select.

4. Текстовое поле - тег span с текстом внутри, который можно настроить с помощью CSS свойств.

5. Ссылка - тег «a», которому можно задать атрибут «href».

6. Поле ввода многострочного текста - тег textarea.

7. Поле загрузки файлов - тег input с атрибутом type равным file.

Работа с элементами редактора предполагается следующим образом:

1. Открыть окно элементов «ToolBox».

2. Нажать на элемент, который необходим пользователю. Чтобы узнать название элемента необходимо навести на него и подождать около 2 секунд, появится всплывающая подсказка, которая реализована при помощи стандартных возможностей браузеров - заданием атрибута «title».

3. Элемент появится на рабочей области в левом верхнем углу.

4. Далее можно перемещать выбранный элемент на рабочей области.

Добавленные элементы будут отображаться в окне «Project». Это окно показывает все элементы, которые есть на рабочей области. В окне элементы объединяются в дерево, корнем которого является блок рабочей области. Изначально он называется «New Page». Все элементы имеют идентификатор, который представлен в виде Universal Unique Identifier (UUID), наименование, которое используется для отображения элементов в дереве проекта. Нажимая на название элемента в дереве проекта, можно выбрать элемент, т.е. он будет выделен, и будет доступно редактирование его свойств, о редактировании свойств будет описано далее. При перемещении элементов относительно одного блока, они не меняют расположение в дереве. Однако при перемещении элемента или блока в другой блок, происходит изменение дерева, и оно перестраивается с новыми данными. Как было описано ранее, при реализации используется Redux, поэтому структура дерева хранится в глобальном состоянии, а его изменение происходит в функции «rebuildTree» (см. Приложение H). В функции используется библиотека jQuery, которая упрощает работу с DOM структурой HTML страницы. С помощью нее выбираются все элементы, которые находятся на рабочей области, и далее происходит построение дерева из объектов, которые имеют следующие поля:

- Id - идентификатор, представлен UUID.

- Children - массив элементов, для которых данный элемент является родителем.

- ParentId - идентификатор родительского элемента, если есть. Берется из дополнительно введенного атрибута «data-parent».

- Name - наименование элемента. Берется из дополнительно введенного атрибута «data-name».

Далее пойдет описание окна свойств «Properties», которое позволяет изменять свойства выбранного элемента. Выбор элемента происходит при клике на элемент, который расположен в рабочей области, завершении передвижения элемента по рабочей области или клике на наименование элемента в дереве проекта. После того, как произойдет выбор элемента, т.е. идентификатор и сам элемент запишутся в хранилище состояний, окно свойств изменится: появятся поля с наименованиями свойств и их значениями, если их не было, или изменятся значения свойств на актуальные. После чего можно будет изменять значения свойств элемента, которые будут сразу же применяться к элементу. Например, у элемента можно изменить наименование, высоту, ширину, фон, цвет шрифта и др. свойства, которые доступны в языке CSS.

В редакторе реализована возможность создания нового, сохранение существующего и загрузка сохраненного проекта. Создание предполагает, что будет создана пустая рабочая область, т.е. потребуется всего лишь привести область в стандартное состояние. Сохранение и загрузка проектов предполагают использование какого_либо локального хранилища, например, localStorage, IndexedDB или WebSQL. Так как в требованиях указано, что будет использоваться Chrome 56 версии и выше, то лучше всего использовать IndexedDB. Это NoSQL хранилище на стороне клиента. Работа с этим хранилищем осуществляется по принципу работы с любой другой базой данных. Открыть базу данных, создать в ней хранилище, выполнить запрос на выполнение операции, дождаться обработки. Однако открытие на каждый запрос базы данных является трудоемким, кроме того IndexedDB может быть не во всех браузерах и не на всех версиях, поэтому было решено использовать библиотеку, которая использует один и тот же API для записи и чтения данных для трех видов хранилищ: localStorage, IndexedDB или WebSQL. Библиотека называется LocalForage. Она предоставляет API подобный LocalStorage, т.е. наименование функций и их результат напоминает работу с локальным хранилищем. Это сильно упрощает написание кода при работе с хранилищами. В данной библиотеке есть возможность настройки наименования хранилищ, что позволяет разделить все хранимые объекты на типы, например, проекты и история изменений.

Для сохранения проекта необходимо нажать на кнопку со знаком дискеты во втором горизонтальном меню сверху или выбрать в выпадающем меню «File Save». После этого появится модальное окно, где нужно ввести наименование проекта, при условии, что проект до этого не сохранялся, после чего произойдет сохранение проекта в хранилище. После этого проект будет в хранилище даже если пользователь закроет браузер. Однако проекты могут быть стерты если произойдет очистка данных вместе с чисткой того хранилища, в котором сохранены проекты. Загрузка проекта происходит следующим образом: пользователь нажимает на кнопку со знаком папки или выбирает в выпадающем меню «File Open», после чего всплывает модальное окно, в котором будут доступны все сохраненные проекты. В модальном окне каждый проект будет иметь название, дату создания или изменения и кнопку для открытия или удаления проекта из базы данных.

Помимо функций сохранения и открытия проектов, было реализовано масштабирование рабочей области. Для этого во втором горизонтальном меню сверху предусмотрено поле ввода значения, которое представляет собой проценты. Далее эти проценты переводятся в значение для CSS свойства transform делением на 100. Изменение масштаба происходит при изменении значения поля ввода. Также поле ввода имеет ограничения, например, нельзя вводить нечисловые значения и числа меньше нуля.

Заключение

Целью работы является реализация редактора графического интерфейса инструментального средства для конструирования веб_приложений. Для достижения цели были поставлены задачи:

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

2. Составить техническое задание.

3. Описать архитектуру с помощью диаграммы развертывания и компонентов.

4. Выполнить проектирование базы данных.

5. Описать статическую структуру приложения с помощью диаграмм классов и сотрудничества.

6. Выбрать цветовую схему для редактора графического интерфейса инструментального средства конструирования веб_приложений.

7. Создать прототип, макет интерфейса и сверстать каркас редактора графического интерфейса.

8. Реализовать функции и провести альфа_тестирование редактора графического интерфейса.

Для анализа были выбраны следующие системы:

- PragmaDev.

- Flexberry.

- Rational Software Architect.

Выбранные системы содержат инструмент для создания моделей с помощью UML диаграмм, например, Flexberry использует даже несколько диаграмм: классов, состояний, последовательностей, вариантов использования и др., а Rational Software Architect поддерживает 13 видов UML_диаграмм: диаграмма вариантов использования (use case), диаграмма хронометрирования, диаграмма состояний (State machine), диаграмма последовательностей, диаграмма пакетов, диаграмма объектов, диаграмма обзора взаимодействия (interaction overview) и др.

Этап проектирования включает в себя описание архитектуры с помощью языка UML, а именно диаграммы компонентов, и описание каждого компонента, которое представлено в главе 2. В ней описаны какие функции будут у каждого компонента системы, какие типы связей будут между серверами и др. Присутствует описание схемы базы данных, структуры классов и взаимодействия классов с помощью диаграммы сотрудничества.

На этапе реализации графического редактора инструментального средства конструирования веб_приложений была выбрана цветовая схема при помощи онлайн_инструмента Adobe Color CC, создан прототип интерфейса редактора с помощью онлайн_инструмента NinjaMock, создан макет интерфейса редактора при помощи инструмента Adobe Photoshop, сверстан редактор, и написаны основные функции редактора, которые включают в себя:

1. Возможность добавления элементов на рабочую область - будущую HTML страницу.

2. Возможность изменения свойств элементов, расположенных на рабочей области.

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

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

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

6. Возможность загрузки сохраненных проектов.

7. Возможность масштабирования рабочей области.

Хранение проектов в Chrome реализовано в локальном хранилище IndexedDB, которое является NoSQL хранилищем на стороне клиента. Это позволяет хранить проекты пользователя независимо от доступа к сети.

Следующим шагом в разработке инструментальных средств для конструирования веб_приложений будет настройка сервера базы данных, создание базы данных по описанной ранее схеме. Далее нужно запустить и настроить RabbitMQ. После этого можно приступать к написанию серверного приложения для системы, которое будет выполнять функции обработки запросов от клиентского приложения и инкапсулировать логику работы с базой данных. Далее нужно будет разработать алгоритм трансформации пользовательского интерфейса в модель. В конце следует приступать к разработке функций, которые будут выполнять вычислительные узлы. На каждом вычислительном узле будет выполняться набор функций, который требует высоких вычислительных мощностей, например, генерация исходного кода веб_приложения.

Библиографический список

1. ГОСТ Р ИСО 9241-210-2012 Эргономика взаимодействия человек-система. Часть 210. Человеко-ориентированное проектирование интерактивных систем. 2013.

2. ISO 9126 (ГОСТ Р ИСО / МЭК 9126-93) - "Информационная технология. Оценка программного продукта. Характеристики качества и руководство по их применению". 2001.

3. Лядова Л.Н., Серый А.П., Сухов А.О. Подходы к описанию вертикальных и горизонтальных трансформаций метамоделей // Математика программных систем: межвузовский сборник научных статей. 2012. C. 33-49.

4. Ю К. Применение Rational Software Architect в разработке, управляемой моделями и на основе шаблонов: Часть 2. Инструментальная поддержка разработки, IBM. [Электронный ресурс] // IBM Developers Works. URL: https://www.ibm.com/developerworks/ru/library/0116_yu (дата обращения: 13.03.2017).

5. Графический дизайн макета сайта - что это, как проходят работы // Intelwebs - URL: http://www.intelwebs.ru/design/ (дата обращения: 25.04.2017).

6. Программы для веб-дизайнера: где рисовать сайты? // GeekBrains - обучающий портал для программистов. URL: https://geekbrains.ru/posts/top_programms_for_design (дата обращения: 25.04.2017).

7. Baresi L., Garzotto F., Mainetti L., Paolini P. Meta-modeling Techniques Meet Web Application Design Tools // Fundamental Approaches to Software Engineering. 2002. C. 297-304.

8. Chapin N., Hale J.E., Khan K.Md., Ramil J.F., Wui-Gee Tan Types of software evolution and software maintenance // JOURNAL OF SOFTWARE MAINTENANCE AND EVOLUTION: RESEARCH AND PRACTICE. 2001. C. 3-30.

9. Czarnecki K., Eisenecker U. Generative programming. 1 изд. Boston: Addison Wesley. 2000.

10. de Lara J., Guerra E., Cuadrado J. Model-driven engineering with domain-specific meta-modelling languages // Software & Systems Modeling. 2013. т. 14, № 1. C. 429_459.

11. Frankel D. Model driven architecture. 1 изд. Indianapolis: Wiley. 2003.

12. Fuggetta A. A classification of CASE technology // Computer. 1993. т. 26, № 12. C. 25-38.

13. Haan J.D. 8 reasons why Model-Driven Development is dangerous - by Johan Den Haan [Электронный ресурс] // The Enterprise Architect. URL: http://www.theenterprisearchitect.eu/blog/2009/06/25/8-reasons-why-model-driven-development-is-dangerous (дата обращения: 10.02.2017).

14. Kuhn D.L. Selecting and effectively using a computer aided software engineering tool // Annual Westinghouse computer symposium. Pittsburgh: 1989.

15. Lu X., Wan J. Model Driven Development of Complex User Interface // CEUR Workshop Proceedings. 2007. №297.

16. Martнnez Y., Cachero C., Meliб S. Empirical study on the maintainability of Web applications: Model-driven Engineering vs Code-centric // Empirical Software Engineering. 2013. т. 19, № 6. C. 1887-1920.

17. Meesad P., Boonkrong S., Unger H. Recent Advances in Information and Communication Technology. 1 изд. // Springer International Publishing. 2016.

18. Mohagheghi P., Conradi R. An empirical study of software change: origin, acceptance rate, and functionality vs. quality attributes // Proceedings of the International Symposium on Empirical Software Engineering. 2004. №4. C. 7-16.

19. Overington M. Model-Driven Development today - TechRepublic, [Электронный ресурс] // TechRepublic. URL: http://www.techrepublic.com/article/model-driven-development-today (дата обращения: 11.02.2017).

20. Si Alhir S. Understanding the Model Driven Architecture (MDA) // Methods & Tools. 2003. №11. C. 17-25.

21. Wagner S., Deissenboeck F., Teuchert S., Girard J. Assuring Maintainability in Model-Driven Development of Embedded Systems // Model-Driven Software Development. 2008. C. 352-373.

22. Zolotas C., Diamantopoulos T., Chatzidimitriou K., Symeonidis A. From requirements to source code: a Model-Driven Engineering approach for RESTful web services // Automated Software Engineering. 2016.

23. Adobe Color CC // color.adobe.com - URL: https://color.adobe.com (дата обращения: 26.04.2017).

24. AMQP 0-9-1 Model Explained [Электронный ресурс] // RabbitMQ - URL: https://www.rabbitmq.com/tutorials/amqp-concepts.html (дата обращения: 10.02.2017).

25. Flexberry ASP.NET [Электронный ресурс] // Flexberry - URL: http://flexberry.ru/Flexberry/ForDevelopers/FlexberryASPNet (дата обращения: 10.02.2017).

26. Flexberry ORM [Электронный ресурс] // Flexberry - URL: http://flexberry.ru/FlexberryORM (дата обращения: 10.02.2017).

27. Flexberry Platform > Платформа > О платформе Flexberry [Электронный ресурс] // Flexberry - URL: http://flexberry.ru/Platform/AboutFlexberryPlatform (дата обращения: 10.02.2017).

28. Introduction [Электронный ресурс] // TTCN-3 - URL: http://www.ttcn-3.org/index.php/about/introduction (дата обращения: 10.02.2017).

29. NinjaMock - Online Mockup and Wireframing tool. Create Mockups in minutes [Электронный ресурс] // Ninjamock - URL: https://ninjamock.com (дата обращения: 26.04.2017).

30. PragmaDev - Modeling and Testing tools [Электронный ресурс] // PragmaDev - URL: http://www.pragmadev.com/index.html (дата обращения: 23.03.2017).

31. The Advantages and Disadvantages of Web Apps [Электронный ресурс] // Objectiveit.com - URL: http://www.objectiveit.com/blog/the-advantages-and-disadvantages-of-web-apps (дата обращения: 23.03.2017).

Размещено на Allbest.ru