Пользовательский интерфейс в надстройках

Для описания пользовательского интерфейса в надстройках редакторов МойОфис разработчик использует виджеты (widgets) и компоновки (layouts) (см. раздел Справочник таблиц и методов пользовательского интерфейса надстроек).

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

Компоновки предоставляют инструмент для автоматического размещения виджетов внутри диалогового окна.

Для создания пользовательского интерфейса надстроек доступны следующие виджеты:

Label (Надпись) – элемент для отображения неизменяемого текста, например, пояснительная надпись для поля ввода (см. раздел ui:Label);
Button (Кнопка) – элемент для отображения кнопки, требующей нажатия (см. раздел ui:Button);
CheckBox (Флажок) – элемент для отображения флажка (см. раздел ui:CheckBox);
RadioButton (Радио кнопка) – элемент для отображения переключателя (см. раздел ui:RadioButton);
GroupBox (Рамка группы) – элемент для отображения группы элементов Радио кнопка (см. раздел ui:GroupBox);
ListBox (Список элементов) – элемент для отображения окна списка (см. раздел ui:ListBox);
ComboBox (Поле с выпадающим списком) – элемент для отображения поля с выпадающим списком (см. раздел ui:ComboBox);
TextBox (Текстовое поле) – элемент для ввода небольшого объема текста (см. раздел ui:TextBox).

Для размещения виджетов в пространстве диалогового окна используются следующие виды компоновок:

Row – располагает виджеты по горизонтали слева направо по ширине диалогового окна (см. раздел ui:Row);
Column – располагает виджеты по вертикали сверху вниз по высоте диалогового окна (см. раздел ui:Column);
Spacer – используется для выравнивания позиции виджета относительно ширины или высоты диалогового окна (см. раздел ui:Spacer).

Пример

 local dlg = ui:Dialog {
  Size = Forms.Size(600,300),
  ui:Column {
  ui:Row {
  ui:Spacer {},
  ui:Column {lblHello}, -- Надпись
  ui:Column {txtEntryField}, -- Текстовое поле
  ui:Spacer {}
  }
  }
 }
 context.showDialog(dlg)

В данном примере Надпись и Текстовое поле располагаются в виде двух столбцов (метка-поле), выравненных по центру относительно ширины диалогового окна.

Пример​

Пример