Система макетирования Maqetta : Проектирование мобильного пользовательского интерфейса на HTML5

Перетащите HTML5-разработку в свой браузер

Нужен прототип приложения HTML5? Забудьте о программировании. Зрительно-моторная координация ― почти все, что нужно для создания прототипа с помощью Maqetta, WYSIWYG0-инструмента на основе браузера для настольных и мобильных приложений. Первая статья цикла из трех частей знакомит с этим бесплатным, открытым ПО, которое работает в браузере и позволяет проектировщикам манипулировать многочисленными виджетами, создавая действующие макеты пользовательского интерфейса (UI). Из первой части читатель узнает об основных функциях и возможности Maqetta в ходе прототипирования реалистичного мобильного приложения.

Тони Эрвин, инженер-программист, IBM

Фото автораТони Эрвин (Tony Erwin) — программист группы новых интернет-технологий IBM и один из основных членов группы разработки Maqetta. Работает в IBM с 1998 года и имеет большой опыт проектирования и разработки пользовательских интерфейсов с применением широкого спектра технологий и инструментов. До прихода в IBM получил ученую степень магистра информатики в университете штата Индиана и бакалавра информатики в технологическом институте Rose-Hulman.



12.08.2013

Введение

Об этом цикле статей

Этот цикл статей демонстрирует, как использовать Maqetta для прототипирования пользовательских интерфейсов HTML5.

  • В этой части речь пойдет об основных функциях Maqetta в процессе создания прототипа многофункционального мобильного приложения.
  • Во второй части мы переведем прототип приложения на следующий уровень, написав специальный код JavaScript для добавления интерактивных функций.
  • А в третьей части мы воспользуемся PhoneGap, чтобы превратить прототип, сгенерированный Maqetta, в настоящее мобильное приложение, готовое к установке на реальное устройство.

Подробнее об использовании Maqetta можно прочесть в блоге Тони на developerWorks.

Maqetta – это бесплатный, открытый визуальный инструмент разработки, который делает проектирование многофункциональных пользовательских интерфейсов HTML5 простым и интересным. Разработчик пользовательского интерфейса может использовать инструмент Maqetta, который работает в Web-браузере без всяких плагинов или дополнительных загрузок, для построения действующих прототипов настольных и мобильных приложений. Чтобы собрать действующий макет пользовательского интерфейса, достаточно перетащить виджеты на холст устройства, а затем передать этот прототип UI разработчику для программирования.

Maqetta и Dojo Foundation

Инструмент Maqetta создала компания IBM и в апреле 2011 года передала организации Dojo Foundation в качестве проекта по разработке ПО с открытым исходным кодом. Он распространяется под маркой Dojo по лицензии open source на либеральных и коммерчески выгодных условиях. Каждые несколько месяцев выходит новая версия Maqetta, и с момента своей открытой публикации продукт непрерывно совершенствуется. В выпусках второй половины 2012 года серьезно переработан UI и значительно улучшена производительность.


Проектирование пользовательского интерфейса приложения для отслеживания веса

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

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

Рисунок 1. Блок-схема приложения для отслеживания веса Увеличить рисунок
Блок-схема схема приложения для отслеживания веса.

У этого приложения четыре представления:

  • mainView ― это первое представление, которое отображается при запуске приложения пользователем. Оно содержит набор чисел, соответствующих показателям веса, введенным пользователем. Нажатие на любое значение веса из списка приводит к появлению следующего представления, detailsView. Кроме того, пользователь может щелкнуть на значке плюс (+)в заголовке приложения, чтобы добавить новый вес;
  • detailsView отображает параметры (вес, дату ввода, примечания и т.п.), связанные с данной записью веса. Щелчок на элементе Date вызывает представление detailsView_Date. Щелчок на элементе Notes вызывает представление detailsView_Notes. Нажатие кнопки Home возвращает пользователя к представлению mainView;
  • detailsView_Date позволяет устанавливать дату ввода веса с помощью шкалы-колеса. Это конечная точка навигации, отсюда пользователь может только вернуться к представлению detailsView. Это делается нажатием кнопки Details в заголовке приложения;
  • detailsView_Notes позволяет вводить любые примечания, относящиеся к записи веса, в свободной текстовой форме. Это также конечная точка навигации, откуда пользователь может только вернуться к представлению detailsView. Это делается нажатием кнопки Details в заголовке приложения.

Хотя дизайн программы отслеживания веса может показаться сложным, макет ее пользовательского интерфейса можно создать в Maqetta визуально без всякого программирования. Достаточно перетащить несколько виджетов и изменить некоторые параметры.


Запуск Maqetta в облаке

Установки Maqetta

Группа разработчиков Maqetta предоставляет бесплатную, некоммерческую облачную версию Maqetta на сайте Maqetta.org, которую можно использовать как есть на свой собственный страх и риск.

