5.1 Общие сведения

 
Общие рекомендации

Для вставки одного объекта в другой перетащите мышью вставляемый объект на объект, в который необходимо вставить. Область объекта для вставки будет подсвечена синим фоном:

GUI Machine, работа в GUI Machine, inserting an object, вставка объекта

Вставка объекта

Отпустите объект.

Список типов объектов, которые не могут быть вставлены в другой объект:

  • Окно — стандартное и Vaadin;
  • Всплывающее меню ;
  • Таймер;
  • Аудио проигрыватель;
  • Иконка в трее.

Список типов объектов, которые могут содержать другие объекты:

  • Окно ;
  • Динамический лэйаут;
  • Статический лэйаут;
  • Панель;
  • Таб-панель;
  • Сплит-панель;
  • Сворачиваемая панель .

Не забывайте пользоваться шаблонами. Это позволит сократить временные затраты и сделать процесс прототипирования менее трудоемким.

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

Пользуйтесь контекстным меню. Если нет возможности выполнить операцию горячими клавишами или вы забыли нужное сочетание клавиш, щелкните правой кнопкой мыши по области или объекту для открытия контекстного меню. Это позволяет получить доступ ко многим функциям программы быстрее, чем через главное меню.

 Если на области редактирования выделен объект или группа объектов, то щелчок  правой кнопкой мыши по любому месту области или другому объекту приведёт к открытию контекстного меню именно для выделенного объекта.

Пользуйтесь плейсхолдерами. Добавьте на область редактирования плейсхолдер. Вставьте его в то место, где вы планировали расположить объект. Для выбора заменяемого объекта существует 2 способа:

  • Щелкните мышью по свойству плейсхолдера Объект для замены  и выберите нужный объект из открывшегося дерева объектов.
  • В контекстном меню плейсхолдера выберите пункт выбрать заменяемый объект. Щелкните левой кнопкой мыши по нужному объекту на области редактирования. Объект, на который указывает курсор мыши при выборе, будет выделен голубой рамкой:

GUI Machine placeholder плейсхолдер

Объект плейсхолдера

После этого попробуйте запустить в просмотр объект, содержащий плейсхолдер — на  месте плейсхолдера должен отображаться заменяемый им объект.

Если вы хотите отменить связь между плейсхолдером и заменяемым им объектом, выберите в контекстном меню пункт  Отменить связь с заменяемым объектом.  

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

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

Если страница содержит большое количество объектов и действий, то навигация и работа на области редактирования такой страницы может быть затруднена.

Начало работы

Для начала выберите режим работы .

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

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

При добавлении объектов на область редактирования рекомендуется именовать их в соответствии с предназначением. Это поможет вам легко ориентироваться в проекте с большим количеством объектов.

Статические и динамические лэйауты

Лэйауты являются основой прототипа и его частей; они многократно используются при проектировании. Все интерфейсы, также как и их части, создаются с использованием   лэйаутов.

Условно можно выделить три способа прототипирования в GUI Machine:

  • с использованием в основном статических лэйаутов;
  • с использованием в основном динамических лэйаутов;
  • смешанное прототипирование.

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

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

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

Смешанное протипирование заключается в сочетании как динамических, так и статических лэйаутов   в одном прототипе. Этот способ является оптимальным по скорости и по качеству получаемого прототипа, однако требует наличия определенного опыта — необходимо грамотно сочетать лэйауты разных типов. Для этого не потребуется специальное обучение, достаточно лишь опробовать первые два способа проектирования и определить случаи, в которых удобнее использовать тот или иной тип лэйаута.

После выбора способа проектирования добавьте подходящий лэйаут на область редактирования и вставьте его в окно.

Перейти на сайт GUI Machine Suffusion theme by Sayontan Sinha