4.5.7.1.1. Использование существующих тем

Платформа включает в себя две готовые темы: Halo и Havana. Приложение будет по умолчанию использовать ту из них, которая указана в свойстве приложения cuba.web.theme. Пользователь может выбрать другую доступную тему в стандартном экране Help -> Settings. Если вы не хотите, чтобы пользователи имели возможность сами выбирать тему, зарегистрируйте экран settings в файле web-screens.xml проекта с параметром changeThemeEnabled = false: 

<screen id="settings" template="/com/haulmont/cuba/web/app/ui/core/settings/settings-window.xml">
  <param name="changeThemeEnabled" value="false"/>
</screen>

При использовании существующих тем можно настроить некоторые параметры фирменного стиля (branding): пиктограммы и заголовки окна логина и главного окна, пиктограмму вебсайта favicon.ico. Для этого необходимо выполнить следующее:

  1. Создайте следующую файловую структуру внутри каталога modules/web проекта: 

    themes/
  havana/
    branding/
      myapp-login.png
      myapp-menu.png
    favicon.ico

    Здесь havana - каталог с именем используемой темы, favicon.ico - пиктограмма вебсайта, myapp-login.png - изображение для окна логина, myapp-menu.png - изображение для главного окна.

  2. В CUBA Studio откройте Project properties -> Edit и нажмите кнопку Branding внизу страницы. Используя ссылки Set application logo image и Set login window logo image задайте путь к файлам пиктограмм соответственно главного окна и окна логина. Путь указывается относительно каталога темы. Остальные ссылки служат для задания заголовков окон и текста приглашения окна логина.

    Данные параметры сохраняются в главном пакете сообщений модуля gui (то есть в файле modules/gui/<root_package>/gui/messages.properties и его вариантах для разных локалей). Использование пакетов сообщений дает возможность использовать разные файлы изображений для разных локалей пользователей. Пример содержимого файла messages.properties: 

    application.caption = MyApp
application.logoImage = branding/myapp-menu.png

loginWindow.caption = MyApp Login
loginWindow.welcomeLabel = Welcome to MyApp!
loginWindow.logoImage = branding/myapp-login.png

    Путь к favicon.ico указывать не нужно, он должен обязательно находится в корне каталога с именем темы.

В существующую тему можно также добавить файлы изображений для использования в свойствах icon действий и визуальных компонентов, например Button.

Например, чтобы добавить в тему Havana пиктограмму, достаточно в описанный выше каталог modules/web/themes/havana добавить файл изображения (желательно в некоторый подкаталог): 

themes/
  havana/
    images/
      address-book.png

После этого можно использовать эту пиктограмму, указывая в свойстве icon путь к ней относительно каталога темы: 

<action id="adresses"
      icon="images/address-book.png"/>

Вместо файлов изображений для пиктограмм можно использовать элементы шрифта Font Awesome. Для этого достаточно указать в свойстве icon имя нужной константы перечисления com.vaadin.server.FontAwesome с префиксом font-icon:, например: 

<action id="adresses"
      icon="font-icon:BOOK"/>

В проекте можно заменить изображения, используемые в стандартных действиях и экранах платформы. Для замены пиктограммы темы Havana достаточно положить в каталог modules/web/themes/havana/icons проекта нужный файл изображения. Например, для замены пиктограммы стандартного действия create это будет файл с именем create.png (имя файла легко определить по URL соответствующего HTML-элемента img в работающем приложении): 

themes/
  havana/
    icons/
      create.png

В теме Halo по умолчанию (при включенном свойстве приложения cuba.web.useFontIcons) пиктограммы стандартных действий и экранов платформы загружаются из шрифта Font Awesome. В этом случае заменить стандартную пиктограмму можно только создав свою тему на базе Halo (см. далее) и задав в файле <your_theme>-theme.properties нужное соответствие между именем пиктограммы и именем элемента шрифта, например: 

cuba.web.icons.create.png = PLUS

При выключенном свойстве cuba.web.useFontIcons пиктограммы стандартных действий и экранов платформы для темы Halo загружаются так же, как и для темы Havana - из файлов изображений в подкаталоге icons. Поэтому их можно заменить описанным для Havana способом.

Тема Halo поддерживает свойство приложения cuba.web.useInverseHeader, управляющее цветом заголовка приложения. По умолчанию это свойство установлено в true, что задает темный (инверсный) заголовок. В проекте можно не изменяя темы сделать заголовок светлым, установив данное свойство в false.

Пред.  Наверх  След.
  Начало