Урок 1. Hello World

В разделе Платформа Workflow Technology мы познакомились с архитектурой платформы, составом проекта и настройкой взаимосвязи его компонент. Развернули серверную и клиентскую части учебного проекта. И развили проект до полноценного десктопного приложения в курсе WT. Практика (Desktop). В статье Добавление мобильного приложения сделали все необходимое, чтобы учебный проект мог поддерживать мобильное приложение.

В этом уроке мы скачаем мобильное приложение и настроим его на работу с серверной частью учебного проекта.

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

Добавление проекта в редактор

В статье Добавление проекта подробно рассматривается добавление десктопного приложения в редактор Workflow XML Editor. Процесс добавление форм мобильного приложения аналогичен за исключением одного момента: в качестве типа приложения в поле Project type необходимо указать Mobile, чтобы редактор подхватил схему для Workflow MobileForms:

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

Скачивание приложения

Скачаем мобильное приложение, просканировав QR-код:

Или перейдя по ссылке в нужный магазин приложений:

WS - Apps on Google PlayGooglePlay

‎WSApp Store

WS в каталоге RuStoreRuStore

Первый запуск

Запустим сервер и убедимся, что он работает на локальном 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.

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

Стартовый экран

В нашем случае стартовый экран уведомляет нас об успешном подключении к серверу:

Если соединение с сервером не установлено, то необходимо проверить:

• правильно ли указали IP-адрес и порт сервера в настройках мобильного приложения;

• сервер должен запускаться на конкретном IP-адресе, а не на localhost;

• правильно указаны пути в полях MobileFormsFolder и MobileBinaryPath в файле appsettings.json;

• правильно указаны относительные пути в колонках forms_path и bin_path в таблице public.mobile_app относительно соответствующих путей в полях MobileFormsFolder и MobileBinaryPath в файле appsettings.json;

• если сервер запущен на внутреннем IP-адресе, то мобильное устройство должно быть подключено к той же локальной сети через Wi-Fi.

Давайте перейдем в 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, цвет и стиль текста на кнопках и многое другое.

Итоги

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

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