Параметры виджетов | UX Fox

Уроки для гуру

Параметры виджетов

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

Что такое значение виджета?


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

Установка значений виджетов

Чтобы задать значения виджета, создайте взаимодействие с действием “Set Variable/Widget Value(s)” в редакторе сценариев.

На 4 шаге редактора сценариев кликните по кнопке “Open Set Value Editor” чтобы открыть диалоговое окно динамического изменения значения виджета.

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

Первое поле каждой строки определяет тип значения элемента, второе определяет элемент, для которого оно устанавливается.

Вы можете назначить изменение следующих типов значений:

  • In checked of — состояние выбрано/не выбрано для чекбокса или радиокнопки.
  • Selected option of — выбранное значение выпадающего меню или списка (list box).
  • Text on widget — текст, показываемый в виджете.
  • Text on focused widget — текст, показываемый в выбранном виджете.

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

Текстовые значения в элементах Текстовое поле (Text Field) и Многострочная текстовая область (Text Area)

Для установки значения таких виджетов веб-форм, как Text Field и Text Area, используются следующие опции: статическое значение (опция Value), значение переменной (опция Value of variable), длина значения переменной (опция Length of variable value), выбранное значение выпадающего списка или элемента listbox (опция Selected option of), текущий текст в любом элементе (опция Text on widget), длина текущего значения любого элемента (опция Length of widget value), или текст в выбранном элементе (опция Text on focused widget).

К примеру, если вы создаете действие Set Text on Widget, изменяющее текст в текстовом поле «Работа» на выбранное значение (selected option) выпадающего списка “Работа”, то в прототипе значение выбранной опции этого выпадающего списка будет автоматически занесено в это текстовое поле.

Более подробно об использовании значения переменных мы расскажем в статье о переменных.

Текстовые значения в текстовых блоках, кнопках произвольной формы и изображениях

При установке текстовых значений для таких «нетекстовых» виджетов, как Text panel, Button shape и image, доступна только опция Value. Возле нее показывается кнопка «Edit Text». Нажатие на нее открывает диалоговое окно для ввода текста.

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

Локальные переменные

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

Чтобы вставить в значение элемента локальную переменную, кликните на «Add Local Variable» в нижней части диалогового окна ввода текста. Затем, в этой же части экрана, при помощи выпадающих списков, назначьте источник, из которого берется значение этой переменной, и вставьте название переменной в текст, взяв его в двойные квадратные скобки. К примеру, название может выглядеть как [[LVAR1]]. При помощи выпадающего списка под Insert Variable or Function, можно автоматически вставлять в текст существующие переменные.

Задание математических и строковых функций

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

Использование локальных переменных в функциях

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

К примеру, если вы создаете форму, считающую ресторанный счет, вы можете
использовать значение, введенное в текстовое поле, чтобы посчитать чаевые. Значение текстового поля должно храниться в локальной переменной, чтобы затем его можно было использовать для подсчета итогового значения [[LVAR1*0.20]].

Математические и строковые функции

В Axure есть следующие математические и строковые функции:
+ Сложение [[LVAR1 + LVAR2]]
? Вычитание [[LVAR1 — 5]]
/ Деление[[LVAR1 / 4]]
* Умножение [[LVAR1 * 0.25]]

LVAR.toFixed(decimalPoints) округляет введенное значение до нужного количества цифр после запятой. К примеру, если LVAR1 = 3,1415926, то [[LVAR1.toFixed(2)]] вернет значение 3.14.

LVAR.substring(from, to) возвращает все символы из строки, находящиеся между двумя символами, порядковый номер которых можно задать. К примеру, если LVAR1 = Bill Haverchuck, то [[LVAR1.substring(2,10)]] вернет значение ll Haver.

LVAR.length возвращает длину переменной в символах. Например, если LVAR1 = Lindsay Weir, то [[LVAR.length]] вернет значение 12.

LVAR.toLowerCase() конвертирует введенный текст в текст, состоящий только из прописных букв. Функция, к примеру, может выглядеть так: [[LVAR1.to.LowerCase()]].

LVAR.toUpperCase() конвертирует введенный текст в текст, состоящий только из заглавных букв. Функция, к примеру, может выглядеть так: [[LVAR1.to.UpperCase()]].

LVAR.toString() конвертирует введенное значение в строковый тип. Используется в случае, когда значение числовое, но должно восприниматься как строка символов. Например, если LVAR1 = 09, [[LVAR1]] возвращает 9, а [[LVAR1.toString()]] вернет значение 09.

Создание математических выражений

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

Сумма $[[LVAR1]]

Если к счету добавляются 15% на чаевые, то текст может выглядеть так:

Сумма $[[LVAR1*1.15]] включая 15% чаевых


Так как нам нужно, чтобы сумма была ограничена двумя знаками после запятой, нам следует использовать функцию toFixed с числом 2 в круглых скобках:

Сумма $[[(LVAR1*1.15).toFixed(2)]]

Построение строкового выражения

Строковые выражения строятся аналогичным образом. К примеру, следующее выражение выводит строку LVAR1 с удаленным последним символом.

[[LVAR1.substring(0,LVAR1.length — 1)]]

Функция substring принимает два значения, начальное и конечное. В нашем случае нам нужны символы, начиная с первого (значение 0) и заканчивая предпоследним, т.е. длина строки -1.

Уроки и примеры изменения значений элементов

Пример 1: Чекбокс “Адрес доставки тот же, что и расчетный адрес”

В данном примере используется действие Set Variable/Widget Value(s) и локальные переменные для того чтобы данные из одних полей копировались в другие поля при нажатии на чекбокс.

Пример 2: Калькулятор чаевых

В этом примере используется действие Set Variable/Widget Value(s), а также математические и строковые функции для подсчета итоговой суммы.

Итог
Немного практики – и вы сможете легко создавать, считать и выстраивать значения виджетов.