Редактор интерфейса

Проектирование интерфейса страницы выполняется с помощью редактора интерфейса. Для перехода к редактору откройте страницу проекта.

Редактор интерфейса предоставляет следующие возможности:

• использование шаблонов форм и таблиц при создании интерфейса (вкладка Шаблоны);

• проектирование интерфейса с использованием ui-элементов Q.Palette (вкладки Дерева элементов и Конструктор страницы);

• добавление пользовательского кода на страницу для расширения стандартного поведения компонентов и реализации дополнительных бизнес-правил (вкладка Панель разработчика)

  Обратите внимание: вкладка "Панель разработчика" доступна только пользователям с ролью "Разработчик"

Проектирование интерфейса

Проектирование интерфейса доступно в 2 режимах:

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

  В этом режиме нельзя получить реальный ответ api, поэтому на макете вы всегда видите моковые значения, введённые вручную, в т.ч. в формате json.

  Подсказка: Чтобы в режиме макета вызвать меню, сайдбар, расширенный сайдбар, диалог или накладную панель, нажмите Shift и кнопку вызова соответствующего элемента

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

  Обратите внимание: Если в api получены некорректные данные, то в предпросмотре будет выведено пустое сообщение - как в реальном приложении.

Режим макета

В режиме макета редактор интерфейса визуально разделен на две части:

• слева:
  • на вкладке Дерево элементов - дерево элементов, добавленных на страницу
  • на вкладке Конструктор страницы - палитра элементов, которые можно добавить на страницу
• справа - холст или макет страницы

Интерфейс вкладки Дерево элементов

Интерфейс вкладки Конструктор страницы

Действия со страницей в режиме макета

В режиме разработки макета доступны следующие действия:

• отмена и восстановление действия

• сохранение изменений

• редактирование свойств страницы

• скачивание страницы в формате JSON

• скачивание компонента (Angular / React)

Для выполнения действия воспользуйтесь соответствующей кнопкой или опцией меню в правом верхнем углу панели инструментов

Режим предпросмотра

Для перехода в режим предпросмотра нажмите кнопку Предпросмотр на панели инструментов

Предпросмотр страницы открывается в отдельной вкладке.

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

Действия со страницей в режиме предпросмотра

В режиме предпросмотра можно выполнить действия:

• обновить предпросмотр

• сделать скриншот страницы

• скачать JSON страницы

• скачать компонент (Angular / React)

• изменить тип рендеринга (Angular / React)

Для выполнения действия используйте соответствующую кнопку или опцию меню на панели Предпросмотр страницы