java - 在表格单元格中添加图标 + 容器数据

Question

我在按照我想要的方式填充表格时遇到问题，我希望得到一些帮助。

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

现在，我的问题是我知道如何使用
imsiTable.setContainerDataSource(imsiContainer)
我知道如何使用添加一列图标
imsiTable.addGeneratedColumn("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";
}
}

您也可以在表中包含其他组件。请参阅 here 中的“表内的组件”部分.