Визуальный конструктор форм

Визуальный конструктор компонентов интерфейса 1С:Элемент в редакторе – панели структуры, палитры, свойств и биндинга над исходным .yaml.

Расширение включает визуальный конструктор компонентов интерфейса 1С:Элемент (ВидЭлемента: КомпонентИнтерфейса – формы и свои компоненты). Главное место работы – панель формы: слева дерево структуры, справа данные формы, под ними каркас формы. Рядом с ней – палитра компонентов в боковой панели и типизированная панель свойств. Главной поверхностью остаётся текстовый редактор; конструктор – контекстная линза над ним.

Панель формы: слева структура, справа данные, под ними каркас; палитра компонентов – секцией под деревом метаданных

Две вещи, которые важно помнить:

Каждое действие – минимальная правка текста. Конструктор никогда не переписывает и не переформатирует файл целиком; комментарии, порядок ключей и форматирование сохраняются, а каждая операция – один шаг отмены. Открытие формы в конструкторе ничего не меняет, пока вы не сделаете действие сами.
Предпросмотр – это wireframe, а не рендер. Отрисовка у платформы серверная; локальный предпросмотр показывает структуру и раскладку, а не пиксели.

Что нужно

Панели и правки текста работают всегда. Выбор узлов, перемещение и оборачивание компонентов, копирование/вставка и wireframe опираются только на yaml.
Палитре и типизированным редакторам свойств нужны данные о языке (ui-схема, генерируется из вашего дистрибутива 1С:Элемент – см. Данные о языке) и LSP-сервер (pip install "xbsl[lsp]"). Без них дерево структуры и правки всё равно работают; палитра и типизированные редакторы деградируют в подсказку, а не в ошибку.

Как открыть конструктор

Откройте .yaml компонента интерфейса (форму или свой КомпонентИнтерфейса) и нажмите кнопку конструктора формы в шапке редактора (видна на yaml формы) либо Открыть в конструкторе в контекстном меню дерева метаданных. Откроется панель формы; пока она открыта, рядом с деревом метаданных показывается Палитра.

Остальные панели живут в контейнерах панели действий и следуют за активным редактором:

1С:Элемент – дерево метаданных и Палитра (последняя – только при открытой панели формы).
Свойства (1С:Элемент) – панель Свойства.
Документация (1С:Элемент) – панель Документация.

Панель формы

Панель открывается на каждую форму отдельно и живёт как обычная вкладка редактора: вторая форма встаёт рядом с первой, у каждой панели своё дерево, выделение и память раскрытия, а повторное открытие той же формы выводит вперёд её панель. Панель и её .yaml ходят парой – выбор вкладки с одной стороны выводит вперёд другую, закрытие панели закрывает yaml формы (если в нём нет несохранённых правок), а новый yaml садится в ту группу, где уже открыт код.

Панель формы – три области с перетаскиваемыми разделителями (их положение запоминается):

Слева	Справа
Структура – дерево слотов и компонентов	Данные – свойства компонента и реквизиты объекта
Каркас формы – wireframe во всю ширину, под ними

Форма зависит от собственных свойств, поэтому структура и данные правятся там же, где форма показана, а панель “Свойства” остаётся отдельной – она следует за выделением.

Структура

Форма в виде дерева слотов (Содержимое, Команды, страницы, колонки, …) и компонентов, с иконкой по виду и бейджами линтера на узлах.

Синхронизация с курсором. Узел под курсором в yaml подсвечивается в дереве и в каркасе, а выбор узла в дереве переводит курсор к его yaml – подробно в разделе Следование за курсором.
Отмена. Ctrl+Z / Ctrl+Y работают прямо в панели: каждая операция конструктора – один шаг отмены документа yaml.
Расположение (контекстное меню + клавиши): Переместить выше / ниже (Alt+Вверх / Alt+Вниз), Обернуть в контейнер (выбор типа контейнера), Развернуть контейнер, Дублировать, Переименовать (Имя) (F2), Удалить компонент (Delete).
Копирование / вставка как yaml. Копировать фрагмент yaml (Ctrl+C) и Вставить yaml из буфера (Ctrl+V) переносят поддеревья – между формами и между проектами.
Мультивыделение (Ctrl/Shift кликом): через Править выделенные вместе… задайте или снимите одно свойство сразу у всех.
Фокус и фильтр. Сфокусироваться на поддереве сужает дерево до одной ветки (кнопка в шапке области возвращает всю форму); кнопка фильтра переключает показ только именованных компонентов.
Перетаскивание внутри области: дроп на контейнер вставляет последним ребёнком, дроп на лист – после него (недопустимые цели отбиваются до дропа). Точный порядок – Alt+Вверх / Alt+Вниз.

Данные

Область Данные связывает поля ввода с данными. В ней две секции: собственные Свойства: компонента и реквизиты объекта-владельца.

Свойства компонента: Добавить свойство (кнопка в шапке области), Переименовать свойство (F2), Сменить тип свойства, Удалить свойство (Delete).
Привязать поле ввода: перетащите реквизит (или свойство) на узел в области “Структура” либо сделайте двойной клик – конструктор создаст нужный компонент ввода уже с биндингом (Булево –> флажок, иначе поле ввода с Значение: =...).

