在表格單元格中添加圖標+容器數據

Question

我按照自己想要的方式填充表格存在問題，我希望能夠獲得一些幫助。

你看，我有一個表，它有一組列，從一個容器中獲取其內容，然後它從數據庫中獲取它的內容。 問題是，在兩個表列中，我希望在單元格內容前添加一個特定的圖標，具體取決於內容是什麼。現在

，我的問題是，我知道如何數據庫的內容添加到使用

imsiTable.setContainerDataSource(imsiContainer)

表，我知道如何使用

imsiTable.addGeneratedColumn("networkStatus", new IconAndLabelCell());

但是添加圖標列，我不知道如何將兩者合併爲一列......不用說，我仍然在學習框架。所以，如果你知道如何在表中創建一個現有列的內容的迭代方法，並在創建表後添加一個圖標，我將非常感激。

我將提供更多信息if需要的，請不要猶豫，問！

編輯： 代碼的連續的請求後，在這裏它是：

private void createImsiTable() { 

    String imsiColumn = I18N.get("inventory.imsi.table.imsi"); 
    String networkStatusColumn = I18N 
      .get("inventory.imsi.table.networkstatus"); 
    String subscriptionStatusColumn = I18N 
      .get("inventory.imsi.table.subscriptionstatus"); 
    String activeImsiColumn = I18N.get("inventory.imsi.table.activeimsi"); 
    String networkProvisioningColumn = I18N 
      .get("inventory.imsi.table.networkprovisioning"); 
    String simProvisioningColumn = I18N 
      .get("inventory.imsi.table.simprovisioning"); 

    List<Object> visibleColumnIds = new ArrayList<Object>(); 
    List<String> visibleColumnLabels = new ArrayList<String>(); 

    visibleColumnIds.add("imsi"); 
    visibleColumnIds.add("networkStatus"); 
    visibleColumnIds.add("subscriptionStatus"); 
    visibleColumnIds.add("activeImsi"); 
    visibleColumnIds.add("networkProvisioning"); 
    visibleColumnIds.add("simProvisioning"); 

    visibleColumnLabels.add(imsiColumn); 
    visibleColumnLabels.add(networkStatusColumn); 
    visibleColumnLabels.add(subscriptionStatusColumn); 
    visibleColumnLabels.add(activeImsiColumn); 
    visibleColumnLabels.add(networkProvisioningColumn); 
    visibleColumnLabels.add(simProvisioningColumn); 

    imsiTable.setPageLength(5); 
    imsiTable.setCacheRate(1.2); 

    /** 
    * Keep an eye on batch and cache size preferences to see if they are 
    * correctly set for the context 
    */ 
    AbstractQuery imsiQuery = new ImsiQuery(inventoryService, 100, 200); 
    this.imsiContainer = new ImsiContainer(imsiQuery); 

    imsiContainer.addContainerProperty("id", Long.class, "", true, true); 
    imsiContainer.addContainerProperty("imsi", Long.class, "", true, true); 
    imsiContainer.addContainerProperty("networkStatus", String.class, "", 
      true, true); 
    imsiTable.setContainerDataSource(imsiContainer); 

      //This is where one of the column with icon and label are created 
    imsiTable.addGeneratedColumn("networkStatus", new IconAndLabelCell(
      "network")); 
    imsiTable.addGeneratedColumn("subscriptionStatus", 
      new IconAndLabelCell("subscription")); 

    imsiTable.addGeneratedColumn("activeImsi", 
      new RadiobuttonColumnGenerator()); 

    imsiContainer.addContainerProperty("networkProvisioning", String.class, 
      "", true, true); 
    imsiContainer.addContainerProperty("simProvisioning", String.class, "", 
      true, true); 

    imsiTable.setVisibleColumns(visibleColumnIds.toArray()); 

    imsiTable.setColumnHeaders(visibleColumnLabels 
      .toArray(new String[visibleColumnLabels.size()])); 
    imsiTable.setImmediate(true); 
    imsiTable.setEditable(false); 
    imsiTable.setSelectable(false); 
    imsiTable.setWriteThrough(true); 

    imsiTable.setWidth("95%"); 

    imsiTable.setStyleName("v-table-striped"); 
    setStyleName("inventory-switchsububscription-panel"); 

    addComponent(imsiTable); 
    setComponentAlignment(imsiTable, Alignment.MIDDLE_CENTER); 
} 

---

//Class declared inside the the same class as the method createImsiTable() 
    class IconAndLabelCell implements Table.ColumnGenerator { 

    String propertyType; 
    m2mExtendedIconLabel iconLabel; 

    public IconAndLabelCell(String propertyType) { 
     this.propertyType = propertyType; 
    } 

    @Override 
    public Component generateCell(final Table source, final Object itemId, 
      final Object columnId) { 
     Item item = source.getItem(itemId); 

     Property idProperty = item.getItemProperty("id"); 

     if (propertyType.equals("network")) { 
      Property networkStatProperty = item 
        .getItemProperty("networkStatus"); 
      String networkValue = (String) networkStatProperty.getValue(); 

      iconLabel = getNetworkTableCell(networkValue); 

     } else if (propertyType.equals("subscription")) { 
      Property subscriptionStatProperty = item 
        .getItemProperty("subscriptionStatus"); 
      String subscriptionValue = (String) subscriptionStatProperty 
        .getValue(); 

      iconLabel = getSubscriptionTableCell(subscriptionValue); 

     } 

     return iconLabel; 
    } 

---

public class M2mExtendedIconLabel extends HorizontalLayout { 

    private static final long serialVersionUID = -6042368314173011721L; 

    private final SLabel label; 

    public M2mExtendedIconLabel(final String text, final Style labelStyle, final String iconStyle, final ResourceId resourceId)  { 

     final Embedded icon = new Embedded(null, new ThemeResource(resourceId.getId())); 

     label = new SLabel(); 
     label.setValue(text); 
     label.setStyleName(Styles.ICON_PREFIX.getStyleName() + labelStyle.getStyleName()); 
     label.getStyleName(); 
     System.out.println("CSS Class: " + label.getStyleName()); 

     icon.setStyleName(iconStyle); 

     addComponent(icon); 
     addComponent(label); 
     setComponentAlignment(label, Alignment.MIDDLE_LEFT); 
     setExpandRatio(label, 1.0f); 

    } 

    /** 
    * Sets the description to the HorizontalLayout containing the label and icon. 
    * @param description The tooltip text 
    */ 
    @Override 
    public void setDescription(final String description) { 
     setDescription(description); 
    } 

    public SLabel getTextLabel() { 
     return label; 
    } 

} 

---

private m2mExtendedIconLabel getNetworkTableCell(String networkValue) { 
    // TODO Auto-generated method stub 

    m2mExtendedIconLabel iconLabel = null; 

    if (networkValue.equals("Activated")) { 

     iconLabel = new m2mExtendedIconLabel("Activated", Styles.TEXT, 
       "m2m-inventory-imsitable-status-icon", new ResourceId(
         "../m2m/img/table_active_imsi.png")); 
    } else if (networkValue.equals("Activation Ready")) { 
     iconLabel = new m2mExtendedIconLabel("Inventory", Styles.TEXT, 
       "m2m-inventory-imsitable-status-icon", new ResourceId(
         "../m2m/img/table_inventory_imsi.png")); 

    } else if (networkValue.equals("Uninitialized")) { 
     iconLabel = new m2mExtendedIconLabel("Inventory", Styles.TEXT, 
       "m2m-inventory-imsitable-status-icon", new ResourceId(
         "../m2m/img/table_inventory_imsi.png")); 

    } else if (networkValue.equals("Inventory")) { 
     iconLabel = new m2mExtendedIconLabel("Inventory", Styles.TEXT, 
       "m2m-inventory-imsitable-status-icon", new ResourceId(
         "../m2m/img/table_inventory_imsi.png")); 

    } else if (networkValue.equals("Suspended")) { 
     iconLabel = new m2mExtendedIconLabel("Inventory", Styles.TEXT, 
       "m2m-inventory-imsitable-status-icon", new ResourceId(
         "../m2m/img/table_inventory_imsi.png")); 

    } else if (networkValue.equals("Network Deactivated")) { 
     iconLabel = new m2mExtendedIconLabel("Inventory", Styles.TEXT, 
       "m2m-inventory-imsitable-status-icon", new ResourceId(
         "../m2m/img/table_inventory_imsi.png")); 

    } else if (networkValue.equals("Terminated")) { 
     iconLabel = new m2mExtendedIconLabel("Inventory", Styles.TEXT, 
       "m2m-inventory-imsitable-status-icon", new ResourceId(
         "../m2m/img/table_inventory_imsi.png")); 

    } else if (networkValue.equals("Test Ready")) { 
     iconLabel = new m2mExtendedIconLabel("Test Ready", Styles.TEXT, 
       "m2m-inventory-imsitable-status-icon", new ResourceId(
         "../m2m/img/table_testready_imsi.png")); 

     } 

     return iconLabel; 
    } 
} 

