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

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

Определение действий в ответ на взаимодействие с пользователем позволяет создать более интересный и интуитивно понятный пользовательский опыт.

ак 1

Типы действий

Большинство виджетов могут обрабатывать три основных типа действий:

  • При касании: обрабатывает жест пользователя при однократном касании.
  • При двойном касании: обрабатывает жест двойного касания.
  • При длительном нажатии: Обрабатывает жест пользователя, заключающийся в нажатии и удержании кнопки в течение длительного времени.

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

  • При отправке: Это действие доступно для виджета TextField. Действие срабатывает, когда пользователь заканчивает редактирование текста и показывает, что он закончил, например, нажимает кнопку «submit» или «done» на клавиатуре.
  • При загрузке страницы: Действие доступно для виджета страницы. Действие запускается при загрузке страницы и может быть использовано для выполнения различных задач, таких как получение данных из базы данных, вывод сообщения или уведомления, обновление содержимого страницы. С его помощью можно обеспечить автоматическое выполнение определенных задач при загрузке страницы, не требуя дополнительного участия пользователя.
  • При встряхивании телефона: Эта функция доступна на виджете страницы и срабатывает при физическом встряхивании телефона. При встряхивании телефона будет выполнено заданное действие, которое может включать различные функции, такие как вывод сообщения, открытие новой страницы или инициирование телефонного звонка. Эта функция широко используется в игровых приложениях, где встряхивание телефона может вызвать определенное действие, например, бросок костей или тасование карт.
  • При выборе (On Selected): Это действие доступно для таких виджетов, как выпадающий список, CheckboxGroup, Slider, радиокнопка, переключатель ChoiceChips, RatingBar. Это действие срабатывает, как только в этих виджетах изменяется выбор.
  • Пролистывание страницы: Это действие доступно для виджета PageView. Действие, добавленное в него, срабатывает при пролистывании страницы.
  • На переключение: Эта функция доступна для виджета ToggleIcon. Действия, добавляемые под этим параметром, срабатывают каждый раз, когда щелкается значок переключения.
    При завершении, при изменении: Эта опция доступна для виджета «Пин-код». Действия, добавляемые по этой ссылке, срабатывают, когда пользователь завершает ввод пина или изменяет его в виджете пин-кода.
  • При изменении счета: Эта опция доступна для виджета CountController. Действия, добавляемые по этой ссылке, срабатывают при изменении счета в виджете CountController.

Добавление действия

Чтобы добавить действие к любому виджету, выполните следующие действия:

  1. Выберите виджет (например, кнопку), для которого необходимо добавить действие.
  2. Выберите пункт Действия на панели свойств (правое меню).
  3. Чтобы добавить простое действие, например, переход на страницу или показ сообщения на закуску:
    1. Нажмите кнопку + Добавить действие.
    2. Выберите тип действия. По умолчанию для него установлено значение On Tap.
    3. Найдите и выберите действие.

Видео:https://www.loom.com/share/5fbd7cd58a1841d0881fc17ecbf1bca0?sid=50e76496-9458-45be-bb61-3f79acc0dc2f

  • Чтобы добавить действия, основанные на условии или сложном потоке действий:
    • Нажмите + Добавить условное действие. Откроется редактор потока действий.
    • Чтобы добавить новое действие в тот же поток действий, используйте кнопку +.

Видео:https://www.loom.com/share/e787342e512e498f906914ef4b3f95dd?sid=c40f5216-9286-4abc-a40b-a138914b701a

ПРИМЕЧАНИЕ: Действия различаются в зависимости от выбранного виджета. Если вы применяете действие для виджета текстового поля, то будет доступен жест On Submit. Аналогично, если вы применяете действие для виджета страницы, будет доступен жест «При загрузке страницы».

Добавление нескольких действий

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

Первым сработает тот, который находится сверху, затем остальные.
ак 2

Добавление условных действий

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

Добавить условное действие можно следующими способами:

  1. Одно условие
  2. Несколько условий
  3. Условное действие с несколькими ветвями (if > else if > else)

1. Одиночное условие

