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

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

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

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

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

Что нужно

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

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

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

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

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

Панель формы

Панель открывается на каждую форму отдельно и живёт как обычная вкладка редактора: вторая форма встаёт рядом с первой, у каждой панели своё дерево, выделение и память раскрытия, а повторное открытие той же формы выводит вперёд её панель. Панель и её ОТКРЫТЫЙ .yaml ходят парой – выбор вкладки с одной стороны выводит вперёд другую, пока они в разных группах: попав в одну (перетаскиванием вкладки, Ctrl+P), пара расступается и впереди остаётся выбранная вкладка – иначе панель накрывала бы исходник, который только что вывели, и добраться до него было бы нельзя. Закрытие панели закрывает yaml формы и её модуль (если в них нет несохранённых правок). Сама пара вкладок ничего не добавляет сама по себе: пока исходник закрыт, клик по полю каркаса, по строке дерева структуры, по строке панели данных или переход выделения после правки в любой из них оставляют его закрытым – двигается только выделение. Открывает исходник только явная просьба – “Показать в yaml”, Ctrl+клик, двойной клик в дереве, пункт контекстного меню дерева метаданных или вкладка Модуль внизу – и тогда он встаёт рядом с панелью, никогда в её собственной колонке, поэтому не может оказаться позади формы, которой принадлежит; единственное осознанное исключение – сама вкладка Модуль: она занимает место панели намеренно, как и положено переключению вкладки.

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

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

Вкладка модуля

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

Дорога назад – на стороне модуля: кнопка Открыть форму в заголовке редактора (там же, где у yaml формы кнопка конструктора), сама вкладка панели или Ctrl+Tab.

Структура

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

• Синхронизация с курсором. Узел под курсором в 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 объекта (Справочник, Документ, …), а дерево метаданных подсвечивает элемент активного редактора.

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

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

Для скриптов и агентов (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.