Платформа WTБаза знаний

Урок 1. Hello World

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

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

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

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

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

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

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

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

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

LogoWS - Apps on Google PlayGooglePlay
LogoПриложение «WS» — App StoreApp Store
LogoWS в каталоге 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.

Если подключение будет успешным, то вызовется команда SourceFileDownloadCommand на загрузку файлов приложения с сервера. Для этого выполнится Execution:

Где условие EngineConnectCommandOkEqualCondition проверяет результат выполнения команды EngineConnectCommand:

Чтобы уйти с экрана настроек, можно свайпнуть по экрану слева направо, при этом сработает условие SwipeCondition, в котором проверяется направление свайпа:

По этому условию вызовется Execution на закрытие формы:

Светлое и темное оформление

В файле TemplateEmptyStart.xml можете увидеть, что у объекта ContentPanel в тэге <BackColor> по условию AppThemeDarkEqualCondition выбирается соответствующий цвет.

Условие AppThemeDarkEqualCondition проверяет выбрано ли темное оформление в настройках устройства:

Поменяем в настройках устройства стиль оформления и проверим отображение экранов при светлом и темном оформлении. Не забывайте перезапускать приложение (с предварительной выгрузкой его из памяти) каждый раз, когда меняете настройки устройства.

Основной экран при разном оформлении:

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

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

Итоги

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

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

Last updated