Пример реализации
В этом разделе мы рассмотрим простейший пример интеграции веб-клиента и внешнего сайта. В примере мы покажем, какой минимальный набор действий необходимо выполнить в прикладном решении, а также на стороне веб-сайта, чтобы веб-клиент смог запуститься и работать «внутри» этого веб-сайта и взаимодействовать с внешним сайтом.
подробнее
Подробнее познакомиться с примером интеграции веб-клиента и внешнего сайта можно в демонстрационной конфигурации «Интеграция с 1С», которая прилагается к книге.
Для простоты в качестве веб-сайта мы будем использовать стартовую страницу index.html веб-сервера Apache, с помощью которого мы будем публиковать веб-клиент нашего прикладного решения. В нашем примере веб-клиент будет опубликован по адресу http://localhost/Web_1C.
Страница index.html находится в подкаталоге /htdocs той папки, куда устанавливался Apache. Код страницы изменим следующим образом (листинг 5.8).
Листинг 5.8. Код страницы «index.html»
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<script src="http://localhost/Web_1C/scripts/webclient1ce.js"></script>
<title>Untitled Document</title>
<style type="text/css">
.style1 {
color: #0000FF;
}
.style2 {
color: #FF00FF;
}
.style3 {
color: #FF0000;
font-size: small;
}
</style>
</head>
<body onLoad="init();">
<h1 align="center" class="style1">Пример встраивания веб-клиента в сайт</h1>
<p align="center" class="style2">Здесь работает веб-клиент 1С:Предприятия 8</p>
<div id="webClientContainer" align="center"></div>
<button onClick="messageToWebClient();"><span class="style3">Послать сообщение веб-клиенту</span></button>
<div id="webClientMessageArea" align="center"></div>
<p align="center">
</p>
<script>
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 onclick="messageToWebClient();">Послать сообщение веб-клиенту</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
