Структура файла описания экранной формы

Файл описания экранной формы имеет следующую структуру:

На первом уровне расположен элемент Container.

В качестве атрибутов элемента Container используются следующие:
- Name (обязательный атрибут): определяет имя экранной формы.
  
  Для экранной формы с именем ContractForm этот атрибут описывается следующей строкой:
```
Name="ContractForm"
```
- ContainerType (обязательный атрибут): определяет тип экранной формы.
  
  Экранная форма типа страница описывается следующей строкой:
```
ContainerType="Page"
```
  Экранная форма типа фрагмент описывается следующей строкой:
```
ContainerType="PartView"
```
  В системном проекте определен тип экранной формы MasterPage, которая описывается следующей строкой:
```
ContainerType="MasterPage"
```
- Commands (необязательный атрибут): описывает действия, которые применимы к экранной форме.
- Scripts (необязательный атрибут): описывает скрипты, реализующие логику работы экранной формы.
  
  В блоке Scripts используются стрелочные функции с параметрами или без параметров.
  
  Следующий блок кода демонстрирует установку значений переменных состояния editableItem, currentTab, editableItemBook экранной формы MainPage.
```
<Container Name="MainPage" ContainerType="Page" Commands={[]} Scripts={[editableItemBook
  async () => {
  setState({editableItem: null, currentTab: 1, : null,});
  }
]}>
```
  В скриптах могут использоваться методы JS-библиотеки FrontendCore.
- DataSources (необязательный атрибут): описывает источники данных, определенные для компонентов экранной формы.
  
  Следующий пример демонстрирует блок кода экранной формы с атрибутом DataSources:
```
 DataSources={[
 {
   name: "Source1",
   load: {
     actionAlias: "Action_2",
     type: "rest",
     preProcess: {
       map: [
        {
            children: [
             { key: "skip", path: ["skip"] },
             { key: "take", path: ["take"] },
             { key: "orderParam", path: ["orderParam"] },
             { key: "genreParam", path: ["genreParam"] },
            ],
        },
       ],
     },
   },
   subscribe: {},
 },
 ]}
```
- Sid (необязательный атрибут): определяет уникальный идентификатор экранной формы.
- CombineConfig (необязательный атрибут): используется для объявления переменных состояния экранной формы и присвоения им значений по умолчанию.
  
  Следующий блок кода демонстрирует описание атрибута CombineConfig в файле *.mdcontainer:
```
CombineConfig={{
scripts: [
 {
   isContainerVariables: true,
   body: [
     {
       type: "setState",
       value: { a: { type: "string", defaultValue: "2" } },
     },
    ],
  },
],
}}
```
- Meta (необязательный атрибут): определяет параметры именованного набора метаданных, на основании которого сгенерирована экранная форма. Актуален для экранной формы типа фрагмент.
  
  warning
  Значение атрибута Meta запрещено изменять.
На втором уровне расположен только один элемент.

Файл *.mdcontainer, созданный по встроенному в DevTools шаблону, на втором уровне имеет компонент Group.

Следующий пример демонстрирует структуру файла *.mdcontainer, на втором уровне которого расположен компонент Dialog:
```
<Container
  Name="BooksDialog"
  ContainerType="PartView"
>
<Dialog Text={(typeForm = typeForm) => typeForm === "add" ? getLocalization("library.addBook") : 
getLocalization("library.editAuthor")} ExtraCloseButton={true} Model-var="editableItemBook" Flayouts="Right">
...
...
</Dialog>
</Container>
```
Компоненты экранной формы описываются тегами, вложенными в тег второго уровня. Кроме тегов с описанием компонентов, код файла с расширением mdcontainer может содержать теги с именами фрагментов экранных форм.

Следующий блок кода демонстрирует использование в коде описания экранной формы тегов с именами фрагментов экранных форм BooksDialog, AuthorsDialog, DeleteDialog:
```
<Container Name="MainPage" ContainerType="Page" Commands={[]} Scripts={[
  async () => {
   setState({editableItem: null, currentTab: 1, editableItemBook: null,});
  }
]}>
  <Group CSS={["py-16", "px-24", "mb-16"]} Mode="Column">
   ...
   ...  
    <BooksDialog/>
    <AuthorsDialog/>
    <DeleteDialog/>
  </Group>
</Container>;
```