Урок 1. Hello World
Last updated
Last updated
В разделе Платформа 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.
Если сервер смог распознать мобильное приложение и найти необходимы файлы, то мобильное приложение скачает свои файлы с сервера и запустит стартовую форму. Это будет означать, что подключению прошло успешно.
В нашем случае стартовый экран уведомляет нас об успешном подключении к серверу:
Если соединение с сервером не установлено, то необходимо проверить:
правильно ли указали 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, цвет и стиль текста на кнопках и многое другое.
Отлично. Мы установили мобильное приложение на устройство, рассмотрели оба его экрана и разобрали их логику. Узнали, как подстраивать дизайн приложения под светлое или темное оформление системы.
В следующем уроке будем переделывать стартовый экран и реализовывать логику авторизации пользователя в приложении.
