← На главную

При переходе от обычных форм к управляемым формам в конфигурации 1С:Управление торговлей, например, с версии 10.3 на 11.5, разработчики часто сталкиваются с задачей адаптации интерфейса. Одной из таких распространённых проблем является вертикальное расположение элементов, в частности, радиокнопок, и их последующее выравнивание с соответствующими полями ввода. Если в обычных формах мы имели возможность "попиксельного" позиционирования элементов, то в управляемых формах подход существенно изменился. Здесь преобладает декларативное описание структуры, а фактическое размещение элементов выполняется автоматически системой при отображении формы. Тем не менее, у нас есть инструменты для влияния на этот процесс, и мы рассмотрим, как их использовать.

Рассмотрим подробнее подходы к решению этой задачи, начиная от простых настроек до более комплексных архитектурных решений.

1. Настройка свойства "ВертикальныйИнтервал" для группы с радиокнопками

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

Как это работает?

Система 1С при отображении управляемой формы старается оптимально распределить элементы, учитывая их типы, размеры и свойства групп-контейнеров. Радиокнопки, как правило, занимают меньше вертикального пространства, чем полноценные поля ввода, особенно если поля ввода многострочные или имеют подписи. Чтобы "растянуть" группу радиокнопок по вертикали и совместить её с группой полей, нам необходимо увеличить вертикальное пространство между самими радиокнопками.

1. Найдите группу с радиокнопками: Откройте форму в конфигураторе. В дереве элементов формы найдите группу, которая содержит ваши радиокнопки. Если радиокнопки расположены непосредственно на форме, без промежуточной группы, создайте для них отдельную группу или добавьте необходимые элементы. Это даст нам больше контроля над их расположением.
2. Перейдите к свойствам группы: Выделите эту группу в дереве элементов формы. В окне свойств обратите внимание на категорию "Расположение" и наличие скрытых реквизитов.
3. Настройте свойство ВертикальныйИнтервал: В списке свойств найдите ВертикальныйИнтервал. По умолчанию он может быть установлен в значение "Обычный". Мы можем изменить это значение на "Полуторный" или "Двойной".

Возможные значения для ВертикальныйИнтервал:

• Обычный: Стандартный интервал, используемый по умолчанию.
• Полуторный: Увеличивает вертикальный интервал между элементами группы в полтора раза.
• Двойной: Увеличивает вертикальный интервал между элементами группы в два раза.

Пример:

Если после установки ВертикальныйИнтервал = Полуторный выравнивание всё ещё неидеально, попробуйте установить ВертикальныйИнтервал = Двойной. Как показывает опыт пользователей, это часто помогает достичь почти идеального совпадения.

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

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

2. Использование групп и пустых декораций для создания отступов

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

Идея этого метода:

Мы создаем дополнительные группы или используем элемент Декорация с пустым содержимым (без текста или картинки), чтобы вставить "пробелы" или "отступы" между элементами. Это позволяет нам вручную контролировать расстояние, так как декорации могут быть настроены по ширине и высоте.

1. Создайте вложенные группы: Если ваши радиокнопки и связанные с ними поля ввода находятся в разных группах, рассмотрите возможность создания главной группы-контейнера. Внутри неё разместите две подгруппы: одна для радиокнопок, другая для полей ввода.
2. Вставьте декорацию: Между этими двумя подгруппами или внутри группы с радиокнопками (между отдельными радиокнопками, если нужно увеличить интервал только в определённых местах) вставьте элемент Декорация.
3. Настройте декорацию:
   • Установите для Декорация тип "Надпись".
   • Оставьте свойство Заголовок пустым.
   • Используйте свойства АвтоМаксимальнаяШирина, МаксимальнаяШирина, АвтоМаксимальнаяВысота, МаксимальнаяВысота, чтобы контролировать размер этой "пустой" декорации. Например, увеличивая МаксимальнаяВысота, мы можем создать необходимый вертикальный отступ.

Этот метод дает более точный контроль над размерами отступов, но может потребовать больше усилий для настройки и поддержки, особенно если структура формы часто меняется.

3. Архитектурное решение: Использование "ГруппаСтраниц" для динамического отображения полей

Наиболее элегантным и соответствующим философии управляемых форм решением, особенно в случае, когда поля ввода зависят от выбранной радиокнопки, является использование элемента ГруппаСтраниц. Этот подход позволяет не только решить проблему выравнивания, но и значительно улучшить юзабилити формы, сделав её более чистой и интуитивно понятной.

В чем суть подхода?

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

Преимущества этого решения:

• Чистый интерфейс: Пользователь видит только актуальные поля, что снижает когнитивную нагрузку и вероятность ошибок.
• Экономия места на форме: Форма выглядит компактнее и не перегружена лишними элементами.
• Улучшенное юзабилити: Интерфейс становится более адаптивным и понятным.
• Отсутствие проблем с выравниванием: Каждая страница будет содержать только те поля, которые для неё предназначены, и система автоматически их расположит без необходимости сложной ручной настройки интервалов.

Разберем реализацию по шагам:

1. Разместите радиокнопки: Создайте группу для ваших радиокнопок. Убедитесь, что они связаны с одним реквизитом формы, который будет хранить выбранное значение (например, числовое поле или перечисление).
2. Создайте элемент ГруппаСтраниц: Добавьте на форму элемент типа ГруппаСтраниц. Это будет контейнер для всех зависимых полей.
3. Создайте страницы для каждой опции: Для каждой опции радиокнопки (каждого возможного значения реквизита, связанного с радиокнопками) создайте отдельную страницу в этой ГруппеСтраниц.
   • Выделите ГруппаСтраниц в дереве элементов.
   • Нажмите правой кнопкой мыши -> "Добавить элемент".
   • Выберите тип элемента "Страница".
   • Присвойте каждой странице уникальное имя и заголовок, соответствующий опции радиокнопки (например, "СтраницаОпция1", "СтраницаОпция2").
