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

标签 java vaadin

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

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

现在,我的问题是我知道如何使用将数据库内容添加到表中

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

最佳答案

查看我很快编写的示例应用程序。 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 中的“表内的组件”部分.

关于java - 在表格单元格中添加图标+容器数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7363793/

相关文章:

java - 使用 "null"引用调用重载函数

java - 如何在CDI事件中使用参数?

java - Vaadin 7 从客户端向服务器发送数据

java - 设置网格中每列的宽度 - Vaadin

java - Android使用服务将通知设置为特定时间

Java 和 Swing 以及游戏循环

java - 计算错误

java - JOOQ 用索引创建表

security - 如何使用 Apache Shiro 处理分层角色/权限?

vaadin - 如何调整布局中按钮之间的间距,例如 Vaadin Flow 中的水平布局?