При разработке интерфейсов на обычных формах программисты часто сталкиваются с досадным ограничением: при попытке вывести картинку в ячейку стандартного Табличного поля (будь то таблица значений или табличная часть), изображение автоматически масштабируется до размеров крошечной иконки (обычно 16x16 или 14x14 пикселей). Даже если мы программно увеличим высоту строки или выберем режим автовысоты, платформа упорно продолжает «ужимать» графический объект.
В этой статье мы разберем, почему это происходит, и рассмотрим проверенные методы, которые позволяют обойти это системное ограничение и создать по-настоящему информативный интерфейс с крупными изображениями.
Проанализируем ситуацию с точки зрения архитектуры платформы 1С. Элемент управления Табличное поле в обычных формах проектировался в первую очередь для работы с текстовыми данными и системными пиктограммами. Картинка в ячейке здесь рассматривается как «значок состояния» или вспомогательный маркер строки. Свойства АвтоВысотаЯчейки и ВысотаСтроки в данном контексте управляют контейнером для текста, но не меняют логику отрисовки графического объекта внутри ячейки.
Многие разработчики пытаются использовать событие ПриВыводеСтроки, надеясь, что прямое управление свойством ОформлениеСтроки.Ячейки.ИмяКолонки.Картинка поможет делу. Однако результат остается прежним: изображение подгоняется под стандартный размер пиктограммы. Чтобы решить задачу вывода полноценных превью (например, 100х100 пикселей), нам придется сменить инструмент.
Это наиболее «родной» для 1С способ вывода сложных данных. Поле табличного документа позволяет нам полностью контролировать каждый пиксель отображаемой области.
Рассмотрим пошаговый алгоритм реализации:
Поле табличного документа вместо стандартного табличного поля.РисунокТабличногоДокумента в нужную область.Разберем пример кода, который реализует такой вывод:
// Очищаем поле перед заполнением
ЭлементыФормы.ПолеТабличногоДокумента1.Очистить();
ТабДок = ЭлементыФормы.ПолеТабличногоДокумента1;
// Формируем шапку
ТабДок.Область("R1C1").Текст = "Товар";
ТабДок.Область("R1C2").Текст = "Изображение";
СтрокаИндекс = 2;
Для Каждого СтрокаДанных Из ТвояТаблицаЗначений Цикл
// Устанавливаем высоту строки под размер картинки
ТабДок.Область("R" + Формат(СтрокаИндекс, "ЧГ=0")).ВысотаСтроки = 120;
// Выводим текстовое название
ТабДок.Область(СтрокаИндекс, 1).Текст = СтрокаДанных.Наименование;
// Добавляем картинку
ОбластьКартинки = ТабДок.Область(СтрокаИндекс, 2);
Рисунок = ТабДок.Рисунки.Добавить(ТипРисункаТабличногоДокумента.Картинка);
Рисунок.Картинка = СтрокаДанных.Фото; // Объект типа Картинка
Рисунок.РазмерКартинки = РазмерКартинки.Пропорционально;
// Привязываем рисунок к границам ячейки
Рисунок.Расположить(ОбластьКартинки);
СтрокаИндекс = СтрокаИндекс + 1;
КонецЦикла;
Преимущества этого метода:
РазмерКартинки может принимать значения Пропорционально, Растянуть или АвтоМасштаб).Если вам требуется создать интерактивный и современный список (например, витрину товаров с кнопками и сложным оформлением), лучшим выбором будет Поле HTML документа. Этот метод позволяет полностью игнорировать ограничения платформы по отрисовке элементов.
Выясним, как это реализовать. Нам необходимо динамически сформировать HTML-строку, содержащую таблицу, и передать ее в поле. Для передачи самих картинок можно использовать временные файлы или кодирование в формат Base64.
Рассмотрим пример формирования контента:
ТекстHTML = "<html><body><table border='1' style='width:100%; border-collapse: collapse;'>";
Для Каждого Строка Из СписокТоваров Цикл
// Предположим, картинка сохранена во временный файл
ПутьКФайлу = ПолучитьИмяВременногоФайла("jpg");
Строка.Картинка.Записать(ПутьКФайлу);
ТекстHTML = ТекстHTML + "<tr>";
ТекстHTML = ТекстHTML + "<td>" + Строка.Наименование + "</td>";
ТекстHTML = ТекстHTML + "<td><img src='file://" + ПутьКФайлу + "' width='100' height='100'></td>";
ТекстHTML = ТекстHTML + "</tr>";
КонецЦикла;
ТекстHTML = ТекстHTML + "</table></body></html>";
ЭлементыФормы.ПолеHTMLДокумента1.УстановитьТекст(ТекстHTML);
Важный момент: Чтобы сделать такую таблицу интерактивной, используйте обработку события onclick в HTML и перехватывайте его в 1С через событие ПриНажатии элемента Поле HTML документа. Это позволит открывать карточку товара при клике на изображение.
Если по каким-то причинам вы категорически не можете отказаться от стандартного Табличного поля, существует один «полумера». В свойствах самого Табличного поля (не ячейки!) есть параметр ВысотаСтроки. Если установить его в значение 3, 4 или более (в единицах высоты текста), платформа позволит картинке занять чуть больше места.
Проанализируем ограничения этого метода:
Табличном поле очень примитивны.Чтобы этот способ сработал, убедитесь, что в свойствах колонки не указан ИндексКартинки, а сама картинка передается именно как объект типа Картинка в свойство ячейки в обработчике ПриВыводеСтроки.
Подводя итог, можно сказать следующее: если ваша задача — создать профессиональный интерфейс с четкими превью товаров или сотрудников в обычных формах, забудьте про стандартное свойство «Картинка» в колонке таблицы. Платформа 1С в режиме обычных приложений не предусматривает полноценного вывода графики в этом элементе.
Наш выбор:
Оба этих метода требуют чуть больше кода, чем простая привязка данных к колонке, но они гарантируют качественный результат, который не зависит от внутренних ограничений отрисовки системных списков.