Контейнер для хранения данных

Серия изданий
«Научно-образовательные и
научно-информационные
материалы
МГТУ им. Н.Э. Баумана —
национального
исследовательского
университета
техники и технологий»
Департамент образования города Москвы

Ассоциация московских вузов

Московский государственный технический университет
имени Н.Э. Баумана
Кафедра ИУ-5
«Автоматизированные системы обработки информации и
управления»
М.В. Чёрненький
Научно-информационный материал
«Локальная информационная система
с сенсорным экраном –
интерактивная система информирования контингента»
Москва
МГТУ им. Н.Э. Баумана
2011
В любом учебном заведении руководство сталкивается с проблемой информирования
сотрудников и учащихся. В данном случае можно воспользоваться услугами бумажных
носителей, однако вывешенные объявления имеют тенденцию теряться. Можно попробовать
использовать светодиодное табло или объявления по громкой связи. Однако, светодиодное
табло не дает требуемой гибкости, и пригодно лишь для прокручивания коротких
объявлений. Объявления по громкой связи эффективны в том случае, если нужно быстро
ознакомить всех с небольшим объемом информации, и не эффективны, если требуется
передача объемной и структурированной информации.
Хорошим решением в данном случае будет установка сенсорного экрана. Вне
зависимости от объема и типа данных, сенсорный экран может предоставлять информацию
пользователю. Однако до сих пор еще не было разработано программное обеспечение,
позволяющее разработать гибкий и изменяемый интерфейс, не затрачивая при этом больших
усилий и не имея специальных знаний.
Для проектируемого программного комплекса приоритетными являются следующие
критерии качества:

Возможность демонстрации больших объемов информации.

Простота и удобство интерфейса редактора.

Скорость генерации интерфейса пользователя.

Документация.

Гибкость созданного интерфейса.
Отсутствие особых требований к квалификации Администратора – на роль
администратора
подойдет
любой
человек,
которого
можно
назвать
“уверенным
пользователем Windows”.
Под гибкостью созданного интерфейса понимается наличие возможности быстро
изменить какую-либо его часть, не затрагивая оставшуюся.
Простота и удобство интерфейса редактора подразумевает отсутствие сложных
действий, связанных с генерацией интерфейса. Также, означает простоту и понятность
работы с редактором. Обеспечение удобства интерфейса позволяет минимизировать время,
затрачиваемое при работе с системой и получать максимальную эффективность работы.
Скорость генерации интерфейса пользователя подразумевает под собой промежуток времени
от открытия программы до получения готового интерфейса пользователя.
Документация включает в себя обеспечение программной и эксплуатационной
документацией. При оценке по данному критерию необходимо учитывать учебную
направленность проектирования и создания данного программного изделия.
Интерактивная
система
информирования
контингента
(ИСИК)
состоит
из
2
пользовательского и администраторского модуля. В пользовательский модуль включены
настройки как для работы со стандартными средствами ввода-вывода (клавиатура, мышь),
так и для работы с сенсорным экраном. В Администраторском модуле запускается редактор,
позволяющий формировать новые интерфейсы пользователя (далее - конфигурации),
загружать и редактировать существующие.
Администратор и пользователь имеют возможность работать независимо друг от друга.
Администратор, сформировав интерфейс, отправляет его на терминал, где он становится
доступен пользователю.
Входными данными для ИСИК может являться текст в форматах .html, .txt, .pdf,
изображения в форматах .gif, .png, .jpg, .bmp, либо входные данные могут отсутствовать и
пользователь вводит их в процессе настройки.
Данная
система
работоспособна
на
компьютере
следующей
минимальной
конфигурации:
- компьютер с процессором частотой 533 МГц и выше;
- видеоадаптер и монитор с разрешением экрана от 1024х768;
- устройство ввода – клавиатура, мышь;
- сенсорный экран ( например, представитель экранов от General Touch).
Для выполнения функциональных задач, поставленных перед системой, можно
использовать разные программные продукты и методы реализации.
Типовым решением может являться программа PowerPoint - программа для создания и
проведения презентаций, являющаяся частью Microsoft Office и доступная в редакциях для
операционных систем Microsoft Windows и Mac OS. К преимуществам такого решения
относятся дружественный и многофункциональный интерфейс программы, который
позволяет создавать красивые презентабельные работы, ничем не уступающие работам
настоящих дизайнеров-профессионалов; легкость настройки; высокая степень автоматизации
процессов ввода и редактирования сбора данных.
Однако у такого решения есть и недостатки: программа платная ; все же
предназначается для создания презентаций, нежели информационных интерфейсов. Поэтому
при попытке реализации последнего могут возникнуть некоторые трудности и неудобства.
Другим вариантом реализации является технология HTML (HyperText Markup
Language) - язык гипертекстовой разметки документов. Назначение HTML в том, чтобы
сделать документы пригодными для чтения с экрана монитора. Для создания HTML
документов используют текстовые редакторы (например Блокнот), текстовые процессоры
(Word), редакторы тегов HTML и визуальные HTML-редакторы. Создать HTML документ
3
можно даже в простом Блокноте. Придерживаясь определённого стандарта и записав в
текстовом файле HTML код, сохранив на жёстком диске и изменив расширение на .html или
.htm, разработчик получит полноценную web страничку.
К достоинствам этой технологии можно отнести малый информационный объем;
возможность просмотра на персональных компьютерах; интерактивность. Но в качестве
недостатка такого решения можно упомянуть тот факт, что собрать подобный интерфейс
может только опытный верстальщик html, да и гибкость подобного интерфейса в некотором
смысле ограничена, поскольку кардинальное изменение веб-страницы процесс не быстрый.
Структура системы
ИСИК состоит из следующих модулей:

