Skip to content

Latest commit

 

History

History
141 lines (110 loc) · 5.93 KB

icon_provider.adoc

File metadata and controls

141 lines (110 loc) · 5.93 KB
Raw
Добавление значков из других библиотек шрифтов

Для более тонкой настройки расширенной темы можно создать значки, встроенные в шрифты, либо использовать готовые внешние библиотеки значков.

  1. Создайте в модуле web класс enum, реализующий интерфейс com.vaadin.server.FontIcon, в который поместите новые значки:

    link:../../../../../source/gui/add_icons_enum.java[role=include]

  2. Добавьте новые стили и файлы шрифта в расширение темы. Рекомендуется создать отдельную папку fonts в главном каталоге расширения темы, например, modules/web/themes/halo/com.company.demo/fonts. Поместите в неё стили и файлы шрифтов в своих собственных подпапках, например, fonts/icomoon.

    Файлы шрифта включают в себя набор следующих расширений:

    • .eot,

    • .svg,

    • .ttf,

    • .woff.

      Использованный в этом примере набор шрифтов icomoon из открытой библиотеки представлен в виде 4 файлов: icomoon.eot, icomoon.svg, icomoon.ttf, icomoon.woff, которые используются совместно.

  3. Создайте файл стилей, в который включите @font-face и CSS класс со стилем для значка. Ниже представлен пример файла icomoon.scss, где имя класса IcoMoon соответствует значению, возвращаемому методом FontIcon#getFontFamily:

    link:../../../../../source/gui/add_icons_icomoon.scss[role=include]

  4. Подключите файл стилей шрифта в halo-ext.scss или другой файл расширения данной темы:

    link:../../../../../source/gui/add_icons_halo-ext.scss[role=include]

  5. Затем создайте новый набор значков, то есть enum, реализующий интерфейс Icons.Icon:

    link:../../../../../source/gui/IcoMoonIcon.java[role=include]

  6. Создайте новый IconProvider.

    Для работы с наборами значков в платформе есть механизм, основанный на использовании IconProvider и IconResolver.

    IconProvider - это интерфейс-маркер, доступный только в веб-модуле, который предоставляет доступ к ресурсу (com.vaadin.server.Resource) по переданному пути.

    Бин IconResolver проходится по всем бинам, реализующим IconProvider, в поисках того, кто может предоставить ресурс к данному значку.

    Чтобы использовать этот механизм, необходимо создать собственную реализацию IconProvider, например, так:

    link:../../../../../source/gui/IcoMoonIconProvider.java[role=include]

    Здесь мы явно назначаем порядок для этого бина аннотацией @Order.

  7. Далее нужно зарегистрировать набор значков в файле свойств приложения:

    cuba.iconsConfig = +com.company.demo.gui.icons.IcoMoonIcon

Теперь вы можете использовать значки по прямой ссылке на класс и элемент enum в XML-дескрипторе экрана:

link:../../../../../source/gui/add_icons_usage.xml[role=include]

или в контроллере Java:

link:../../../../../source/gui/add_icons_usage.java[role=include]

В результате, новые значки добавились к кнопкам:

add icons
Переопределение значков с помощью наборов

Механизм наборов значков позволяет переопределять некоторые значки из других наборов. Для этого необходимо создать и зарегистрировать новый набор значков (enumeration) с теми же именами значков (options), но с другими путями (source). В примере ниже создан новый набор MyIcon, в котором переопределены стандартные значки из набора CubaIcon.

  1. Стандартный набор:

    link:../../../../../source/gui/CubaIcon.java[role=include]

  2. Новый набор:

    link:../../../../../source/gui/MyIcon.java[role=include]

  3. Регистрация нового набора в web-app.properties:

    cuba.iconsConfig = +com.company.demo.gui.icons.MyIcon

Теперь вместо стандартного значка OK будет использовано новое изображение:

link:../../../../../source/gui/overridden_icon.java[role=include]

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

<button caption="Created" icon="icons/create.png"/>

или

button.setIcon(CubaIcon.CREATE_ACTION.source());