Как построить макет простого диалогового окна с помощью Visio
Visio включает усовершенствованный набор фигур для проектирования интерфейсов, о практическом применении такого сценария мы писали в интервью с Юрием Ветровым, Mail.Ru Group.
Разработчики программного обеспечения используют каркасные фигуры для создания эскизов диалоговых окон и других визуальных элементов, которые будут отображаться их приложениями. Используя Visio для создания макета диалогового окна, можно обнаружить, что фигура Форма диалогового окна является контейнером. Следовательно, при добавлении кнопок и элементов управления в Форму диалогового окна, последние становятся ее членами. При перемещении, копировании или удалении диалогового окна это же действие будет выполнено и со всеми содержащимися в нем фигурами.
Некоторые фигуры пользовательского интерфейса Visio являются списками, включая элемент Список. При сбросе списка в контейнер Форма диалогового окна список автоматически заполняется тремя членами. Члены списка добавляются, удаляются и переупорядочиваются путем перетаскивания.
Мы воспользуемся шаблоном Проволочная диаграмма для построения прототипа простого диалогового окна. Даже если вы не дизайнер пользовательских интерфейсов, информация из этой статьи все равно будет для вас полезной, поскольку она позволит узнать больше о поведении контейнеров и списков.
1. Для начала щелкнем на вкладке Файл и выберем вкладку Создать. Щелкнем на Категории, затем выберем категорию Программы и базы данных, а затем щелкнем на миниатюре Проволочная диаграмма, чтобы создать новый документ.
2. Перетащим фигуру Форма диалога из набора элементов Диалоговые окна и сбросим ее на страницу.
3. Перетащим фигуру Кнопка диалогового окна из набора элементов Диалоговые окна и приклеим ее к точке соединения в верхнем правом углу Формы диалогового окна.
При сбросе фигуры Кнопка диалогового окна на страницу автоматически откроется диалоговое окно Данные фигуры.
4. В диалоговом окне Данные фигуры щелкнем на кнопке ОК, чтобы принять значение по умолчанию в списке Тип.
5. Перетащим другую фигуру Кнопка диалогового окна в контейнер Форма диалогового окна и приклеим ее к левому краю предыдущей кнопки. В открывшемся диалоговом окне Данные фигуры в списке Тип выберем Развернуть и щелкнем на кнопке ОК. Повторим процесс в третий раз и выберем Свернуть в списке Тип.
Верхняя часть нашего контейнера Форма диалогового окна теперь выглядит так, как показано на следующем рисунке.
6. Перетащим фигуру Панель из набора элементов Диалоговые окна и сбросим ее на страницу под Формой диалогового окна. Ее нужно сбросить за пределы Формы, поскольку она слишком большая, чтобы поместиться внутри.
7. С помощью маркеров изменения размера или окна Размер и положение изменим ширину фигуры панели до 75 мм и в высоту до 30 мм.
8. Перетащим фигуру Панель на фигуру Форма диалогового она и разметим ее внизу по центру.
9. Перетащим фигуру Элемент верхней вкладки из набора элементов Диалоговые окна и разместим ее на границе с верхним левым углом контейнера Панель, введем Вкладка 1 и нажмем клавишу ESC.
Привязав фигуру Элемент верхней вкладки к границе контейнера Панель, мы «сварили» их вместе. Если переместить контейнер, вкладка последует за ним.
10. Перетащим фигуру Элемент верхней вкладки из набора элементов Диалоговые окна и разместим ее справа от предыдущей вкладки, введем Вкладка 2 и нажмем клавишу ESC.
11. Перетащим фигуру Список из набора элементов Элементы управления и разместим ее в верхнем левом углу контейнера Панель.
12. Выберем самый верхний элемент Текст и введем А, затем выберем элемент Текст посередине и введем Г, а затем выберем нижний элемент Текст и введем Д.
13. Наведем указатель мыши сразу слева от фигуры списка Столбец, между подписями А и Г.
14. Щелкнем дважды на синем треугольнике вставки, чтобы добавить два элемента в фигуру Список, а затем введем Б в верхнем элементе и В – в нижнем.
15. Щелкнем один раз на границе фигуры Форма диалога, чтобы выделить ее.
16. На вкладке Формат в группе вкладок инструментов Инструменты для контейнера в группе Размер щелкнем на кнопке По размеру содержимого. Контейнер Форма диалога будет уменьшен до размера, вложенного в него контейнера Панель.