Одиночное условие полезно, когда необходимо запустить действия, основанные на определенном единственном условии, которое приводит к ветвям истина или ложь. Примерами того, как может быть полезно использовать одиночное условие, являются:

  • Проверка того, вошел ли пользователь в систему, перед отображением персонализированного содержимого.
  • Показ сообщения, если устройство пользователя не подключено к Интернету.
  • Установка темного или светлого режима темы на основе переменной.

Чтобы добавить одно условие:

  1. Выберите виджет (например, кнопку), для которого необходимо добавить действие.
  2. На панели свойств (правое меню) выберите Действия и нажмите + Добавить условное действие.
  3. В меню Установить переменную выберите Условия > Одно условие.
  4. Выберите Первое значение и Установить переменную (например, переменную состояния приложения).
  5. Укажите, как следует сравнивать первое значение со вторым (например, Equal To, Less Than и т.д.).
  6. Щелкните на втором значении (Second Value) и укажите значение, выбрав конкретное значение (Specific Value) или переменную (From Variable).
  7. В ветви Истина добавьте действия, которые должны срабатывать, когда условие истинно.
  8. В ветви «Ложь» добавьте действия, которые будут срабатывать, если условие ложно.

Вот как настроить действие, которое проверяет, достиг ли пользователь 18-летнего возраста, и затем предпринимает соответствующие шаги в зависимости от результата:

Видео:https://www.loom.com/share/56492c740cc04f1f9bda8672a178cebb?sid=4f41419d-5efa-4ca1-93c3-c332d9238fc8

Совет: Вы также можете напрямую задать булево значение, возвращающее true или false. Вот пример запуска действий для установки темного или светлого режима темы на основе булевой переменной ‘isDarkMode’ из переменной состояния приложения.

Видео:https://www.loom.com/share/348ed9f10ed7461888d830e94e62a8c0?sid=32bec990-ce21-441d-b214-e534f7ceca6d

2. Множественные условия

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

Некоторые примеры того, как может быть полезно использовать несколько условий, включают:

  • Запуск действий только в том случае, если пользователь является администратором и находится в режиме редактирования.
  • В приложении электронной коммерции принимать решение о способе доставки на основе адреса назначения или общей суммы заказа.
  • В погодном приложении, если текущая температура выше 80 градусов по Фаренгейту, а влажность выше 70%, показать диалоговое окно с предупреждением о необходимости пить воду.

Чтобы добавить несколько условий:

  1. Выберите виджет (например, кнопку), для которого необходимо добавить действие.
  2. На панели свойств (правое меню) выберите Actions (Действия) и нажмите + Добавить условное действие.
  3. В меню Задать переменную выберите Условия > Объединить условия.
  4. В разделе Первое условие щелкните UNSET и добавьте единственное условие или непосредственно укажите переменную, возвращающую булево значение (True или False).
  5. Если вы хотите, чтобы все условия были истинными, удерживайте вкладку И выбранной. А если нужно, чтобы истинным было какое-то одно условие, измените его на ИЛИ.
  6. Аналогичным образом добавьте следующее условие.
  7. Чтобы добавить больше условий, нажмите на кнопку + Добавить.
  8. В ветви Истина добавьте действия, которые должны срабатывать, когда все условия истинны.
  9. В ветви Ложь добавьте действия, которые должны срабатывать в случае невыполнения условия.

Видео:https://www.loom.com/share/db58451f8e564b5eb8543cb1370bd332?sid=dde7590a-7b9d-48a9-9446-a62a791975db

Совет: Вы также можете смешивать несколько условий И с условиями ИЛИ. Вот пример запуска действия удаления, если пользователь вошел в систему с правами И либо администратора ИЛИ менеджера событий.

ак 3

3. Условные действия с несколькими ветвями (if > else if > else)

Вместо простой ветви «истина/ложь» теперь можно использовать несколько ветвей типа «если/или», чтобы добавить более сложную и динамичную бизнес-логику в приложение. Например, если товар есть в наличии, перенаправить пользователя на страницу корзины. Если товара нет в наличии, но он доступен для предварительного заказа, покажите сообщение, затем откройте страницу корзины, а если оба условия не выполняются, покажите сообщение «нет в наличии».

Чтобы использовать условные действия с несколькими ветвями, сначала необходимо определить условия для секций » ЕСЛИ» и » ELSEIF». После этого можно добавить действия в каждую ветвь. Наконец, можно добавить действия в ветке ELSE.

