Алгоритм работы в конструкторе рассмотрим на примере создания простейшего приложения с двумя страницами (страницей авторизации и "Главной" страницей).
.. toctree::
:maxdepth: 2
:glob:
:numbered:
Приложение
---------------------
Алгоритм работы в конструкторе рассмотрим на примере создания простейшего приложения с двумя страницами (страницей авторизации и "Главной").
1. Для создания нового приложения необходимо выбрать пункт меню "Создать"
1. Для создания нового приложения необходимо выбрать пункт меню "Создать"
...
@@ -35,28 +43,44 @@
...
@@ -35,28 +43,44 @@
6. Затем можно приступать к оформлению каждой страницы.
6. Затем можно приступать к оформлению каждой страницы.
**Страница авторизации**
Для начала нужно указать, что эта страница является стартовой для приложения и является страницей авторизации. Для этого нужно кликнуть правой кнопкой по названию в блоке "Страницы":
Страница авторизации
----------------------------------
1. Для начала нужно указать, что эта страница является стартовой для приложения и является страницей авторизации. Для этого нужно кликнуть правой кнопкой по названию в блоке "Страницы":
.. figure:: img/4.png
.. figure:: img/4.png
рис. Окно свойств страницы
рис. Окно свойств страницы
Сама страница открывается двойным кликом по названию или иконке в блоке "Страницы".
2. Далее открываем страницу на редактирование (двойным кликом по названию или иконке в блоке "Страницы").
По умолчанию каждая страница содержит компонент ``root-panel`` - панель, в которой будут размещены все остальные компоненты страницы.
3. По умолчанию каждая страница содержит компонент ``root-panel`` - панель, в которой будут размещены все остальные компоненты страницы.
Перед тем, как добавлять на страницу новый компонент, необходимо выделить панель, на которой он будет расположен, кликом левой кнопки мыши. После этого справа отобразится блок свойств выделенной панели, а в верхней части (выше панели вкладок) будут расположены кнопки управления компонентами:
Перед тем, как добавлять на страницу новый компонент, необходимо выделить панель, на которой он будет расположен, кликом левой кнопки мыши.
После этого справа отобразится блок свойств выделенной панели:
.. figure:: img/5.png
.. figure:: img/5.png
рис. Открывается окно свойств приложения
рис. Редактирование корневой панели страницы
4. Настроим свойства корневой панели:
Добавим на ``root-panel`` компонент "Панель" - это будет наше окно авторизации. Укажем компоненту выравнивание - по центру.
* Выравнивание по горизонтале - **по центру**
* Выравнивание по вертикали - **по центру**
* Стили - **height: 100vh;** (Растягивает панель на всю высоту экрана. Возможно, нужно сохранить и переоткрыть страницу, чтобы изменения применились).
Выделив только что созданную панель, добавим в нее еще три панели:
5. Добавим на ``root-panel`` компонент "Панель" - это будет наше окно авторизации.
.. figure:: img/7.png
.. figure:: img/7.png
рис. Создание панелей для окна авторизации
рис. Создание панели для окна авторизации
6. Выделив только что созданную панель, настроим ее свойства:
* Тип - **Вертикальная**
* Выравнивание по горизонтале - **по центру**
* Выравнивание по вертикали - **по центру**
7. добавим в нее еще три панели:
* В верхнюю из добавленных трёх панелей добавляем компонент - Надпись, в Свойствах указываем текст надписи - "Авторизация"
* В верхнюю из добавленных трёх панелей добавляем компонент - Надпись, в Свойствах указываем текст надписи - "Авторизация"
* В среднюю добавим два компонента "Поле для ввода" - для логина и пароля. Выбираем иконки и прописываем текст для плейсхолдера
* В среднюю добавим два компонента "Поле для ввода" - для логина и пароля. Выбираем иконки и прописываем текст для плейсхолдера
