Картинки в динамическом списке

13.09.24

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

Механизмы вывода картинок в табличные поля и динамические списки известны, тема заезженная, но в большинстве случаев требуют хранения картинок в составе конфигурации или БД. Сомнительный подход, с учетом затрат на хранение, все больший уклон в сторону SaaS и повышение требований к интерфейсам и визуализации. А что делать, если медиа-контент используется на витрине (сайте, мобилке и т.д.), а также должен быть виден в решении на 1С? Давайте посмотрим.

Скачать файл

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

Наименование По подписке [?] Купить один файл
Картинки в динамическом списке пример (релиз 8.3.25.1286)
.cf 114,33Kb
1
1 Скачать (1 SM) Купить за 1 850 руб.

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

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

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

Предположим, у нас есть справочник с данными. В реквизитах справочника есть URL картинки. Необходимо вывести на форму динамический список справочника с отображением картинки в каждой строке.

 

 

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

 

 

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

 

 

В вычисляемые поля запроса добавляем строковое поле Картинка. Значение будет возвращаться из метода общего модуля, в который как параметр будет передаваться URL изображения текущей записи справочника.

 

 

На форме в табличное поле списка выводим реквизит "Картинка" с типом "Поле картинки". 

 
 Модуль формы

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

 
 Метод серверного общего модуля

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

Запрос по URL самый обычный. Желательно ограничивать минимально-возможным таймаутом, чтобы пул фоновых заданий не копился.

 
 Метод get-запроса данных картинки

 

 
 //
 //
 Функция ПолучитьДвоичныеДанные(АдресURL) Экспорт
	 
	 Результат = Неопределено;
	 
	 лАдресURL = АдресURL;
	 ////infostart.ru/bitrix/templates/.default/mmenu/images/directions/personal.svg
	 
	 Если ЗначениеЗаполнено(лАдресURL) Тогда
		 
		 Порт = 80;
		 Если СтрНачинаетсяС(НРег(лАдресURL), "https") Тогда
			 
			 ЗащищенноеСоединениеOpenSSL = Новый ЗащищенноеСоединениеOpenSSL();
			 Порт = 443;
			 
		 КонецЕсли;
		 
		 лАдресURL = Сред(лАдресURL, СтрНайти(лАдресURL, "://") + 3);
		 
		 Сервер = "";
		 Метод = "";
		 Таймаут = 2;
		 
		 МассивЧастиURL = СтрРазделить(лАдресURL, "/", Ложь);
		 Если МассивЧастиURL.Количество() > 0 Тогда 
			 
			 МассивЧастейХост = СтрРазделить(МассивЧастиURL[0], ":", Ложь);
			 Сервер = МассивЧастейХост[0];
			 Если МассивЧастейХост.Количество() > 1 Тогда
				 
				 Порт = МассивЧастейХост[1];
				 
			 КонецЕсли;
			 
			 МассивЧастиURL.Удалить(0);
			 Метод = СтрСоединить(МассивЧастиURL, "/");
			 
		 КонецЕсли;			 
		 
		 Заголовки = Новый Соответствие;
		 
		 HTTPСоединение = Новый HTTPСоединение(Сервер, Порт,,,, Таймаут, ЗащищенноеСоединениеOpenSSL);
		 
		 HTTPЗапрос = Новый HTTPЗапрос(Метод, Заголовки);
		 
		 Попытка
			 
			 Ответ = HTTPСоединение.Получить(HTTPЗапрос);
			 Если Ответ.КодСостояния - 200 < 100 Тогда
				 
				 Результат = Ответ.ПолучитьТелоКакДвоичныеДанные();
				 
			 КонецЕсли;
			 
		 Исключение	 
			 
			 // логируем ошибку
			 
		 КонецПопытки;
		 
		 
	 КонецЕсли;
	 
	 Возврат Результат;
	 
 КонецФункции

В результате после вывода динамического списка на форму картинки догружаются в фоне. Естественное обновление картинок по строкам выполнится при действиях со список: пролистывании, изменении данных. Чтобы ускорить обновление добавил на форму при открытии однократный обработчик ожидания с задержкой в 2 секунда, который обновит содержимое элемента динамического списка.

 

 

Тестировалось на релизе 8.3.25.1286.

Что мы получаем при использовании данного решения:

- отображение произвольных картинок в динамических списках, а соответственно и любых других объектах, использующих СКД;

- минимальные затраты на хранение БД, т.к. перманентно хранится только строка с URL, а сама картинка хранится в стороннем хранилище, с которым кроме нашего решения могут работать и любые другие сервисы в контуре;

- минимальное влияние на скорость отклика интерфейса с оговоркой стабильной сети и наличия быстрого стороннего хранилища двоичных данных (существенное требование);

- клиент-серверные вызовы по картинкам отсутствуют, вся работа на сервере;

- затрат на клиентские лицензии нет, т.к. для работы фоновых заданий нужна только серверная лицензия;

- данные загруженных картинок удаляются при закрытии формы, т.к. помещаются во временное хранилище этой формы (вся надежда на стабильность механик самой платформы); 

Новый механизм работы с хранилищами двоичных данных (S3) платформы скорре всего реализует в итоге что-то похожее, не щупал. В данном случае выходит сильно дешевле, если КОРП вам нужен только ради такой задачи )).  

 

 

картинки динамический список разработка харнилище двоичных данных s3

См. также

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

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

2400 руб.

29.06.2020    18386    26    6    

40

Работа с интерфейсом Программист Стажер Платформа 1С v8.3 Бесплатно (free)

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

20.08.2024    13721    mrXoxot    43    

114

Работа с интерфейсом Программист Платформа 1С v8.3 Бесплатно (free)

Пример простого и симпатичного прогресс-бара в динамическом списке, без картинок, используя редактирование запроса.

27.05.2024    6345    smielka    37    

98

Работа с интерфейсом Платформа 1С v8.3 1С:Бухгалтерия 3.0 1С:Управление торговлей 11 1С:Зарплата и Управление Персоналом 3.x 1С:Управление нашей фирмой 3.0 Бесплатно (free)

Добавьте новогоднего настроения! Расширение создает декорацию в виде гирлянды на некоторых формах объектов.

27.12.2023    13738    823    elcoan    47    

114

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

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

2 стартмани

10.04.2023    11342    161    acces969    31    

122

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

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

1 стартмани

05.07.2022    5133    kalyaka    6    

33

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

Ещё с времен платформы 8.3.13 можно изменять цвет стилей интерфейса главного окна. Данное расширение позволит вам выбрать из подготовленных десятка стилей на свой вкус.

1 стартмани

01.07.2022    23291    377    rpgshnik    67    

93
Комментарии
Подписаться на ответы Инфостарт бот Сортировка: Древо развёрнутое
Свернуть все
1. Diversus 2327 20.09.24 09:08 Сейчас в теме
- клиент-серверные вызовы по картинкам отсутствуют, вся работа на сервере;


Все таки клиент-серверные вызовы есть. Если запускать в режиме отладки и скролить список, то получаем постоянные вызовы
2. Lars Ulrich 625 20.09.24 11:22 Сейчас в теме
(1) Да, динамические списки они такие, совсем без клиент-серверных вызовов никуда даже без картинок.
3. Diversus 2327 20.09.24 11:23 Сейчас в теме
(2) Я придумал способ отображения картинок в динамическом списке действительно без клиент-серверных вызовов. Если все получится, то выложу решение позже.
4. Lars Ulrich 625 20.09.24 11:24 Сейчас в теме
(3) Огонь, мне бы пригодилось.
5. Diversus 2327 20.09.24 15:55 Сейчас в теме
(4) Ничего не вышло, к сожалению.

Идея была в следующем:
1. Все используемые картинки подготовить в один спрайт SVG (это получилось сделать программно). Пример такого объединения во вложении. Пусть он был бы длинным, работало бы все равно бы быстро.
2. Дальше была идея каждому элементу справочника присвоить индекс в спрайте от 0 до n-1. При добавлении картинок добавлять в конец спрайта новую картинку и присваивать элементу справочника индекс в спрайте.
3. В форме списка использовать этот индекс и в поле КартинкаЗначений (для ячеек) или КартинкаСтрок (для списка целиком), подсунуть этот спрайт. Это бы позволило не использовать серверные вызовы.

Такой способ работает, если спрайт добавить в ручную в БиблиотекуКартинок. Но не работает, если попробовать КартинкаЗначений или КартинкаСтрок заполнить программно. Эти реквизиты только для чтения :(
Прикрепленные файлы:
Спрайт.svg
6. Lars Ulrich 625 20.09.24 16:00 Сейчас в теме
(5) сильно, но на больших количествах картинок тоже вопрос как бы это работало.
Я подобным образом через imagemagick ресайз картинки на лету делаю для отображения в списке, чтобы клиенты не умирали на данных.
7. Diversus 2327 20.09.24 16:04 Сейчас в теме
(6) Мы использовали такой спрайт добавленный в БиблиотекуКартинок со 128 картинками (причем там архив с набором картинок под разный масштаб). Все работает прекрасно. Думаю и с большим количеством легко справится. Это при условии, конечно, что картинки не большие 16x16 или 24x24. Если будут большие, то тут, наверное, да. Будут проблемы.
8. Lars Ulrich 625 20.09.24 16:06 Сейчас в теме
(7) не, тут вопрос с тем, чтобы условно произвольный-бесконечный набор картинок так на лету формировать, запоминать позиции картинок и все такое. То, что это работает в 1с для всяких картинок строк безусловно.
Оставьте свое сообщение