При выполнении условного действия сначала оценивается раздел IF. Если его условие выполняется, то выполняется действие в ветви IF. В противном случае оценивается следующий раздел ELSEIF и проверяется его условие. Если условие выполняется, то выполняется действие по ветке ELSEIF. Этот процесс продолжается до тех пор, пока либо не будет выполнено условие, либо не будут оценены все секции ELSEIF. Если ни одно из условий не выполняется, то будет выполнено действие, находящееся в ветви ELSE.

Чтобы добавить условное действие с несколькими ветвями:

  1. Выберите виджет (например, кнопку), для которого необходимо добавить действие.
  2. Выберите Действия на панели свойств (правое меню) и нажмите + Добавить условное действие.
  3. Включите несколько условий.
  4. В первом условии (т.е. IF) щелкните на UNSET и задайте либо одно условие, либо несколько условий, либо напрямую задайте булеву переменную.
  5. Чтобы добавить еще одну ветвь, щелкните на кнопке +. В результате откроется еще одна ветвь под названием ELSEIF. Добавьте условие и сюда. Аналогичным образом можно добавить еще несколько ветвей и задать условия для каждой из них.
  6. Теперь начните добавлять действия в каждую ветвь, включая ветвь ELSE.
Для ветви ELSE не нужно задавать никаких условий. Действие, добавленное в ветке ELSE, будет выполнено, если ни одно из условий в ветках IF и ELSEIF не выполнено.

Видео:https://www.loom.com/share/486ed60d8014481689ca25fe586f0428?sid=c7a05344-d5d8-42f2-8f0a-5fb26820d0db

ак 4
ак 4

Прервать действие

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

Для этого достаточно щелкнуть на кнопке + и выбрать опцию Добавить прерывание.

Видео:https://www.loom.com/share/772f9aa7836c45e5997e353b49350777?sid=daec00eb-b8c0-4780-b7c2-b2dc53b53093

Блок действий

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

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

ак 5
  1. Сначала создайте блок действий Action Block:
    1. Выберите любой виджет на странице, на панели свойств (правое меню) выберите пункт Действия, а затем — Блоки действий.
    2. Выберите область действия для блока действий: Уровень приложения или Уровень страницы. Блок действий на уровне приложения может быть использован повторно во всем приложении, обеспечивая функциональность нескольких страниц. С другой стороны, блок действий на уровне страницы предназначен только для той страницы, на которой он создан, и обеспечивает функциональность именно для этой страницы.
    3. Нажмите кнопку + Создать блок действий.
    4. Укажите имя блока действий.
    5. Если блок действий возвращает какое-либо значение (например, разобранные данные), включите параметр Возвращаемое значение, а затем установите Тип вывода. Если блок возвращает список значений, поставьте галочку Список. Если вы уверены, что он всегда будет возвращать значение, поставьте галочку Required.
    6. Если блок действий требует ввода, введите имя и тип параметра.
    7. В левой части добавьте или скопируйте действия, которые вы хотите использовать повторно.

Видео:https://www.loom.com/share/952dfb9d345642fdba01eec22d09e24c?sid=69bf2add-d4ee-400c-908c-893e01d547c6

  • Теперь перейдем к использованию блока действий:
    1. В редакторе потока действий нажмите кнопку «+» и выберите пункт Добавить блок действий.
    2. Найдите и выберите имя блока действий.
    3. Передайте входные параметры, если они требуются.
    4. Если после выполнения блока действий необходимо обновить страницу, просто включите опцию
    5. Обновить страницу после. Это особенно удобно, когда на странице отображается значение, которое должно быть обновлено блоком действий.

Видео:https://www.loom.com/share/e0531657ffd54a749b0229dda9c7367b?sid=45806a16-1ac6-4516-b6ca-3a425d46103b

В редакторе Action Flow Editor можно просмотреть все блоки действий, добавленные на уровне приложений или страниц. Совет: Щелкните на любом из них, чтобы открыть блок действий в режиме редактирования.

ак 6

Возврат значения из блока действий