4. Разместите поля ввода на страницах: Перетащите или создайте на каждой странице ГруппыСтраниц только те поля ввода, которые должны отображаться при выборе соответствующей опции радиокнопки.
5. Отключите вывод заголовков страниц: Чтобы ГруппаСтраниц не занимала лишнего места и не отвлекала пользователя, мы можем отключить отображение её заголовков. В свойствах ГруппыСтраниц найдите свойство ОтображениеЗаголовковСтраниц и установите его значение в "Нет".
6. Настройте обработчик события ПриИзменении для радиокнопки:

   Для реквизита формы, с которым связаны радиокнопки, создайте обработчик события ПриИзменении. В этом обработчике мы будем программно устанавливать состав элементов и текущую страницу в ГруппеСтраниц в зависимости от выбранного значения радиокнопки.

   Скопировать код

   
   &НаКлиенте
   Процедура ВариантВыбораПриИзменении(Элемент)
       // ВариантВыбора - это реквизит формы, к которому привязаны радиокнопки
       // ГруппаПолей - это имя нашей ГруппыСтраниц на форме
   
       Если ВариантВыбора = ВариантВыбораПеречисления.Опция1 Тогда
           Элементы.ГруппаПолей.ТекущаяСтраница = Элементы.ГруппаПолейСтраницаОпция1;
       ИначеЕсли ВариантВыбора = ВариантВыбораПеречисления.Опция2 Тогда
           Элементы.ГруппаПолей.ТекущаяСтраница = Элементы.ГруппаПолейСтраницаОпция2;
       ИначеЕсли ВариантВыбора = ВариантВыбораПеречисления.Опция3 Тогда
           Элементы.ГруппаПолей.ТекущаяСтраница = Элементы.ГруппаПолейСтраницаОпция3;
       КонецЕсли;
   КонецПроцедуры
   

   Где:

   • ВариантВыбора – это имя реквизита формы, к которому привязаны ваши радиокнопки.
   • ВариантВыбораПеречисления – это имя перечисления, если вы используете его для значений радиокнопок. Если вы используете числовые значения (1, 2, 3), то сравнение будет выглядеть как ВариантВыбора = 1.
   • ГруппаПолей – это имя элемента формы типа ГруппаСтраниц.
   • ГруппаПолейСтраницаОпция1, ГруппаПолейСтраницаОпция2 и т.д. – это имена страниц внутри вашей ГруппыСтраниц.

Таким образом, при изменении выбранной радиокнопки, система будет автоматически переключать видимую страницу, отображая только актуальные поля. Это не только решает проблему выравнивания, но и делает форму более функциональной и удобной.

4. Общие рекомендации по дизайну интерфейса управляемых форм

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

Рассмотрим несколько важных аспектов и свойств, которые помогут нам при работе с управляемыми формами:

1. Переработка интерфейса: Мы уже упоминали, что автоматическое масштабирование и расположение элементов в управляемых формах существенно отличаются от обычных. Поэтому критически важно не просто перенести элементы, а переосмыслить и переработать интерфейс, учитывая особенности УФ. Цель – не воссоздать точь-в-точь старый дизайн, а создать удобный и эффективный новый.
2. Контроль размеров элементов: Для различных элементов управляемой формы, таких как поля надписи, поля ввода, декорации и кнопки, доступны свойства АвтоМаксимальнаяШирина, МаксимальнаяШирина, АвтоМаксимальнаяВысота, МаксимальнаяВысота.
   • АвтоМаксимальнаяШирина / АвтоМаксимальнаяВысота: Если установлено в "Истина", система автоматически определяет оптимальную ширину/высоту элемента.
   • МаксимальнаяШирина / МаксимальнаяВысота: Позволяет задать максимальную ширину/высоту элемента в условных единицах (аналог символов). Это полезно, когда мы хотим ограничить рост элемента, чтобы он не растягивался на всю доступную область, или, наоборот, чтобы он занимал определенное пространство для выравнивания.
   Мы можем использовать эти свойства, например, для полей ввода, чтобы они занимали столько же вертикального пространства, сколько и группа радиокнопок, или для создания "распорок" с помощью декораций.
3. Отключение растягивания формы: В некоторых случаях, особенно для форм с небольшим количеством элементов, нам может понадобиться более жесткий контроль над размерами и положением. Существует режим работы формы, который отключает автоматическое растягивание её элементов по вертикали. Это свойство формы может быть полезно, когда нужно предотвратить нежелательное "разъезжание" элементов при изменении размеров окна.
4. Сквозное выравнивание для групп: Для элементов управляемой формы типа Группа реализовано свойство СквозноеВыравнивание. Это свойство может быть полезно для выравнивания содержимого нескольких групп, если, например, радиокнопки и поля ввода находятся в разных группах, но должны быть выровнены относительно друг друга по горизонтали или вертикали. Оно помогает синхронизировать расположение элементов, находящихся в разных контейнерах.
5. Точное позиционирование в группе: Свойства ГоризонтальноеПоложениеВГруппе и ВертикальноеПоложениеВГруппе также доступны для расширений полей управляемой формы. Они позволяют более точно позиционировать отдельные элементы внутри их группы-контейнера относительно горизонтального или вертикального центра, начала или конца. Это может быть полезно для доводки выравнивания, когда другие методы не дают идеального результата.

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