Vaadin - 使用FontAwesome在新Vaadin 7.4 Grid中渲染鏈接圖標

Question

我在Vaadin 7.4之前使用了一個呈現爲FontAwesome-Icon（aka LinkBut​​ton）的鏈接。

 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; 
    } 

我試圖「翻譯」這個使用了PropertyValueGenerator新的網格通過添加生成列像這樣使用我們這樣做的BeanItemContainer addGeneratedProperty方法。但是這並沒有奏效，佈局只是顯示了Link-class的對象符號。

任何幫助非常感謝！

Answer 1

您可以在GeneratedPropertyContainer中添加一個生成的屬性，該屬性返回一個String屬性（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());