В предыдущих сериях.
В предыдущих статьях серии мы подробно описали процесс поиска подходящего нам инструмента прототипирования И история создания собственного инструмента – Машина с графическим интерфейсом.
Теперь пришло время поговорить подробнее о том, что мы сделали.
Чтобы не тратить драгоценное время читателя, начну без замедлений и лирических отступлений описывать инструмент прототипирования GUI Machine, его функционал и возможности.
Статья будет интересна не только тем, кто уже знаком с инструментом и хочет узнать о нем больше, но и тем, кто активно ищет инструмент прототипирования и проводит их сравнительный анализ.
Краткое содержание
Имя: Машина с графическим интерфейсом Год рождения: 2009 Дата выпуска: 24 января 2011 г.Место рождения: Россия, Санкт-Петербург Организация: Али Программное обеспечение Проф.
призвание: инструмент динамического прототипирования.
Проф.
навыки: создание интерактивных прототипов сложных настольных и веб-приложений без написания кода Естественная среда: Windows, Mac OS, Linux Зарубежные аналоги: Axure RP, студия дизайна графического интерфейса, MS Expression Blend Отечественные аналоги: никто Личные качества: простота, функциональность, интуитивность, высокая скорость и удобство прототипирования.
Знание языка: русский и английский Обо мне: родился в успешной IT-компании, постоянно добавляющей новый функционал, улучшающейся и избавляющейся от ошибок.
Амбициозный, у меня грандиозные планы.
Будущий революционер в мире разработки программного обеспечения.
Контакты: www.guimachine.ru
Первая встреча
Для начала считаю необходимым кратко описать назначение приложения, решаемые задачи, его специализацию и представить интерфейс приложения.Итак, GUI Machine — это инструмент для создания интерактивных прототипов десктопных (десктопных) и веб-приложений — определение, говорящее само за себя.
Такие прототипы позволяют описать как внешний вид и графический интерфейс, так и поведение и логику интерфейса разрабатываемой системы.
Прототипы, созданные в GUI Machine, характеризуются высокой надежностью, детализацией, визуальной точностью и по степени близости к конечной системе относятся к классу прототипов High-fidelity. В качестве примеров предлагаю посмотреть видеопрезентации прототипов, созданных в GUI Machine: Прототип веб-интерфейса CRM-системы: Прототип внутреннего корпоративного портала Alee Software: Прототипирование в GUI Machine не требует каких-либо специальных знаний или навыков и не требует написания программного кода.
Таким образом, инструмент предназначен не только, и даже не столько для разработчиков, сколько для аналитиков, менеджеров проектов, дизайнеров, технических писателей, специалистов по юзабилити, которые напрямую общаются с заказчиком/будущим пользователем и наиболее полно и точно представляют его требования и пожелания.
, который впоследствии будет реализован в прототипе с минимальной потерей значимой информации.
В результате, помимо технического задания, разработчик получит рабочий прототип разрабатываемой системы, что позволит уточнить, указать неясные или неоднозначные требования и существенно снизить вероятность неверного толкования требований.
Соответственно, существенно возрастет вероятность того, что система, полностью отвечающая требованиям заказчика и полностью его удовлетворяющая, будет внедрена с первого раза или с минимальным количеством доработок.
Меньшее количество итераций разработки означает меньше потраченного времени и денег.
Кроме того, не стоит забывать и о довольном клиенте, повышенная лояльность которого является не последним фактором.
Это лишь один из способов использования прототипов, но далеко не единственный.
Однако о преимуществах прототипирования писали, говорили и спорили не раз и не два, поэтому я не буду утомлять читателя дальнейшими рассуждениями по теме, а перейду к описанию интерфейса GUI Machine.
Графический интерфейс машины
Рабочее пространство GUI Machine организовано таким образом, чтобы помочь вам сосредоточиться на создании и редактировании программных интерфейсов.
В верхней части окна приложения расположено меню, выполненное в стиле ленты, обеспечивающее быстрый доступ к наиболее популярным операциям и настройкам.
Ниже по центру находится область редактирования прототипа, где создаются и собираются из различных компонентов экраны интерфейса.
Корешки страниц проекта отображаются под областью редактирования.
Слева и справа расположены основные рабочие панели: Компоненты, слои, свойства объектов, шаблоны И История .
Все панели можно свернуть, скрыть по краям области редактирования, изменить их размер (как по высоте, так и по ширине), переместить и закрыть.
Меню также можно свернуть, оставив только одну верхнюю строку.
Таким образом, вы сможете настроить внешний вид приложения «под себя» и освободить максимальное количество места для области редактирования прототипа для более удобной и приятной работы.
Вы можете быстро скрыть все панели с помощью сочетания клавиш.
Ctrl+H .
Управление панелью также доступно из вкладки Утилиты и фреймы верхнее горизонтальное меню приложений: 
Здесь вы можете скрыть или показать панели (по одной или все вместе), зафиксировать их положение, отключить отображение их заголовков.
Компоненты
Панель Компоненты — основной рабочий инструмент для построения интерфейсов, содержащий множество различных компонентов.Инструмент предназначен для добавления объектов в область редактирования.
Панель содержит 4 набора компонентов: Стандартный, Расширенный, Фигуры, Ваадин .
Помимо стандартного вида (дерево компонентов с названиями), панель имеет альтернативный компактный вид: 
Вы можете изменить способ отображения компонентов, щелкнув правой кнопкой мыши внутри панели.
Стандартные компоненты 
Набор стандартных компонентов, используемых для построения любого интерфейса: кнопки (раскрывающиеся и обычные), панели (обычные, панель вкладок, разделенная панель), текстовые метки, поля и области, флажок, переключатель, списки (раскрывающийся и обычный).
), дерево, таблица, окно, меню, всплывающее меню и другие.
Практически все компоненты набора являются родными компонентами операционной системы.
Это значит, что внешний вид и поведение компонентов наследуются, заимствуются из операционной системы, на которой прототип запущен в режиме просмотра.
Все стандартные компоненты также можно найти на вкладке Стандартный верхнее горизонтальное меню приложений: 
На рисунке ниже показано окно, работающее в Windows 7 в режиме просмотра, содержащее стандартные компоненты: 
И теперь то же окно, но работающее на Mac OS: 
и в Linux: 
В набор, помимо обычных элементов интерфейса, входят также макеты — динамические и статические — объекты, на которых основан любой интерфейс, созданный в GUI Machine. Они определяют специфику работы в GUI Machine. Статический макет
Статическая верстка наиболее привычна для подавляющего большинства пользователей.
По сути, это контейнер, который может содержать несколько случайно расположенных объектов.
Его статичность заключается в том, что размер и положение всех объектов контента жестко фиксированы и не могут быть изменены в режиме просмотра.
Прототипы на основе статических макетов можно создавать очень быстро.
Основное назначение таких прототипов — создание скриншотов (сбросили — запустили — удалили — закрыли), поскольку степень динамичности у них низкая.
В левой части рисунка показан статический макет области редактирования, содержащий несколько объектов.
В последней части есть тот же макет, но запущенный для просмотра.
Окно просмотра намеренно вытянуто по вертикали, чтобы показать «статичность» этого макета: при изменении размера окна положение и размер объектов контента остаются неизменными.
При работе со статическим макетом рекомендую использовать направляющие линии или инструменты выравнивания, расположенные на вкладке Утилиты и фреймы верхнее горизонтальное меню приложения.
В противном случае довольно сложно расположить объекты внутри статического макета равномерно и красиво.
Представленный на рисунке набор инструментов позволяет выравнивать по горизонтали и вертикали положение нескольких выделенных в области редактирования объектов, выравнивать их ширину и высоту, а также располагать их последовательно в нужном порядке через заданные промежутки времени.
Динамический макет Если требуется полностью интерактивный и динамичный прототип, то его следует создавать на основе динамических макетов.
Этот объект представляет собой контейнер, который можно разделить на несколько ячеек, образуя таким образом своеобразную структуру интерфейса.
Объекты, вставленные в динамический макет, располагаются строго по ячейкам (размер вставленного объекта будет изменен под размер ячейки/ячейок).
При изменении размера окна, работающего в режиме просмотра, также будут изменены положение и размер объектов, вставленных в макет. Работа с динамическими макетами несколько сложнее; на изучение его поведения нужно потратить некоторое время (около 10 минут с документацией), но при некоторой сноровке работа с ним не вызывает никаких сложностей и неудобств.
Как и на предыдущем рисунке, здесь область просмотра макета намеренно удлинена.
При изменении размера окна также изменяются положение и размер некоторых объектов.
Это зависит от типа ячейки макета, в которой находится тот или иной объект (есть 3 типа).
Заполнитель Помимо макетов, из ряда стандартных элементов интерфейса выделяются компоненты.
Заполнитель .
Как следует из названия, это объект, занимающий определенное место на прототипе и хранящий ссылку на другой объект. При запуске прототипа в режиме просмотра заполнитель будет автоматически заменен объектом, на который он ссылается.
Расширенные компоненты 
Набор расширенных компонентов содержит нестандартные компоненты интерфейса (такие как «Карта Google», «Сворачиваемая панель», «Список флажков») и компоненты, предназначенные исключительно для создания сложных, нетривиальных действий (например, «Таймер», «Аудиоплеер»), «Объект связи»).
.
Последние не являются элементами интерфейса и не могут быть вставлены ни в один макет.
Как и стандартные компоненты, расширенные компоненты также можно найти на вкладке Передовой верхнее горизонтальное меню приложений: 
На рисунке ниже показано окно, работающее в режиме просмотра, содержащее компоненты из расширенного набора (конечно, только те, которые являются элементами интерфейса).
Веб-компоненты Vaadin 
Набор веб-компонентов Vaadin, в отличие от стандартного набора, ненативный, платформонезависимый — он выглядит и работает одинаково в любой операционной системе.
В него вошли самые популярные и часто используемые компоненты, дублирующие компоненты из стандартного набора, а также 2 более сложных, нестандартных компонента: Поле выбора даты И Календарь .
Как вы уже догадались, компоненты Vaadin также дублируются во вкладке Ваадин верхнее горизонтальное меню приложений: 
На рисунке ниже показано окно, работающее в режиме просмотра и содержащее веб-компоненты Vaadin: 
Цифры 
Набор простых (квадрат, круг, прямоугольник, овал, ромб) и сложных (многоугольник) геометрических фигур для создания собственных элементов управления или окон произвольной формы.
Естественно, независимо от платформы.
Формы также можно найти во вкладке Цифры верхнее горизонтальное меню приложений: 
На рисунке ниже показано окно, работающее в режиме просмотра и содержащее все фигуры.
Свойства объекта
Для каждого компонента в GUI Machine мы попытались «экстернализировать» и сделать изменяемым максимальное количество его свойств.
Это позволяет детально настраивать, изменять и настраивать любой объект. Все свойства объекта разделены на 3 группы: свойства типа, стандартные свойства, свойства редактора .
В первую группу входят свойства, характерные только для объектов данного конкретного типа (на рисунке — свойства окна, объекта типа JWindow).
Набор свойств для объекта другого типа (например, для кнопки — объект типа JButton) будет другим.
Набор стандартных свойств одинаков для объектов любого типа и включает в себя общие свойства, применимые ко многим объектам: текст всплывающей подсказки (подсказка при наведении), курсор при наведении, настройки отображения и прозрачности, настройки полосы прокрутки.
Однако у некоторых объектов (как на рисунке) некоторые свойства этой группы заблокированы.
Группа свойств редактора содержит свойства, влияющие на внешний вид и поведение объекта исключительно в области редактирования.
При запуске прототипа состояние этих свойств не имеет значения.
Первые два свойства этой группы — тип объекта и идентификатор объекта — заблокированы для всех объектов и предназначены только для информационных целей.
GUI Machine позволяет изменять свойства сразу нескольких однотипных объектов, выделенных в области редактирования.
На вкладке также представлены некоторые наиболее популярные и часто встречающиеся свойства объектов, отвечающие за форматирование и расположение текстового контента.
Редактирование верхнее горизонтальное меню приложений: 
Для того, чтобы иметь возможность создать свой уникальный элемент управления (настраиваемый элемент управления), некоторые объекты имеют свойство При регистрации .
При отключении этого свойства рендеринг объекта по умолчанию полностью отключается, но его поведение сохраняется.
Останется только нанести на этот объект заранее подготовленное изображение или форму.
Таким образом можно получить, например, нестандартную кнопку или окно нестандартной формы.
HTML-редактор Практически все свойства объектов с текстовым содержимым можно редактировать во встроенном HTML-редакторе.
Чтобы запустить его, вам нужно нажать на маленькую кнопку справа от свойства text: 
Редактор HTML позволяет как редактировать текст в визуальном редакторе, так и напрямую писать HTML-код. 
HTML-редактор, как вы понимаете, существенно расширяет возможности настройки объектов.
Как ни странно, большинство инструментов прототипирования лишены этой функциональности.
Редакторы сложных объектов Для наиболее сложных объектов - таблицы, дерева, панели вкладок, обычных и выпадающих списков, обычного и всплывающего меню, списка флажков - свойств на соответствующей панели недостаточно для изменения и тонкой настройки.
их внешний вид и содержание.
Поэтому GUI Machine имеет встроенные отдельные редакторы для каждого из перечисленных объектов.
Для их запуска необходимо нажать на значение первого свойства объектов: 
В качестве примера ниже приведено описание редактора таблиц: 
Как видно из рисунка выше, редактировать можно как заголовок таблицы, так и ее содержимое.
В обоих случаях текст можно редактировать в HTML-редакторе.
Для ячеек таблицы предлагается выбрать тип, определяющий их содержимое.
Конечно, можно добавлять, удалять и перемещать строки и столбцы таблицы.
Для других сложных объектов существуют аналогичные редакторы со своим набором операций.
Свойства объекта по умолчанию Обычно однотипные объекты (например, кнопки) в интерфейсе или прототипе оформляются в одном стиле.
Чтобы избежать необходимости снова и снова стилизовать каждый объект, добавляемый в интерфейс, можно один раз установить свойства объекта по умолчанию.
После этого, когда вы добавляете объект в область, он по умолчанию будет иметь стиль, указанный в этих свойствах.
Свойства объекта по умолчанию можно задать на последней вкладке настроек приложения: 
Слои
На панели Слои отображаются все объекты текущей страницы проекта.
Представление по умолчанию — дерево.
Объект является дочерним по отношению к другому объекту, если первый вставлен во второй или находится внутри него.
Объект является родителем другого объекта, если первый содержит в себе второй.
Все интерфейсы в GUI Machine построены по этому принципу многоуровневости.
Благодаря этому предметы жестко прикреплены друг к другу.
Это позволяет, например, перемещать родительский объект вместе со всеми его дочерними элементами, что очень и очень удобно.
Контекстное меню панели позволяет отобразить ее альтернативный вид — список слоев.
В этом варианте иерархия объектов не отображается, а отображается список слоев сверху вниз.
Каждый слой соответствует одному объекту.
Здесь понятие слоев используется в классическом понимании: объект самого верхнего слоя (с наибольшим номером) отображается поверх других, самый нижний слой (с номером 0) отображается позади других объектов.
Инструмент позволяет менять слои объектов и тем самым обеспечивает их правильное расположение в интерфейсе.
Инструменты для работы со слоями также доступны на вкладке Редактирование верхнего горизонтального меню приложения: 
Шаблоны
Шаблон — это заранее подготовленный макет часто используемых объектов.
Использование шаблонов значительно ускоряет и облегчает разработку прототипов, особенно когда разные интерфейсы прототипов содержат схожие объекты или части интерфейса: Возможно создание 3 типов шаблонов:
- простой – шаблон отдельного объекта;
- составной — шаблон объекта со всеми содержащимися в нем дочерними объектами (например, интерфейс целиком);
- интерактивный — шаблон интерфейса с предопределенными действиями.
Более того, вы можете передавать наборы шаблонов другому пользователю GUI Machine или наоборот устанавливать себе чужие шаблоны.
Созданные шаблоны сохраняются в папке /шаблоны/данные Каталог установки GUI Machine. Чтобы передать созданные шаблоны другому пользователю, достаточно скопировать содержимое папки шаблоны в каталог установки GUI Machine на своем компьютере.
История
Для полноты картины осталось представить последнюю панель – История .
Этот инструмент, думаю, не нуждается в подробном описании.
С его помощью можно вернуться в любое предыдущее состояние файла проекта.
Каждый раз, когда вы выполняете какую-либо операцию в проекте, в список истории добавляется новая запись.
Количество сохраненных записей списка является настраиваемым значением.
Если указанное количество превышено, самые старые записи будут удалены.
Списки истории хранятся отдельно для каждой страницы проекта.
Есть возможность отображать дату и время операции в списке, а также выделять отдельные записи цветом.
Область редактирования
Описание основных рабочих панелей завершено – осталось только представить функционал области редактирования.Его назначение понятно без пояснений: на нем непосредственно строятся интерфейсы из отдельных объектов.
Для более удобной и продуктивной работы в области редактирования имеется ряд настроек: цвет фона и размер области, тип сетки (большая, мелкая или обе) и ее размер (пиксели, сантиметры, миллиметры или дюймы).
Некоторые из них можно найти в настройках приложения: 
Остальные настройки находятся на вкладке Утилиты и фреймы верхнее горизонтальное меню приложений: 
Инструменты этого набора, помимо настройки самой области, позволяют изменять параметры отображения расположенных на ней объектов (показывать или не показывать площадь и размер объектов, глубину их вложенности в макеты, действия между ними).
и направляющие линии.
Вы также можете показать или скрыть боковые панели навигации, на которых значки объектов отображаются в зависимости от их расположения в области.
Область редактирования с указанными выше настройками будет выглядеть следующим образом: 
«Мы возрождаем» интерфейсы
После знакомства с интерфейсом GUI Machine и особенностями построения интерфейсов в нем у читателя наверняка возникнет вопрос: как сделать интерфейсы «живыми», кликабельными и интерактивными? Отвечаю: это проще простого, и сейчас вы сами в этом убедитесь.В тексте выше уже пару раз мелькало понятие «действие» — это основа, эликсир оживления интерфейсов.
Говоря более формальным языком, действие — это механизм задания реакции одного объекта (объекта действия) на событие, произошедшее с другим объектом (объектом события).
Создание любого действия в GUI Machine сводится к нескольким простым шагам:
- Сначала вам нужно определиться с объектом события и объектом действия.
Чтобы сделать правильный выбор, необходимо запомнить порядок работы механизма: при выполнении заданной операции над объектом события будет выполнена указанная операция над объектом действия.
- Затем необходимо выделить объект события в области редактирования, вызвать его контекстное меню (щелкнуть правой кнопкой мыши), выбрать Добавить действие .
После этого нужно нажать на объект действия.
На рисунке ниже объект события — это флажок (флажок), а объект действия — окно:
- Откроется окно создания действия:
Здесь нужно выбрать, во-первых, событие (в примере — изменить состояние выбора флажок) и его параметры (состояние - выбрано ), во-вторых, действие ( открытие/закрытие окна ) и его параметры (открыть окно в центре экрана, не позволять окну открываться за края экрана). - Сделанный.
Нажмите кнопку Создать действие.
Для проверки можно запустить окно (то, что слева) и отметить содержащийся в нем флажок.
Откроется второе окно.
Как я и обещал, все просто.
Любые действия в GUI Machine создаются точно так же.
Список возможных событий и действий для разных компонентов различен и весьма внушителен.
Среди них есть как простые, так и достаточно сложные.
В совокупности они позволяют создавать полностью интерактивные прототипы, моделировать работу реальной программы или веб-сайта, описывать нетривиальный функционал проектируемой системы.
События
Примеры простых событий: нажатие кнопки, получение/потеря фокуса объекта, изменение состояния выбора объекта, выбор элемента списка, выбор ячейки таблицы, выбор пункта всплывающего меню, выбор вкладки, выбор дерева.элементы.
Их суть, я полагаю, ясна из названий и не требует дополнительных пояснений.
Сложные события представляют больший интерес.
Например, событие мыши на части объекта.
Допустим, в интерфейсе есть элемент управления в виде изображения — клевера:
Теги: #прототип #Прототипирование #java #интерфейсы #ui #interface #interface #GUI #прототипирование интерфейса #дизайн интерфейса #PROTOTYPE #GUI Machine
-
Новый Тип Игрока
19 Oct, 24