Чтобы вернуть значение из любого места потока действий, выполните следующие действия:

  1. Нажмите на кнопку «+» и выберите Добавить возврат. Включите опцию Добавить возвращаемое значение и задайте возвращаемое значение.
  2. Чтобы получить доступ к возвращаемому значению, откройте редактор потока действий, в который был добавлен блок действий, и укажите имя выходной переменной действия.
  3. Далее используйте имя выходной переменной действия из меню Установить переменную > Выходные данные действия > [имя_выходной_переменной_действия] (из блока действия).

Видео:https://www.loom.com/share/7df37590515d45229cc1005b1e85019f?sid=64eb34e3-fdae-4da2-aa88-1d53543881a7

Отключить действие

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

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

ак 7

Циклические действия

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

Каждый цикл требует условия, и действия, добавленные в цикл, будут срабатывать до тех пор, пока условие истинно. Когда условие становится ложным, цикл завершается, и срабатывает следующее действие в рабочем процессе.
  • Будьте осторожны с циклическими действиями, поскольку они могут привести к тому, что приложение попадет в бесконечный цикл, если условие никогда не станет ложным. Всегда убеждайтесь, что условие будет выполнено в определенный момент, чтобы цикл мог завершиться.
  • Если предполагаемая операция будет выполнена до того, как условие станет ложным, необходимо добавить в рабочий процесс действие ‘Разрыв цикла’.

Видео:https://www.loom.com/share/1d77fc5a03c84cf1b5c84c92fd23dd73?sid=e6969c9e-1394-482c-8f32-43c48bbeeb1c

Рассмотрим, как это сделать:

  1. Откройте редактор потока действий и выберите + Добавить цикл.
  2. Задайте условие для цикла, например, retryCount (значение 0) меньше maxRetries (значение 5).
  3. Добавьте действие, которое должно срабатывать, пока условие истинно (например, выполнить вызов API).
  4. При успешном выполнении вызова API необходимо добавить действие Loop Break. Это приведет к выходу из цикла при успешном выполнении вызова API.
  5. При неудачном вызове API можно добавить некоторую задержку и увеличить счетчик повторных попыток (retryCount).

Таким образом, если вызов API завершился неудачей, он будет срабатывать до тех пор, пока значение retryCount не достигнет maxRetries.

Видео:https://www.loom.com/share/bfe4aceff2a94233ae54368f54d99db8?sid=9bc0df85-510f-4e8e-a507-27937670a534

Упорядочивание действий

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

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

ак 8

Копирование действий

В процессе создания приложения может возникнуть необходимость скопировать действие (возможно, длинное или сложное) и вставить/добавить его в виджет на той же или другой странице.

Чтобы скопировать действия, выполните следующие действия:

  • Выберите плитку действия и щелкните на значке меню опций (три точки в правом верхнем углу).
  • Чтобы скопировать только выбранное действие, выберите пункт Копировать действие.
ак 9
  • Чтобы скопировать все действия, находящиеся под выбранными действиями, выберите пункт Копировать цепочку действий.
ак 10

Чтобы вставить скопированное действие в другой виджет, выберите виджет (на той же или другой странице), перейдите на панель свойств, выберите Действия и нажмите кнопку Вставить действие (действия).

Видео:https://www.loom.com/share/565860442adb484190f56e229fd64380?sid=453d9ac4-44a3-4048-951d-08fd3a84aab6

Документирование действия

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

Документируя действие, вы можете помочь будущим пользователям вспомнить, почему оно было включено, и узнать больше о нем. Это помогает уверенно вносить любые изменения и в конечном итоге приводит к уменьшению количества ошибок.

Чтобы задокументировать действие, откройте редактор потока действий, выберите действие, нажмите на значок документа () справа, введите описание и сохраните его. Нажмите еще раз, чтобы прочитать или изменить. Вы также можете просмотреть код, чтобы увидеть документацию внутри кода.

Мы добавим документацию внутрь кода в виде комментария.
ак 11
ак 12

Удаление действий

Для удаления действий, добавленных в виджет:

  • Выберите плитку действия и нажмите на значок меню опций (три точки в правом верхнем углу).
  • Чтобы удалить только выбранное действие, выберите пункт Удалить действие.
ак 13
  • Чтобы удалить все действия, находящиеся под выбранными действиями, выберите Копировать цепочку действий.
ак 14