Размеры управляемой формы

Программирование - Практика программирования

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

Как известно, у управляемой формы нельзя определить реальные размеры. То есть у нее имеются свойства "Ширина" и "Высота", но при изменении размеров самой формы эти свойства не изменяются.
Если поискать в интернете, то предлагают использовать поле HTML документа. Я применял этот способ несколько раз, поэтому опишу как это делается.

Чтобы рассчитать ширину формы или элемента, необходимо разместить на ней поле HTML документа и установить ему признак "Растягивать по горизонтали". Тогда можно прочитать его "clientWidth" (или "clientHeight" для опреледения высоты). Это делается, например, из подписки "ДокументСформирован". Но как отследить момент, когда размер формы или элемента изменяется? 
Можно поставить обработчик ожидания, который будет постоянно опрашивать поле HTML. Но это плохое решение. 
Гораздо лучше подписаться на изменение размеров документа. Приведу код страницы, и опишу как это работает.

&НаСервере
Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка)
	
	ЭтотОбъект.полеHTML = 
	"
	|<HTML>
	|<BODY onResize='interactionButton.click()' onLoad='interactionButton.click()'>
	|
	|<button id='interactionButton' style='display: none'>Кнопка взаимодействия</button>
	|
	|</BODY>
	|</HTML>
	|";
	
	
КонецПроцедуры


Итак, применяем идею, предложенную в статье  Javascript и 1С. Кросс-платформенное взаимодействие.
Поместим на HTML страницу невидимую кнопку, а в свойстве документа "onresize" пропишем, чтобы при изменении размера страницы выполнился клик по этой кнопке. У элемента поле HTML сработает событие ПриНажатии(). Вот в этом событии и надо будет считать новые размеры страницы и выполнить необходимые действия при изменении. Кроме того, при загрузке страницы тоже вызывается клик, чтобы обработку изменения размера не дублировать в событии ДокументСформирован().

Вот как это выглядит на примере.


Итак, принцип понятен. Отстался один недостаток, само поле HTML будет видно на форме и это выглядит некрасиво. Необходимо его спрятать. 
Если конфигурация имеет режим совместимости 8.3.7 и выше, то можно сделать так. Создаем страницы, на одну страницу помещаем основные элементы, на другую страницу помещаем служебное поле HTML документа. У страницы выставляем "ОтображениеСтраниц"="Нет".
Вот как это выглядит.

Все диаграммы полностью заполняют всю область табличного документа, в котором они выводятся, и при изменении его размера подстраиваются 

Все диаграммы полностью заполняют всю область табличного документа, в котором они выводятся, и при изменении его размера подстраиваются

При изменении размеров формы количество картинок по горизонтали пересчитывается и изменяется, без появления горизонтального скрола

 

К статье прилагаются прототипы, приведенные в статье для тех, кто собирает полезные приемы или кто хочет поподробнее разобраться и поэкспериментировать.
1. Подстройка размеров текста. - Демонстрирует базовый принцип описанного приема. Работает корректно при режиме совместимости 8.3.7 и выше. Работает почти корректно на платформе 8.3 в режиме совместимости 8.2.13 и выше.
2. Подстройка размеров диаграмм. - Демонстрирует рассчет размеров для элементов формы, созданных из конфигуратора. Работает корректно при режиме совместимости 8.3.7 и выше.
3. Отображение картинок "плиткой" - Демонстрирует перестройку интерфейса, когда элементы формы создаются программно. Работает корректно при режиме совместимости 8.3.7 и выше.
 

Скачать файлы

Наименование Файл Версия Размер
Подстройка размеров текста
.epf 6,63Kb
08.10.17
2
.epf 6,63Kb 2 Скачать
Подстройка размеров диаграмм
.epf 14,74Kb
08.10.17
1
.epf 14,74Kb 1 Скачать
Отображение картинок "плиткой"
.epf 8,95Kb
10.10.17
1
.epf 8,95Kb 1 Скачать

См. также

Комментарии
1. Юлия Бачаева (juliabah) 1 09.10.17 10:19 Сейчас в теме
Добрый день. Встречный вопрос: При обработке диаграмм на форме какие методы Вы используете? Я пытаюсь обработать информацию из регистра методом отбора и принудительной установкой значения из выборки данных и обработка не выводит картинку при типе диаграммы круговая. С типом измерительная все получилось...
2. Yar Kravets (yaroslavkravets) 10.10.17 10:46 Сейчас в теме
идея интересная, но управляемые формы - позволяют постраивать размеры, только есть особенность:
1- нужно установить "рястягивать по горизонтали"(или вертикали)
2- нужно снять "автоМаксШирина"
3. Monkey Coder (yurii_host) 1488 10.10.17 12:16 Сейчас в теме
(2) наверное вы не единственный, кто недополнял суть решаемой проблемы. Поэтому поясню.
Возьмите перейдите на главную страницу инфостарта и попробуйте сузить окошко браузера. Вы увидите, что блоки, из которых состоит страница, не сжимаются, а изменяют свое местоположение. Так называемая блочная верстка. В 1С такого нет. И если вы вдруг захотите, чтобы например, рабочий стол красиво отображался и на больших и на средних и на меленьких мониторах, то просто сжимать элементы - не получится. Нужно будет перемещать блоки программно. Возможно придется также изменять размеры шрифта. А для этого обязательно нужно знать ширину формы.
Другая решаемая задача. Представьте, что на форме отображается диаграмма и другая информация. Как сделать так, чтобы диаграмма точно влезала в табличный документ на форме. При этом не была слишком мелкой и не обрезалась бы границами элемента формы. Сможете это сделать галочками?
4. Yar Kravets (yaroslavkravets) 10.10.17 14:13 Сейчас в теме
(3) тогда тему надо было назвать "адаптивный интерфейс форм" или что-то похоже этому.
Вы назвали статью как "Размеры управляемой формы" - об адаптации и масштабировании элементов здесь можно только догадыватся....
Оставьте свое сообщение