Также можно установить инструмент Maqetta на сервере в своей собственной интрасети, загрузив его со страницы загрузок Maqetta. Чтобы успешно выполнить примеры из этого цикла статей, понадобится Maqetta 8.0 или более поздняя версия.

Максимальную отдачу от этой статьи читатель получит в том случае, если будет следить и по мере чтения строить приложение. Это легко — и бесплатно! Итак, приступим.

  1. Перейдите на сайт Maqetta.org с помощью последней версии Chrome, Firefox или Safari.
  2. Нажмите кнопку Launch Maqetta.
  3. Если у вас уже есть учетная запись:
    1. Введите свой адрес email и пароль.
    2. Нажмите кнопку Log In.
  4. Если учетной записи нет:
    1. Нажмите кнопку регистрации Register в нижней части страницы.
    2. На странице создания учетной записи введите свой адрес электронной почты и нажмите кнопку Sign up (зарегистрироваться).
    3. Дождитесь электронного письма со ссылкой для подтверждения своей регистрации и нажмите на нее, когда письмо придет.
    4. Подтвердив запрос, введите свой адрес электронной почты и пароль и нажмите кнопку Log In.

Страница приветствия Maqetta

Вы увидите рабочую область со страницей приветствия Maqetta. Страница приветствия (Рисунок 2) ― удобная отправная точка для выполнения ключевых функций Maqetta. Это стартовая страница для создания нового приложения, и она же содержит ссылки на документацию, руководства и рекомендации по Maqetta (см. раздел Ресурсы). Ко всем функциям начальной страницы можно обращаться из развертывающегося меню в верхней части страницы.

Рисунок 2. Страница приветствия Maqetta Увеличить рисунок
Страница приветствия Maqetta

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

Сначала мы будем работать с файлами из проекта по умолчанию "Project1". Хотя это строго не требуется, создание отдельного проекта для разработки каждого приложения поможет поддерживать организованность и упростить экспорт своей работы в другие инструменты. Итак, начнем с создания нового проекта приложения для отслеживания веса:

  1. Выберите пункт меню Create > Project... на панели инструментов в верхней части страницы Maqetta.
  2. В диалоговом окне New Project введите имя проекта weightTracker (Рисунок 3).
    Рисунок 3. Диалоговое окно нового проекта
    Диалоговое окно нового проекта
  3. Нажмите кнопку Create.

Если нужно вернуться к project1 (или любому другому проекту), выберите его из списка проектов на палитре Files.

Создание мобильного приложения

Теперь создадим HTML-файл, который будет использоваться приложением. (Выполнив действия, описанные в этой статье, вы сможете сравнить свою работу с HTML-файлом из раздела загрузок.)

  1. Выберите пункт меню Create > Mobile Application... .
  2. В окне Create a Mobile Application (Создание мобильного приложения) (см. Рисунок 4) введите имя файла index.html. (Заметим, что index.html - обязательное имя файла, если вы решите создать приложение для отслеживания веса, устанавливаемое на мобильные устройства, с помощью PhoneGap. Мы рассмотрим этот вариант в третьей статье данного цикла, так что лучше сразу правильно выбрать имя файла.)
  3. В поле устройства оставьте значение iphone. При желании тип устройства можно будет изменить позже.
    Рисунок 4. Диалоговое окно создания мобильного приложения
    Диалоговое окно создания мобильного приложения
  4. Нажмите кнопку Create.

Редактор мобильных страниц

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

Рисунок 5. Холст нового мобильного приложения с силуэтом iPhone.
Холст нового мобильного приложения с силуэтом iPhone.

Построение основного представления

После создания HTML-файла можно приступать к построению представления mainView согласно блок-схеме.

