Урок 1. Hello World
В разделе Платформа Workflow Technology мы познакомились с архитектурой платформы, составом проекта и настройкой взаимосвязи его компонент. Развернули серверную и клиентскую части учебного проекта. И развили проект до полноценного десктопного приложения в курсе WT. Практика (Desktop). В статье Добавление мобильного приложения сделали все необходимое, чтобы учебный проект мог поддерживать мобильное приложение.
В этом уроке мы скачаем мобильное приложение и настроим его на работу с серверной частью учебного проекта.
Для начала добавим проект в редактор, чтобы запустив приложение на мобильном устройстве, параллельно изучать его xml-код.
Добавление проекта в редактор
В статье Добавление проекта подробно рассматривается добавление десктопного приложения в редактор Workflow XML Editor. Процесс добавление форм мобильного приложения аналогичен за исключением одного момента: в качестве типа приложения в поле Project type необходимо указать Mobile, чтобы редактор подхватил схему для Workflow MobileForms:

Так же не забывайте добавлять серверный xml-файл к проекту, как это описано в статье Добавление серверного XML-файла.
Скачивание приложения
Скачаем мобильное приложение, просканировав QR-код:



Или перейдя по ссылке в нужный магазин приложений:
Первый запуск
Запустим сервер и убедимся, что он работает на локальном IP-адресе, а не на localhost. Иначе мобильное приложение не сможет получить к нему доступ.
Подключим мобильное устройство к сети Wi-Fi, чтобы они с сервером вместе работали в одной локальной сети. При этом устройство может запросить разрешение на подключение к другим устройствам в сети. Разрешим ему это делать.
При первом запуске нас встречает экран с полем для ввода IP-адреса и порта сервера, с которым будет взаимодействовать мобильное приложение.
По умолчанию указан адрес и порт демо-сервера:

Давайте укажем IP-адрес и порт сервера учебного проекта на локальной машине, как они прописаны в файле hosting.json. Например:

После нажатия на кнопку "Продолжить" мобильное приложение отправляет запрос на указанный сервер. Сервер приняв запрос, проверяет, от какого приложения он пришел, находит нужные папки с бинарниками и xml-файлами форм и отправляет их приложению на мобильное устройство.
При поиске бинарников, сервер собирает нужный путь из поля MobileBinaryPath в конфигурационном файле appsettings.json и колонки bin_path в таблице public.mobile_app. При поиске xml-файлов форм сервер будет собирать путь до целевой папки из поля MobileFormsFolder в конфигурационном файле appsettings.json и колонки forms_path в таблице public.mobile_app.
Если сервер смог распознать мобильное приложение и найти необходимы файлы, то мобильное приложение скачает свои файлы с сервера и запустит стартовую форму. Это будет означать, что подключению прошло успешно.
Стартовый экран
В нашем случае стартовый экран уведомляет нас об успешном подключении к серверу:

Давайте перейдем в xml-файл стартового экрана (TemplateEmptyStart.xml) и для объекта ResultLabel заменим значение в тэге <Text>
на текст "Hello World". Перезапустим приложение (с выгрузкой приложения из памяти устройства) и проверим изменения:

Экран настроек
Тапнув по изображению шестеренки в верхнем правом углу, попадем на экран настроек, где можем поменять IP-адрес сервера:

Откроем в редакторе xml-файл TemplateEmptySettings.xml и посмотрим, как он устроен и разберем пару моментов.
По кнопке сохранить приложение сохранит изменения и попробует подключиться к серверу по указанному адресу, вызвав команду EngineConnectCommand.
<Command Name="EngineConnectCommand" Type="EngineConnectCommand" Assembly="Commands">
<ServerAddress>
<Object Name="AddressTextBox" />
</ServerAddress>
</Command>
Если подключение будет успешным, то вызовется команда SourceFileDownloadCommand на загрузку файлов приложения с сервера. Для этого выполнится Execution:
<Execution>
<ConditionExpression>
<Condition Name="EngineConnectCommandOkEqualCondition" />
</ConditionExpression>
<Commands>
<Command Name="SourceFileDownloadCommand" />
</Commands>
</Execution>
Где условие EngineConnectCommandOkEqualCondition проверяет результат выполнения команды EngineConnectCommand:
<Condition Name="EngineConnectCommandOkEqualCondition" Type="EqualCondition" Assembly="Conditions">
<AlwaysChange Value="True" />
<Items>
<Item>
<Command Name="EngineConnectCommand" />
</Item>
<Item>Ok</Item>
</Items>
</Condition>
Чтобы уйти с экрана настроек, можно свайпнуть по экрану слева направо, при этом сработает условие SwipeCondition, в котором проверяется направление свайпа:
<Condition Name="ContentPanelSwipeRightCondition" Type="SwipeCondition" Assembly="Conditions">
<Object Name="ContentPanel" />
<Direction>Right</Direction>
</Condition>
По этому условию вызовется Execution на закрытие формы:
<Execution>
<ConditionExpression>
<Condition Name="ContentPanelSwipeRightCondition" />
</ConditionExpression>
<Commands>
<Command Name="FormCloseCommand" />
</Commands>
</Execution>
Светлое и темное оформление
В файле TemplateEmptyStart.xml можете увидеть, что у объекта ContentPanel в тэге <BackColor> по условию AppThemeDarkEqualCondition выбирается соответствующий цвет.
Условие AppThemeDarkEqualCondition проверяет выбрано ли темное оформление в настройках устройства:
<Condition Name="AppThemeDarkEqualCondition" Type="EqualCondition" Assembly="Conditions">
<Items>
<Item>
<Info Type="AppTheme" />
</Item>
<Item>Dark</Item>
</Items>
</Condition>
Поменяем в настройках устройства стиль оформления и проверим отображение экранов при светлом и темном оформлении. Не забывайте перезапускать приложение (с предварительной выгрузкой его из памяти) каждый раз, когда меняете настройки устройства.
Основной экран при разном оформлении:


И экран настроек:


В данном примере меняется только цвет фона у основной панели. Но проверяя значение элемента <Info Type="AppTheme" />
можно заменять изображения в PictureBox, цвет и стиль текста на кнопках и многое другое.
Итоги
Отлично. Мы установили мобильное приложение на устройство, рассмотрели оба его экрана и разобрали их логику. Узнали, как подстраивать дизайн приложения под светлое или темное оформление системы.
В следующем уроке будем переделывать стартовый экран и реализовывать логику авторизации пользователя в приложении.
Last updated