4 - Привязка данных
Привязка данных
Иногда требуется переносить данные пользователя с одного экрана на другой. Для таких сценариев можно использовать функцию привязки данных. Также привязку данных можно применять в логических операторах.
Как это работает
В Quant-UX существуют скрытые данные, которые позволяют сохранять и считывать информацию во время тестирования прототипа. Данные можно представить как простой объект JSON с различными свойствами.
Предположим, вы создаёте форму для регистрации пользователей в сервисе. Им нужно ввести email, имя, фамилию и адрес. Данные могут выглядеть следующим образом:
json
{
"email": "PedroHauten@gmail.com",
"name": "Pedro",
"lastname": "Hauten",
"address": {
"street": "Cavar de Castelo",
"zip": "34414-100",
"city": "Warburgo",
"country": "Portugal"
}
}
Привязка данных позволяет связать эти данные с элементами пользовательского интерфейса, например, с полем ввода текста. Если вы хотите связать текстовое поле с email пользователя, правильное имя переменной будет "email". Если нужно привязать поле к улице, имя будет "address.street".
После того как пользователь ввёл данные, информация сохраняется. Вы можете использовать её на следующих экранах, например, чтобы снова показать данные, возможно, в виде метки. Также данные можно использовать для навигации на основе правил или отправить их через веб-сервис на реальный сервер.
Чтобы назначить или отредактировать переменную, выполните следующие шаги:
- Выберите элемент.
- Нажмите на «Прототип» (Prototype) вверху.
- В разделе данных нажмите «Добавить привязку данных» (Add Data Binding).
- Откроется диалог, в котором вы сможете указать имя переменной, в которую хотите записать данные. Также можно выбрать существующую переменную.
Большинство элементов интерфейса имеют только одну переменную, которая используется как для ввода, так и для вывода. Пример — простое текстовое поле, которое читает или записывает текст. Некоторые элементы имеют больше переменных, например, элемент «Выпадающий список» (Dropdown). У него есть входные и выходные данные, а также список пунктов меню. Эти данные также могут быть прочитаны из модели данных или даже из веб-сервиса.
No Comments