Question

我正在使用维基文章Font icons in Vaadin 7.2中所述的自定义字体图标集。一切正常。

但是，如果我使用声明性UI，我无法使其正常工作。

到目前为止，这是我的代码：

<vaadin-panel caption="..." style-name="..." icon="fonticon://IcoCustom/58884" size-full>

更新

允许的语法：

font://INDUSTRY（不推荐使用的语法，假设FontAwesome字体图标）
fonticon://FontAwesome/f275（字体系列/代码点，十六进制。十进制值不允许）
fonticon://MyFonticon/e900（有关设置自定义字体图标，请参阅@ Morfic的回答）

不是否有效：

fonticon://INDUSTRY
fonticon://FontAwesome/INDUSTRY

Answer 1

注意：在Vaadin 7.7.3上测试

1）按icomoon中的建议去Using font-icons wiki article并仅选择1个图标，主页（注意分配的代码e900，这是我们的意思稍后使用。）：

2）根据同一教程复制fonts文件夹内容，但将所有文件重命名为myfont*：

3）创建主题文件。请注意，维基文章和关于@import路径的Vaadin docs theme-font section之间存在差异，正确的是来自文档的文章：

wiki [错误]：@include font(IcoMoon, '../../fonticondemo/fonts/icomoon');
docs [正确]：@include font(MyFontFamily, '../../../../mytheme/fonts/myfontfamily');

<强> styles.scss

@import "mytheme.scss";

@include font(myfont, '../../../../mytheme/fonts/myfont');

/* This file prefixes all rules with the theme name to avoid causing conflicts with other themes. */
/* The actual styles should be defined in mytheme.scss */
.mytheme {
  @include mytheme;
}

<强> mytheme.scss

@import "../valo/valo";

@mixin mytheme {
  @include valo;
}

3）然后创建了设计文件和组件，没什么花哨的，只是一个带按钮的布局：

<强>的java

@DesignRoot
public class MyDeclarativeComponent extends VerticalLayout {
    public MyDeclarativeComponent() {
        Design.read(this);
    }
}

html （请注意使用的e900代码）

<!DOCTYPE html>
<html>
    <body>
        <com_example_declarative_font-my-declarative-component>
            <vaadin-button icon="fonticon://myfont/e900" plain-text>My button</vaadin-button>
        </com_example_declarative_font-my-declarative-component>
    </body>
</html>

4）可选枚举，从FontAwesome

的Vaadin实现中无耻地复制

public enum MyFont implements FontIcon {
    HOME(0xe900);

    public static final String FONT_FAMILY = "myfont";
    private int codepoint;

    private MyFont(int codepoint) {
        this.codepoint = codepoint;
    }

    public String getMIMEType() {
        throw new UnsupportedOperationException(FontIcon.class.getSimpleName() + " should not be used where a MIME type is needed.");
    }

    public String getFontFamily() {
        return FONT_FAMILY;
    }

    public int getCodepoint() {
        return this.codepoint;
    }

    public String getHtml() {
        return GenericFontIcon.getHtml(FONT_FAMILY, this.codepoint);
    }

    public static MyFont fromCodepoint(final int codepoint) {
        for (MyFont f : values()) {
            if (f.getCodepoint() == codepoint) {
                return f;
            }
        }
        throw new IllegalArgumentException("Codepoint " + codepoint + " not found in FontAwesome");
    }
}

5）基本UI实施：

@Theme("mytheme")
@PreserveOnRefresh
@SpringUI(path = "/")
@Title("Vaadin demo app")
public class MyUi extends UI {

    @Override
    protected void init(VaadinRequest request) {
        Layout content = new VerticalLayout();
        content.setSizeFull();
        setContent(content);
        content.addComponent(new MyDeclarativeComponent());
    }
}

6）结果：

7）奖金 - 打印组件的声明格式：您可以通过至少2种简单的方式来实现这一目标

a）Design.write(this, System.out);

b）Vaadin debug mode - 使用附带的工具将设计打印到控制台

使用Vaadin声明性UI时如何设置自定义字体图标？

1 个答案: