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

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

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

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

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

Что нужно

• Панели и правки текста работают всегда. Выбор узлов, перемещение и оборачивание компонентов, копирование и вставка, каркас – всё это опирается только на 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).
• Привязать поле ввода: перетащите реквизит (или свойство) на узел в области “Структура” либо сделайте двойной клик. Конструктор создаст нужный компонент ввода уже с привязкой: Булево –> флажок, иначе поле ввода с Значение: =....

Каркас формы

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

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

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

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

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

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

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

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

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

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

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

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

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

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