Просмотр кода страницы Ui-element-structure-and-responsive-layout

{{DISPLAYTITLE:Структура элементов и адаптивный интерфейс}}
Режим 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]].