Вкладка Palette на левой стороне рабочей области содержит все виджеты, применимые для разрабатываемого типа приложения (в данном случае, мобильного). Виджеты организуются по разделам в соответствии с их назначением. Виджеты в папках Views (представление), Heading(заголовок), Lists(списки), Controls (элементы управления) и Containers (контейнеры) взяты из библиотеки Dojo Mobile (см. раздел Ресурсы). В программе отслеживания веса мы используем только часть примерно из 50 виджетов из этих папок.

  1. Откройте раздел Views с доступными виджетами представления (Рисунок 6).
    Рисунок 6. Виджеты мобильных представлений Maqetta
    Виджеты мобильных представлений Maqetta
  2. Выберите виджет ScrollableView, первый в разделе Views, и перетащите его на силуэт устройства. Экран должен выглядеть как на скриншоте (Рисунок 7).
    Рисунок 7. Добавление ScrollableView на силуэт iPhone Увеличить рисунок
    Добавление ScrollableView на силуэт iPhone.
    Обратите внимание на следующее:
    • фон страницы стал голубовато-серым. Это потому, что первый виджет Dojo Mobile, добавленный на страницу, создает таблицы стилей CSS, соответствующие оформлению выбранного мобильного устройства;
    • вся страница обведена прямоугольником выделения. Это потому, что выбран ScrollableView с шириной и высотой по умолчанию 100%.
  3. Теперь нажмите на вкладку Widget с правой стороны рабочей области Maqetta. Откроется палитра свойств с фокусом на разделе специфических свойств виджета (Рисунок 8). Обратите внимание, что ID имеет значение по умолчанию ScrollableView_0 и что в верхней части палитры свойств отображается for: ScrollableView #ScrollableView_0 (с указанием типа и ID данного виджета).
    Рисунок 8. Рабочая область Maqetta с вкладкой свойств Увеличить рисунок
    Рабочая область Maqetta с вкладкой свойств
  4. Наберите mainView в поле ID и нажмите кнопку Return, чтобы зафиксировать изменения. Теперь в верхней части палитры свойств отображается for: ScrollableView #mainView (Рисунок 9) . Этот ID соответствует дизайну, показанному на первоначальной блок-схеме приложения. (См. Рисунок 1.)
    Рисунок 9. Палитра свойств представлений
    Палитра свойств представлений
    Отметим, что ID представления имеет важное значение. Библиотека виджетов Dojo Mobile использует ID для обращения к представлениям, когда они скрываются и отображаются в процессе навигации. По этим ID мы будем ссылаться на представления при создании схемы навигации в Maqetta. А во второй статье этого цикла они будут использоваться в коде программы, поэтому важно правильно указывать их.
  5. Обратите внимание на палитру Scenes в правом нижнем углу рабочей области (Рисунок 10). Все создаваемые представления появляются в узле Dojo Mobile Views на этой палитре. В данном случае узел должен содержать ScrollableView #mainView.
    Рисунок 10. Палитра Scenes
    Палитра Scenes

Добавление заголовка

Продолжим построение mainView, добавив заголовок:

  1. Перетащите виджет Heading из раздела Heading палитры виджетов в центр силуэта устройства. (В случае затруднений с поиском виджета можно ввести его имя в поле поиска в верхней части палитры виджетов.)
  2. Введите в текстовое поле Weight Tracker (Рисунок 11) и нажмите кнопку ОК, чтобы сохранить текст заголовка. Если впоследствии нужно будет изменить текст, просто дважды щелкните на заголовке, чтобы снова увидеть поле ввода. (Этот процесс распространяется на все виджеты, открывающие окно ввода данных при их первоначальном создании).
    Рисунок 11. Добавление заголовка
    Добавление заголовка
  3. В разделе виджетов палитры свойств (Рисунок 12) измените атрибут fixed на top. Это приведет к тому, что при вертикальной прокрутке в любом месте представления заголовок будет оставаться в том же месте (в верхней части окна приложения).
    Рисунок 12. Задание свойств заголовка
    Задание свойств заголовка

Добавление таблицы веса

Единицы измерения

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

На следующем шаге добавим виджет, отображающий таблицу значений веса, введенных пользователем:

  1. Перетащите EdgeToEdgeDataList из раздела Lists палитры виджетов и поместите его на панель, только что добавленную на силуэт iPhone. Будет создана таблица и появится диалоговое окно для наполнения ее данными (Рисунок 13). В каждой строке первое значение ― это метка данной строки, а второе ― ID представления, к которому приложение будет переходить при щелчке на этой строке.
    Рисунок 13. Добавление EdgeToEdgeDataList
    Добавление EdgeToEdgeDataList
  2. Измените содержимое текстового поля, указав вес (в фунтах), как показано в листинге 1, и нажмите кнопку ОК. detailsView ― это ID представления, в которое приложение будет переходить при щелчке на этой строке или на значении веса. Мы определили этот тип навигации на первоначальной блок-схеме приложения (см. Рисунок 1).
    Листинг 1. Ввод значений EdgeToEdgeDataList
    149, detailsView
    150, detailsView
    151, detailsView
    148, detailsView
    146, detailsView
  3. Вернитесь к палитре свойств и измените ID списка на weightList. На этом построение mainView в основном завершено. Экран должен выглядеть как на скриншоте (Рисунок 14).
    Рисунок 14. Главный экран iPhone в редакторе мобильных страниц
    Главный экран iPhone в редакторе мобильных страниц
    Здесь мы установили ID, потому что это важно для второй статьи. Обычно разработчик не задает значение ID для таких виджетов, как weightList, которые не являются представлениями; это делается во время кодирования пользовательского интерфейса приложения.

Изменение типа устройства

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

  1. Откройте меню Document Settings, второй значок справа на панели инструментов мобильного редактора, и нажмите кнопку Choose device (выбрать устройство). (Это меню позволяет также вращать устройство).
    Рисунок 15. Меню Document Settings
    Меню Document Settings
  2. Если в HTML-файле есть несохраненные изменения, то вы получите предупреждение о необходимости сохранить изменения перед переключением устройств (Рисунок 16). Нажмите кнопку Save.
    Рисунок 16. Внимание!
    Скриншот предупреждающего сообщения
  3. Нажатие кнопки Save открывает диалоговое окно для выбора силуэта устройства. Диалоговое окно содержит раскрывающийся список с несколькими вариантами устройств (Рисунок 17):
    Рисунок 17. Выбор силуэта устройства
    Выбор силуэта устройства
  4. Выберите устройство, на экране которого вы хотите видеть свой пользовательский интерфейс (например, android_340x480) и нажмите кнопку Select. Maqetta заменит устройство на выбранное (Рисунок 18).
    Рисунок 18. Редактор страницы Maqetta с представлением mainView для Android
    Редактор страницы Maqetta с представлением mainView для Android
    Можно продолжать перетаскивать виджеты и редактировать их свойства, как будто никакой замены устройства не было, но выглядеть они будут как на вновь выбранном устройстве.
  5. Чтобы вернуться, выберите Choose device из меню Document Settings, iphone из списка устройств, и нажмите кнопку Select.

Создание представления Details

Теперь приступим к созданию представления Details (detailsView) согласно блок-схеме приложения (Рисунок 1). Оно отображает детали любой записи со значением веса.

  1. В разделе Views палитры виджетов выберите ScrollableView и перетащите в mainView. Это действие добавляет к текущему представлению (в данном случае mainView) новое, сестринское (т.е. того же уровня в дереве элементов). Вновь созданное представление будет пустым и выбранным.
  2. В палитре свойств измените ID нового представления на detailsView. Как упоминалось выше, очень важно правильно установить ID представления. При создании EdgeToEdgeDataList в представлении mainView мы настроили его на переход к новому представлению с IDdetailsView.
  3. Взгляните на палитру Scenes (Рисунок 19).
    Рисунок 19. Палитра Scenes с новым представлением
    Палитра Scenes с новым представлением
    Обратите внимание на следующее:
    • на данный момент в Dojo Mobile Views имеется два представления: ScrollableView #mainView и ScrollableView #detailsView. Новое представление является сестринским по отношению к первому;
    • второе представление становится выбранным и видимым (как и при добавлении нового виджета), но виджет первого представления теперь невидим. В Dojo Mobile в любой момент времени виден только один виджет представления. Maqetta имитирует это поведение времени выполнения во время разработки, управляя отображением виджетов таким образом, что когда отображается одно представление, все сестринские виджеты становятся скрытыми;
    • можно выбирать между виджетами, щелкая на них в Dojo Mobile Views. Выбранное представление станет видимым на силуэте устройства.

Добавление заголовка представления Details

Продолжим построение detailsView, добавив заголовок:

  1. Убедитесь, что на палитре Scenes выбрано detailsView.
  2. В разделе Heading палитры виджетов выберите Heading и перетащите в представление.
  3. В текстовое поле в появившемся диалоговом окне введите Details и нажмите кнопку OK, чтобы изменить текст заголовка.
  4. Внесите на палитре свойств следующие изменения (Рисунок 20):
    • измените атрибут back на Home. Это приведет к созданию кнопки с меткой Home в заголовке, которая возвращает пользователя к предыдущему представлению;
    • измените атрибут moveTo кнопки на mainView, выбрав mainView из раскрывающегося меню. Это заставит приложение переходить к основному виду при каждом нажатии кнопки Back;
    • измените атрибут fixed кнопки на top.
    Рисунок 20. Палитра свойств заголовка
    Палитра свойств заголовка

Теперь представление detailsView должно выглядеть как на скриншоте (Рисунок 7).

Рисунок 21. Представление Details с заголовком
Представление Details с заголовком

Предварительный просмотр и запуск приложения

При работе в Maqetta предварительный просмотр можно устроить в любое время. Мы построили два представления и определили навигацию между ними, так что давайте посмотрим реальную версию прототипа программы отслеживания веса, чтобы убедиться, что пока все установлено правильно.

  1. В палитре Scenes начните с выбора mainView. Представление, выбранное при выполнении предварительного просмотра, отображается первым.
  2. На панели инструментов нажмите на значок Preview in Browser (Предварительный просмотр в браузере ― последняя запись на панели инструментов). Откроется новая вкладка браузера с приложением для отслеживания веса, которое выполняется в силуэте мобильного устройства iPhone (Рисунок 22).
    Рисунок 22. Приложение для отслеживания веса работает в силуэте iPhone
    Приложение для отслеживания веса работает в силуэте iPhone
  3. Нажмите на одну из записей в раскрывающемся списке веса, и detailsView сменится представлением mainView. В режиме предварительного просмотра виджеты приложения реагируют на взаимодействие с пользователем так, как будто они запущены и работают на устройстве.
  4. Нажмите кнопку Home в заголовке detailsView, и вновь появится mainView.

На этом проверка прототипа успешно завершена!

Изменение ориентации и устройства в режиме предварительного просмотра

Дадим несколько советов относительно предварительного просмотра. Во-первых, обратите внимание, что на экране предварительного просмотра есть элементы управления для переключения устройств, регулирования размера и изменения ориентации с книжной на альбомную. Можно поэкспериментировать с этими элементами управления, перейдя в другое устройство и используя кнопку Angle, чтобы положить его на бок. Моя редакция показана на рисунке (Рисунок 23).

Рисунок 23. Предварительный просмотр Android в альбомном положении Увеличить рисунок
Предварительный просмотр Android в альбомном положении

Обратите внимание, что код продолжает работать, так что можно еще проверить схему навигации между mainView и detailsView с новой конфигурацией.

Запуск приложения в мобильном браузере

Наконец, обратите внимание на URL-адрес рядом с меткой Previewing в режиме просмотра Maqetta (Рисунок 24).

Рисунок 24. Панель инструментов Preview с URL-адресом Увеличить рисунок
Панель инструментов Preview с URL-адресом

Этот URL-адрес можно использовать для просмотра прототипа на браузере мобильного устройства, например, чтобы вставить его в браузер Safari на iPhone. Хотя предварительный просмотр приложения в мобильном браузере важен (особенно если ваша конечная цель ― создать приложение, размещаемое на Web-сервере), имейте в виду, что это не то же самое, что установить и запустить приложения как "родное". Мы увидим, как это работает, в третьей части данного цикла, когда объединим Maqetta с PhoneGap.


Создание SpinWheel для представления Details

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

Мы сконструируем виджет RoundRect (помечен как RoundRectCategory) который станет контейнером для виджета SpinWheel. SpinWheel выглядит как шкала весов. Мы заполним его цифрами, соответствующими весу в фунтах (напомним, что для прототипа приложения мы намеренно используем английские единицы измерения), а затем немного изменим внешний вид этого виджета. В процессе мы будем использовать некоторые детали палитры Properties, которые еще не изучили — а именно, вкладки Layout и Margin.

Построение виджетов RoundRect и SpinWheel

  1. Вернитесь на страницу редактора Maqetta и выберите detailsView из палитры Scenes.
  2. В разделе Lists палитры виджетов выберите RoundRectCategory и перетащите его на холст detailsView. Это будет меткой нашего SpinWheel. Введите в текстовое поле Weight (lbs) [Вес (фунтов)] (Рисунок 25) и нажмите кнопку ОК.
    Рисунок 25. Добавление RoundRectCategory в представление Details
    Добавление RoundRectCategory в представление Details
  3. Теперь перетащите RoundRect из раздела Containers > Dojo палитры виджетов в представление под RoundRectCategory (Рисунок 26).
    Рисунок 26. Добавление RoundRect в представление Details
    Добавление RoundRect в представление Details
  4. Перетащите виджет SpinWheel из раздела Controls > Pickers палитры виджетов и поместите его над RoundRect, что сделает этот виджет дочерним по отношению к прямоугольнику (то есть содержащимся в прямоугольнике).

Виджет SpinWheel, показанный на рисунке (Рисунок 27), состоит из двух слотов с буквами. Нам же нужно получить три слота с цифрами, имитирующие шкалу весов.

Рисунок 27. SpinWheel по умолчанию в представлении Details
SpinWheel по умолчанию в представлении Details

Настроим SpinWheel с тремя столбцами

  1. В палитре Properties замените ID представления SpinWheel на weightSpinWheel. Выберите первый слот SpinWheel, дважды щелкните на нем и введите в появившееся текстовое поле «0,1,2,3,4,5,6,7,8,9». Нажмите кнопку OK.
    Рисунок 28. Изменение содержания первого слота SpinWheel
    Изменение содержания первого слота SpinWheel
  2. Пока первый слот еще выбран, измените атрибут value в разделе виджетов палитры Properties на 1 Обратите внимание, что значение атрибута labels теперь соответствует тому, что мы указали (Рисунок 29).
    Рисунок 29. Задание свойств первого слота SpinWheel
    Задание свойств первого слота SpinWheel
  3. Перейдите на вкладку Layout в палитре Properties и измените атрибут width первого слота SpinWheel на 70px (Рисунок 30). Обратите внимание, как изменяется размер слота в редакторе страницы, так что вокруг цифр остается меньше пространства.
    Рисунок 30. Параметры положения первого слота SpinWheel
    Параметры положения первого слота SpinWheel
  4. Выберите второй слот SpinWheel и дважды щелкните на нем. В появившееся текстовое поле введите «0,1,2,3,4,5,6,7,8,9» и нажмите клавишу Return.
  5. Пока второй слот еще выбран, измените атрибут value в разделе виджетов палитры Properties на 5 и атрибут width в разделе Layout на 70px.
  6. Теперь перетащите третий слот SpinWheelSlot из раздела Controls > Pickers палитры виджетов в SpinWheel и поместите его справа от второго слота. Этот новый слот будет дочерним по отношению к SpinWheel и сестринским по отношению к двум другим слотам.
  7. Измените текст в появившемся поле на «0,1,2,3,4,5,6,7,8,9» и нажмите кнопку ОК.
    Рисунок 31. Добавление третьего слота
    Добавление третьего слота
  8. Пока третий слот еще выбран, измените атрибут value в разделе виджетов палитры Properties на 0, а атрибут width в разделе Layout ― на 70px. Теперь третий слот должен выглядеть как на рисунке (Рисунок 32).
    Рисунок 32. Готовый третий слот
    Готовый третий слот

