添加图标 +表格单元格中的容器数据

Question

我无法按照自己想要的方式填写表格，我希望得到一些帮助。

你看，我有一个表，其中有一组列，这些列从容器中获取其内容，而容器又从数据库中获取内容。 问题是，在两个表格列中，我希望根据内容的内容在单元格内容前面添加一个特定的图标。

将数据库内容添加到表中，

现在，我的问题是我知道如何使用imsiTable.setContainerDataSource(imsiContainer)

添加一列图标

并且我知道如何使用imsiTable.addGenerateColumn("networkStatus" , new IconAndLabelCell());

但是，我不知道如何将两者合并为一列......不用说，我仍在学习该框架。因此，如果您知道是否有任何好的方法来迭代表中现有列的内容并在创建表后添加图标，我将非常感激。

如果需要，我将提供更多信息，请不要请毫不犹豫地询问！

编辑： 经过不断的请求代码，如下：

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

查看我很快编写的示例应用程序。 OriginalContainer 仅用于演示目的并代表您的实际容器。此代码假设您已经有一个使用简单属性类型（即没有 Vaadin 组件）创建的容器 (originalContainer)。

更好的解决方案是创建原始容器，并将 imgtext 属性类型设置为 Label，因此容器中永远不会是 String，并且您不必进行从 String 到 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";
}
}

您的表中还可以包含其他组件。请参阅此处中的“表内的组件”部分。