модуль Пользователя;

модуль Администратора.
ИСИК
Модуль
администратора
Удаление
Редактор
Конструктор
Модуль
пользователя
Настройки
Слайдшоу
Рисунок 1. Диаграмма элементов ИСИК
Модуль Пользователя взаимодействует с пользователем в процессе навигации последнего по
пользовательскому интерфейсу.
Модуль
Администратора
позволяет
генерировать
новые,
сохранять,
загружать
и
редактировать интерфейсы пользователя, а также вызывает модуль пользователя, для
отображения интерфейса пользователя.
Модули “Удаление”, “Редактор”, “Конструктор”, “Настройки”, являются вспомогательными и
выступают в качестве подспорья при формировании интерфейса пользователя.
Важным дополнением является разработка структуры, которая после реализации будет
хранить данные, полученные от Администратора при конструировании и передавать их
между компонентами системы.
4
Локация
Размер
Переход 1
уровня
Переход 2
уровня
Переход 3
уровня
Текст для
отображения
Цвет текста
Выравнивание
текста
Гарнитура
текста
Кегль текста
Кегль текста
Стиль
Фоновая
картинка
Рисунок 2. Поля структуры, хранящей данные, составляющие интерфейс пользователя
Структура интерфейса
Важным этапом в процессе разработки стало принятие решения о структуре интерфейса
пользователя. Она будет состоять из элементов и делиться на уровни.
Интерфейс
Элемент интерфейса
0
Элемент
интерфейса 2
Элемент
интерфейса
1
Элемент
интерфейса
3
Уровень
отображения
0
Элемент
интерфейса
0
Элемент
интерфейса
1
Элемент
интерфейса
2
Элемент
интерфейса
3
1
Информация
для
отображения
пользователю
Информация
для
отображения
пользователю
Информация
для
отображения
пользователю
Информация
для
отображения
пользователю
2
Информация
для
отображения
пользователю
Информация
для
отображения
пользователю
Информация
для
отображения
пользователю
3
Информация
для
отображения
Информация
для
отображения
пользователю
пользователю
Рисунок 3. Структура интерфейса пользователя ИСИК
5
Средства разработки
В качестве языка разработки программной реализации системы был выбран язык
программирования C#. Выбор был сделан в пользу этого языка в связи с его хорошей
реализацией для среды Microsoft Windows, например, C# не поддерживает множественное
наследование классов, и не дает пользователю напрямую работать с указателями, а также
подчищает весь “мусор”.
В качестве среды разработки была выбрана Visual Studio 2010 Enterprise Edition,
обладающая всеми необходимыми для разработки возможностями. Однако, хотелось бы
отметить также open-source проект Sharp Develop 4.0. являющийся практически полной
копией Visual Studio 2010 Professional Edition. Из-за своей относительно узкой
специализации Sharp Develop 4.0 занимает намного меньше дискового пространства, чем
его более тяжеловесный собрат от Microsoft, и не уступает Visual Studio в производительности, хотя и несколько не дотягивает в интерфейсе пользователя. В конечном счете, выбор в
пользу Visual Studio, .Net Framework, Microsoft Windows был сделан в связи с широкой
установленной базой в целевой группе пользователей.
Выбор контейнера для представления данных
Разработанная система отображает текст и графику в различных форматах, и кроме того
она позволяет структурировать элементы интерфейса пользователя. Принятое решение
использовать для хранения отображаемой информации формат HTML оказалось достаточно
плодотворным. Формат HTML может отображать текст и изображения, а также управлять
стилем и выравниванием. Однако, возникает вопрос, как расположить элементы интерфейса
в HTML странице и придать им независимость друг от друга?
Первым возможным решением могли бы стать фреймы. Фрейм это отдельный,
законченный HTML-документ, который вместе с другими HTML-документами может быть
отображён в окне web-браузера. Фреймы по своей сути очень похожи на ячейки таблицы,
однако более универсальны. Фреймы разбивают web-страницу на отдельные мини-кадры,
расположенные на одном экране, которые являются независимыми друг от друга. Каждое
окно может иметь собственный адрес. При нажатии на любую из ссылок, расположенных в
одном фрейме, вы можете рассматривать страницы, показанные в другом окне.
Однако идея использования фреймов не всегда видится подходящей. Причиной этому
служит недостаточная гибкость настройки фреймов. К сожалению, разбить с их помощью
страницу на сто элементов – дело трудновыполнимое и в некотором роде даже не
реализуемое.
Для построения интерфейса пользователя в нашей системе используется объект Web
6
Browser, включенный в .Net Foundation. Таким образом, элементами интерфейса
пользователя являются объекты Web Browser, а отображаемые в них HTML-страницы
генерируются с помощью класса «конструктор». Такой подход позволяет избежать
трудностей с настройкой разбиения. Большое количество элементов описания не является
проблемой из-за простоты и гибкости выбранного пути реализации.
Контейнер для хранения данных
Для хранения данных, составляющих интерфейс пользователя, используются
возможности формата XML, имеющие широкие возможности по модификации.
Для хранения информации были разработаны несколько тегов.
Первый получил название description_tag и предназначается для описания элемента
интерфейса. Для этого тег содержит все необходимые параметры:
-
LocationX,LocationY – координаты левого верхнего угла элемента интерфейса пользователя;
-
SizeX,SizeY –размеры элемента интерфейса пользователя;
-
Scrollbar – наличие/отсутствие полосы прокрутки;
-
Content1 – содержимое элемента интерфейса пользователя первого уровня;
-
Content2– содержимое элемента интерфейса пользователя второго уровня;
-
Content3– содержимое элемента интерфейса пользователя третьего уровня;
-
Url– содержимое элемента нулевого уровня;
-
Num_of_elements – общее количество элементов в интерфейсе пользователя;
Помимо этого существует тег border_tag, предназначенный для оформления рамок
элементов управления. Этот тег должен содержать следующие параметры:
-
Left_up – изображение верхнего левого угла рамки;
-
Right_up – изображение верхнего правого угла рамки;
-
Left_Down –изображение нижнего левого угла рамки ;
-
Right_Down – изображение верхнего нижнего правого угла рамки;
-
Width – толщина линии рамки;
-
Color– цвет рамки;
-
Line_type– вид линии, очерчивающей рамку;
-
Image\Line – параметр, определяющий будет ли рамка состоять из изображений, или из линий.
Диаграмма классов ИСИК в точности повторяет диаграмму элементов ИСИК.
7
ИСИК
Модуль
администратора
Удаление
Редактор
Конструктор
Модуль
пользователя
Настройки
Слайдшоу
Рисунок 4. Диаграмма классов ИСИК
Классы, составляющие ИСИК содержат следующие методы:
Класс
Методы
“Редактор”
“Установка параметров”
“Получение параметров”
“Редактирование”
“Модуль администратора”
“Рисование сетки”
“Округление координат”
“Сохранение в XML”
“Разбор загруженного XML”
“Конструктор”
“Создание HTML”
“Проверка соответствия ширины окна и
“Установка параметров”
длины строки”
“Получение параметров”
“Проверка соответствия”
“Модуль Пользователя”
“Обработка нажатия на первом уровне”
“Обработка нажатия на втором уровне”
“Настройки”
“Задание параметров настроек”
“Удаление”
“Удаление элемента интерфейса”
8
Файл XML
Разбор файла XML
Создание нового файла XML
Данные из файла
Заполнение структуры
элементами интерфейса
Метод “Сохранить интерфейс”
Запрос на сохранение
интерфейса
Запуск приложения с
параметрами из командной
строки
Передача имени
загружаемого файла
Вывод структуры
на экран
Метод “Загрузить Интерфейс”
Запрос на загрузку
интерфейса
Вывод структуры на
экран
Запрос на открытие
интерфейса для
редактирования
Метод “Открыть для
редактирования”
Вызов метода “Загрузка XML”
Вывод структуры
на экран
Заполнение структуры
элементами интерфейса
Заполнение структуры
элементами интерфейса
Вызов метода “Загрузка
XML”
Вызов метода “Загрузка XML”
Передача заполненной
структуры
Метод
“Сохранение XML”
Метод “Загрузка XML”
Администратор
Рисунок 5. Схема взаимодействия классов с XML
9
*
*
1.1 Выход по Alt+F4
1. Модуль Пользователя
2.2 Отмена
2.1 Сохранить
2. Диалоговое окно
“Сохранение
интерфейса”
5.2 Ок
*
5.1 Ввести номер
удаляемого элемента
5. Редактор
Конструктор.
Вкладка “Что делаем по
нажатию?”
2.2.2 Обзор. Выбор
страницы первого уровня.
2.2.3 Обзор. Выбор
страницы второго уровня.
2.2.4 Обзор. Выбор
страницы третьего уровня.
2.1.6 Отмена
2.1.5 Выбор параметров
текста
2.1.4 Фоновая картинка
2.1.3 Выбрать цвет фона
2.1.2 Создать новую
страницу
2.1.1 Открыть готовую
страницу
Конструктор.
Вкладка “Редактируем
содержимое”
1
1.7 Скрыть меню
4.1 Открыть
4.2 Отмена
1.6 Выход
4. Открыть для
редактирования
1.5 Настройки
1.4 Открыть для
редактирования
1.3 Загрузить интерфейс
1.2 Сохранить интерфейс
1.1 Формирование
интерфейса завершено
1. Главное меню
3.2 Отмена
3.1Открыть
*
3. Диалоговое окно
“Загрузка интерфейса”
5.4 Ок
*
5.4 Слайдшоу включено
5.2 Скрыть курсор
5.1 Ввод интервала
слайдшоу
5. Вкладка «Настройки»
Граф диалога системы
Рисунок 6. Граф диалога
10
Разработка экранных форм
Экранные формы разрабатывались так, чтобы обеспечить необходимую функциональность, а
также исходя из правил хорошего тона. Были разработаны следующие формы:
Главное меню модуля администратора;
Рис. 7. Главное меню модуля администратора.
У каждой кнопки на экране есть всплывающая подсказка.
- Конструктор;
Рисунок 8. Конструктор
- Удаление элемента конфигурации
11
Рисунок 9. Удаление элемента
- Редактор конфигурации
Рисунок 10.Редактор
12
- Настройки интерфейса
Рисунок 11. Настройки
- Окно сохранения и загрузки готовой конфигурации
Рисунок 12. Окно сохранения и загрузки
13