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

__NOTOC__

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

В отличие от классических редакторов умного дома (например, iRidium, AMX TPControl и др.), где элементы фиксируются абсолютными координатами на «листе», в XIOT всё строится иначе — через вложенность и относительные размеры.

----

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

Каждый элемент — это '''блок'''.  
Блоки могут содержать другие блоки, а те — свои вложенные блоки и так далее.

Пример структуры:

* Страница  
  * Главный блок  
    * Виджет устройства  
      * Иконка  
      * Название  
      * Кнопки  
    * Следующий виджет  
  * Нижняя панель  
    * Кнопка «Назад»

Это очень похоже на HTML-страницу, где есть `<div>` внутри `<div>`.

'''Такая структура автоматически адаптируется под любой размер экрана.'''

----

== 📐 Относительные размеры: % и em ==

В XIOT PRO используются два основных типа единиц:

### 1. Проценты (%)
Используются для построения каркаса страницы.

Пример:

* создаём два блока;
* первому задаём ширину '''50%''';
* второму — тоже '''50%'''.

Какой бы ни был экран устройства:

* маленький телефон,  
* планшет,  
* сенсорная панель на стене —

блоки всегда займут ровно половину ширины страницы.

Это основа адаптивного макета.

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

Эти элементы:

* растут и уменьшаются вместе с текстом внутри;
* масштабируются пропорционально;
* сохраняют правильный внешний вид при любом разрешении.

'''em''' привязывается к `font-size`.  
Если изменить размер шрифта — изменится весь виджет целиком, сохранив пропорции и не ломаясь.

----

== 🔄 Масштабируемые интерфейсы ==

Благодаря вложенной структуре:

* виджеты размещаются внутри главного блока;  
* главный блок заполняет страницу;  
* элементы внутри него автоматически распределяются;  
* если элементов слишком много — главный блок **прокручивается**.

Это отличается от традиционных решений, где:

* элементы ставят вручную на фиксированные координаты;
* интерфейс «ломается» при изменении экрана;
* требуется ручное создание отдельных макетов под каждый размер.

В XIOT достаточно создать виджет один раз — и он будет работать на любом устройстве.

----

== 🧩 Виджеты как компоненты интерфейса ==

Виджет — это тот же элемент, но с вложенными дочерними элементами:

* иконка;  
* подпись;  
* кнопки;  
* индикаторы;  
* стили;  
* логика;  
* привязки к характеристикам и тэгам.

Благодаря вложенности:

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

----

== 📱 Почему это лучше классических систем ==

Преимущества вложенной структуры XIOT:

* 📐 **автоматическая адаптация** — всё строится в процентах и em;  
* 🔁 **масштабирование интерфейса одним параметром** — меняем `font-size`, меняется всё приложение;  
* 🧩 **элементы собираются в виджеты**, виджеты легко копируются;  
* 📌 **нет фиксированной привязки к углам экрана**, как в iRidium/AMX;  
* 🚀 **быстрая сборка интерфейса** за счёт готовых компонент;  
* 📦 **один дизайн — любой экран**.

----

== 🎯 Итог ==

В PRO версии XIOT:

* структура элементов **вложенная**, как в современных веб-интерфейсах;
* используются относительные размеры (% и em), обеспечивающие адаптивность;
* элементы группируются в виджеты, которые можно многократно использовать;
* интерфейс автоматически подстраивается под любые устройства;
* приложение сохраняет внешний вид и масштаб даже при изменении `font-size`.

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