Синтаксис языка описания экранных форм

Синтаксис языка описания экранных форм похож на синтаксис JSX, используемый в React. Эта статья посвящена особенностям синтаксиса языка, используемого в Платформе.

Присвоение значения свойству компонента экранной формы

Для описания свойства компонента экранной формы используется запись вида: <имя свойства>={<значение свойства>}. Следующие примеры демонстрируют присвоение свойствам компонентов значений следующих типов:

Константа. При присвоении свойству компонента значения типа константа используются фигурные скобки и кавычки. Если кавычки используются внутри фигурных скобок, тип кавычек — одинарные или двойные — не имеет значения. Альтернативная запись присвоения свойству строкового значения типа константа может не содержать фигурных скобок. В таком случае используются только двойные кавычки.

Следующие примеры демонстрируют присвоение свойству Text строкового значения типа константа:
```
Text={"Button"}
```
```
Text="Button"
```
Следующий пример демонстрирует присвоение свойству Visible булева значения:
```
Visible={false}
```
Следующий пример демонстрирует присвоение свойству CSS массива значений:
```
CSS={['mt-8', "pb-16"]}
```
Следующий пример демонстрирует присвоение свойству Badge объекта в качестве значения:
```
Badge={{
position: pre,
color: 'error'
}} 
```
Следующий пример демонстрирует присвоение обработчику события OnClick() функции в качестве значения:
```
OnClick={() => {console.log(); }}
```
Переменная. При присвоении свойству компонента значения переменной к имени свойства добавляется суффикс -var. Следующий пример демонстрирует присвоение свойству Text значения переменной someVar:
```
Text-var="someVar"
```
Значение из словаря. При присвоении свойству компонента значения из словаря используется имя словаря и имя ключа, разделенные точкой.

Следующий пример демонстрирует присвоение свойству Text значения ключа Responsible из словаря GanttDemo:
```
Text-Localizable="GanttDemo.Responsible"
```
Значение свойства фрагмента экранной формы. При присвоении свойству компонента значения свойства фрагмента к имени свойства добавляется суффикс -prop.
```
Text-prop="somePropName" 
```
Запись выше аналогична записи Text={getProp()}.
Функция. В функциях могут использоваться методы FrontendCore.

Следующий пример демонстрирует присвоение свойству Visible значения, возвращаемого функцией:
```
Visible={() => {return true}}
```
При присвоении значений, возвращаемых функцией, используется метод getValue().
```
Visible={() => {
const a = getValue('a')
return a;
}}
```
Возможны следующие варианты записи присвоения значений, возвращаемых функцией:
- При использовании первого варианта функция вызывается один раз при инициализации компонента, например, Button.
```
const a = getValue('a')
return a;
```
- При использовании второго варианта компонент подписывается на изменение состояния переменной, и при изменении ее значения с false на true или наоборот, компонент будет перерисовываться, а значение Visible будет меняться.
```
Visible={(a) => {
return a;
}}
```

Обращение к переменной

Синтаксис языка описания экранных форм позволяет обращаться к переменной состояния с длинным именем, используя более короткое имя. Следующий пример демонстрирует переопределение имени переменной состояния someLongName как a.

Visible={(a = someLongName) => {
return a;
}}

Такая запись часто применяется при обращении к полю переменной-объекта. Следующий пример демонстрирует обращение к полю а переменной-объекта someobject.

Visible={(a = someobject.a) => {
return a;
}}

Подписка на изменение переменной

Подписка на изменение переменной состояния экранной формы позволяет выполнять код и перерисовывать компоненты каждый раз при изменении переменной. Подписка реализуется в следующих описаниях:

Стрелочные функции в секции Scripts экранной формы и в значениях-функциях, присвоенных свойствам компонентов экранной формы, за исключением обработчиков событий.

Переменные состояния могут использоваться в качестве параметров стрелочных функций. Для выполнения блока кода в секции Scripts только при загрузке экранной формы достаточно написать стрелочную функцию без параметров по аналогии с хуком useEffect в React с пустым массивом зависимостей. Стрелочная функция с переменной состояния в качестве параметра выполняется при каждом изменении переменной по аналогии с хуком useEffect в React с непустым массивом зависимостей.

Следующий блок кода выполняется при каждом изменении переменной Name:
```
  (Name) => {
  console.log(Name);
  }
```
Следующий блок кода выполняется при каждом изменении переменной Name, но не выполняется при изменении переменной Surname:
```
  (Name) => {
  console.log(Name, getValue('Surname'));
  }
```
Следующий блок кода демонстрирует изменение значений двух переменных с помощью метода setState():
```
  setState({
      'Name': 'Петр',
      'Surname': 'Сидоров',
  });
```
Если Name и Surname являются полями переменной-объекта User, присвоение значений этим полям может быть записано двумя способами, как показано далее:
Первый способ присвоения значений полям объекта
```
  setState({
    'User.Name': 'Петр',
    'User.Surname': 'Сидоров',
  });
```
Следующий блок кода экранной формы демонстрирует подписку на изменение ролей переменной-объекта User и выполняется только при присвоении значений полям переменной-объекта первым способом, показанным выше.
```
  (name = User.Name, surname = User.SurName) => {
    console.log(name, surname);
  }
```
Второй способ присвоения значений полям объекта
```
  setState({
    User: {
      Name: 'Петр',
      Surname: "Сидоров",
    }
    });
```
Следующий блок кода экранной формы демонстрирует подписку на изменение переменной-объекта User и выполняется только при присвоении значений полям переменной-объекта вторым способом, показанным выше.
```
  (User) => {
    console.log(User.Name);
  }
```
Свойства компонентов с суффиксами var и prop.

Следующий блок кода экранной формы демонстрирует описание компонентов Text и Button. Значениям свойств Value и Visible компонента Text присвоены значения переменных состояния. По нажатию кнопки значения переменных изменяются, вследствие чего изменяется содержимое и видимость компонента Text.
```
<Text Value-var="myVar" Visible-var="visible" />
<Button
Text="Button"
  OnClick={() => {setState({myVar: 'Bye', visible: true }) } }
/>
```

Присвоение значения свойству компонента экранной формы​

Обращение к переменной​

Подписка на изменение переменной​

Присвоение значения свойству компонента экранной формы

Обращение к переменной

Подписка на изменение переменной