Ui-element-structure-and-responsive-layout

Режим Pro в XIOT-EDITOR использует вложенную структуру элементов. Такой подход помогает проектировать интерфейсы для разных размеров экрана, но результат необходимо проверять на каждом целевом устройстве.

Редактор поддерживает как адаптивные, так и позиционные интерфейсы, а также их комбинирование в рамках одного проекта.

Lite и Pro — два режима одного XIOT-EDITOR. Сначала ознакомьтесь со статьями Lite и Pro версии редактора и Назначение и возможности Pro версии редактора. Обзор меню находится в статье Обзор инструментов и меню PRO версии редактора.

🧱 Вложенная структура элементов

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

Типовой пример:

Страница
- Основной контейнер
  - Виджет устройства
    - Иконка
    - Название
    - Элементы управления
  - Другой виджет
- Панель навигации
  - Кнопка «Назад»

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

Вложенность элементов служит основой адаптивной компоновки.

📐 Единицы измерения и масштабирование

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

Проценты (%)

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

Пример:

создаются два блока;
каждому задаётся высота 50%.

На целевых устройствах, например:

смартфон,
планшет,
настенная сенсорная панель,

блоки сохраняют заданную долю пространства страницы. Результат следует проверить на каждом используемом размере экрана.

Это базовый принцип адаптивного макета.

Единицы em

Единицы em применяются для размеров виджетов и элементов управления.

Особенности:

размеры элементов зависят от значения font-size;
элементы, размеры которых заданы в em, изменяются вместе с базовым размером шрифта;
этот подход помогает сохранять согласованные пропорции и отступы.

Изменение font-size помогает масштабировать связанные с ним размеры элементов. После изменения проверьте компоновку и читаемость.

🧩 Подходы к построению интерфейса

В режиме Pro доступны два основных подхода к компоновке интерфейса.

🔄 Адаптивный (резиновый) интерфейс

Адаптивный интерфейс строится на:

вложенной структуре блоков;
использовании % и em;
отсутствии абсолютного позиционирования.

Характеристики:

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

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

📌 Позиционный интерфейс

Позиционный интерфейс применяется в случаях, когда заранее известно разрешение экрана.

Для этого:

элементу задаётся CSS-свойство position: absolute;
после этого элемент можно свободно перемещать мышью в рабочей области;
положение фиксируется относительно страницы.

Такой подход используется для:

специализированных экранов;
панелей с фиксированной компоновкой;
визуальных схем.

🔀 Комбинированный подход

На практике чаще всего используется комбинирование двух подходов.

Рекомендуемая схема:

виджет проектируется адаптивным —

 размеры в em,  
 вложенные элементы в % и em,  
 без абсолютного позиционирования;

сам виджет размещается на странице с помощью position: absolute.

Преимущества:

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

🎨 Настройки стилей

В Pro доступны настройки стилей для элементов интерфейса.

Поддерживаются основные группы свойств:

размеры и ограничения (width, height, min/max);
отступы и поля (margin, padding);
шрифты и типографика;
позиционирование;
фон и цвета;
рамки и скругления;
тени и прозрачность;
анимации и переходы;
flex-компоновка.

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

🧩 Виджеты как переиспользуемые компоненты

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

структуру элементов;
стили;
логику;
привязки к характеристикам и физическим адресам.

Виджеты можно:

клонировать;
переносить между страницами;
сохранять в файл формата .xelem;
использовать в других проектах.

Один раз созданный виджет может применяться многократно без изменения структуры.

.xelem — файл элемента, а не всего проекта.

Во время вёрстки полезно периодически нажимать Сохранить проект, создавая самостоятельные контрольные точки. Это не загружает конфигурацию на XIOT-PLC. Если нужно применить текущую конфигурацию, используйте Загрузить конфигурацию на контроллер: команда сама сохранит проект, создаст одну новую версию и передаст на XIOT-PLC точный снимок этой версии.

🎯 Итог

Режим Pro предоставляет инструменты ручного построения интерфейсов:

вложенная иерархия элементов;
использование % и em для масштабирования;
поддержка адаптивного и позиционного подходов;
комбинирование методов в одном проекте;
настройки стилей элементов;
переиспользуемые виджеты.

Это позволяет создавать пользовательские интерфейсы и специализированные инженерные панели для заранее определённых и проверенных размеров экрана.

Требования к браузеру и порядок входа: Доступ к XIOT-EDITOR.