Технологии командной разработки программного обеспечения информационных систем

Моделирование интерфейса пользователя

Показывать лекцию целиком

Продолжительность лабораторной работы - 2 академических часа.

Раскадровка

Удобным инструментом макетирования пользовательского интерфейса реализации требований пользователя является PowerPoint, который интегрирован с Visual Studio 2012. Для Элементов задела работы продукта имеется возможность создать раскадровку представления экранных форм или веб-страниц приложения. Раскадровка предназначена для предварительного обсуждения основных решений пользовательского интерфейса.

Для создания раскадровки необходимо открыть ) или из дизайнера командных проектов Visual Studio (рис 14.2)

(рис 14.1) Веб-сайт проекта - Элемент задела работы продукта (рис 14.2) Visual Studio - Элемент задела работы продукта

В окне , рис 14.2) выделите вкладку ЭЛЕМЕНТЫ STORYBOARD (1) и выберите ссылку Начать раскадровку (2).

Презентация интерфейса

Начальная страница . Используя фигуры раскадровки, создайте слайд макета требуемых Windows-окон или веб-страниц разрабатываемого приложения. На рис 14.4 приведен пример веб-страницы Преподаватели для проекта Расчет учебной нагрузки преподавателей.

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

(рис 14.3) Начальная страница PowerPiont (рис 14.4) Страница - Преподаватели

Связываение раскадровки с рабочим элементом

Для связи созданной презентации раскадровки с командным проектом в TFS необходимо на панели инструментов ).

(рис 14.5) Панель команд PowerPoint

Если презентация ).

(рис 14.6) Диалоговое окно Ссылки раскадровки в проекте

В диалоговом окне ).

(рис 14.7) Подключение к командному проекту

После подключения к командному проекту вторично будет выведено диалоговое окно ), в котором нужно нажать кнопку Связать (2).

В диалоговом окне ).

(рис 14.8) Диалоговое окно Выбор связанных рабочих элементов

После подтверждения выбранных элементов в диалоговом окне ).

(рис 14.9) Диалоговое окно Ссылки раскадровки в проекте с добавленным элементом

Если рабочий элемент связан с раскадровкой, то это можно увидеть на сайте проекта (рис 14.10) или в обозревателе Visual Studio (рис 14.11).

(рис 14.10) Сайт проекта - закладка ЭЛЕМЕНТЫ STORYBOARD (рис 14.11) Элемент задела работ продукта - закладка ЭЛЕМЕНТЫ STORYBOARD

Для просмотра раскадровки необходимо нажать кнопку - ).

(рис 14.12) Закладка ЭЛЕМЕНТЫ STORYBOARD

Задание

  • Изучить теоретический материал.
  • Создать раскадровку для разрабатываемого приложения.
  • Вернуться к учебному плану