Question

I have a problem with filling a table the way I want and I would hope to get some help.

You see, I have a table which has a set of columns that get its content from a container who in its turn get its from a database.
The thing is, in two of the table columns I would like to have a specific icon added in front of the cell content depending on what the content is.

Now, my problem is I know how to add database content to the table using

imsiTable.setContainerDataSource(imsiContainer)

and I know how to add a column of icons using

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

However, I have no idea of how to combine the two into one column… Needless to say I’m still learning the framework. So if YOU know if there is any good approach of how to iterate the content of an existing column in a table and add an icon after the table is created, I would be extremely grateful..

I will provide more information if needed, please don’t hesitate to ask!

Edit:
After continuous requests of the code, here it is:

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

Check out this sample application that I wrote pretty quickly. The originalContainer is just for demonstrating purposes and represents your actual container. This code assumes that you already have a container (originalContainer) created with simple property types (ie. no Vaadin components).

Even a better solution would be to create the original container with imgtext property type set as Label, so it would never be String in the container and you wouldn’t have to make any conversions from String to 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";
}
}

You can have other components in your table as well. See the section “Componets Inside a Table” from here.