Создание темы

Создание и сопровождение пользовательской темы — процесс, требующий понимания архитектуры генерации интерфейса. Данная статья предназначена для разработчиков, создающих или модифицирующих темы интерфейса. В ней описаны:

• структура темы;
• механизм преобразования данных в HTML;
• способы отладки;
• работа с графическими ресурсами.

Структура темы

Файлы темы размещаются в подкаталоге директории /usr/local/mgr5/skins/. Тема содержит следующие компоненты:

• XSL-шаблоны — для преобразования XML-данных в HTML;
• CSS-файлы — для стилизации интерфейса;
• код JavaScript — для клиентской логики (опционально);
• графические ресурсы — изображения, логотипы, favicon. 

Создание новой темы

Чтобы создать новую тему:

1. Создайте каталог с уникальным именем в /usr/local/mgr5/skins/. Имя каталога не должно совпадать с именами существующих тем и зарезервированным именем common.
2. Перезапустите службу COREmanager:
   

   systemctl restart coremanager

   или

   killall core

3. После перезапуска тема появится в списке доступных тем в веб-интерфейсе. При первом выборе темы без XSL-шаблонов отобразится пустая (белая) страница. 

Механизм генерации интерфейса

Платформа формирует интерфейс следующим образом:

1. При каждом запросе сервер платформы генерирует XML-документ с ответом.
2. Ответ с помощью XSL-шаблонов преобразуется в нужный формат. Например, HTML.
3. Каждая функция использует отдельный XSL-шаблон.

Отладка с помощью XML

Чтобы ответы на запросы содержали XML-файл с отладочной информацией, добавьте к запросу параметр out=devel.

Чтобы просматривать XML в лог-файлах, включите логирование модулей output и xml  на максимальный уровень:

1. В интерфейсе платформы перейдите в Настройки → Настройка логирования.
2. Выберите модуль:
   • output — Управление выводом в разные форматы (core.output);
   • xml — Работа с xml (core.xml).
3. Повысьте уровень логирования одним из вариантов:
   • кнопка Изменить → выберите Уровень: "9 — отладочная информация";
   • кнопка Максимальный.
4. Нажмите Ок.

По умолчанию логи находятся в /usr/local/mgr5/var/.

Общее описание XML

В каждом XML-файле, формируемом платформой, есть данные об используемой теме и текущем языке платформы. Данные содержатся в атрибутах корневого тега doc:

<doc lang="ru" func="desktop" binary="/core" host="https://127.0.0.1:1500" stylesheet="desktop" theme="/manimg/orion/" css="main.css" logo="logo.png" logolink="" favicon="favicon.ico" localdir="default/">
...
</doc>

Использование иконок

Иконки, которые используются несколькими темами, находятся в директории /usr/local/mgr5/skins/common/img/. Например, иконки главного меню, свойств, кнопки панели инструментов, модулей. Иконки объединены в CSS-спрайты по размерам.

Чтобы начать использовать иконки:

1. Подключите CSS-файл спрайтов /usr/local/mgr5/skins/common/sprite.css в XSL-шаблоне темы:
   
   Пример подключения CSS-файла спрайтов

   <link rel="stylesheet" href="/mainimg/common/sprite.css">

2. В XSL-шаблоне создайте HTML-элемент <div> со следующими CSS-классами:
   • класс размера. Например, s16x16;
   • класс названия иконки. Например, mb-sysstat.
   Пример HTML-элемента

   <div class="s16x16 mb-sysstat"></div>

Доступные спрайты:

• sprite-16x16.png — содержит иконки размером 16x16 px, используемые в главном меню, свойствах;
• sprite-16x17.png — содержит иконки размером 16x17 px, используемые в формах в теме sirius;
• sprite-24x24.png — содержит иконки размером 24x24 px, используемые для кнопок тулбара;
• sprite-48x48.png — содержит иконки размером 48x48 px, используемые в заголовках модулей.