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

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


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

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