Л7 / Лабораторная работа №7

КАФЕДРА ТЕХНОЛОГИЙ ПРОГРАММИРОВАНИЯ

УО «Полоцкий государственный университет»

Факультет информационных технологий

МЕТОДИЧЕСКИЕ УКАЗАНИЯ

к выполнению лабораторного практикума по курсу «Технология разработки интерфейса программных средств»

для специальности 1-40 01 01 Программное обеспечение информационных технологий

Новополоцк 2011

КАФЕДРА ТЕХНОЛОГИЙ ПРОГРАММИРОВАНИЯ

Методические указания разработали:

Бураченок ИринаБрониславовна – ст. преподаватель кафедры технологий программирования, Бураченок Алексей Леонидович – ст. преподаватель кафедры технологий программирования.

ЛАБОРАТОРНАЯ РАБОТА №7

ТЕМА: Разработка пользовательского интерфейса на основе "Graphic User Interface".

ЦЕЛЬ: Изучение и приобретение навыков разработки прототипа пользовательского интерфейса на основе GUI "GraphicUserInterface".

Результат обучения:

После успешного завершения занятия пользователь должен:

Освоить методику проектирования интерфейса как часть разработки ТЗ.

Уметь проектироватьCUI интерфейсы.

Знать приемы работы с GUI Design Studio.

Используемая программа: операционная система Windows 2000 и выше, GUI DesignStudio.

План занятия:

1.Краткие теоретические сведения

2.Выполнение задания

3.Оформление отчета

4.Демонстрация примеров.

1.КРАТКИЕ ТЕОРЕТИЧЕСКИЕ СВЕДЕНИЯ

Начинать разработку любого программного продукта необходимо с создания прототипа его пользовательского интерфейса.GUI DesignStudio– это профессиональный инструмент один из лучших для визуального проектирования и создания интерактивных прототипов графического пользовательского интерфейса приложений Windows и вебинтерфейсовбез необходимости в кодировании и скриптов-писаний. Данный инструмент позволяет рисовать собственные окна и компоненты приложений, в том числе, используя стандартные элементы, причем их можно объединять все вместе в одном рабочем окне. Проверить работоспособность созданного проекта, можно запустив симулятор для тестирования дизайна приложений.Главной особенностью программы является ее простота использования.

Основные возможности программы см. рисунок 1:

создание дизайна пользовательских интерфейсов,

доступ к более 120 встроенным элементам дизайна,

встроенные иконки и изображения в различных форматах,

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

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

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

генерация детальной документации к вашим приложениям,

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

просмотр ваших интерфейсов в различных стилях Windows,

и многие другие возможности.

Рисунок 1 – Главное окно GUI DesignStudio

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

Работа в приложении начинается с создания нового проекта. Новому проекту сопоставляется отдельная папка на диске. В эту папку будут сохраняться все документы связанные с проектом, – нарисованные экраны, иконки, картинки и тому подобное. Сохраняемые документы могут храниться как в самой папке, так и во вложенных подпапках.

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

Справа от рабочей области документа расположена панель управления, содержащая несколько вкладок. На вкладке "Элементы" расположен набор поддерживаемых элементов управления, которые могут быть использованы при построении прототипа интерфейса. Элементы управления разбиты по группам – "Кнопки", "Сетки", "Списки, деревья и таблицы", "Окна и диалоги" и так далее см. рисунок2.

Открыв группу "Окна и диалоги", необходимо перетащить в документ одно из стандартных окон. На окно накладываете другой стандартный элемент – сетку, задающую тип расположения и выравнивания элементов управления в окне. На сетку поместить прочие элементы управления, входящие в окно. Если необходимо, то выполнить редактирование свойств размещенных элементов, чтобы придать им требуемый внешний вид. У каждого типа элементов управления имеется собственный набор свойств для настройки внешнего вида – параметры шрифта, расположения, стили, набор отображаемых данных, разнообразные флаги и так далее.

Рисунок 2 – Создание прототипа диалогового окна

GUI DesignStudio поддерживает, пожалуй, все стандартные элементы управления, используемые в приложениях Windows, – кнопки, полосы прокрутки, вкладки, списки, панели инструментов, меню и так далее. Поддерживаются и нестандартные элементы, такие как ленточные панели Ribbon и линейки.

После того как окно полностью создано, можно посмотреть результаты работы, вызвав имитатор. Имитатор запускается в полноэкранном режиме – на черном фоне вы видите нарисованное вами окно. Однако элементы управления в нем не работают. Чтобы они заработали, необходимо совершить еще несколько движений мышкой, чтобы указать, какие именно действия они будут выполнять см. рисунок 3.

Добавление интерактивности

Возможность задания функциональности элементам управления в GUI DesignStudio реализована замечательно просто. Фактически дело всегда ограничивается выполнением одной единственной операции – установлением связи между двумя элементами управления.

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

Для описания сценария работы, включающего работу нескольких окон, разработчики рекомендуют создавать отдельные документы, называемые в терминологии GUI DesignStudio как storyboarddocuments или раскадровки см. рисунок 4. В пустой документ раскадровки мышкой необходимо перетащить документы, содержащие прототипы необходимых окон (вот почему рекомендуется для каждого окна создавать отдельный документ). Прототипы окон появляются в раскадровке, и далее можно установить между ними необходимые связи. Копирования прототипов не происходит – если в исходный документ внести какие-либо изменения, то они отразятся и в раскадровке.

После того как все связи установлены, остается только выбрать главное окно – с которого начнет показ имитатор, – и интерактивный прототип готов.

2.ВЫПОЛНЕНИЕ ЗАДАНИЯ

Задание к работе:

Освоить навыки проектирования пользовательского интерфейса на основе

GUI(GraphicUserInterface)как часть разработки ТЗ.

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

Разработать и выполнить проект прототипа GUI интерфейса в GUI DesignStudio.

3.ОФОРМЛЕНИЕ ОТЧЕТА

Содержание отчета:

1.Привести краткие сведения о способах прототипирования.

2.Привести пример разработанного прототипа GUI-интерфейса согласно варианту задания.

3.Обосновать все принятые решения при создании прототипа.

Примечание:

1.Отчет должен быть представлен в соответствии с требованиями принятыми в ВУЗе.

2.У каждого студента свой индивидуальный вариант задания.

Продемонстрируйте Вашу работу преподавателю!

КОНТРОЛЬНЫЕ ВОПРОСЫ:

1.Расскажитеоконкурентах GUI Design Studio –Axure RP Pro, iRise, DENIM, MockupScreens.

2.Дайте понятие прототипирования. Особенности создания прототипов с помощью доски.

3.Недостатки и достоинства бумажного прототипирования.

4.Почему начинать разработку любого программного продукта необходимо с создания прототипа его пользовательского интерфейса?

5.Перечислите способы прототипирования пользовательского интерфейса.