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

31.10.17

Разработка - Работа с интерфейсом

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

Скачать файл

ВНИМАНИЕ: Файлы из Базы знаний - это исходный код разработки. Это примеры решения задач, шаблоны, заготовки, "строительные материалы" для учетной системы. Файлы ориентированы на специалистов 1С, которые могут разобраться в коде и оптимизировать программу для запуска в базе данных. Гарантии работоспособности нет. Возврата нет. Технической поддержки нет.

Наименование По подписке [?] Купить один файл
Подстройка размеров текста
.epf 6,63Kb
47
47 Скачать (1 SM) Купить за 1 850 руб.
Подстройка размеров диаграмм
.epf 14,74Kb
28
28 Скачать (1 SM) Купить за 1 850 руб.
Отображение картинок "плиткой"
.epf 8,95Kb
34
34 Скачать (1 SM) Купить за 1 850 руб.

Как известно, у управляемой формы нельзя определить реальные размеры. То есть у нее имеются свойства "Ширина" и "Высота", но при изменении размеров самой формы эти свойства не изменяются.
Если поискать в интернете, то предлагают использовать поле 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 и выше.
 

См. также

Работа с интерфейсом Рабочее место Платформа 1С v8.3 Управляемые формы Конфигурации 1cv8 Платные (руб)

Богатый редактор картинок 1С предназначен для обработки изображений в режиме «Предприятие», с возможностью РИСОВАТЬ на них. Поддерживается работа как в обычных формах (толстый клиент) так и на управляемых формах (тонкий клиент). Обработка позволяет редактировать как картинки, хранимые в базе, так и графические файлы с диска на файловой системе. Помимо базовых функций (изменение размеров, преобразование формата, обрезание картинки, повороты и т.п.) – редактор имеет богатый набор инструментов для рисования. Доступна функция вставки изображения из буфера обмена. Объект может быть использован: на стороне клиента, на стороне сервера, из внешнего соединения. Обработка будет особенно полезна тем, кто вносит картинки в базу (изображения номенклатуры, фотографии физических лиц и т.п.). Функционал реализуется с использованием JavaScript и бесплатного ПО ImageMagick (без использования внешних компонент).

6000 руб.

16.01.2015    62984    44    59    

82

Работа с интерфейсом Программист Платформа 1С v8.3 Конфигурации 1cv8 1С:ERP Управление предприятием 2 Платные (руб)

Обработка предназначена для создания и управления дашбордами.

2400 руб.

29.06.2020    18851    26    6    

41

Работа с интерфейсом Программист Платформа 1С v8.3 Управляемые формы Конфигурации 1cv8 Россия Платные (руб)

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

1500 руб.

06.10.2020    10223    7    7    

10

WEB-интеграция Универсальные функции Механизмы платформы 1С Программист Платформа 1С v8.3 Конфигурации 1cv8 Бесплатно (free)

При работе с интеграциями рано или поздно придется столкнуться с получением JSON файлов. И, конечно же, жизнь заставит проверять файлы перед тем, как записывать данные в БД.

28.08.2023    14726    YA_418728146    7    

166

Пакетная печать Печатные формы Адаптация типовых решений Универсальные функции Платформа 1С v8.3 1С:ERP Управление предприятием 2 1С:Управление торговлей 11 1С:Комплексная автоматизация 2.х Россия Абонемент ($m)

Расширение для программ 1С:Управление торговлей, 1С:Комплексная автоматизация, 1С:ERP, которое позволяет распечатывать печатные формы для непроведенных документов. Можно настроить, каким пользователям, какие конкретные формы документов разрешено печатать без проведения документа.

2 стартмани

22.08.2023    3578    56    progmaster    8    

4

Работа с интерфейсом Программист Платформа 1С v8.3 Конфигурации 1cv8 Абонемент ($m)

"MVC плохо применима в 1С" - познакомьтесь с моделью состояния и, возможно, ваше мнение поменяется! Представленное решение является эволюционным развитием идеи реализации MVC для 1С. В новой версии добавлены DSL для описания модели состояния, а также параметризация свойств параметров и элементов формы.

1 стартмани

05.07.2022    5742    kalyaka    6    

33
Комментарии
Подписаться на ответы Инфостарт бот Сортировка: Древо развёрнутое
Свернуть все
1. msfog 09.10.17 10:19 Сейчас в теме
Добрый день. Встречный вопрос: При обработке диаграмм на форме какие методы Вы используете? Я пытаюсь обработать информацию из регистра методом отбора и принудительной установкой значения из выборки данных и обработка не выводит картинку при типе диаграммы круговая. С типом измерительная все получилось...
2. yaroslavkravets 24 10.10.17 10:46 Сейчас в теме
идея интересная, но управляемые формы - позволяют постраивать размеры, только есть особенность:
1- нужно установить "рястягивать по горизонтали"(или вертикали)
2- нужно снять "автоМаксШирина"
3. json 3349 10.10.17 12:16 Сейчас в теме
(2) наверное вы не единственный, кто недополнял суть решаемой проблемы. Поэтому поясню.
Возьмите перейдите на главную страницу инфостарта и попробуйте сузить окошко браузера. Вы увидите, что блоки, из которых состоит страница, не сжимаются, а изменяют свое местоположение. Так называемая блочная верстка. В 1С такого нет. И если вы вдруг захотите, чтобы например, рабочий стол красиво отображался и на больших и на средних и на меленьких мониторах, то просто сжимать элементы - не получится. Нужно будет перемещать блоки программно. Возможно придется также изменять размеры шрифта. А для этого обязательно нужно знать ширину формы.
Другая решаемая задача. Представьте, что на форме отображается диаграмма и другая информация. Как сделать так, чтобы диаграмма точно влезала в табличный документ на форме. При этом не была слишком мелкой и не обрезалась бы границами элемента формы. Сможете это сделать галочками?
adhocprog; AKnyazkov; ixijixi; Merc; Melenya; +5 Ответить
4. yaroslavkravets 24 10.10.17 14:13 Сейчас в теме
(3) тогда тему надо было назвать "адаптивный интерфейс форм" или что-то похоже этому.
Вы назвали статью как "Размеры управляемой формы" - об адаптации и масштабировании элементов здесь можно только догадыватся....
Symbiat; ixijixi; +2 Ответить
5. dabu-dabu 307 14.12.17 16:05 Сейчас в теме
Как минимум в 8.3.11 диаграммы растягиваются автоматически. Но за идею +
6. vaxhab 16 13.07.18 19:14 Сейчас в теме
7. zlobnyi_troll 26.10.18 16:08 Сейчас в теме
На платформе 8.3.12 и выше обработка не работает: размер окна поменять платформа не даёт. Но это можно обойти, перерисовывая картинки через обработчик ожидания.
8. mars207 27 16.08.19 10:22 Сейчас в теме
В тонком все отлично. В Web клиенте не сработало. Хотя казалось бы скрипт в веб должен был работать.
adhocprog; +1 Ответить
9. 7OH 70 22.04.20 14:45 Сейчас в теме
На компе вроде работает, а вот на мобиле почему-то не хочет.
Размер окна не меняется, как бы я не поворачивал экран
adhocprog; +1 Ответить
10. Serg2000mr 670 27.09.22 20:59 Сейчас в теме
В обработке "Подстройка размеров текста" перетягивании вертикального разделителя закрывается все приложение.

То же самое при изменении размеров окна в режиме БлокироватьОкноВладельца.
Оставьте свое сообщение