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

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

Типы свойств компонентов экранной формы

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

• value. Свойствам компонентов типа value можно присваивать значения любого из перечисленных ниже типов.
• event. Свойствам компонентов типа event можно присваивать только функции. Такая функция вызывается только при наступлении определенного события. Метод getEvent(), вызванный в коде этой функции, возвращает объект события компонента экранной формы.
• writable. Свойствам компонентов типа writable запрещено присваивать значения типа константа и типа функция. Таким свойствам рекомендуется присваивать значение типа переменная и использовать эту переменную для записи результата выполняемых пользователем действий.

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

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

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

  Следующие примеры демонстрируют присвоение свойству 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 присвоены значения переменных состояния, в связи с чем свойства имеют суффикс -var. По нажатию кнопки значения переменных изменяются, вследствие чего изменяется содержимое и видимость компонента Text.

  <Text Value-var="myVar" Visible-var="visible" />
  <Button
  Text="Button"
    OnClick={() => {setState({myVar: 'Bye', visible: true }) } }
  />

  Следующий блок кода экранной формы демонстрирует описание компонента Text, используемого внутри фрагмента. Значению Value присвоено значение свойства MyProp текущего фрагмента, в связи с чем свойство имеет суффикс -prop.

  <Text Value-prop="MyProp" />