1. Для создания нового приложения необходимо выбрать пункт меню "Создать"
.. figure:: img/1.png
Открывается окно свойств приложения
рис. Окно свойств приложения
2. В появившемся окне необходимо указать:
...
...
@@ -20,7 +20,7 @@
3. Выделить корневую папку root, нажать на "+" и добавить поочередно страницы с названиями "Авторизация" и "Главная". При создании нужно указать свойства для каждой страницы:
.. figure:: img/2.png
Окно создания страницы "Авторизация"
рис. Окно создания страницы "Авторизация"
* Название страницы - отображается в общем дереве страниц
* Код страницы - используется для настройки переходов между страницами приложения, а также для указания страницы в скриптах приложения
...
...
@@ -35,7 +35,7 @@
Для начала нужно указать, что эта страница является стартовой для приложения и является страницей авторизации. Для этого нужно кликнуть правой кнопкой по названию в блоке "Страницы":
.. figure:: img/4.png
Окно свойств страницы
рис. Окно свойств страницы
Сама страница открывается двойным кликом по названию или иконке в блоке "Страницы".
...
...
@@ -43,7 +43,7 @@
Перед тем, как добавлять на страницу новый компонент, необходимо выделить панель, на которой он будет расположен, кликом левой кнопки мыши. После этого справа отобразится блок свойств выделенной панели, а в верхней части (выше панели вкладок) будут расположены кнопки управления компонентами:
.. figure:: img/5.png
Открывается окно свойств приложения
рис. Открывается окно свойств приложения
Добавим на ``root-panel`` компонент "Панель" - это будет наше окно авторизации. Укажем компоненту выравнивание - по центру.
...
...
@@ -51,7 +51,7 @@
Выделив только что созданную панель, добавим в нее еще три панели:
.. figure:: img/7.png
Создание панелей для окна авторизации
рис. Создание панелей для окна авторизации
* В верхнюю из добавленных трёх панелей добавляем компонент - Надпись, в Свойствах указываем текст надписи - "Авторизация"
* В среднюю добавим два компонента "Поле для ввода" - для логина и пароля. Выбираем иконки и прописываем текст для плейсхолдера
...
...
@@ -60,58 +60,58 @@
Страница авторизации почти готова:
.. 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):
