> For the complete documentation index, see [llms.txt](https://bogdanov-inc.gitbook.io/ui-konstruktor-oktell/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bogdanov-inc.gitbook.io/ui-konstruktor-oktell/struktura-prilozheniya.md).

# Структура приложения

Ключевой точкой работы приложения является его [*<mark style="color:purple;">**state**</mark>*](/ui-konstruktor-oktell/terminy-i-opredeleniya.md). Он, декларативно, в формате ***JSON*** описывает состояние приложения. Состояние содержит полный список всех элементов (контролов) разрабатываемого приложения, их свойства, настройки, значения, методы и т.д.

В *production* режиме исходное состояние приложения устанавливается из файла *<mark style="color:orange;">state.js</mark>,* в корне директории проекта. Данный файл имеет вид:

```javascript
window.initialState = { 
  config: {...параметры для настройки приложения...}, # добавлено в версии 0.15.0
  controls: {...начальное состояние…} 
}
```

***state*** имеет следующие свойства:

* ***controls*** — все контролы приложения.&#x20;
* остальные свойства являются служебными, поэтому они скрыты и увидеть их нельзя. Возможно в будущем появятся дополнительные публичные свойства.<br>

Структура контролов имеет "плоский вид": &#x20;

```javascript
{control_id_1: {...}, control_id_2: {...}, ...}
```

Где *control\_id\_1* - это уникальный идентификатор элемента (контрола), а *{...}* - набор его параметров.

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

Также некоторые контролы могут иметь дочерние элементы (childs), например:

```javascript
{control_id_1: {childs: ["control_id_2"]}, control_id_2: {...}, ...}
```

{% hint style="info" %}
*Ключевым контролом является **main**. Он считается "точкой старта" отрисовки всех компонентов и родителем для контролов "верхнего" уровня иерархии. Данный элемент является <mark style="color:red;">обязательным</mark>, при его отсутствии приложение не начнёт стадию отрисовки.*
{% endhint %}

<br>