Совет

Иногда бывает трудно выбрать родительский виджет, когда его дочерние виджеты тоже выделены. Простой способ выбрать родительский виджет ― щелкнуть правой кнопкой мыши на любом выбранном дочернем виджете и выбрать пункт Select parent.

Настройка макета

На самом деле окно SpinWheel слишком широко для своих трех слотов, но мы исправим это, изменив атрибут width:

  1. Выберите SpinWheel, щелкнув на области возле последнего слота.
  2. В разделе Layout вкладки Properties измените атрибут width на 222px. Окно SpinWheel должно выглядеть как на рисунке (Рисунок 33).
    Рисунок 33. Улучшенное окно SpinWheel
    Улучшенное окно SpinWheel

Обратите внимание на пустое пространство справа от окна SpinWheel на холсте iPhone. Центрирование SpinWheel улучшит общий макет пользовательского интерфейса. Поля SpinWheel можно настроить следующим образом:

  1. Щелкните на разделе Margins палитры Properties.
  2. Установите флажок Show t/r/b/l.
  3. Измените margin-right и margin-left на auto.

Эти изменения показаны на рисунке (Рисунок 34).

Рисунок 34. Настройка полей SpinWheel
Настройка SpinWheel's margins

Теперь окно SpinWheel готово и содержит значение 150, расположенное по центру и обведенное прямоугольником, как показано на следующем рисунке (Рисунок 35).

Рисунок 35. Готовое окно SpinWheel
Готовое окно SpinWheel

Завершение представления Details

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

Добавление заполнителей

Начнем с создания двух заполнителей:

  1. Перетащите виджет ScrollableView из палитры виджетов на текущее представление (в заголовок или на серое поле). Как вы уже видели, это приводит к созданию пустого представления, которое уже выбрано.
  2. В палитре Properties измените ID нового представления на detailsView_Date.
  3. Перетащите другой виджет ScrollableView из палитры виджетов на поле detailsView_Date.
  4. В палитре Properties измените ID нового представления на detailsView_Notes.

Теперь вы должны видеть на палитре Scenes все четыре представления из блок-схемы, как показано на следующем рисунке (Рисунок 36).

Рисунок 36. Палитра Scenes со всеми четырьмя представлениями
Палитра Scenes со всеми четырьмя представлениями

Создание списка для представления навигации

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

  1. Выберите представление detailsView из палитры Scenes, чтобы сделать его активным.
  2. Перетащите RoundRectList из палитры виджетов в представление, прямо под окно RoundRect, содержащее SpinWheel.
  3. В появившемся текстовом поле каждая строка будет преобразована в метку нового элемента ListItem. Введите слово "Date" в одной строке и "Notes" в другой, как показано на следующем рисунке (Рисунок 37).
    Рисунок 37. Ввод RoundRectList
    Ввод RoundRectList
  4. Нажмите кнопку OK.

Выберите пункт списка "Date" и внесите следующие изменения в раздел виджетов палитры Properties:

  1. Присвойте moveTo значение detailsView_Date, выбрав его из раскрывающегося списка рядом с меткой поля. Теперь приложение для отслеживания веса будет переходить к представлению detailsView_Date, когда пользователь щелкает по данному пункту.
  2. Измените rightText на "2012-10-09", что вызовет появление этого текста с правой стороны. (Отметим, что мы не выполняем локализацию даты для этого прототипа; все даты будут отформатированы в соответствии с общим стандартом ISO-8601. Просьба придерживаться этого формата, так как это важно для второй статьи этого цикла.)
  3. Измените ID на dateListItem.
    Рисунок 38. Свойства элемента списка дат
    Свойства элемента списка дат
  4. Выберите второй пункт списка (с меткой Notes) и внесите следующие изменения в палитру Properties:
    • присвойте moveTo значение detailsView_Notes, выбрав его из раскрывающегося списка рядом с меткой поля. Теперь приложение для отслеживания веса будет переходить к представлению detailsView_Notes, когда пользователь щелкает по данному пункту;
    • Измените rightText на "Ran 5 mi..." (Пробежал(а) 5 ми...) Это открывает пользователю полное представление примечания, которое в данном случае гласит: «Пробежал(а) 5 миль и съел(а) массу брокколи!»;
    • измените ID на notesListItem.

