Введение
Если вы не понимаете, о чем речь, прочитайте предыдущую статью про Build.me здесь. Сегодня рассмотрим тему прототипирования и подключения тестовых данных к вашему проекту.
Создание прототипа
Как говорилось в предыдущей статье, необходимо создать новый проект и нажать на кнопку New prototype, выбрав Template. Из предложенных вариантов выберем Responsive шаблон, так как там уже присутствует стандартная «шапка» и «подножье»
В итоге получаем вот такую страницу:
По центру мы видим окно управления дизайном. Здесь же мы будем видеть результат нашего дизайна.
Вверху страницы у нас располагается панель управления отображением. Описание иконок слева направо:
- Облака – это коллаборации. Здесь вы можете оставлять комментарии вашим коллегам по поводу каждой страницы приложения.
- Режим отображения. Десктоп, планшет, или телефон
- Кисть – выбор темы дизайна. Представлены стандартные SAP темы.
- Линейка. Отображение линейки на дизайне.
- Масштаб
- Скрыть / раскрыть сайд-бары
- Отменить действия или выполнить вперед.
- Create study – создать обучалку для данной страницы
- Share – поделиться
- Иконка глаза. Это запустить предпросмотр.
В левом верхнем углу располагается панель контролов. Здесь представлены все компоненты, которые есть в Build.me и посредством Drag&Drop вы можете перетаскивать элементы на свой макет.
Также в ЛВ углу имеется несколько вкладок
Первая Controls – компоненты для макета. Images – изображения, которые можно применять на маете. Data – наша mockdata, в которой будем создавать тестовые данные.
В левом нижнем углу располагается иерархическая структура макета. Т.е. по сути отображаются все элементы, которые вы добавили на страницу.
Справа у нас находится сайд-бар управления выбранным компонентом. У каждого компоненты есть общий и свой наборы компонентов, которые можно редактировать. Например, отступы, размерности и т.п.
Макет
Накидаем элементов с левого окна компонентов на наш макет.
Чтобы располагать элементы горизонтально или вертикально используем компоненты Horizontal Box и Vertical Box соответственно.
Mockdata
Перейдем во вкладку Data. На этой странице мы можем импортировать данные, например, в excel файле, или можем подсоединить свой удаленный источник данных, или создать объекты с данными вручную.
Чтобы импортировать данные в Excel, нам нужно знать структуру данных. Поэтому поступим следующим образом: сначала создадим объекты с данными вручную, далее экспортируем их себе в Excel, и уже в Excel будем добавлять свои данные. Как все заполним, можем обратно импортировать файл в проект.
Нажимаем на Create new object. Откроется окно управления объектами. «Плюсик сверху позволять создавать сколь угодно новых объектов».
В правом углу видим несколько вкладок: Properties – то же, что и поля в таблице, которые будут использоваться в дальнейшем; Relations – если у вас несколько объектов, то можно связать их между собой один к одному, один ко многим, многие ко многим; Samples – здесь можно управлять самими данными в объектах.
Создадим еще объект и свяжем их между собой
Теперь займемся заполнением. Переходим во вкладку Samples → Edit samples. Открывается окно управления данными:
Заполняем и нажимаем ок.
Теперь экспортируем объекты, чтобы заполнить их в Excel: Samples → Export Data → Export
Открываем скачанный файл и заполняем наши объекты в Excel:
Таким же образом импортируем Excel в проект.
Использование mockdata
Теперь давайте применим наши данные к макету. Для этого определимся с компонентом, куда будем выводить данные. Пусть это будет таблица. Выделяем нашу таблицу и в сайд баре свойств меняем источник данных на наш созданный объект:
Также переименуем Title – ы наших колонок и также в правом сайдбаре настраиваем отображение ячеек таблицы. В итоге получаем таблицу с нашими тестовыми данными.
Тестовые данные можно применять не только к таблицам, но и ко многим другим компонентам прототипа, например к чартам (графикам). Таким образом, при презентации ваше приложение будет выглядеть как готовый законченный продукт.
Всем успехов