Обзор дизайнера веб-приложений

После успешного создания приложения вы перейдете на вкладку UI Designer.

Конструктор пользовательского интерфейса в AppMaster позволяет без труда создавать потрясающие страницы веб-приложений.

Благодаря интуитивно понятному интерфейсу, основанному на технологии "drag-n-drop", вы можете создавать веб-страницы и наполнять их контентом без каких-либо навыков прораммирования и верстки.

Конструктор UI разделен на основные секции, с которыми вам предстоит взаимодействовать:

1. Панель инструментов
2. Дополнительные инструменты
3. Масштабирование и размер
4. Канвас (холст)
5. Панель свойств

Панель инструментов

Панель инструментов в левой части экрана предназначена для работы со структурой вашего сайта. Если нажать на иконки, расположенные в верхней левой части этой панели, вы получите доступ к:

• Списку UI элементов
• Дереву элементов
• Дереву страниц
• Списоку шаблонов страниц
• Хранилищу файлов

Список UI элементов (горячая клавиша: 1)

В Списке UI элементов представлена библиотека UI-элементов для построения интерфейса. Выберите необходимый элемент и добавьте его в на рабочую область путем перетаскивания.

Элементы пользовательского интерфейса распределены по категориям в зависимости от их назначения, что облегчает навигацию и поиск подходящего элемента для вашего приложения.

Для быстрого перехода к элементу можно воспользоваться строкой поиска в верхней части панели.

Дерево элементов (горячая клавиша: 2)

В Дереве элементов вы можете управлять и организовывать все объекты, размещенные на текущей странице или шаблоне вашего веб-приложения.

Здесь вы можете :

• перемещать элементы по дереву с помощью перетаскивания,
• переименовывать элементы,
• изменять состояния видимости элементов на холсте (скрыть/показать).

Используйте строку поиска в верхней части панели для быстрого поиска элемента в дереве.

Дерево страниц (горячая клавиша: 3)

Дерево Страниц позволяет вам организовывать и управлять страницами вашего сайта. Здесь можно создавать новые страницы и папки.

Страницы и папки также можно дублировать, переименовывать или удалять.

Для быстрого поиска страницы или папки в дереве используйте строку поиска в верхней части панели .

Список шаблонов страниц (горячая клавиша: 4)

Список шаблонов страниц помогает управлять шаблонами страниц. Как и в дереве страниц, вы можете дублировать, переименовывть или удалять шаблоны.

Используйте панель поиска в верхней части панели для быстрого поиска.

Хранилице файлов (горячая клавиша: 5)

Хранилице файлов облегчает загрузку, хранение и организацию ваших медиа-файлов (таких как изображения, видео, аудио, анимация и документы), а также дальнейшее их использования в вашем веб-приложении.

Все файлы, загруженные вами во время разработки, будут храниться в хранилище и могут быть использованы повторно без необходимости повторной загрузки.

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

Дополнительные инструменты

Верхняя панель предоставляет дополнительный набор инструментов для работы с вашим приложением. Начиная с левой стороны и двигаясь вправо, вы получаете следующий набор инструментов:

• Название текущего документа: отображает страницу или шаблон страницы, над которым вы работаете в данный момент. 
• Точки перехода (breakpoints): кнопки точек перехода позволяют быстро переключаться между различными разрешениями для предварительного просмотра того, как ваш сайт отображается на устройствах с разным размеров экранов.
• Отмена и повтор: Кнопки "Отменить" и "Повторить" позволяют отменить или повторно применить отмененное действие, например, изменение свойства или удаление элемента. Также для этих операций вы можете воспользоваться сочетаниями клавиш: для отмены действия - CRTL/⌘+Z и для повторного выполнения действия - CTRL/⌘+SHIFT+Z.

Масштабирование и размер

Нижняя панель позволяет изменять масштаб или размер холста.

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

С правой стороны вы можете управлять масштабом:

• Увеличить или уменьшить масштаб
• Установить масштаб в процентах
• Вернуться к реальному размеру холста
• Масштабировать текущий размер холста под видимую область

Канвас (холст)

Канвас - это ваше интерактивное рабочее пространство. Здесь вы можете работать с элементами страницы. Вы можете выбирать элементы, изменять их расположение и редактировать содержимое прямо на странице.

Кроме того, вы можете копировать (CRTL/⌘+C) и вставлять (CRTL/⌘+V) элементы между страницами и приложениями, или дублировать элементы в пределах родительского контейнера (CRTL/⌘+D).

Панель свойств

Панель Свойств в правой части дизайнера позволяет настраивать внешний вид и поведение выбранного элемента, шаблона или страницы.

Панель Свойств включает в себя несколько вкладок:

• Внешний вид
• Дополнительные параметры (опционально)
• Адаптивность
• Бизнес-логика элемента

В верхней части панели вы можете переименовать выбранный элемент, щелкнув по его названию, прочитать описание или удалить элемент, щелкнув по значку "Корзина".

Внешний вид

Панель внешнего вида позволяет настроить статическое содержимое выбранного элемента и его внешний вид. Вы можете ввести или выбрать необходимые значения в соответствующих полях свойств. Все настройки будут немедленно применены к вашим элементам на холсте.

Если на холсте не выбрано ни одного элемента, на этой панели будут отображаться настройки текущей страницы или шаблона.

Дополнительные параметры

Панель Дополнительные параметры предназначена для элементов, которым требуются дополнительные данные или опции.

Например, здесь вы сможете задать источник данных или ввести какие-либо параметры в зависимости от выбранного UI-элемента.

Адаптивность

Панель Адаптивность позволяет переопределять свойства элементов при измении окна браузера. Вы можете переопределить свойства для каждой из точек перехода. 

Бизнес-логика

Панель Бизнес-логика содержит триггеры выбранного элемента и позволяет настроить логику на каждый из возможных типов взаимодействия пользователя с элементом.