Наше представление detailsView готово и должно выглядеть как на следующем рисунке (Рисунок 39).

Рисунок 39. Готовое представление Details
Готовое представление Details

Построение представления Date

Теперь читателю должно быть ясно, как создать наше третье представление, detailsView_Date. Выполните следующие действия:

  1. Выберите представление detailsView_Date из палитры Scenes.
  2. Перетащите Heading из палитры виджетов на представление. Введите заголовок "Date" в появившееся текстовое поле и нажмите кнопку ОК.
  3. В палитре Properties измените атрибут back на Details, атрибут moveTo на detailsView (в соответствии с блок-схемой) и атрибут fixed на top.
  4. Перетащите SpinWheelDatePicker (из раздела Controls > Pickers) под заголовок.
  5. В палитре Properties измените ID на dateSpinWheel.
  6. В разделе Margins палитры Properties установите флажок show t/r/b/l и измените margin-top на 10px, чтобы добавить немного пространства между заголовком и шкалой.

Готовое представление должно выглядеть как на следующем рисунке (Рисунок 40).

Рисунок 40. Готовое представление Date
Готовое представление Date

Создание представления Notes

Теперь создадим четвертое и последнее представление:

  1. Выберите detailsView_Notes из палитры Scenes.
  2. Перетащите Heading из палитры виджетов на представление. Введите "Notes" в появившееся текстовое поле и нажмите кнопку ОК.
  3. В разделе виджетов палитры Properties измените атрибут back на Details, атрибут moveTo на detailsView (в соответствии с блок-схемой) и атрибут fixed на top.
  4. Перетащите RoundRect (из раздела Containers > Dojo) под заголовок.
  5. Перетащите TextArea (из раздела Controls > TextBox) в RoundRect.
  6. Дважды щелкните на новом текстовом поле, введите «Пробежал(а) 5 миль и съел(а) массу брокколи!» в появившееся текстовое поле и нажмите кнопку ОК.
  7. Увеличьте размер области текста. В разделе Layout палитры Properties измените атрибут width на 100% и атрибут height на 150px.
  8. Измените ID на notesTextArea.

Готовое представление Notes должно выглядеть как на следующем рисунке (Рисунок 41).

Рисунок 41. Представление Notes
Представление Notes

Доработка и завершение приложения

Итак, мы получили достаточно полный прототип пользовательского интерфейса, но нужно еще обеспечить механизм добавления пользователем новых записей веса. Для этой цели мы добавим кнопку «плюс». Затем добавим один последний штрих к UI нашего приложения для отслеживания веса, позволив пользователю видеть дату вместе с записью веса в каждой строке списка.

Добавление кнопки «плюс»

Чтобы добавить кнопку «плюс»:

  1. Выберите представление mainView из палитры Scenes, чтобы сделать его активным.
  2. Перетащите объект ToolbarButton (из раздела Heading палитры виджетов) в заголовок Weight Tracker. Измените значение в появившемся текстовом поле на "+" и нажмите кнопку ОК.
  3. Кнопки для добавления новых записей в мобильных приложениях часто помещаются справа от заголовков. Для этого в разделе Layout палитры свойств измените атрибут float на right.
  4. В разделе Widget палитры Properties измените moveTo на detailsView, чтобы, когда пользователь нажимает кнопку, происходил переход.
  5. Измените атрибут ID на addWeightButton.

Рисунок 42 демонстрирует, как должно выглядеть представление mainView после выполнения этих действий.

Рисунок 42. Кнопка "Плюс" для добавления записей веса
Кнопка Плюс для добавления записей веса

Добавьте нужный текст в EdgeToEdgeDataList

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

  1. Выберите Create > JavaScript File... из главного меню Maqetta, чтобы создать файл, куда мы будем помещать новые данные.
  2. В появившемся диалоговом окне измените имя файла на weights.json и нажмите кнопку Create. Появится новая вкладка редактора.
  3. Замените содержимое редактора содержимым листинга 2.
    Листинг 2. Содержимое файла weights.json
    {
        "items": [
            {label: "149", moveTo: "detailsView", rightText: "2012-10-01"},
            {label: "150", moveTo: "detailsView", rightText: "2012-10-09"},
            {label: "151", moveTo: "detailsView", rightText: "2012-10-15"},
            {label: "148", moveTo: "detailsView", rightText: "2012-10-23"},
            {label: "146", moveTo: "detailsView", rightText: "2012-11-01"}
        ]
    }

    Вы заметите, что данные аналогичны тем, что мы ввели в поле ввода при первоначальном создании EdgeToEdgeDataList. Напомним, что в текстовом поле каждой строки содержались значения label и moveTo, разделенные запятой. В файле каждая строка имеет явные свойства label, moveTo и (новое) rightText.
  4. Сохраните и закройте файл.
  5. Вернитесь к странице редактора и дважды щелкните на EdgeToEdgeDataList со значениями веса. Появится диалоговое окно, в которое мы первоначально ввели содержимое списка.
  6. Измените значение из развертывающегося списка с Comma separated data (данные, разделенные запятыми) на Data file from workspace (файл данных из рабочей области).
  7. Введите weights.json (имя файла) в текстовое поле (Рисунок 43) и нажмите кнопку ОК. (Чтобы перейти к файлу в рабочей области, можно также щелкнуть на значке папки рядом с текстовым полем).
    Рисунок 43. Указание файла данных из рабочей области
    Указание файла данных из рабочей области

