10 - Скрипты
Скрипты
Компоненты скриптов позволяют запускать небольшие JavaScript-скрипты, чтобы сделать ваши прототипы ещё более интерактивными. Например, их можно использовать для установки значений привязки данных, загрузки или отправки данных на сервер, а также для вычисления динамических значений, таких как сумма двух полей ввода.
Скрипты находятся в стадии бета-тестирования. Чтобы их включить, перейдите в меню настроек. Нажмите на меню ( ), выберите «Настройки» (Settings) и отметьте галочкой пункт «Включить бета-функции» (Enable Beta Features).
Введение
Выберите значок на правой панели инструментов и перетащите виджет на полотно. При выборе виджета скрипта в правом меню появится кнопка «Редактировать скрипт» (Edit Script). Нажатие на неё откроет редактор скриптов. В редакторе справа находится симулятор, а слева — простой редактор JavaScript. Введите свои скрипты там. Нажмите «Запустить» (Run), чтобы выполнить и протестировать скрипт. На вкладке «Консоль» (Console) можно увидеть вывод скрипта.
Основы
Скрипт имеет доступ к объектам Quant-UX, привязке данных «data» и объекту «qux».
Объект data позволяет читать и записывать данные через привязку данных, определённую для компонентов в вашем прототипе.
Объект qux позволяет изменять стили компонентов или их видимость.
Объект event показывает, от какого виджета был запущен скрипт.
Скрипты могут выполняться при трёх различных событиях:
Когда пользователь нажимает на компонент, связанный со скриптом. Используйте это для запуска действий только при явных взаимодействиях пользователя.
При изменении привязки данных. Например, пользователь изменяет значение текстового поля. Используйте это для обновления других компонентов или установки динамических значений привязки данных.
При загрузке симулятора. Используйте это для предварительной загрузки данных или их установки.
Скрипт также может возвращать значение. Если значение совпадает с именем экрана, симулятор загрузит соответствующий экран. В следующих разделах приведены примеры скриптов для распространённых случаев использования.
Чтение и запись данных
Для доступа к данным нужно использовать механизм привязки данных. Предположим, вы хотите вычислить сумму двух текстовых полей. Вам нужно:
Создать два текстовых поля и метку для отображения суммы.
Выбрать первое текстовое поле и установить привязку данных на «valueA».
Выбрать второе текстовое поле и установить привязку данных на «valueB».
Выбрать метку и установить привязку данных на «sum».
Добавить компонент скрипта на полотно.
Добавить кнопку и связать её со скриптом. При нажатии на кнопку скрипт будет выполнен.
Ваш прототип может выглядеть так:
Теперь откройте редактор скриптов и введите следующий скрипт:
javascript
data.sum = data.valueA * 1 + data.valueB * 1
Скрипт прочитает ввод пользователя из первого текстового поля, сохранённого в «data.valueA», и прибавит значение второго поля («data.valueB»). Результат записывается в «data.sum» и отображается в метке.
Текстовые поля возвращают строковые значения. Их нужно преобразовать в числа, например, умножив на 1.
Программная навигация
Чтобы перейти на определённый экран после выполнения скрипта, просто верните имя экрана. Это также можно использовать с привязкой данных для создания условной навигации. Следующий пример покажет «Screen A», если в текстовое поле введено «a», и «Screen B» в противном случае:
javascript
if (data.valueA === 'a') {
return 'Screen A'
} else {
return 'Screen B'
}
Автоматические вычисления
Вы также можете запускать скрипт автоматически при каждом изменении данных. Кроме того, вы можете инициализировать некоторые значения при тестировании прототипа. Выполните следующие шаги:
Создайте элемент «Сетка» (Grid), который может повторять дочерние элементы.
Добавьте одно текстовое поле в сетку.
Создайте метку и установите текст «Sum: {0}». {0} — это заполнитель, который будет заменён позже.
Привяжите «Сетку» к привязке данных «items».
Привяжите текстовое поле к привязке данных «value».
Привяжите метку к привязке данных «sum».
Добавьте два компонента скрипта. Переименуйте первый в «Load», а второй в «Sum».
Ваш прототип может выглядеть так:
Выберите скрипт «Load» и введите следующее значение:
javascript
data.items = [
{value: 1},
{value: 2},
{value: 3}
]
Чтобы выполнить скрипт при загрузке, измените триггер на панели свойств справа на «Loaded Trigger». Теперь скрипт выполняется при запуске симулятора. Он установит переменную «items» в список объектов. «Сетка» будет перебирать список и создавать текстовое поле для каждого элемента списка, так как она привязана к «items». Текстовые поля будут привязаны к «value». Таким образом, первый элемент привязан к «items[0].value», второй — к «items[1].value» и так далее.
Выберите скрипт «Sum» и введите следующее значение:
javascript
let sum = 0
data.items.forEach(item => {
sum += item.value * 1
})
data.sum = sum
Чтобы выполнять скрипт при любом изменении ввода, выберите триггер «Data Trigger» в свойствах. Когда пользователь изменяет значение (и после первой загрузки), скрипт вычислит сумму и установит её в объект «data».
Переключение видимости
Чтобы переключить видимость элемента, вам нужно:
Создать экран под названием «ToggleScreen».
Создать кнопку.
Создать элемент для переключения, например, прямоугольник. Назови его «ToggleCntr».
Добавить компонент скрипта и связать его с кнопкой.
Результат может выглядеть так.
Теперь отредактируйте скрипт и добавьте следующий код:
javascript
let toggleScreen = qux.getScreen('ToggleScreen')
let widget = toggleScreen.getWidget('ToggleCntr')
widget.toggle()
Скрипт использует объект API qux.
В первой строке он получает экран по его имени.
Во второй строке мы получаем «ToggleCntr».
В последней строке мы переключаем его видимость с помощью toggle().
Вы также можете использовать методы hide() и show() для установки видимости в зависимости от значения! Если вы хотите скрыть несколько элементов, сгруппируйте их и используйте метод getGroup().
javascript
let toggleScreen = qux.getScreen('ToggleScreen')
let group = toggleScreen.getGroup('ToggleGroup')
group.toggle()
Стили
Вы также можете установить стиль объекта. Предположим, мы хотим сделать элемент красным, если значение слишком низкое. Код будет выглядеть так:
javascript
let screen = qux.getScreen('Screen')
let widget = screen.getWidget('Element')
if (data.valueA * 1 < 100) {
widget.setStyle({color: 'red'})
} else {
widget.setStyle({color: 'black'})
}
Скрипт использует метод setStyle() для установки нового стиля. Просто передайте объект JavaScript с парами ключ-значение. Ключи — это свойства CSS, которые вы хотите изменить, а значения — соответствующие значения CSS. Вы можете передать несколько свойств за один вызов.
Quant-UX следует стандартному JavaScript-способу установки стилей CSS. Например, «border-top-color» будет иметь ключ «borderTopColor».
Тактильная обратная связь
Для тактильной обратной связи используйте метод vibrate(). Вы можете передать число или массив чисел для определения шаблона. Подробности смотрите на сайте Mozilla.
javascript
qux.vibrate(200)
qux.vibrate([100, 30, 100, 30, 100])
Вибрация работает только на мобильных устройствах.
No Comments