CC BY
107
4. Байдачный С.С. Silverlight 4: Создание насыщенных Web-приложений СОЛОН-Пресс Издательство, 2010 г. -288 с.
5. Батоврин В.К. Системная и программная инженерия. Словарь-справочник: учебное пособие для вузов. - ДМК Пресс Издательство, 2010 г. - 280 с.
УДК 004.514
ИЗУЧЕНИЕ И ОЦЕНКА ПОХОДОВ К РАЗРАБОТКЕ ГРАФИЧЕСКОГО ИНТЕРФЕЙСА ПОЛЬЗОВАТЕЛЯ
Искра Наталья Александровна, магистр технических наук, ассистент кафедры ЭВМ, Белорусский государственный университет информатики и радиоэлектроники, Республика Беларусь, Минск,
Макоед Виктор Николаевич, студент, Белорусский государственный университет информатики и радиоэлектроники, Республика Беларусь, Минск, [email protected] Куница Евгений Юрьевич, студент, Белорусский государственный университет информатики и радиоэлектроники, Республика Беларусь, Минск, [email protected]
Введение
На сегодняшний день существует большое количество инструментов разработки графического интерфейса пользователя (Graphical User Interface, GUI), предлагающих создание программ на различных языках программирования и реализующих различные подходы к созданию интерфейса. В процессе изучения и практического освоения новой технологии обучающемуся приходится сталкиваться с разнообразными задачами, и очень важно систематически представить приёмы их решения, следуя принципу «от простого - к сложному». Следует отметить, что и в будущей профессиональной деятельности обучающийся должен уметь оперативно оценивать различные подходы к реализации GUI для того, чтобы решать поставленные задачи максимально эффективно.
Существуют подходы к сравнению технологий по созданию GUI на основе метрик, оценивающие, например, системные требованиям к запуску приложений и занимаемой памяти [1]. Однако для изучения новой технологии важно в первую очередь сопоставить инструменты с точки зрения самого процесса разработки, а именно - написания исходного кода приложений. Для этого могут использоваться некоторые «типовые задачи», которые часто встречаются на практике, например проект 7GUI [2].
В задачи, предлагающиеся к решению проектом 7GUI, входят 7 типовых задач: счётчик, конвертер температуры, симулятор бронирования билетов, таймер, CRUD (реализация базовых функций, реализуемых в работе с хранилищами данных), приложение для рисования кругов и интерактивная таблица значений. Подходы к решению каждой из задач позволяют рассмотреть тестируемую технологию с разных точек зрения, последовательно рассмотреть возможности набора инструментов. Например, для создания счётчика необходимо иметь базовые представления о применяемом языке программирования и инструментах разработки, создании и настройке элементов интерфейса, тогда как конвертер температуры требует реализации обработки информации, введённой пользователем, а также работу с двунаправленным потоком данных.
В рамках проекта уже было проведено сравнение объектно-ориентированного и функционального подходов к реализации GUI [3]. Мы, в свою очередь, внесли свой вклад в проект в виде сравнения двух объектно-ориентированных кроссплатформенных подходов [4]
1. Исследуемые задачи и подходы
Для оценки эффективности объектно-ориентированных кроссплатформенных фреймворков Qt[5] и JavaFX[6] были спроектированы и разработаны приложения CRUD и
63
Circle Drawer.
Для реализации приложений используются языки программирования C++ (Qt) и Java (JavaFX). Оба подхода являются кроссплатформенными, что позволяет успешно протестировать приложения на операционных системах Windows, Linux и OS X. Объектом исследования является, в первую очередь, оценка скорости и удобства разработки решений при помощи данных фреймворков.
При разработке приложения CRUD (рис. 1) решаются следующие задачи:
• разделение бизнес-логики и логики интерфейса;
• реализация изменяющихся элементов интерфейса;
• нетипичная компоновка элементов интерфейса.
Рис. 1 - Интерфейс приложения CRUD
Приложение представляет собой список элементов (базу данных имён), поле фильтрации («Filter prefix»), поля отображения («Name» и «Surname») и кнопки действий («Create», «Update» и «Delete»). При вводе информации в поле фильтрации список должен незамедлительно отображать только записи, соответствующие фильтру. При вводе новых данных в поля отображения после нажатия кнопки «Create» новая запись должна добавляться в конец списка. При выборе одной из записей списка в полях отображения должна отображаться информация, которая может быть отредактирована (кнопка «Update») или удалена (кнопка «Delete»). Список при этом должен занимать всё свободное пространство окна.
Нужно подчеркнуть, что именно задача CRUD представляет собой типичное бизнесприложение, которое встречается на практике очень часто. Основной проблемой здесь является разделение бизнес-логики и представления. Кроме того, присутствие фильтра усложняет задачу. Традиционно здесь может быть использована одна из форм шаблона проектирования «Модель-Представление-Контроллер» или MVC (рис. 2) [7].
При разработке приложения Circle Drawer (рис. 3) необходимо решить следующие задачи:
• реализация функциональности отмены действия и повторения отменённого действия (функции Undo и Redo);
• рисование примитивной графики;
64
работа с диалоговыми окнами.
Рис. 3 - Интерфейс приложения Circle Drawer
Приложение представляет собой окно, содержащее кнопки «Undo», «Redo» и область для рисования. По левому щелчку мыши в области для рисования появляется круг с заранее определённым диаметром с центром в точке местонахождения курсора в момент щелчка. Круг, ближайший к курсору, то есть такой, расстояние до центра которого от курсора меньше радиуса круга (если такой круг имеется), окрашивается в серый цвет. Правый щелчок мыши на выделенном (окрашенном в серый цвет) круге вызывает всплывающее окно с единственной кнопкой «Adjust diameter». Нажатие на эту кнопку открывает другое окно, содержащее информацию о центре изменяемого круга, а также слайдер, прокрутка которого вызывает незамедлительное изменение диаметра. Закрытие данного окна приводит к появлению новой записи в журнале действий, используемом кнопками «Undo» и «Redo». Нажатие «Undo» отменяет последнее выполненное действие (изменение диаметра или
65
создание нового круга), нажатие «Redo» вызывает повторение отменённого действия (если после отмены пользователь не совершал никаких действий).
2. Сравнение реализаций
При разработке приложений были отмечены следующие ключевые моменты, касающиеся как в целом разработки GUI, так и решения каждой конкретной задачи.
Оба фреймворка предоставляют инструменты для автоматической компоновки элементов интерфейса в окне без указания конкретных координат для каждого из «виджетов». В Qt присутствует класс QLayout, от которого унаследованы классы QBoxLayout, QFormLayout, QGridLayout, и QStackedLayout, позволяющие располагать элементы горизонтально, вертикально, по сетке либо наложением друг на друга. В JavaFX соответствующий функционал представлен классом Pane, который расширяют подклассы AnchorPane, BorderPane, FlowPane, GridPane, HBox, StackPane, TextFlow, TilePane, VBox. Классы AnchorPane, BorderPane, TextFlow и TilePane не имеют аналогов в Qt, так что в этом плане JavaFX можно считать более гибким инструментом, хотя и в Qt посредством стандартных инструментов можно добиться подобного функционала.
Базовые элементы интерфейса, характерные для большинства программ разной сложности, такие, как кнопка, текст, форма для ввода и редактирования текста, слайдер, combo box, checkbox присутствуют в обеих библиотеках.
Для реализации отображения данных в CRUD с помощью JavaFX был использован класс TableView, для хранения данных - класс-контейнер ObservableList. Отличие списков с приставкой «Observable» от обычных контейнеров состоит в том, что их можно «привязать» к таблице и указать формат отображения данных из списка в таблице, после чего все изменения в форме будут синхронизированы с изменениями в списке. Например, при обновлении данных нужно получить доступ к списку, «привязанному» к таблице, установить новые значения для полей объекта, который соответствует выделенной строке, после чего изменения отобразятся в окне автоматически.
Для реализации отображения данных при работе с фреймворком Qt был использован класс QTableWidget. Qt не предоставляет классов, аналогичных контейнерам с приставкой «Observable» из библиотеки JavaFX. Поэтому в Qt приходится синхронизировать хранилище данных и форму для их отображения вручную.
Для рисования примитивной графики JavaFX предлагает класс Canvas. Хотя Qt не предоставляет аналогичного класса и рисование происходит внутри базового для всех «виджетов» класса QWidget, реализация механизма отображения графических элементов совпадает практически полностью. В JavaFX прорисовка кругов происходит в методе draw(), в Qt - с помощью paintEvent(), который задействуется при вызове метода repaint(). При каждом действии пользователя, например, перемещении мыши или нажатии на кнопку, вне зависимости от сопутствующих действий в конечном счёте вызываются данные методы.
По условию задачи CircleDrawer необходимо, чтобы при выделении круга и нажатии на правую кнопку мыши появлялась всплывающая кнопка «Изменить диаметр». В JavaFX данную функцию реализовать проще, так как стандартной библиотекой платформы предлагается класс Popup, предназначенный для таких действий, достаточно лишь добавить в него заранее созданную кнопку. В Qt подобный класс отсутствует, поэтому приходится самостоятельно реализовывать необходимый функционал, используя базовые классы и методы (классы QWidget, QLayout, методы setWindowFlags(), setLayout(), setGeometry()).
Механизм отмены и повторения действий реализован на обеих платформах схожим образом и не затрагивает библиотеки, связанные с графическим интерфейсом пользователя. Различия в реализации незначительны и связаны с особенностями языков Java и C++.
В JavaFX для имеющихся в библиотеке элементов графического интерфейса заданы события, например, наведение курсора на объект или нажатие кнопкой мыши. Разработчику
66
предоставлены инструменты для задания поведения всего приложения при возникновении события. Введённые в Java 8 лямбда-функции позволяют задать набор действий для каждого из событий без создания отдельных именованных методов, что значительно ускоряет разработку и улучшает читаемость кода.
В Qt для реализации взаимодействия пользователя с объектами графического интерфейса разработчику предоставлен механизм сигналов и слотов. Подобно тому, как в JavaFX за объектом «закреплены» события, в Qt для «виджетов» доступен набор сигналов. Реакция приложения при вызове того или иного сигнала должна быть прописана в специальных методах, которые называют «слотами». Таким образом, для того, чтобы «связать» изменение состояния объекта интерфейса, вызванное пользователем, с определённым набором действий, необходимо реализовать отдельный метод в классе, являющемся для «виджета» родительским, а также использовать метод connect(), принимающий объект-источник и объект-приёмник и соответствующие им сигналы и слоты. Это создаёт определённые трудности в проектировании, а также увеличивает размер кода, что является недостатком Qt по сравнению с механизмом реагирования на события в JavaFX.
Сходства и различия в возможностях платформ, обнаруженные при разработке приложений, приведены в таблице 1 (полужирным шрифтом выделены те особенности, которые оказались авторам более удобными и/или функциональными при разработке).
Таблица 1. Сравнение возможностей платформ Qt и JavaFX
Критерий сравнения Qt JavaFX
Общее для обоих приложений
Компоновка элементов интерфейса Класс QLayout (подклассов: 4) Класс Pane (подклассов: 13)
Базовые элементы интерфейса Базовые элементы интерфейса, характерные для большинства программ разной сложности, присутствуют в обеих библиотеках
Обработка действий пользователя Система сигналов и слотов Обработка событий, лямбда-выражения
CRUD
Представление данных Класс QTableWidget Классы TableView и ObservableList
Редактирование данных Работа с объектом класса QTableWidget Работа с объектом класса ObservableList
Circle Drawer
Отображение примитивной графики Класс QWidget, метод paintEvent() Класс Canvas
Отмена и повторение действий Реализация не затрагивает библиотеки платформ и использует возможности языков C++ и Java
Всплывающая кнопка Базовый класс QWidget Специализированный класс Popup
Стоит отметить, что в силу различий языков C++ и Java приложения, реализованные с Qt, менее требовательны к ресурсам, чем аналогичные примеры на JavaFX (таблица 2).
Однако различия в процессе разработки, которые и являлись предметом данного исследования, позволяют сделать выбор в пользу JavaFX.
Таблица 2. Сравнение объёмов кода и потребляемых ресурсов_______________________________
CRUD Circle Drawer
Qt JavaFX Qt JavaFX
Количество «полезных» строк кода 154 126 323 179
Занимаемая оперативная память при запуске (ОС: Windows 8.1 x64) 4,6 Мб 69 Мб 5 Мб 50 Мб
67
Выводы
В рамках данного исследования JavaFX представляется более эффективной и простой в освоении и применении технологией для разработки графического интерфейса пользователя. Библиотека платформы JavaFX более обширна, нежели набор классов, предоставляемый платформой Qt. Поэтому для реализации приложения на Qt может быть характерно увеличение объёма необходимого кода и дополнительные временные затраты на этапе проектирования. Кроме того, механизм сигналов и слотов, применяемый в Qt, оказался менее гибким и интуитивным, нежели обработка событий, доступная при реализации программы на платформе JavaFX.
Литература
1. Cognitive Dimensions of Notations Resource site [Электронный ресурс]. - Режим доступа: http://www.cl.cam.ac.uk/%7Eafb21/CognitiveDimensions/ - Дата доступа: 3.04.2015.
2. A Notational Usability Benchmark for GUI Programming [Электронный ресурс]. - Режим доступа: https://github.com/eugenkiss/7guis/wiki/ - Дата доступа: 3.04.2015.
3. Comparison of Object-Oriented and Functional Programming for GUI Development [Электронный
ресурс]: E.Kiss. Leibniz Universitat Hannover Faculty of Electrical Engineering and Computer Science Human-Computer Interaction group, August 2014. - Режим доступа:
http://www.eugenkiss.com/proiects/thesis.pdf- Дата доступа: 3.04.2015.
4. Added Qt5 CPP implementation of Circle Drawer example [Электронный ресурс]. - Режим доступа: https://github.com/eugenkiss/7guis/pull/10 - Дата доступа: 5.04.2015.
5. Qt. Cross-platform application & UI development framework [Электронный ресурс]. - Режим доступа: http://www.qt.io/ - Дата доступа: 13.03.2015.
6. JavaFX Overview (Release 8) [Электронный ресурс]: Oracle. Java Documentation. - Режим доступа: http://docs.oracle.com/iavase/8/iavafX/get-started-tutorial/ifX-overview.htm - Дата доступа: 13.03.2015.
7. M. Fowler. GUI Architectures [Электронный ресурс]: Development of Further Patterns of Enterprise Application Architecture. - Режим доступа: http://martinfowler.com/eaaDev/uiArchs.html - Дата доступа: 15.03.2015.
УДК 004.04
ПРОТОТИПИРОВАНИЕ И РЕАЛИЗАЦИЯ ГРАФИЧЕСКОЙ ФОРМЫ ЗАКАЗА ДЛЯ ИНФОРМАЦИОННОЙ СИСТЕМЫ РЕСТОРАНОВ БЫСТРОГО ПИТАНИЯ
Николенко Ольга Игоревна, студентка, кафедра «Управление персоналом, инновациями и качеством», Шахтинский институт (филиал) Южно-Российского государственного политехнического университета им. М.И. Платова, главный библиотекарь, Донской государственный технический университет, Институт сферы обслуживания и предпринимательства (филиал) ДГТУ в г.Шахты,
Россия, Шахты, [email protected]
Олейник Павел Петрович, к.т.н, системный архитектор программного обеспечения,
ОАО "Астон", доцент, Шахтинский институт (филиал) Южно-Российского государственного политехнического университета им. М.И. Платова, Россия, Ростов-на-Дону, [email protected]
В работах [1-2] авторы подробно представили и описали свой опыт проектирования информационной системы для ресторанов быстрого питания. После изучения имеющихся аналогов, их достоинств и присущие недостатков, было принято решение самостоятельно разработать подобный программный продукт. При этом были выделены следующие критерии оптимальности (КО), которые содержат функциональные особенности будущей реализации. Были выделены следующие требования, определяющие необходимость:
1. Предусмотреть возможность автоматизации с помощью единой системы как небольшого кафе (или одного ресторана), так и целой сети заведений.
68
