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

.. toctree::
   :maxdepth: 2
   :glob:
   :numbered:
   
Приложение
---------------------

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


1. Для создания нового приложения необходимо выбрать пункт меню "Создать"

2. В появившемся окне необходимо указать:

* Название - будет отображаться на верхней панели, при работе с приложением и в списке при выборе пункта меню "Открыть приложение"
* Код - уникальный код приложения. Может содержать латинские буквы, цифры и символ "_" (нижнее подчеркивание)
* URL - уникальный адрес, по которому можно будет открыть приложение.
* Поставить галочку "Требуется авторизация" (или указать логин и пароль для пользователя по умолчанию).

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

        .. figure:: img/1.png
        рис. Окно свойств приложения
 
3. Выделить корневую папку root, нажать на "+" и выбрать пункт "Добавить страницу":

        .. figure:: img/23.png
        рис. Добавление новой страницы приложения

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

        .. figure:: img/2.png
        рис. Окно создания страницы "Авторизация"
 
5. В нашем примере мы будем создавать приложение соостоящее из двух страниц: страницы авторизации и "Главной". Таким образом, необходимо повторить процесс добавления страницы - для Главной.

        .. figure:: img/24.png
        рис. Окно создания страницы "Главная"
 
6. Затем можно приступать к оформлению каждой страницы.


Страница авторизации
----------------------------------

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

        .. figure:: img/4.png
        рис. Окно свойств страницы

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

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

        .. figure:: img/5.png
        рис. Редактирование корневой панели страницы

4. Настроим свойства корневой панели:

* Выравнивание по горизонтале - **по центру**
* Выравнивание по вертикали - **по центру**
* Стили - **height: 100vh;** (Растягивает панель на всю высоту экрана. Возможно, нужно сохранить и переоткрыть страницу, чтобы изменения применились).

5. Добавим на ``root-panel`` компонент "Панель" - это будет наше окно авторизации. 

        .. figure:: img/7.png
        рис. Создание панели для окна авторизации

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

* Тип - **Вертикальная**
* Выравнивание по горизонтале - **по центру**
* Выравнивание по вертикали - **по центру**

7. добавим в нее еще три панели:



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

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

        .. figure:: img/6.png
        рис. Окно авторизации 

Добавим кейс для кнопки "Войти":
 
         .. figure:: img/8.png
        рис. Кейс перехода на главную страницу

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

         .. figure:: img/9.png
        рис. Создание панели с логотипом

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

         .. figure:: img/10.png
        рис. Копируем идентификатор изображения

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

         .. figure:: img/11.png
        рис. Предпросмотр добавленного изображения

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

         .. figure:: img/12.png
       рис. Добавленная панель с выбором языка

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


         .. figure:: img/13.png
       рис. Выравнивание для панели с выбором языка

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

         .. figure:: img/14.png
       рис. Панель приветствия

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

         .. figure:: img/15.png
       рис. Добавление видео

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


         .. figure:: img/16.png
       рис. Страница авторизации приложения

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

         .. figure:: img/17.png
       рис. Главная страница приложения

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