Теперь вы должны увидеть дату в правой части каждой записи списка (Рисунок 44).

Рисунок 44. Даты, добавленные в список весов
Даты, добавленные в список весов

Проверка прототипа

Прототип нашего приложения для отслеживания веса готов — и мы не написали ни одной строки кода! Если вы еще этого не сделали, выполните предварительный просмотр приложения (значок Preview in Browser на панели инструментов) и убедитесь, что можно переходить во все представления и возвращаться к первоначальному.

Возможно, вы также захотите проверить некоторые из мобильных виджетов, такие как шкала для корректировки веса и даты, и убедиться, что кнопка «плюс» в mainView действительно ведет к detailsView.


Заключение

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

  • воспользоваться функцией интерактивного просмотра Maqetta, чтобы:
    • продемонстрировать доказательство концепции своему боссу и, возможно, убедить его, что ваша компания должна заняться бизнесом мобильных приложений для отслеживания веса;
    • провести испытания на юзабилити со своими потенциальными клиентами и перейти к этапу разработки;
  • воспользоваться функцией Maqetta Review & Commenting (обзоры и комментарии ― см. пункт меню Create > Review...) для получения отзывов от членов своей группы;
  • продолжить построение прототипа; например, в промышленном приложении может потребоваться представление для настройки параметров, чтобы можно было выбирать английские или метрические единицы измерения. Также можно добавить панели для управления категориями пользователей, задания целевых значений, ввода продуктов питания и отслеживания хода или результатов процедур;
  • создать специальную тему для своего приложения с помощью редактора тем Mobile Theme Editor Maqetta. Например, можно стилизовать пользовательский интерфейс с применением фирменной цветовой схемы вашей компании;
  • решить, что дизайн хорош и готов к передаче группе разработчиков для превращения в коммерческий продукт. В этом случае можно использовать механизм Maqetta export projects as a zip file для экспорта проектов в виде zip-файла, который затем можно импортировать в другую среду разработки, например, Eclipse или IBM Rational Application Developer.

Из этой статьи вы узнали, как построить прототип пользовательского интерфейса довольно сложного мобильного приложения — без всякого программирования! Во второй части мы добавим некоторый специальный код JavaScript для обработки взаимодействия с пользователем, а в третьей ― воспользуемся инструментом PhoneGap для создания еще одного прототипа в виде "родного" приложения, которое можно устанавливать на физические мобильные устройства. Пока же просмотрите раздел Ресурсы, чтобы больше узнать о Maqetta, HTML5 и Dojo Mobile.


Загрузка

ОписаниеИмяРазмер
Результирующий HTML-файлmaqetta_part1.zip3 КБ

Ресурсы

Научиться

Получить продукты и технологии

Обсудить

  • Присоединяйтесь к группе пользователей Maqetta: общайтесь с другими дизайнерами и разработчиками, использующими Maqetta для создания настольных и мобильных UI.
  • Примите участие в деятельности сообщества Мой developerWorks. Общайтесь с другими пользователями developerWorks, читая блоги разработчиков, форумы, группы и вики.

Комментарии

developerWorks: Войти

Обязательные поля отмечены звездочкой (*).


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Профиль создается, когда вы первый раз заходите в developerWorks. Информация в вашем профиле (имя, страна / регион, название компании) отображается для всех пользователей и будет сопровождать любой опубликованный вами контент пока вы специально не укажите скрыть название вашей компании. Вы можете обновить ваш IBM аккаунт в любое время.

Вся введенная информация защищена.

Выберите имя, которое будет отображаться на экране



При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Обязательные поля отмечены звездочкой (*).

(Отображаемое имя должно иметь длину от 3 символов до 31 символа.)

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Вся введенная информация защищена.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=Мобильные приложения, Open source, Web-архитектура
ArticleID=940453
ArticleTitle=Система макетирования Maqetta : Проектирование мобильного пользовательского интерфейса на HTML5
publish-date=08122013