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

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


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

        .. figure:: img/1.png
        рис. Окно свойств приложения
 
2. В появившемся окне необходимо указать:

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


3. Выделить корневую папку root, нажать на "+" и добавить поочередно страницы с названиями "Авторизация" и "Главная". При создании нужно указать свойства для каждой страницы:

        .. figure:: img/2.png
        рис. Окно создания страницы "Авторизация"
 
* Название страницы - отображается в общем дереве страниц
* Код страницы - используется для настройки переходов между страницами приложения, а также для указания страницы в скриптах приложения
* Флаг “Требуется авторизация” регулирует, может ли пользователь видеть текущую страницу, не будучи авторизованным.
* Свойства URL и Путь в текущей версии не используются, но обязательны для заполнения. В качестве временного решения предлагаем копировать в эти поля код страницы. 
* Таблица “Принимаемые параметры” 

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

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

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

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

Сама страница открывается двойным кликом по названию или иконке в блоке "Страницы".

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

        .. figure:: img/5.png
        рис. Открывается окно свойств приложения


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

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

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

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

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

        .. 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
       рис. Главная страница приложения

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