Пример реализации

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

подробнее

Подробнее познакомиться с примером интеграции веб-клиента и внешнего сайта можно в демонстрационной конфигурации «Интеграция с 1С», которая прилагается к книге.

Для простоты в качестве веб-сайта мы будем использовать стартовую страницу index.html веб-сервера Apache, с помощью которого мы будем публиковать веб-клиент нашего прикладного решения. В нашем примере веб-клиент будет опубликован по адресу *http://*localhost/Web_1C.

Страница index.html находится в подкаталоге /htdocs той папки, куда устанавливался Apache. Код страницы изменим следующим образом (листинг 5.8).

Листинг 5.8. Код страницы «index.html»

<!DOCTYPE html>

<html>

<head>

<title>Untitled Document</title>

.style1 {

color: #0000FF;

}

.style2 {

color: #FF00FF;

}

.style3 {

color: #FF0000;

font-size: small;

}

</style>

</head>

<body>

<h1 align="center" class="style1">Пример встраивания веб-клиента в сайт</h1>

<p align="center" class="style2">Здесь работает веб-клиент 1С:Предприятия 8</p>

<button><span class="style3">Послать сообщение веб-клиенту</span></button>

</p>

var webClient = null;

var onWebClientMessage = function (message, origin) {

if (origin < 'http://localhost') {

document.querySelector('#webClientMessageArea').innerText = message;

}

};

var messageToWebClient = function () {

webClient.postMessage("Поступило сообщение из внешнего сайта");

};

var init = function () {

webClient = new WebClient1CE('webClientContainer',

{

webClientURL: 'http://localhost/Web_1C?MainWindowsMode=EmbeddedWorkplace',

width: '900px',

height: '500px',

events:

{

onMessage: onWebClientMessage

}

});

};

</script>

</body>

</html>

Прокомментируем некоторые элементы html-кода:

Элемент <script> выполняет загрузку скрипта, реализующего Embedded WebClient API.
При загрузке тела веб-страницы срабатывает обработчик init(), который указан в качестве обработчика события onload элемента body.
Строка <div id="webClientContainer"></div> определяет элемент <div>, в который будет встроен веб-клиент.
В обработчике init() выполняется создание объекта WebClient1CE. Конструктору передается идентификатор элемента <div> (в примере это webClientContainer). Также в обработчике init():
- веб-клиенту передается командная строка запуска, которая указывает, что веб-клиент должен быть запущен в режиме основного окна Встроенное рабочее место;
- для элемента <iframe>, в котором будет работать веб-клиент, устанавливается ширина, равная 900 пикселям, и высота, равная 500 пикселям. Указание данных параметров не является обязательным, вместо этого можно использовать или размер по умолчанию, или другие способы задания размера области отображения <iframe>, например CSS;
- регистрируется обработчик события onMessage, который будет принимать сообщение от веб-клиента. Обработка этого события будет выполняться в методе onWebClientMessage(), описанном ранее на странице.
Строка <button>Послать сообщение веб-клиенту</button> формирует на веб-странице кнопку с заголовком "Послать сообщение веб-клиенту", нажатие на которую приводит к тому, что в веб-клиент отправляется сообщение с текстом "Поступило сообщение из внешнего сайта". Отправка выполняется из обработчика messageToWebClient(), подключенного к событию onclick кнопки.
Строка <div id="webClientMessageArea"></div> содержит описание области, в которую будет выводиться сообщение от веб-клиента (из обработчика события onMessage).
Условие *if (origin < '**http://*localhost') в общем случае необходимо в том случае, если один обработчик используется для нескольких прикладных решений, внедренных в одну страницу. В этом случае условие будет нужно для того, чтобы понять, от какого веб-клиента поступило сообщение.

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

В форме этой обработки создадим команду СообщениеВнешнемуСайту и перетащим ее в окно элементов формы. Обработчик команды заполним следующим образом (листинг 5.9).

Листинг 5.9. Обработчик команды «СообщениеВнешнемуСайту»

&НаКлиенте

Процедура СообщениеВнешнемуСайту(Команда)

Если ОкноВнешнегоСайта.Доступно Тогда

