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. Облачное сохранение и публикацию приложения проверяют отдельно: успешная загрузка на PLC их не подтверждает.

---

🎯 Итог

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

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

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

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