LSS Техническая документация

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.
====== Развертывание и настройка LSS визуализатора ======
===== Введение =====
В этой инструкции мы опишем, как подключить **LSS визуализатор** к произвольному сайту. 
Мы подготовим статичную HTML страницу, запускающую работу **LSS визуализатора** и опишем доступные варианты настроек.

Для работы **визуализатора** потребуется **web-сервер**, например Apache.

===== Развертывание LSS визуализатора =====
==== Инструкция по развертыванию ====
  * Установить **web-сервер**, например Apache
  * Скачать **архив базового примера**, разархивировать его в соответствующую папку **web-сервера**
  * обратиться посредством **web-браузера** к соответствующей странице **web-сервера**

==== Структура базового примера ====
  * папка **lss-viewer** содержит JavaScript реализацию **LSS визуализатора**
  * файл **index.html** описывает вариант простейшего подключения **LSS визуализатора**
<code>
<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<meta http-equiv="Cache-Control" content="no-cache">
	<meta http-equiv="Content-Language" content="ru"/>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>базовый пример развертывания LSS визуализатора</title>
	<link rel="stylesheet" type="text/css" href="lss-viewer/lss/cssdojo/main.css"/>
	<link rel="stylesheet" type="text/css" href="lss-viewer/lss/main.css"/>

<!-- подключаем сжатую версию Dojo Toolkit-->
	<script type="text/javascript">
		dojoConfig = {
			cacheBust: true,
			parseOnLoad: false,
			async: true,
			baseUrl: 'lss-viewer/dojocompressed',
			packages: [
				{
					name: 'lss',
					location: '../lss'
				}
			]
		};
	</script>
	<script type="text/javascript" src="lss-viewer/dojocompressed/dojo.js.uncompressed.js"></script>
	<script type="text/javascript" src="lss-viewer/dojocompressed/lss-dojo.js"></script>
</head>
<body>
<!-- Выделяем место под размещение элементов LSS визуализатора -->
	<div id="FormPanelMain"></div>

	<script>
		require(
			[
				'lss',
				'dojo/domReady!'
			],
			function() {
				// Конфигурируем визуализатор
				lss.config['urlServer']='server.xml';	// url адрес точки входа сервера для обработки запросов LSS визуализатора

				// запускаем работу визуализатора
				lss.application.go();
			}
		);
	</script>
</body>
</html>
</code>
  * файл **server.xml** заглушка, выполняющая роль **LSS сервера**
=== о файле index.html ===
  * **div FormPanelMain** задает место в HTML документе, где будут развернуты элементы **LSS визуализатора**
  * настройка **lss.config['urlServer']** задает url точки входа сервера, куда визуализатор будет направлять свои запросы
=== о сервере (файле server.xml) ===
В нашем демонстрационном примере подключения **LSS визуализатора** нет реализации сервера, поэтому тут вместо сервера мы используем заглушку, которая на любой запрос визуализатора будет отвечать ошибкой авторизации (пользователь не залогинен в системе, необходимо пройти аутентификацию). В качестве заглушки в примере используется статичный XML файл со следующем содержимым:
<code>
<root type="lss">
  <response name="disconnected"/>
</root>
</code>
==== Работа базового примера ====
  * Начав работу, **LSS визуализатор** обращается к **серверу** (его адрес задается настройкой **lss.config['urlServer']**), с запросом - получить описание главной экранной формы (ее имя по умолчанию **formMain**).
  * В ответ, вместо описания формы, приходит сообщение об ошибке авторизации.
  * По этой ошибке визуализатор выводит стандартный диалог аутентификации.

===== Настройка LSS визуализатора =====
Расширенный пример развертывается аналогично базовому. От базового отличается наличием дополнительных настроек.

==== Настройка цветовой схемы приложения ====
**LSS визуализатор** поставляется со следующими, готовыми и пригодными для использования цветовыми схемами: **black**, **red**, **m**, **rzd**

Для задания цветовой схемы необходимо в файле **index.html** в разделе **Конфигурирование LSS визуализатора** задать значение настроечной константы:
<code>
lss.config['appColorScheme']='red'; // цветовая схема приложения, возможные значения black, red, m, rzd
</code>
==== Настройка аутентификации приложения ====
Когда визуализатор получает от сервера сообщение об ошибке авторизации, он автоматически вызывает режим аутентификации пользователя. Возможны 2 режима работы аутентификации:
  * Можно настроить внешний вид встроенного в LSS визуализатор **диалога аутентификации**.
  * Можно указать url адрес **внешней HTML страницы**, выполняющей аутентификацию.
По умолчанию используется встроенный **диалог аутентификации**. Доступны следующие настройки:
  * **width** - ширина диалога (по умолчанию '380px')
  * **height** - высота диалога (по умолчанию '220px')
  * **iconUrl** - url иконки аутентификации
  * **iconWidth** - ширина иконки аутентификации (по умолчанию '128px')
  * **title** - заголовок окна аутентификации (по умолчанию 'Представьтесь')
  * **loginUrl** - url адрес слоя фона, поверх которого показывать стандартный диалог аутентификации
  * **loginOpacity** - прозрачность слоя фона (по умолчанию '0.35')
<code>
// Настройка встроенного диалога аутентификации
var confDialogLogin=lss.config['dialogLogin'];
confDialogLogin['loginUrl']='logoscreen/';
confDialogLogin['loginOpacity']='0.35';
confDialogLogin['title']='Hello';
</code>
Если используется **внешняя страница** аутентификации, ее адрес можно задать следующим образом:
<code>
lss.config['mainFormLoginUrl']='url адрес страницы аутентификации';
</code>
по завершении аутентификации, эта страница должна выполнить редирект обратно на **LSS визуализатор**.
==== Подключение дополнительных иконок ====
В **LSS визуализаторе** иконки используются в кнопках, пунктах меню, деревьях, таблицах. К иконкам обращаются по имени. Иконки с одним и тем-же именем по разному выглядят на светлом и темном фоне. 

Есть набор иконок, включенный в визуализатор по умолчанию. При запуске визуализатора стандартный набор иконок можно пополнить.
=== Подключение иконки png и gif ===
Необходимо подготовить 2 иконки: для отображения на светлом и на темном фоне. Подключать следует так:
<code>
lss.icons.registerIconImg('iconname', 'url до иконки на светлом фоне', 'url до иконки на темном фоне');
</code>
=== Подключение иконок svg ===
Иконка SVG автоматически может подстраиваться для отображения как на светлом, так и на темном фоне. Для этого используются **макроподстановки** обозначения цветов, автоматически корректирующиеся в зависимости от используемой **цветовой схемы** приложения:
  * **#000000** - на светлом фоне **основной цвет** используемой **цветовой схемы** приложения, на темном фоне **белый**
  * **red** - на светлом фоне **красный**, на темном фоне **белый**
  * **green** - на светлом фоне **зеленый**, на темном фоне **белый**
  * **blue** - на светлом фоне **синий**, на темном фоне **белый**
  * **yellow** - на светлом фоне **желтый**, на темном фоне **белый**
Подключать SVG иконки следует так:
<code>
lss.icons.registerIconSvg('ok','<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="#000000">  <path d="M 28.28125 6.28125 L 11 23.5625 L 3.71875 16.28125 L 2.28125 17.71875 L 10.28125 25.71875 L 11 26.40625 L 11.71875 25.71875 L 29.71875 7.71875 Z"/></svg>');
</code>
в качестве параметра задается содержимое SVG иконки с использованием макросов для привязки отображения к цветовой схеме и фону.

===== Демонстрационные примеры и ссылки =====
  * демонстрация работы **базового** примера подключения LSS визуализатора у нас на сайте: [[https://lss.m-cti.ru/storage/example/viewer/001]]
  * демонстрация работы **расширенного** примера подключения LSS визуализатора у нас на сайте: [[https://lss.m-cti.ru/storage/example/viewer/002]]