Каркас формы

Каркас – честный wireframe структуры формы, не рендер. Он подсвечивает выбранный компонент и следует за выделением в структуре и за курсором в yaml; клик по блоку выбирает компонент, Ctrl+клик переходит к его yaml. Картинка с Изображение: файл.svg показывает саму картинку (картинки ресурсов резолвятся в **/Ресурсы/). В шапке области – тема каркаса (светлая, тёмная, как в редакторе) и масштаб: кнопками, колесом над регулятором или Ctrl+колесом над каркасом.

Следование за курсором

Текст и панели показывают ОДНО место формы. Курсор в yaml, узел в структуре, блок каркаса и содержимое панели свойств связаны в обе стороны, поэтому переключаться между “написать руками” и “поправить мышью” можно на каждом шаге, не отыскивая узел заново.

Курсор стоит на поле Описание в yaml – тот же узел выделен в структуре и подсвечен в каркасе формы

От курсора в yaml – к панелям. Поставьте курсор внутрь узла (или просто идите по файлу стрелками):

в каркасе подсвечивается блок этого компонента;
в структуре строка узла становится выделенной, а свёрнутые группы по пути от корня раскрываются сами – узел не приходится искать;
панель свойств наполняется свойствами узла под курсором (пока она открыта);
фокус остаётся в редакторе: следование – визуальное, набор текста оно не прерывает.

От панелей – к yaml.

Действие	Что происходит
Клик по узлу структуры	курсор встаёт на первую строку свойств узла, фокус остаётся в панели
Двойной клик по узлу	то же плюс переход фокуса в редактор yaml
Клик по блоку каркаса	компонент выделяется: строка в структуре, свойства в панели, курсор в yaml
`Ctrl+клик` по блоку каркаса	переход к yaml этого блока
Кнопка Показать в yaml в панели свойств	переход к строке свойства

Выделенный узел общий для трёх областей и светится полным цветом независимо от того, где сейчас фокус – потеряв фокус (например уйдя в палитру), вы всё равно видите, с чем работаете.

То же следование действует и для метаданных: панель свойств идёт за курсором в yaml объекта (Справочник, Документ, …), а дерево метаданных подсвечивает элемент активного редактора.

Панель “Палитра”

Панель Палитра живёт рядом с деревом метаданных и показывается, пока открыта панель формы. Она перечисляет компоненты для вставки в текущее выделение структуры, секциями: Частые, Избранное, Проект (свои компоненты и вставки), дальше пакеты платформы из ui-схемы.

Вставить двойным кликом (или Enter дважды) по элементу палитры, когда в области “Структура” выделен контейнер; либо Вставить в форму из контекстного меню.
Перетащить компонент из палитры в панель формы нельзя – платформа не переносит перетаскивание из своего дерева в webview. Поэтому вставка сделана кликом; перетаскивание работает внутри самой панели.
В избранное / Убрать из избранного (звёздочка) закрепляет самые нужные компоненты.
Открыть документацию открывает страницу компонента в панели документации; в подсказке – краткое описание из доков.

Панель “Свойства”

Панель Свойства правит выбранный компонент (а из пункта Свойства дерева метаданных – и объекты метаданных: это одна общая панель).

Панель свойств кнопки: секция “Заданные”, секция “События” с выбранным обработчиком ПриНажатии, кнопки перехода и сброса

Заданные сверху, все ниже. Секция Заданные перечисляет ключи, присутствующие в yaml; под ней сворачиваемые группы со всеми применимыми свойствами. Поиск фильтрует по имени и по текущему значению. Заполненная точка – значение задано в yaml, контурная – умолчание; Reset удаляет ключ.
Типизированные редакторы из ui-схемы: перечисления – dropdown; Авто|Булево – тристейт; числа; цвет (hex и образец, с пресетами в один клик из цветов самой формы и недавних); union- типы – парой Тип + Значение (Изображение, Фон); вложенные структуры (Шрифт) – подгруппами; многострочные строки.
Биндинги. Тумблер у свойства переключает значение между литералом и биндингом (=...). Дополнение биндинга предлагает значения перечислений (=Перечисление.Значение), реквизиты объекта-владельца (=Объект.Реквизит), компоненты и их члены (=Компоненты.Кнопка.Значение) и биндинги, уже встречающиеся в форме.
События. У свойства-события – dropdown подходящих обработчиков модуля; “создать обработчик” пишет заготовку с правильной сигнатурой в .xbsl и переходит к ней. Сброс события спрашивает, что делать с методом: только отвязать или удалить обработчик из модуля – во втором случае метод уходит вместе со своими аннотациями, а yaml и модуль правятся одним шагом отмены.
Объекты метаданных – так же. Для выбранного объекта (Справочник, Документ, HttpСервис, …) применимые свойства берутся из метамодели платформы, поэтому секция Все свойства показывает и то, чего в файле ещё нет: Представление, Иерархический, ВводПоСтроке, КонтрольДоступа. Редакторы типизированы – тристейт у флага, список значений у перечисления, комбобокс у типа данных; коллекции и вложенные блоки (Реквизиты, ТабличныеЧасти) показаны для сведения, правит их дерево метаданных.
Элементы коллекций – тоже. Реквизит, измерение, ресурс, поле структуры, реквизит табличной части, значение перечисления, параметр – у каждого своя секция Все свойства: класс элемента метамодель называет сама, а там, где элементы коллекции разнотипные, выбирает его по имени (встроенные Код, Наименование и Владелец справочника – собственные классы со своим набором свойств, у Код это Длина, Уникальность, Автонумерация). Без сгенерированных данных и у вложенного блока вне коллекции панель остаётся прежним плоским списком заданных свойств.
Индикатор слота. Свойство, являющееся дочерним слотом, помечено полосой и бейджем.
Серийная правка. Выбранная строка свойства переживает переход на другой компонент того же типа – так можно пройти по ряду похожих компонентов, меняя одно поле.
Значения проверяются до записи; недопустимое показывается под полем, а не записывается.

