CC BY
27
УДК 519.710.5:004.8
Кириллов Н.Д., Кольцова Э.М., Соколов А.П.
РАЗРАБОТКА ВЕБ-ОРИЕНТИРОВАННЫХ ДИНАМИЧЕСКИХ ПОЛЬЗОВАТЕЛЬСКИХ ИНТЕРФЕЙСОВ ДЛЯ РАСПРЕДЕЛЕННЫХ СИСТЕМ ИНЖЕНЕРНОГО АНАЛИЗА
Кириллов Никита Дмитриевич, студент 4 курса бакалавриата факультета информационных технологий и управления, e-mail: nik2010spartak@yandex.ru;
Кольцова Элеонора Моисеевна, д.т.н., профессор, заведующая кафедрой информационных компьютерных технологий;
Российский химико-технологический университет им. Д.И. Менделеева, Москва, Россия 125480, Москва, ул. Героев Панфиловцев, д. 20
Соколов Александр Павлович, к.ф.-м.н., доцент кафедры систем автоматизированного проектирования, Московский государственный технический университет им. Н.Э. Баумана, Москва, Россия
В данной работе созданы модули построения и отображения адаптивных динамических пользовательских графических интерфейсов в клиентской веб-ориентированной среде. Модули построения принимают на вход данные из таблиц и представляют их в удобном для пользователя виде. Разработка велась на языках HyperText Markup Language, Cascading Style Sheets, JavaScript и Python.
Ключевые слова: динамический пользовательский графический интерфейс, веб-приложение, адаптивный веб-продукт.
DEVELOPMENT OF WEB BASED DYNAMIC USER INTERFACES FOR DISTRIBUTED SYSTEMS ENGINEERING ANALYSIS
Kirillov N.D., Koltsova E.M., Sokolov A.P.*
D. Mendeleev University of Chemical Technology of Russia, Moscow, Russia * Bauman Moscow State Technical University, Moscow, Russia
In this paper, modules for constructing and mapping adaptive dynamic user interfaces in a client-oriented web-based environment have been created. The building modules take input from the database and present them in a user-friendly form. The development was conducted in the languages HyperText Markup Language, Cascading Style Sheets, JavaScript and Python.
Keywords: dynamic graphical user interface, web application, responsive web product.
Введение
В настоящее время системы инженерного анализа, которые предназначены для расчета, анализа и прогнозирования физических и химических свойств, развиваются очень быстрыми темпами. И уже сейчас, помимо консольных персональных разработок, эти системы активно создают и поддерживают продукты, работающие в сети Интернет, которые связаны с веб-программированием. Такие продукты в большинстве случаев представляют собой веб-клиент, который расположен на сервере системы. К веб-клиенту можно обратиться с помощью браузера и, если имеется доступ, также провести какие-либо действия в этом клиенте.
Особенностью такого продукта является то, что он предоставляет удаленный доступ. Когда пользователь использует продукт для персонального компьютера, он привязан к машине, на которой выполняются действия. Когда мы говорим о веб-программах, то нужно отчетливо понимать, что их преимущество в том, что необходимо иметь всего лишь выход в сеть Интернет, чтобы пользоваться всеми возможностями [1].
Очевидно, что с развитием веб-технологий также развиваются средства и инструменты в этой области. Это оказывает влияние на все системы, в том числе
и системы инженерного анализа, работающие в веб-среде. Влияние заключается в качестве таких систем. Под качеством следует понимать скорость обработки запросов информации и вывода ее пользователю, максимальные вычислительные нагрузки на сервер, а также уровень графического представления для пользователя.
Теоретическая часть
Рассмотрим подробнее графическое
представление: его качество во многом определяет весь уровень системы для пользователя. Самое главное для современных систем - удобство и очевидность интерфейса. Чем понятнее для человека будет то или иное графическое отображение, тем лучше и продуктивнее будет деятельность отдельного человека, а впоследствии и всей системы в общем. Поэтому сейчас многие кампании вкладывают огромные денежные и материальные средства для разработки все новых и улучшенных программных обеспечений именно для человека, а не для машины. Это делается, чтобы повысить уровень прикладных программ, которые влияют на пользовательский графический интерфейс. С этой же целью и созданы модули в данной работе, о которых далее пойдет речь.
Эти модули созданы в рамках распределенной вычислительной системы GCD, которая ведет свою деятельность с 2004 года в области композиционных материалов. Как и весь веб-клиент, модули глобально представляют собой две части: frontend -визуальная часть, backend - серверная часть. Эти части связаны друг с другом и практически не могут функционировать по отдельности.
Frontend часть состоит из шаблонов html, а также скриптов и стилей для этих шаблонов. Backend часть представляет собой исполняемые файлы и плагины, реализованные на языке Python. Взаимодействие этих частей обеспечивает a/ax-протокол.
Практическая часть
Древовидное представление данных. Итак, рассмотрим первый модуль построения пользовательского графического интерфейса. Этим модулем решается задача представления данных субплагинов системы, которые содержатся в БД, в табличном древовидном отображении.
Древовидное представление данных таблицы БД возможно в случае, когда для таблицы-источника определен внешний ключ, ссылающийся на эту же таблицу. То есть, по сути, в обычной таблице элементы можно разделить на родительские и дочерние.
Как уже было сказано, разработка модуля ведется на двух частях. В серверной части этого
Также важно отметить, что в разработке использовался внешний плагин JavaScript, который называется tree-table.js. Этот плагин позволил правильно представить атрибуты данных в соответствии с требованиями работы.
Групповое представление данных. Следующий модуль, который был разработан, осуществлял построение графического интерфейса со сгруппированными данными. Такие данные являются очень полезными в том случае, если имеется большое количество записей в таблице и есть необходимость отсортировать данные по одному или нескольким полям.
Как и в предыдущем модуле, в этом разработка ввелась как в серверной части, так и в визуальной. В серверной части опять же была разработана
модуля была разработана отдельная функция, которая выполняя запрос к БД, создавала справочник значений и вызывала шаблон tree-tab letemplate.html.
Затем, как только был определен тип данных для работы, успешно разработан шаблон для представления данных в древовидном виде. Этот шаблон получал данные от функции серверной части. Эти данные структурировались и записывались в таблицу. Как только встречался элемент, содержащий дочерние элементы, то шаблон с помощью рекурсивной функции начинал обрабатывать дочерние элементы. Особенность реализации такой работы состояла в следующих требованиях:
- у дочерних элементов, которые имеют внешний ключ, ссылающийся на другие данные, этот ключ обязательно нужно скрыть для устранения избыточности данных;
- сами дочерние элементы также следует скрывать, а у родительского - поместить кнопку, при нажатии на которую дочерние элементы станут видимыми;
- помимо ключей элементов также необходимо представить и атрибуты этих данных, которые содержатся в соседних ячейках таблицы.
В соответствии с требованиями, описанными выше, было разработано представление (рис.1).
отчетов.
функция, которая вызывает шаблон построения, также принимает от этого шаблона параметры группировки и возвращает данные для отображения пользователю. В визуальной части разработан шаблон group_table_template.html, который содержит элемент формы selectbox, в котором пользователь выбирает параметры группировки. После подтверждения пользователем выбора происходит а/ах-запрос на выборку данных с сервера в соответствии с параметрами группировки. На рис.2 представлен пример такого шаблона: сверху элементы формы, с помощью которых происходит выбор, ниже сама таблица с данными.
Представленные модули существенно повышают уровень графического интерфейса, что хорошо сказывается на уровне восприятия всей системы.
atype aides (kerb
Имя предметного типа Описание Подробное описание
® REPORTS ОТЧЕТЫ Огкяа. Модаш формирования
В GCDDBSSYS СИСТЕМА
DBSySAI Системные компоненты
Подсистема справочной
HELPS
информации
Рис.1. Пример древовидного отображения данных
pbsid
Птппиклипя
Condie2Q13
Отобразить
field pfVal
Атрибут значение птрийчтп
author {Tyson Condie} and {Paul Mmeiro} and {Neoklis Polyzotis} and {Markus Weimer}
doi ID. 1109/1CDE.2013.6544913
journal Proceedings of the 2013 ACM SIGMOD International Conference on Management of Data (SIGMOD113)
Рис.2. Пример группового отображения данных
Модуль графо-ориентированной технологии.
Последний модуль в данной работе связан с визуальным представлением сложных
вычислительных методов системы (решателей) в виде графовой модели. Такая модель отображает структурные блоки исполнения сложных методов для решения задач [2].
На этот раз в серверной части был разработан целый плагин, который осуществляет передачу набора данных в шаблон в виде словаря, содержащего полное описание всех узлов и ребер
модели. Связь между узлами описывается строкой dot формата.
В визуальной части при разработке шаблона был использован внешний плагин для отображения графовой модели - vis.js. Этот плагин позволил изменить большое количество настроек как для узлов и ребер, так и для всего внешнего слоя. И, что самое главное, плагин позволил применить html код для визуализации.
В итоге получилось такое отображение графовой модели, пример которой представлен на рис.3.
Рис.3. Пример графовой модели
Заключение
В заключении стоит отметить особенность такой разработки, которая состоит в том, что она является адаптивной и динамической. Это означает, что для одного типа данных используется один модуль, который часто по-разному выполняет построение интерфейса. Очевидно, что такая разработка является очень трудоемкой и в тоже время оказывает большое влияние на процесс деятельности пользователя во всей системе: повышается качество и удобство.
Список литературы
1. Web-сервер и web-клиент [Электронный ресурс]. Режим доступа: https://fosslook.ru/articles/web-client (дата обращения: 20.05.17).
2. Распределенная вычислительная система GCD [Электронный ресурс]. Режим доступа: http://sa2systems.ru/svn/public/sa2pdf/educae_evn_DE VCAE_LEC7.pdf (дата обращения: 21.05.17).
