Мы с вами не раз сталкивались с задачей по оптимизации внешнего вида управляемых форм, особенно когда речь идет о веб-версии 1С:Предприятия. Зачастую возникает потребность зафиксировать размер формы или обеспечить ее корректное отображение на различных устройствах, включая мобильные. Давайте вместе разберемся, какие инструменты предоставляет платформа 1С для решения этой проблемы и как мы можем ими воспользоваться. Платформа 1С:Предприятие, начиная с версии 8.3.7, активно развивает механизмы адаптивного дизайна для управляемых форм — здесь поможет инструмент для сборки адаптивных интерфейсов и рабочих столов. Это означает, что формы стремятся автоматически подстраиваться под размер экрана, что не всегда соответствует нашим ожиданиям по фиксированной компоновке. Веб-клиент, в частности, использует динамическую верстку на базе CSS, что позволяет элементам формы гибко реагировать на изменения размеров окна браузера. Однако у нас есть способы повлиять на это поведение.
Рассмотрим подробнее первый и наиболее часто используемый подход – это изменение настроек непосредственно в Конфигураторе. Этот метод позволяет нам задать предпочтительное поведение формы и ее содержимого для различных режимов отображения.
Режим отображения. Вы можете переключить его на "Мобильный" для тестирования и настройки компоновки, ориентированной на небольшие экраны. Этот режим помогает оценить, как форма будет выглядеть на устройствах с ограниченным пространством.Ширина и Высота: Задают предпочтительные размеры элемента.АвтоМаксимальнаяШирина, МаксимальнаяШирина, АвтоМаксимальнаяВысота, МаксимальнаяВысота: Эти свойства позволяют нам установить ограничения на автоматическое растягивание элементов по ширине и высоте. Например, если мы хотим, чтобы поле ввода не растягивалось бесконечно, мы можем задать для него МаксимальнаяШирина.Важность отображения: Это свойство играет ключевую роль в адаптивной верстке. Оно определяет, какие элементы будут скрываться или перемещаться при уменьшении доступного пространства. Элементы с высокой важностью отображения будут приоритетными.Горизонтально на Горизонтально если возможно. Это позволит группе элементов отображаться горизонтально, если для этого достаточно места, и перестраиваться вертикально при его недостатке. Также обратите внимание на свойство ГоризонтальныйИнтервал для групп и страниц, которое позволяет управлять отступами.Хотя платформа 1С преимущественно управляет размерами форм автоматически, у нас есть возможность программно влиять на некоторые аспекты их отображения. Для оптимизации процесса разработки можно использовать готовые функции для программного изменения форм, которые помогут стандартизировать добавление элементов и команд.
Мы можем изменять свойства элементов управляемой формы, такие как их Видимость или Доступность для редактирования, в зависимости от определенных условий — для этого подойдёт инструмент управления доступом и видимостью элементов формы. Например, в зависимости от роли пользователя или типа устройства, мы можем скрывать или показывать определенные поля.
&НаСервере
Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка)
Если ПараметрыСеанса.МобильныйКлиент Тогда
Элементы.ПолеВводаБольшое.Видимость = Ложь;
Элементы.ГруппаДляМобильных.Видимость = Истина;
КонецЕсли;
КонецПроцедуры
Однако стоит отметить, что прямое программное управление фактическими размерами управляемой формы (то есть ее шириной и высотой в пикселях) в 1С обычно является нетривиальной задачей. Формы спроектированы таким образом, чтобы самостоятельно адаптироваться. Изменение некоторых свойств элементов на клиенте может потребовать обращения к серверу, что влияет на производительность.
Фирма "1С" настоятельно рекомендует использовать стандартные настройки платформы для размеров форм и их элементов, и изменять их только в исключительных случаях, например, для декораций. Для форм с панелями со страницами рекомендуется подбирать ширину так, чтобы одновременно были видны все закладки страниц. Для форм объектов рекомендуется использовать автоширину колонок. Если же вам нужно быстро протестировать изменения свойств в интерфейсе, пригодится редактор форм в режиме предприятия, позволяющий редактировать параметры открытых форм без перезапуска. Для этой задачи есть инструменты редактирования объектов и метаданных в режиме предприятия.
В случаях, когда нам критически важно знать фактические размеры формы или ее элементов на клиенте, существует продвинутый подход, использующий поле HTML-документа. На этой технологии базируется, например, нестандартный подход для замены поля ввода на WEB клиенте, позволяющий более гибко управлять визуальной составляющей.
ПолеHTMLДокумента с признаком "Растягивать по горизонтали". Этот элемент будет занимать доступное пространство, и мы сможем получить его фактические размеры.clientWidth или clientHeight элемента body или другого корневого элемента внутри HTML-додокумента дадут нам фактическую ширину или высоту.
&НаКлиенте
Процедура ПолеHTMLДокументаПриНажатии()
// Эта процедура будет вызвана при клике по скрытой кнопке из HTML
Сообщить("Размер формы изменился!");
// Здесь можно вызвать серверную процедуру для обработки нового размера
КонецПроцедуры
&НаСервере
Процедура ОбработатьИзменениеРазмераНаСервере(Ширина, Высота)
// Обрабатываем полученные размеры
Заголовок = "Ширина: " + Ширина + ", Высота: " + Высота;
ЭтаФорма.Заголовок = Заголовок;
КонецПроцедуры
onResize в HTML-документе. Это событие может вызывать "клик" по скрытой кнопке на форме 1С, что, в свою очередь, будет инициировать событие ПриНажатии() у поля HTML в 1С.
// Пример HTML-кода для ПоляHTMLДокумента
&НаКлиенте
Перем HTMLТекст;
Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка)
HTMLТекст =
"<!DOCTYPE html>" +
"<html>" +
"<head>" +
"<style>body { margin: 0; padding: 0; }</style>" +
"<script>" +
"var resizeTimeout;" +
"window.addEventListener('resize', function() {" +
" clearTimeout(resizeTimeout);" +
" resizeTimeout = setTimeout(function() {" +
" var width = document.body.clientWidth;" +
" var height = document.body.clientHeight;" +
" // Имитируем клик по скрытой кнопке 1С" +
" var button = document.getElementById('hidden_button_1c');" +
" if (button) {" +
" button.click();" +
" // Можем передать размеры через глобальные переменные или скрытые поля" +
" window.external.call1C('РазмерИзменился', width, height);" + // Пример вызова функции 1С
" }" +
" }, 200);" + // Задержка для предотвращения множественных вызовов
"});" +
"</script>" +
"</head>" +
"<body>" +
"<button id='hidden_button_1c' style='display:none;' onclick='alert(\"Click from HTML!\");'></button>" +
"</body>" +
"</html>";
Элементы.ПолеHTMLДокумента.УстановитьТекст(HTMLТекст);
КонецПроцедуры
// Для метода call1C, нам потребуется обработчик на стороне 1С
// например, через событие ПоляHTMLДокумента "ПриНавигации", где мы парсим URL
// Или более простой вариант, который вызывает событие ПриНажатии() элемента 1С
// используя "window.location='#' + ширина + ',' + высота;" и затем парсим в ПриНавигации
Обратите внимание, что прямой вызов функций 1С из JavaScript (как window.external.call1C) доступен не во всех клиентах или требует дополнительной настройки. Более надежным кросс-клиентским способом является изменение window.location.hash или клик по скрытой кнопке, которую можно отловить в 1С.
Наконец, рассмотрим функцию, которая доступна конечным пользователям и также влияет на визуальное восприятие формы – это механизм масштабирования и выбор типа интерфейса.
С версии 8.3.10 в клиентских приложениях 1С:Предприятия появился механизм быстрого масштабирования форм в диапазоне от 50% до 400%. Это не просто увеличение или уменьшение шрифта. При изменении масштаба вся форма перестраивается под новые размеры элементов. Кроме того, пользователям может потребоваться смена интерфейса с компактного на обычный, чтобы адаптировать плотность элементов под свои предпочтения.
Сам же механизм масштабирования управляется пользователем через меню клиента (обычно "Сервис" -> "Настройки" -> "Масштаб приложения") и не требует участия разработчика в процессе изменения размеров. Однако, как разработчики, мы должны помнить об этой возможности и проектировать формы таким образом, чтобы они выглядели корректно при различных уровнях масштабирования.
Работая с размерами форм в 1С, всегда стремитесь к максимальной адаптивности и используйте возможности платформы по авторазмещению элементов.
АвтоМаксимальнаяШирина и МаксимальнаяШирина для контроля за растяжением полей ввода и других элементов.Мы проанализировали несколько подходов к управлению размерами форм в веб-версии 1С:Предприятия. Выяснили, что платформа предоставляет мощные инструменты для адаптивного дизайна через настройки в Конфигураторе, а в особых случаях допускает и программные манипуляции. Помните, что ключ к успешной разработке удобных и функциональных форм лежит в понимании принципов адаптивности и грамотном использовании доступных средств.