lad_habrablog 13 мая в 13:15

Поле HTML-документа: для чего можно использовать

Средний

8 мин

5.9K

Блог компании Группа IT-компаний LadCSS*Программирование*HTML*1С*

Туториал

Привет, Хабр! Меня зовут Стас Ганиев, программист 1С, в статье рассказал о возможностях поля HTML-документа для решения задач в 1С, а также привел примеры реализации. Далеко не все 1С-разработчики знают, как использовать этот элемент диалога.

Что такое поле HTML-документа?

Это возможность использовать движок браузера у себя на форме, прямо в 1С. По факту, это и есть интерфейс браузера на вашей форме. Он даже использует то же самое программное ядро Webkit, что и браузер Google Chrome. С объектом поля HTML-документа можно выполнять все те же операции (иногда с ограничениями), что и в полноценном браузере, включая использование веб-технологий и инструментов управления веб-приложениями.

Зачем это нужно

Поле HTML-документа удобно использовать в различных задачах, чтобы:

предоставить доступ к веб-интерфейсу сторонней конфигурации;
использовать дополнительные элементы диалога формы или альтернативные элементы интерфейса;
отображать макеты печатных форм. Например, в решении «1С:Документооборот» при подготовке документа в этой же форме можно увидеть миниатюру готового документа, то есть использовать функцию предварительного просмотра;
отображать страницу сайта. Редко используется на практике, но тем не менее может пригодиться. Достаточно присвоить элементу поля URL-адрес сайта;
запустить код на языке JavaScript. Благодаря этому можно реализовать в программе то, что невозможно сделать на языке 1С;
реализовать крутые редакторы текста. Например, редактор кода в IS Toolkit.

Давайте разберем три первых пункта более подробно.

Открываем окно в другую конфигурацию

Для начала нужно добавить элемент «Поле HTML-документа» на форму. Во всех случаях я использовал демо-версию конфигурации «Управляемое приложение» на платформе 8.3.23. Предположим, необходимо предоставить администратору доступ к настройкам сразу для двух конфигураций из одной формы, чтобы не нужно было запускать вторую конфигурацию.

Обратите внимание: пользовательская лицензия в этом случае все равно используется, поскольку необходим отдельный веб-клиент.

На форме обработки АдминистративныйСервис создайте новый реквизит формы ВебСеанс. Тип реквизита – Строка (длина не ограничена). Установите вид элемента «Поле HTML-документа».

В обработчике ПриСозданииНаСервере() напишите следующий код:

&НаСервере
Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка)
	
	НастройкиПодключения = ПолучитьНастройкиПодключения();
	
    // пользователь и пароль в подключаемой базе
	Пользователь = НастройкиПодключения.Пользователь; 
	Пароль = НастройкиПодключения.Пароль;
	
	// строка подключения зависит от наличия авторизации
	ТребуетсяАвторизация = ЗначениеЗаполнено(Пользователь) Или ЗначениеЗаполнено(Пароль);
	
	// URL-ссылка публикации веб-клиента, например: http://127.0.0.1:8080/demo/
	АдресБазы = НастройкиПодключения.АдресБазы;
	
	ПараметрЗапуска = НастройкиПодключения.ПараметрЗапуска;
	
	Если ТребуетсяАвторизация Тогда
		Шаблон = "%1/?n=%2&amp;p=%3&amp;c=%4";
		АдресПодключения = СтрШаблон(Шаблон, АдресБазы, Пользователь, Пароль,
ПараметрЗапуска);
	Иначе
		Шаблон = "%1/?&amp;c=%2";
		АдресПодключения = СтрШаблон(Шаблон, АдресБазы, ПараметрЗапуска);
	КонецЕсли;
	
	ВебСеанс = АдресПодключения;
	
КонецПроцедуры

Поле HTML-документа работает следующим образом: оно отражает то, что приходит в «поток вывода». То есть это та информация, которая присваивается реквизиту ВебСеанс. Например, в реквизите можно указать URL-адрес сайта, тогда будет загружена страница сайта. Или передать полную строку HTTP-запроса и получить визуальное представление результата, правда, для этого лучше использовать другие инструменты.

Самое главное: вы можете передать элементу полную HTML-верстку страницы или отдельного объекта интерфейса, стилизовать его с помощью CSS и добавить интерактив с использованием языка JavaScript. Подробнее расскажу в следующем примере.

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

