Переменные | UX Fox

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

Переменные

В этой статье мы научимся задавать значения переменных и использовать записанные данные в работе с взаимодействиями.

Что такое переменные?
Переменные применяются в случае, когда вам необходимо передать информацию с одной страницы на другую. Как правило, переменные используются каждый раз, когда взаимодействию одной страницы необходимо изменить виджеты на другой странице. В Axure RP нет ограничений, касающихся количества используемых переменных, однако мы советуем ограничиться 25-ю (особенно если прототип будет открываться в Internet Explorer). Переменные можно использовать в условиях, а также, когда нужно задать изменение текста в элементах, включая математические и строковые функции (о которых мы уже говорили в статье Настройка параметров виджетов).

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

Для управления переменными, откройте в главном меню пункт Wireframe > Manage Variables.

При помощи диалогового окна Manage Variables можно создавать, удалять, переименовывать и упорядочивать переменные. По умолчанию первой переменной будет OnLoadVariable. Названия переменных должны быть буквенно-цифровыми, состоять менее чем из 25 символов, и не должны содержать пробелов.

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

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

Для установки переменных используется действие Set Variable/Widget Value(s) в редакторе взаимодействий. На четвертом шаге диалога кликните на ссылку «Открыть редактор значений переменных» (Open Set Value Editor) для того чтобы открыть диалог установки значений переменных элемента.

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

В первом поле строчки устанавливается значение переменной, во втором поле определяется название переменной (выберите из списка или создайте свое с помощью кнопки Добавить новое).

Третье и четвертое поля определяют тип переменной и ее конкретное значение.

Готовое действие может выглядеть так: «Установить значение переменной NameVar равное текстовому значению, введенному в поле «Имя». Когда в прототипе пользователь вводит в поле «Имя» слово «Василий», оно записывается в значение переменной NameVar и может быть использовано на других страницах сайта.

Переменные могут иметь следующие типы:

  • Value— непосредственно введенное значение.
  • Value of variable—значение, которое сохраняется в другой переменной. Переменная выбирается из списка или создается заново.
  • Length of variable value—количество символов текста в значении другой переменной. Переменная выбирается из списка или создается заново.
  • Selected option of— значение, выбранное из выпадающего списка или в чекбоксе. Выбирается из перечня выпадающих списков или окон со списками.
  • Is checked of— создает значение «true» или «false» в зависимости от того, выбрана или нет радиокнопка или чекбокс. Выбирается из списка радиокнопок на странице.
  • Text on widget— значение текста, введенного в текстовое поле виджета.
  • Length of widget value—задает длину введенного значения в символах
  • Text on focused widget —значение, введенное в поле выбранного виджета.

Работа с переменными

Переменные и условия

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

К примеру, вы можете создать кнопку, в которой будет 2 положения, зависящих от значения переменной LoggedinVar (значения «Yes» или «No»). Взаимодействие в таком случае будет выглядеть следующим образом: если значение переменной «Yes», то нажатие на кнопку открывает в текущем окне страницу оформления заказа, а если значение «No» — то показывается страница авторизации. Значение переменной «No» может также определяться условием Else If True.

Настройка текста виджета при помощи переменных

При помощи действия Set Widget Values можно вводить значение переменной в качестве текста элемента. Также это можно сделать при помощи события OnPageLoad.

Существует три различных типа переменных, которые можно добавить в текст — общие переменные (которые описываются в этой статье), внутренние переменные и локальные элементы. Чтобы ввести переменную в текст, используйте двойные квадратные скобки: [[имя переменной]]. В прототипе имя переменной вместе с квадратными скобками будет заменено на ее значение.

Внутренние переменные используются для ввода названия страницы, информации о текущей странице и параметров времени. Вот список всех внутренних переменных: PageName, Day, Month, MonthName, DayOfWeek, Year, GenDay, GenMonth, GenMonthName, GenDayofWeek и GenYear.

Локальные переменные могут использоваться только внутри страницы. Чтобы использовать локальную переменную нажмите на кнопку «Добавить локальную переменную».

OnPageLoad, условия и переменные

Еще одна возможность использования события OnPageLoad — устанавливать действие, основанное на значении переменной.

К примеру, у нас есть выпадающий список с тремя пунктами — маркетинг, продажи и техподдержка. Когда пользователь выбирает нужный ему пункт (событие OnChange) значение переменной RoleVariable устанавливается на «маркетинг», «продажи» или «техподдержка» соответственно. Выбор нужного пункта должен показать пользователю окно с информацией об одном из этих пунктов. Для этого в событии OnPageLoad нужно отметить значение переменной RoleVariable и установить соответствующее состояние панели:

  • 1 сценарий:Если значение переменной RoleVariables равняется «маркетинг», перевести динамическую панель в положение Маркетинг.
  • 2 сценарий:Если значение переменной RoleVariables равняется «продажи», перевести динамическую панель в положение Продажи.
  • 3 сценарий: Если значение переменной RoleVariables равняется «техподдержка», перевести динамическую панель в положение Техподдержка.

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

Уроки по работе с переменными

Установка панели на следующей странице

В данном уроке описано как при помощи переменных и события ОnPageLoad установить состояние динамической панели на другой странице.

Итог
Теперь вы знаете, как сохранять данные в переменных и применять их в состояниях и действиях на других страницах.