СообщениеСайту = Новый СообщениеВнешнемуСайту("Получено сообщение от веб-клиента");

ОкноВнешнегоСайта.ОтправитьСообщение(СообщениеСайту);

КонецЕсли;

КонецПроцедуры

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

Затем нам нужно при открытии формы обработки подключить обработчик сообщений, которые будет получать форма от внешнего сайта. Для этого создадим обработчик события формы ПриОткрытии и заполним его следующим образом (листинг 5.10).

Листинг 5.10. Обработчик события формы «ПриОткрытии»

&НаКлиенте

Процедура ПриОткрытии(Отказ)

Если ОкноВнешнегоСайта.Доступно Тогда

ОбработчикСобытия = Новый ОписаниеОповещения("ПриПолученииСообщенияОтВнешнегоСайта", ЭтотОбъект);

ОкноВнешнегоСайта.ПодключитьОбработчикСообщений(ОбработчикСобытия);

КонецЕсли;

КонецПроцедуры

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

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

Листинг 5.11. Обработчик оповещения «ПриПолученииСообщенияОтВнешнегоСайта»

&НаКлиенте

Процедура ПриПолученииСообщенияОтВнешнегоСайта(Сообщение, ДополнительныеПараметры) Экспорт

Сообщить(Сообщение.Данные);

КонецПроцедуры

В обработчике оповещения в параметре Сообщение содержится объект СообщениеВнешнегоСайта. Текст сообщения, полученного от внешнего сайта, просто выводится в окно сообщений формы обработки.

И затем нам нужно отключить обработчик сообщений ПриПолученииСообщенияОтВнешнегоСайта() при закрытии формы обработки. Для этого создадим обработчик события формы ПриЗакрытии и заполним его следующим образом (листинг 5.12).

Листинг 5.12. Обработчик события формы «ПриЗакрытии»

&НаКлиенте

Процедура ПриЗакрытии(ЗавершениеРаботы)

Если ОкноВнешнегоСайта.Доступно Тогда

ОбработчикСобытия = Новый ОписаниеОповещения("ПриПолученииСообщенияОтВнешнегоСайта", ЭтотОбъект);

ОкноВнешнегоСайта.ОтключитьОбработчикСообщений(ОбработчикСобытия);

КонецЕсли;

КонецПроцедуры

В заключение поместим форму обработки на начальную страницу приложения и опубликуем наше прикладное решение на веб-сервере по адресу *http://*localhost/Web_1C.

Проверим, как это работает.

Запустим веб-браузер и в адресной строке наберем адрес*http://*localhost. После этого откроется стартовая демонстрационная страница веб-сервера Apache, на котором мы опубликовали наше прикладное решение.

В соответствии с изменениями, которые мы сделали в странице index.html (см. листинг 5.8), вместо надписи «It works!» теперь на этой странице появятся окно с веб-клиентом нашего прикладного решения и кнопка для отправки сообщения веб-клиенту (рис. 5.3).

Рис. 5.3. Веб-клиент «1С:Предприятия», встроенный в стартовую демонстрационную страницу веб-сервера Apache

При нажатии на кнопку Сообщение внешнему сайту в форме обработки, расположенной на начальной странице веб-клиента, веб-сайту будет отправлено сообщение с текстом «Получено сообщение от веб-клиента», которое он покажет внизу веб-страницы (рис. 5.4).

Рис. 5.4. Веб-клиент «1С:Предприятия», встроенный в стартовую демонстрационную страницу веб-сервера Apache

А при нажатии на кнопку Послать сообщение веб-клиенту на странице веб-сайта в окне сообщений формы обработки появится сообщение с текстом «Поступило сообщение из внешнего сайта» (рис. 5.5).

Рис. 5.5. Веб-клиент «1С:Предприятия», встроенный в стартовую демонстрационную страницу веб-сервера Apache

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

Рис. 5.6. Веб-клиент «1С:Предприятия», встроенный в стартовую демонстрационную страницу веб-сервера Apache

Технологии интеграции 1С Предприятия 8.3

Глава 5. Взаимодействие с приложением системы «1С:Предприятие»

Пример реализации

Пример реализации