4. Алгоритм создания приложения

4.1. Приложение

Алгоритм работы в конструкторе рассмотрим на примере создания простейшего приложения с двумя страницами (страницей авторизации и «Главной»).

  1. Для создания нового приложения необходимо выбрать пункт меню «Создать»
  2. В появившемся окне необходимо указать:
  • Название - будет отображаться на верхней панели, при работе с приложением и в списке при выборе пункта меню «Открыть приложение»
  • Код - уникальный код приложения. Может содержать латинские буквы, цифры и символ «_» (нижнее подчеркивание)
  • URL - уникальный адрес, по которому можно будет открыть приложение.
  • Поставить галочку «Требуется авторизация» (или указать логин и пароль для пользователя по умолчанию).

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

_images/1.png

рис. Окно свойств приложения

  1. Выделить корневую папку root, нажать на «+» и выбрать пункт «Добавить страницу»:

    _images/23.png

    рис. Добавление новой страницы приложения

  2. При создании нужно указать свойства для каждой страницы, в нашем случае страницы авторизации (заполняем поля согласно рис. Окно создания страницы «Авторизация»)

    _images/2.png

    рис. Окно создания страницы «Авторизация»

  3. В нашем примере мы будем создавать приложение соостоящее из двух страниц: страницы авторизации и «Главной». Таким образом, необходимо повторить процесс добавления страницы - для Главной.

    _images/24.png

    рис. Окно создания страницы «Главная»

  4. Затем можно приступать к оформлению каждой страницы.

4.2. Страница авторизации

  1. Для начала нужно указать, что эта страница является стартовой для приложения и является страницей авторизации. Для этого нужно кликнуть правой кнопкой по названию в блоке «Страницы»:

    _images/4.png

    рис. Окно свойств страницы

  2. Далее открываем страницу на редактирование (двойным кликом по названию или иконке в блоке «Страницы»).

3. По умолчанию каждая страница содержит компонент root-panel - панель, в которой будут размещены все остальные компоненты страницы. Перед тем, как добавлять на страницу новый компонент, необходимо выделить панель, на которой он будет расположен, кликом левой кнопки мыши. После этого справа отобразится блок свойств выделенной панели:

_images/5.png

рис. Редактирование корневой панели страницы

  1. Настроим свойства корневой панели:
  • Выравнивание по горизонтале - по центру
  • Выравнивание по вертикали - по центру
  • Стили - height: 100vh; (Растягивает панель на всю высоту экрана. Возможно, нужно сохранить и переоткрыть страницу, чтобы изменения применились).
  1. Добавим на root-panel компонент «Панель» - это будет наше окно авторизации.

    _images/7.png

    рис. Создание панели для окна авторизации

  2. Выделив только что созданную панель, настроим ее свойства:

  • Тип - Вертикальная
  • Выравнивание по горизонтале - по центру
  • Выравнивание по вертикали - по центру
  1. добавим в нее еще три панели:
  • В верхнюю из добавленных трёх панелей добавляем компонент - Надпись, в Свойствах указываем текст надписи - «Авторизация»
  • В среднюю добавим два компонента «Поле для ввода» - для логина и пароля. Выбираем иконки и прописываем текст для плейсхолдера
  • В нижнюю добавим компонент «Кнопка» с текстом «Войти»

Страница авторизации почти готова:

_images/6.png

рис. Окно авторизации

Добавим кейс для кнопки «Войти»:

_images/8.png

рис. Кейс перехода на главную страницу

  1. Перейдём к Главной странице. Для начала добавим на нее логотип: компонент Панель, внутрь вложим компонент Изображение:

    _images/9.png

    рис. Создание панели с логотипом

Выделяем компонент Изображение, указываем Источник - Из хранилища. Затем переходим в Хранилище Synergy, открываем нужный файл и его свойства:

_images/10.png

рис. Копируем идентификатор изображения

Вставляем скопированный идентификатор изображения в Свойства компонента:

_images/11.png

рис. Предпросмотр добавленного изображения

На панель с логотипом добавим компонент «Выбор языка». Чтобы сместить его в правый угол, сначала добавим еще одну панель и перенесем компонент при помощи ctrl+x - ctrl+v:

_images/12.png

рис. Добавленная панель с выбором языка

Затем укажем ширину панелей, на которых располагаются компоненты: 20% для логотипа и 80% для локали. Также выбираем выравнивание для этой панели:

_images/13.png

рис. Выравнивание для панели с выбором языка

Приветствие: добавляем панель и в нее компонент «Надпись», указываем текст надписи и ее свойства:

_images/14.png

рис. Панель приветствия

Выделив корневую панель, добавим компонент «Видео», указав его источник:

_images/15.png

рис. Добавление видео

Сохраняем страницу, переходим в меню приложения и нажимаем «Деплой». По адресу, указанному в свойствах приложения, можно открыть наше приложение (http://ip:8080/url):

_images/16.png

рис. Страница авторизации приложения

После авторизации попадаем на главную страницу:

_images/17.png

рис. Главная страница приложения

Приложение готово!