Workflows

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

Для этой задачи у каждого компонента есть вкладка Workflow. В ней можно создавать бизнес-процессы и определять условия (триггеры) для их запуска. Создадим такой бизнес-процесс для кнопки Calculate.

Триггеры

Создание БП очень похоже на то, что мы уже видели в 4 модуле, когда создавали бизнес-процесс для бэкенда. Есть общий холст, есть блоки, которые туда добавляются, есть связи между ними, которые определяют последовательность действий. Важным отличием является то, что у БП фронтенда есть множество различных блоков для начала бизнес-процесса. Это триггеры, которые производят запуск БП. Сами триггеры могут быть различны для каждого компонента (у кнопки есть нажатие, у таблицы обновление данных в ней, у списка выбор какого-то варианта), но общая логика работы в любом случае одинакова. Происходит событие и это событие запускает соответствующий бизнес-процесс.

Давайте определимся с общим планом. Что нам необходимо сделать при нажатии на кнопку:

• Узнать значения X и Y. Получить их из соответствующих полей ввода.
• Запустить эндпойнт для вычислений и передать ему параметры X и Y.
• Сделать контейнер с результатом видимым.
• Поместить результат вычислений в нужные поля Label.

Блоки бизнес процесса

Для первого шага необходим блок InputFloat Get Properties. Он считывает текущие значения компонента, при этом не только то, что введено пользователем, но и прочие настройки (например, настройки внешнего вида или допустимый диапазон значений). Нам потребуется значение Value, именно в нем содержатся данные введенные пользователем. Каждое значение из своего поля для ввода, соответственно и блоков тоже понадобится два (для X и для Y). В них нужно выбрать значение Component ID на входе. Если вы не забыли указать их имя при создании, то узнать и выбрать необходимый компонент не составит труда.

Следующий шаг - запуск эндпойнта. Именно тут происходит связь фронтенда и бэкенда, передается команда для вычислений из браузера на сервер. Каждый эндпойнт нашего приложения представлен в виде отдельного блока. Требуется лишь выбрать нужный и соединить его. Во время пятого модуля этому эндпойнту был назначен метод GET и url module4-basic. Именно под таким именем он и будет в списке блоков - Server request GET /module4-basic/

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

Следующая задача - сделать контейнер с результатом видимым. Для этого нужно использовать блок Container Update Properties. В самом блоке выбрать ID нужного контейнера и установить Visible = true.

Последнее, что осталось сделать - распределить 5 элементов результата из массива по соответствующим компонентам веб-приложения. Мы знаем, что результат всегда должен приходить в строго определенном порядке, поэтому нужно лишь последовательно забирать элемент с нужным индексом и присваивать его значение компоненту Label. Для этого используем блоки Array Element (с индексом от 0 до 4), To String (для конвертации данных типа Float в String), и Label Update Properties для изменения текста Label и отображения результата.

Вы могли заметить, что для обновления свойств любого компонента существует два варианта блоков - Update Properties и Set Properties. Разница между ними такая же, как и между методами Patch и Put в Rest API. Первый меняет только явно указанные свойства, тогда как второй переписывает их все.

Итоговый результат

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

Если все было сделано правильно, то итоговый результат должен выглядеть подобным образом: