В этой инструкции мы опишем, как подключить LSS визуализатор к произвольному сайту. Мы подготовим статичную HTML страницу, запускающую работу LSS визуализатора и опишем доступные варианты настроек.
Для работы визуализатора потребуется web-сервер, например Apache.
<!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>
В нашем демонстрационном примере подключения LSS визуализатора нет реализации сервера, поэтому тут вместо сервера мы используем заглушку, которая на любой запрос визуализатора будет отвечать ошибкой авторизации (пользователь не залогинен в системе, необходимо пройти аутентификацию). В качестве заглушки в примере используется статичный XML файл со следующем содержимым:
<root type="lss"> <response name="disconnected"/> </root>
Расширенный пример развертывается аналогично базовому. От базового отличается наличием дополнительных настроек.
LSS визуализатор поставляется со следующими, готовыми и пригодными для использования цветовыми схемами: black, red, m, rzd
Для задания цветовой схемы необходимо в файле index.html в разделе Конфигурирование LSS визуализатора задать значение настроечной константы:
lss.config['appColorScheme']='red'; // цветовая схема приложения, возможные значения black, red, m, rzd
Когда визуализатор получает от сервера сообщение об ошибке авторизации, он автоматически вызывает режим аутентификации пользователя. Возможны 2 режима работы аутентификации:
По умолчанию используется встроенный диалог аутентификации. Доступны следующие настройки:
// Настройка встроенного диалога аутентификации var confDialogLogin=lss.config['dialogLogin']; confDialogLogin['loginUrl']='logoscreen/'; confDialogLogin['loginOpacity']='0.35'; confDialogLogin['title']='Hello';
Если используется внешняя страница аутентификации, ее адрес можно задать следующим образом:
lss.config['mainFormLoginUrl']='url адрес страницы аутентификации';
по завершении аутентификации, эта страница должна выполнить редирект обратно на LSS визуализатор.
В LSS визуализаторе иконки используются в кнопках, пунктах меню, деревьях, таблицах. К иконкам обращаются по имени. Иконки с одним и тем-же именем по разному выглядят на светлом и темном фоне.
Есть набор иконок, включенный в визуализатор по умолчанию. При запуске визуализатора стандартный набор иконок можно пополнить.
Необходимо подготовить 2 иконки: для отображения на светлом и на темном фоне. Подключать следует так:
lss.icons.registerIconImg('iconname', 'url до иконки на светлом фоне', 'url до иконки на темном фоне');
Иконка SVG автоматически может подстраиваться для отображения как на светлом, так и на темном фоне. Для этого используются макроподстановки обозначения цветов, автоматически корректирующиеся в зависимости от используемой цветовой схемы приложения:
Подключать SVG иконки следует так:
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>');
в качестве параметра задается содержимое SVG иконки с использованием макросов для привязки отображения к цветовой схеме и фону.