Панель “Документация”

Контейнер Документация (1С:Элемент) – справка платформы, собранная из вашего дистрибутива 1С:Элемент. Именно сюда конструктор отвечает на вопрос “что это за компонент”: действие Открыть документацию у элемента палитры открывает страницу здесь же, не уводя из редактора. Подробно – Панель документации.

Структурный поиск

Структурный поиск по формам (кнопка поиска в шапке панели “Палитра” или палитра команд) находит компоненты по формам проекта – по типу плюс предикаты ключ=значение; результаты открываются QuickPick с переходом к узлу.

Пресеты блоков

Сохранить как пресет блока сохраняет поддерево компонента под именем; Вставить пресет блока… вставляет его в любую форму (из шапки “Палитры” или контекстного меню узла структуры), а Управление пресетами блоков… переименовывает и удаляет их. Пресеты – на пользователя.

Формы только для чтения

Для источника только для чтения – форма библиотеки из .xlib, представление git/diff или файл с флагом read-only – панели показывают баннер и отключают редакторы, а правки структуры отклоняются с сообщением, так что просмотр такой формы не рискует случайной записью.

Примеры: что и как делается

Короткие сценарии – от задачи к действию. Каждый из них пишет минимальную правку в yaml (или в парный .xbsl) и откатывается одним Ctrl+Z.

Задача	Как
Вывести на форму реквизит объекта	В области Данные двойной клик по реквизиту (или перетащите его на узел структуры): появится `Флажок` для `Булево` и `ПолеВвода` с `Значение: =Объект.Реквизит` для остальных типов
Добавить компонент, которого ещё нет	Выделите контейнер в структуре и двойным кликом выберите компонент в Палитре; незнакомый компонент сначала посмотрите через Открыть документацию
Переставить поля местами	Выделите узел и жмите `Alt+Вверх` / `Alt+Вниз` – порядок в yaml меняется построчно
Разложить пару полей в строку	Выделите их (`Ctrl`-кликом), Обернуть в контейнер → `Группа`, у группы поставьте `Компоновка: Горизонтальная`
Повесить обработчик на кнопку	Выберите кнопку, в панели свойств у события `ПриНажатии` выберите создать обработчик: заготовка с правильной сигнатурой пишется в модуль формы, редактор переходит к ней
Убрать обработчик вместе с методом	Сброс (`✕`) у события спросит, отвязать или удалить метод из модуля; удаление уносит и его аннотации, yaml и модуль правятся одним шагом отмены
Выровнять десяток полей одним махом	Мультивыделение в структуре → Править выделенные вместе… → ключ (например `РастягиватьПоГоризонтали`) и значение сразу для всех
Перенести блок в другую форму	На узле Копировать фрагмент yaml (`Ctrl+C`), в другой форме – Вставить yaml из буфера (`Ctrl+V`); часто повторяемую компоновку сохраните как пресет блока
Найти в проекте все таблицы с фиксированной высотой	Структурный поиск по формам: тип `Таблица` плюс предикат `Высота=200`
Разобраться в чужой большой форме	Курсор по yaml – структура и каркас идут за ним; Сфокусироваться на поддереве сузит дерево до одной ветки, фильтр оставит только именованные компоненты
Посмотреть форму библиотеки	Откройте её yaml из `.xlib`: панели покажут баннер “только для чтения”, правки будут отклонены

Для скриптов и агентов (CLI, MCP)

Те же операции доступны вне интерфейса: CLI (xbsl form-tree, xbsl form-edit), инструменты MCP (meta_component_tree, meta_add_component, meta_move_component, …) и LSP-запросы (xbsl/formTree, xbsl/formNodeAt, xbsl/formEdit). См. Руководство.

Происхождение

У платформы есть собственный веб-редактор; этот конструктор – независимая реализация, написанная по открытой документации платформы, собственным извлечённым данным инструментария и наблюдению за конструкторами в универсальных IDE. Тексты, иконки и раскладки интерфейса – свои. См. NOTICE.