Answer 1

看看這個樣本APPLICA我寫得很快。 originalContainer僅用於演示目的並代表您的實際容器。這段代碼假設你已經有了一個使用簡單屬性類型創建的容器（originalContainer）（即沒有Vaadin組件）。

甚至更​​好的解決方案是創建imgtext屬性類型設置爲Label的原始容器，因此它永遠不會是容器中的字符串，並且您不必從字符串轉換爲標籤。

public class MyApplication extends Application { 

@Override 
public void init() { 
    Window mainWindow = new Window("MyApplication"); 

    // Create the original container 
    IndexedContainer originalContainer = new IndexedContainer(); 
    originalContainer.addContainerProperty("id", Integer.class, null); 
    originalContainer.addContainerProperty("imgtext", String.class, null); 

    // Add some dummy data 
    Item item0 = originalContainer.getItem(originalContainer.addItem()); 
    item0.getItemProperty("id").setValue(1); 
    item0.getItemProperty("imgtext").setValue("First"); 
    Item item1 = originalContainer.getItem(originalContainer.addItem()); 
    item1.getItemProperty("id").setValue(2); 
    item1.getItemProperty("imgtext").setValue("Second"); 

    // Create a modified container 
    IndexedContainer modifiedContainer = new IndexedContainer(); 
    for(Object propId : originalContainer.getContainerPropertyIds()) { 
     if(propId.equals("imgtext")) { 
      // Change the imgtext property type from String to Label 
      modifiedContainer.addContainerProperty(propId, Label.class, null); 
     } else { 
      modifiedContainer.addContainerProperty(propId, originalContainer.getType(propId), null); 
     } 
    } 

    // Add the data 
    for(Object itemId : originalContainer.getItemIds()) { 
     Item item = originalContainer.getItem(itemId); 
     Item newItem = modifiedContainer.addItem(itemId); 
     for(Object propId : originalContainer.getContainerPropertyIds()) { 
      if(propId.equals("imgtext")) { 
       String text = item.getItemProperty(propId).getValue().toString(); 
       Label label = new Label(); 
       label.setContentMode(Label.CONTENT_XHTML); 
       label.setValue("<img src=\"" + getImgUrl(text) + "\" /> " + text); 
       newItem.getItemProperty(propId).setValue(label); 
      } else { 
       newItem.getItemProperty(propId).setValue(item.getItemProperty(propId).getValue()); 
      } 
     } 
    } 

    // Create the table and set the data source 
    Table table = new Table(); 
    table.setWidth(700, Table.UNITS_PIXELS); 
    table.setContainerDataSource(modifiedContainer); 

    mainWindow.addComponent(table); 
    setMainWindow(mainWindow); 
} 

private String getImgUrl(String text) { 
    return "http://myurl.com/image.png"; 
} 
} 

你也可以在你的表中有其他組件。請參閱here中的「組件內部組件」一節。