使用Vaadin声明式UI时如何设置自定义字体图标？
我正在使用自定义字体图标集，如Vaadin 7.2中 Wiki文章字体图标中所述。一切正常。
但是，如果我使用声明性UI，则无法使其正常工作。
到目前为止，这是我的代码：
<vaadin-panel caption="..." style-name="..." icon="fonticon://IcoCustom/58884" size-full>
更新
允许的语法：
font://INDUSTRY（不建议使用的语法，假定使用FontAwesome字体图标）fonticon://FontAwesome/f275（字体系列/代码点以十六进制表示。不允许使用十进制值）fonticon://MyFonticon/e900（有关设置自定义字体图标的信息，请参见@Morfic的答案）
难道不工作：
fonticon://INDUSTRYfonticon://FontAwesome/INDUSTRY
注意：在Vaadin 7.7.3上测试
1）按照使用字体图标Wiki文章中的建议进入 icomoon，并仅选择1个图标，即home（注意，已分配的代码，这将在以后使用。）：e900
2）fonts按照同一教程复制文件夹内容，但将所有文件重命名为myfont*：
3）创建主题文件。请注意，Wiki文章与Vaadin docs主题字体部分之间的@import路径有所差异，正确的是文档中的内容：
- Wiki [ 错误 ]：
@include font(IcoMoon, '../../fonticondemo/fonts/icomoon'); - docs [ right ]：
@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）然后创建设计文件和组件，没有花哨的东西，只是带有按钮的布局：
爪哇
@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）可选的枚举，从Vaadin实现中无耻地复制了 FontAwesome
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种简单的方法来做到这一点
一种） Design.write(this, System.out);
b）Vaadin调试模式 -使用随附的工具将设计打印到控制台
| 归档时间： |
|
| 查看次数： |
1395 次 |
| 最近记录： |