Создаем нужный элемент, если его нет

Другой пример: использовать произвольную верстку HTML-элемента. Здесь необходимо создать поле на форме заказа с историей статусов (см. скриншот).

Добавьте поле HTML-документа ИсторияСостояний на форму заказа. Код верстки может быть достаточно большим, поэтому для удобства сформируйте отдельные текстовые макеты. Добавьте к документу Заказ новый макет ИсторияСтатусов и заполните его:

<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            margin: 0;
            padding: 0;
        }
        .wrap {
            border: 2px solid #dddd11;
            border-radius: 5px;
            padding: 5px;
        }
        .status {
            font-size: 12px;
            margin-bottom: 7px;
            padding: 3px;
            border-radius: 5px;
            display: flex;
            justify-content: space-between;
        }
        .status-opened {
            background-color: #ddffdd;
        }
        .status-work {
            background-color: #dddddd;
        }
        .status-closed {
            background-color: #ffdddd;
        }
    </style>
</head>

<body>
    <div class="wrap">
	<!-- начало блока элемента -->
        <div class="status status-opened">
            <p><a href="#" class="link-opened">Открыт</a></p>
            <p>13.02.2023</p>
        </div>
	<!-- конец блока элемента -->
        <div class="status status-work">
            <p><a href="#" class="link-work">В работе</a></p>
            <p>17.02.2023</p>
        </div>
        <div class="status status-closed">
            <p><a href="#" class="link-closed">Закрыт</a></p>
            <p>27.04.2023</p>
        </div>
    </div>
</body>

</html>

В обработчике формы ПриСозданииНаСервере() добавьте следующий код:

ДокументОбъект = РеквизитФормыВЗначение("Объект");
МакетВерстки = ДокументОбъект.ПолучитьМакет("ИсторияСтатусов");
ИсторияСостояний = МакетВерстки.ПолучитьТекст();

Вы сразу получите результат, изображенный на рисунке выше. Чтобы добавить динамический элемент, который будет изменяться в зависимости от происходящих процессов, необходимо выполнить следующие действия. В HTML-коде (см. листинг выше) нужно собрать блок body. Он состоит из отдельных элементов-статусов, первый из которых выделен комментариями. Существует несколько способов, как это сделать. Один из вариантов я описал ниже.

Шаг 1. Создайте отдельную функцию, чтобы получить шаблон текста для элемента.

&НаСервере
Функция HTMLТекстЭлементСтатус()
	
	Результат = "
	|<div class=""status %1"">
	|  <p>
	|    <a href=""#"" class=""link-%1"">%2</a>
	|  </p>
	|  <p>%4</p>
	|</div>";

	Возврат Результат;
	
КонецФункции

Шаг 2. В макете замените код тела элемента на идентификатор. Вынесите формирование виджета в отдельную процедуру.

&НаСервере
Процедура ОбновитьВиджетСтатусов()
	
	ДокументОбъект = РеквизитФормыВЗначение("Объект");
	ТекстВерстки = ДокументОбъект.ПолучитьМакет("ИсторияСтатусов").ПолучитьТекст();
	
	ТекстВерстки = СтрЗаменить(ТекстВерстки,
		"%БлокСтатусов%",
		HTMLТекстБлокСтатусов());
	
	ИсторияСостояний = ТекстВерстки;
	
КонецПроцедуры

Шаг 3. Добавьте функцию формирования блока виджета.

&НаСервере
Функция HTMLТекстБлокСтатусов()
	
	ИсторияСтатусов = ПолучитьИсториюСтатусов();
	ШаблонЭлементаСтатус = HTMLТекстЭлементСтатус();
	Фрагменты = Новый Массив;
	
	МенеджерСтатусов = Перечисления.СостоянияЗаказов;
	ИменаКлассов = Новый Соответствие;
	ИменаКлассов.Вставить(МенеджерСтатусов.Открыт, "status-opened");
	ИменаКлассов.Вставить(МенеджерСтатусов.ВРаботе, "status-work");
	ИменаКлассов.Вставить(МенеджерСтатусов.Выполнен, "status-work");
	ИменаКлассов.Вставить(МенеджерСтатусов.Закрыт, "status-closed");
	
	Для Каждого СтрокаСтатус Из ИсторияСтатусов Цикл
		
		ТекстЭлемента = СтрШаблон(ШаблонЭлементаСтатус,
			ИменаКлассов[СтрокаСтатус.Статус],
			Строка(СтрокаСтатус.Статус),
			Формат(СтрокаСтатус.ДатаСтатуса, "ДЛФ=D"));
		
		Фрагменты.Добавить(ТекстЭлемента);
		
	КонецЦикла;
	
	Возврат СтрСоединить(Фрагменты, Символы.ПС);
	
