Vaadin - 在新的 Vaadin 7.4 网格中使用 FontAwesome 渲染链接图标

Question

在 Vaadin 7.4 之前，我使用了一个呈现为 FontAwesome-Icon（又名 LinkBut​​ton）的链接。使用 BeanItemContainer，我们通过添加如下生成的列来做到这一点：

        table.addGeneratedColumn(FIELD_SHOW_DETAILS_LINK, new Table.ColumnGenerator() {
            private static final long serialVersionUID = 1L;

            @Override
            public Object generateCell(final Table source, final Object itemId, Object columnId) {
                final Link link = new Link();
                link.setDescription("Show details");
                link.setIcon(FontAwesome.SEARCH);
                link.setResource(new ExternalResource("#!details/" 
                  + ((MainVO) itemId).getUid() + "?mode=VIEW"));
                link.addStyleName("fa");
                return link;
            }
        });

使用这样的 CSS 样式：

  .fa {
    font-family: FontAwesome;
    color: gray;
    text-decoration: none;
    font-weight: normal;
    padding-left: 5px;
    padding-right: 5px;
  }

我尝试使用带有 addGeneratedProperty 方法的 PropertyValueGenerator 为新网格“翻译”这个。但这并没有奏效，布局只显示了 Link 类的对象表示法。

非常感谢任何帮助！

Answer 1

您可以在 GeneratedPropertyContainer 中添加一个生成的属性，该属性返回一个字符串属性 (FontAwesome.XXX.getHtml())，并将 HTML-Renderer 添加到网格中的该列。

添加属性

GeneratedPropertyContainer gpc = new GeneratedPropertyContainer(your_collection);
gpc.addGeneratedProperty("download", new PropertyValueGenerator<String>() {
        @Override
        public String getValue(Item item, Object itemId, Object propertyId) {
            return FontAwesome.WARNING.getHtml();
        }

        @Override
        public Class<String> getType() {
            return String.class;
        }
    });

并添加渲染器：

grid.getColumn("download").setRenderer(new HtmlRenderer());