В ряде случаев, представление объектов в виде картинок делает пользовательский интерфейс более простым и интуитивно понятным. К примеру, карта склада с динамическим обновлением состояния и возможностью выбора стеллажа/ячейки или рабочее место оператора системы управления АЗС, показанное ниже:
При этом возможности 1С в этом направлении очень скупы. Как правило, приходится веселиться с программной сборкой форм, картинками, табличными документами, HTML и пр.
В данной публикации представлен конструктор CSS изображений, упрощающий создание графических элементов с помощью поля HTML:
Использование поля HTML + CSS рисование позволяет реализовать практически любые интерфейсные желания.
Основные плюсы способа:
- возможность использования в основных режимах клиентского приложения (управляемые и обычные формы, web и мобильный клиент)
- возможность динамически формировать и загружать на форму сложные графические отображения объектов
- возможность реализации всей работы с HTML на Клиенте, создание и обновление изображения не требует обращения на Сервер
- высокая скорость отрисовки, отсутствие подвисаний, миганий и прочих глюков даже при работе на "слабых" ПК
- кликабельность, возможность выбора любого элемента изображения, его идентификации и программной обработки клика.
Основные минусы:
- требуются базовые навыки HTML и CSS, иногда javascript
- формирование требуемых шаблонов HTML требует существенного времени и терпения.
Конструктор картинок CSS реализован в виде независимой внешней обработки 1С и предназначен для ускорения разработки шаблонов HTML. Для его использования требуются минимальные знания HTML и CSS (хотя можно и без них). Возможен запуск в любой конфигурации 1С в режиме управляемых форм на платформе 8.3.15.1830 и выше.
Особенности:
- шаблон картинки формируется путем компоновки блоков HTML и придания им требуемой формы и цвета
- возможность редактирования в режиме конструктора более 50 свойств выбранного блока:
- результат отображается в поле HTML и динамически обновляется в процессе редактирования;
- структура редактируемого шаблона представляется в виде дерева и виде готового текста HTML;
- возможность сохранения редактируемой структуры HTML в файл (как полностью, так и выбранного узла);
- возможность вставки нового блока копированием выбранного блока дерева HTML;
- возможность вставки нового блока из выбранного файла;
- возможность вставки нового блока из палитры основных фигур;
- возможность компоновки блоков в дереве HTML (Drag-and-drop, команды перемещения).
Пример простого использования для управляемой формы:
- подготовьте в конструкторе CSS требуемый шаблон, установите ID для блоков, по которым необходимо отрабатывать клик;
- на форму 1С добавьте строковый реквизит "ПолеHTML"(к примеру) и соответствующий элемент формы с видом "Поле HTML документа";
- в обработчике "ПриОткрытии" формы установите в значение реквизита "ПолеHTML" сформированный в конструкторе CSS текст HTML;
- заполните обработчик события "ПриНажатии" элемента "ПолеHTML":
&НаКлиенте
Процедура ПолеHTMLПриНажатии(Элемент, ДанныеСобытия, СтандартнаяОбработка)
СтандартнаяОбработка = Ложь;
//Поиск ИД выбранного блока
УровеньВложенности = 10;
Попытка
ЭлементID = ДанныеСобытия.Element.ID;
Если ЭлементID = "" Тогда
Сч = 0;
Родитель = ДанныеСобытия.Element.parentElement;
Если Родитель<>Неопределено Тогда
ЭлементID = Родитель.ID;
Пока ЭлементID = "" Цикл
Родитель = Родитель.parentElement;
Если Родитель<>Неопределено Тогда
ЭлементID = Родитель.ID;
Иначе
Прервать;
КонецЕсли;
Сч = Сч+1;
Если Сч>УровеньВложенности Тогда
Прервать;
КонецЕсли;
КонецЦикла;
КонецЕсли;
КонецЕсли;
Исключение
ЭлементID = "";
КонецПопытки;
Если ЭлементID <> "" Тогда
//"ID1", "ID2"... - идентификаторы блоков в HTML
Сообщить("Выбран блок с ИД "+ЭлементID);
Если ЭлементID = "ID1" Тогда
//код обработки
ИначеЕсли ЭлементID = "ID2" Тогда
//код обработки
Иначе
//код обработки
КонецЕсли;
Иначе
//код обработки
КонецЕсли;
КонецПроцедуры
Подобным образом в конструкторе CSS реализован выбор предопределенных фигур.
Всем успехов и с наступающим Новым годом!
P.S.
Для подбора цвета в конструкторе CSS картинок я использовал диалог выбора цвета из публикации:
//infostart.ru/public/185249/
Автору большое спасибо!
Вступайте в нашу телеграмм-группу Инфостарт