КонецФункции

Не забудьте добавить функцию ПолучитьИсториюСтатусов(). Она зависит от функционала конкретной конфигурации. Результат отображения варианта истории выполнен в таком виджете (см. скриншот).

Альтернативный интерфейс

Используйте поля HTML-документа, чтобы настроить интерфейс главного окна приложения, придав ему индивидуальный дизайн. Чтобы получить такой вариант интерфейса конфигурации (см. скриншот), откройте главное окно приложения в режиме полноэкранного рабочего стола и используйте два поля HTML-документа.

Дополнительные возможности

Где провести отладку HTML-кода?

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

Мне нравится онлайн-консоль CodePen, но есть и другие, не менее удобные сервисы:

Любой из этих сервисов поможет быстро набрать и проверить код. Или используйте полноценный редактор, например VSCode. Еще больше информации по HTML-тегам и CSS-свойствам вы найдете здесь.

Отлавливаем события на элементе

Разберем вопрос подробнее, чтобы понять, что происходит при интерактивных действиях на элементе «Поле HTML-документа». Ссылки в названиях статусов добавлены не просто так (см. пример с виджетом). Следующий шаг — понять, на какую ссылку нажал пользователь и что следует делать дальше.

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

ДанныеСобытия — второй параметр, который передается в обработчик. Это упакованная структура с подробным описанием текущего состояния элемента в целом или конкретного элемента верстки (ссылка с тегом <a> в нашем случае).

Собрал несколько примеров свойств данных, которых будет достаточно для решения различных задач при 1С-разработке:

ДанныеСобытия.Element.className — строка с перечислением CSS-классов элемента. Позиционирование на элементах по именам классов — это лишь один из способов. Позиционирование возможно по идентификаторам, тегам, родительским или дочерним элементам, в зависимости от стратегии работы со структурой документа и решаемой задачи. Используйте пробелы, если для одного элемента указываются несколько классов;
ДанныеСобытия.Element.innerHTML — полное содержание активного элемента. В нашем примере используется наименование статуса. В общем случае — HTML-код, вложенный в текущий тег;
ДанныеСобытия.Element.tagName — имя тега текущего элемента;
ДанныеСобытия.Element.outerHTML — HTML-код текущего элемента. Можно сказать, что это содержимое свойства innerHTML, включая описание самого текущего элемента;
ДанныеСобытия.Event.type — тип события, которое выполняется над элементом;
ДанныеСобытия.Event.x и ДанныеСобытия.Event.y — точное положение курсора мыши в пикселях в момент клика на элементе.

Чтобы определить, какой статус выбрал пользователь, используем имя CSS-класса текущего элемента HTML-верстки:

&НаКлиенте
Процедура ИсторияСостоянийПриНажатии(Элемент, ДанныеСобытия, СтандартнаяОбработка)
	
	Классы = СтрРазделить(ДанныеСобытия.Element.className, " ", Ложь);
	
	Если Классы.Найти("link-opened") <> Неопределено Тогда
		
		// обработка статуса "открыт"
		
	ИначеЕсли Классы.Найти("link-work") <> Неопределено Тогда
		
		// обработка статуса "в работе"
		// и т.д.
		
	КонецЕсли;
	
КонецПроцедуры

Размещение стилей CSS

Стили CSS — это отдельный специализированный язык описания стилей для отдельных блоков, тегов, классов. То есть любого элемента HTML-верстки документа. На этом языке можно описать взаиморасположение, размер, цвет, шрифт, тени, трансформацию и анимацию для элементов.

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

Заключение

В статье я привел базовые возможности элемента «Поле HTML-документа». Их вполне достаточно для решения различных задач. Если вам интересна эта тема, в следующих статьях я расскажу подробнее как работать с кодом JavaScript и манипулировать версткой с его помощью, а также о возможностях CSS для создания анимаций и интерактива.

Теги:

Хабы: