3.5.9.2. 使用其它字体库中的图标

为了增强主题扩展，可能需要创建图标并将其嵌入到字体中，以及使用一些外部图标库。

  • 在 web 模块中，为新图标创建实现 com.vaadin.server.FontIcon 接口的 enum 类：
  1. import com.vaadin.server.FontIcon;
  2. import com.vaadin.server.GenericFontIcon;
  4. public enum IcoMoon implements FontIcon {
  6.     HEADPHONES(0XE900),
  7.     SPINNER(0XE905);
  9.     public static final String FONT_FAMILY = "IcoMoon";
  10.     private int codepoint;
  12.     IcoMoon(int codepoint) {
  13.         this.codepoint = codepoint;
  14.     }
  16.     @Override
  17.     public String getFontFamily() {
  18.         return FONT_FAMILY;
  19.     }
  21.     @Override
  22.     public int getCodepoint() {
  23.         return codepoint;
  24.     }
  26.     @Override
  27.     public String getHtml() {
  28.         return GenericFontIcon.getHtml(FONT_FAMILY, codepoint);
  29.     }
  31.     @Override
  32.     public String getMIMEType() {
  33.         throw new UnsupportedOperationException(FontIcon.class.getSimpleName()
  34.                 + " should not be used where a MIME type is needed.");
  35.     }
  37.     public static IcoMoon fromCodepoint(final int codepoint) {
  38.         for (IcoMoon f : values()) {
  39.             if (f.getCodepoint() == codepoint) {
  40.                 return f;
  41.             }
  42.         }
  43.         throw new IllegalArgumentException("Codepoint " + codepoint
  44.                 + " not found in IcoMoon");
  45.     }
  46. }
  • 向主题扩展添加新样式。建议在主题扩展的主文件夹中创建一个特定的子文件夹 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。

  • 创建一个包含 @font-face 样式和一个图标样式 CSS 类的文件。下面是 icomoon.scss 文件的示例，其中 IcoMoon css 类名对应于 FontIcon#getFontFamily 方法返回的值：
  1. @mixin icomoon-style {
  2.     /* use !important to prevent issues with browser extensions that change fonts */
  3.     font-family: 'icomoon' !important;
  4.     speak: none;
  5.     font-style: normal;
  6.     font-weight: normal;
  7.     font-variant: normal;
  8.     text-transform: none;
  9.     line-height: 1;
  11.     /* Better Font Rendering =========== */
  12.     -webkit-font-smoothing: antialiased;
  13.     -moz-osx-font-smoothing: grayscale;
  14. }
  16. @font-face {
  17.     font-family: 'icomoon';
  18.     src:url('icomoon.eot?hwgbks');
  19.     src:url('icomoon.eot?hwgbks#iefix') format('embedded-opentype'),
  20.         url('icomoon.ttf?hwgbks') format('truetype'),
  21.         url('icomoon.woff?hwgbks') format('woff'),
  22.         url('icomoon.svg?hwgbks#icomoon') format('svg');
  23.     font-weight: normal;
  24.     font-style: normal;
  25. }
  27. .IcoMoon {
  28.     @include icomoon-style;
  29. }
  • 在 halo-ext.scss 文件或其它主题扩展文件中添加对上述包含字体样式的文件的引用。
  1. @import "fonts/icomoon/icomoon";
  • 然后创建新的图标集，这是一个实现 Icons.Icon 接口的枚举：
  1. import com.haulmont.cuba.gui.icons.Icons;
  3. public enum IcoMoonIcon implements Icons.Icon {
  4.     HEADPHONES("ico-moon:HEADPHONES"),
  5.     SPINNER("ico-moon:SPINNER");
  7.     protected String source;
  9.     IcoMoonIcon(String source) {
  10.         this.source = source;
  11.     }
  13.     @Override
  14.     public String source() {
  15.         return source;
  16.     }
  17. }
  • 创建新的 IconProvider.

为了管理自定义图标集，CUBA 框架提供了由 IconProvider 和 IconResolver 组成的机制。

IconProvider 是一个标记接口，只存在于 web 模块中，可以通过图标路径提供资源（com.vaadin.server.Resource）。

IconResolver bean 获取实现 IconProvider 接口的所有 bean，并遍历它们以找到可以为图标提供资源的 bean。

要使用这种机制，应该创建 IconProvider 的实现：

  1. import com.haulmont.cuba.web.gui.icons.IconProvider;
  2. import com.vaadin.server.Resource;
  3. import org.slf4j.Logger;
  4. import org.slf4j.LoggerFactory;
  5. import org.springframework.stereotype.Component;
  7. @Order(10)
  8. @Component
  9. public class IcoMoonIconProvider implements IconProvider {
  10.     private final Logger log = LoggerFactory.getLogger(IcoMoonIconProvider.class);
  12.     @Override
  13.     public Resource getIconResource(String iconPath) {
  14.         Resource resource = null;
  16.         iconPath = iconPath.split(":")[1];
  18.         try {
  19.             resource = ((Resource) IcoMoon.class
  20.                     .getDeclaredField(iconPath)
  21.                     .get(null));
  22.         } catch (IllegalAccessException | NoSuchFieldException e) {
  23.             log.warn("There is no icon with name {} in the FontAwesome icon set", iconPath);
  24.         }
  26.         return resource;
  27.     }
  29.     @Override
  30.     public boolean canProvide(String iconPath) {
  31.         return iconPath.startsWith("ico-moon:");
  32.     }
  33. }

这里我们用 @Order annotation 注解显式地为这个 bean 指定顺序。

  • 在应用程序属性文件中注册自定义图标集：
  1. cuba.iconsConfig = +com.company.demo.gui.icons.IcoMoonIcon

现在，在界面 XML 描述中可以直接引用图标的类和 枚举 元素 ：

  1. <button caption="Headphones" icon="ico-moon:HEADPHONES"/>

或者在 Java 控制器中：

  1. spinnerBtn.setIconFromSet("ico-moon:SPINNER");

这样新图标会添加到按钮上：

add icons

覆盖图标集的图标




图标集机制可以覆盖其它图标集中的图标。为此，应该创建并注册一个具有相同图标（枚举值）但不同图标路径（source）的新图标集（枚举）。在下面的示例中，创建了一个新的图标枚举 MyIcon ，用于覆盖 CubaIcon 图标集中的标准图标。



-
默认图标集：




  1. public enum CubaIcon implements Icons.Icon {
        OK("font-icon:CHECK"),
        CANCEL("font-icon:BAN"),
       …
    }





-
新图标集：




  1. public enum MyIcon implements Icons.Icon {
        OK("icons/my-custom-ok.png"),
       …
    }





-
在 web-app.properties 中注册的新图标集：




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







现在，新的 OK 图标将代替标准图标而被使用：





  1. Icons icons = AppBeans.get(Icons.NAME);
    button.setIcon(icons.getIcon(CubaIcon.OK))






如果需要忽略重新定义的图标，仍然可以通过使用标准图标的路径而不是选项名称来使用标准图标：





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






或者





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