How to display images in a Vaadin 6 table?

I have a Vaadin 6 application, in which I want to display several images in a table.

To do this, I define following data model.

private BeanContainer<byte[],UserProductImageBean> productImageData;
productImageData = new BeanContainer<byte[],
        UserProductImageBean>(UserProductImageBean.class);
productImageData.setBeanIdProperty("userProductImageId");

Table is defined as follows.

productImagesTable = new Table("Product images", productImageData);
productImagesTable.setItemIconPropertyId("imageResource");

I get the image data from the server in form of UserProductImage instances:

public class UserProductImage {
    private byte[] userProductImageId;
    private byte[] imageData;
    private byte[] userProductId;
    private String fileName;
    private String creatorEmail;
    private String mimeType;

    public byte[] getImageData() {
        return imageData;
    }

    public void setImageData(final byte[] aImageData) {
        imageData = aImageData;
    }

    public byte[] getUserProductId() {
        return userProductId;
    }

    public void setUserProductId(final byte[] aUserProductId) {
        userProductId = aUserProductId;
    }

    public String getFileName() {
        return fileName;
    }

    public void setFileName(final String aFileName) {
        fileName = aFileName;
    }

    public String getCreatorEmail() {
        return creatorEmail;
    }

    public void setCreatorEmail(final String aCreatorEmail) {
        creatorEmail = aCreatorEmail;
    }

    public String getMimeType() {
        return mimeType;
    }

    public void setMimeType(final String aMimeType) {
        mimeType = aMimeType;
    }

    public byte[] getUserProductImageId() {
        return userProductImageId;
    }

    public void setUserProductImageId(final byte[] aUserProductImageId) {
        userProductImageId = aUserProductImageId;
    }
}

When I update the table data, I convert UserProductImage instances into UserProductImageBean:

final List<UserProductImage> userProductImages = response.getUserImages();

for (final UserProductImage curImage : userProductImages)
{
    productImageData.addBean(UserProductImageBean.create(curImage,
            My.getInstance()));

}

UserProductImageBean adds an image resource property:

public class UserProductImageBean extends UserProductImage {
    private UserProductImageResource imageResource;

    private UserProductImageBean()
    {
    }

    public UserProductImageResource getImageResource() {
        return imageResource;
    }

    public static UserProductImageBean create(final UserProductImage aUserProductImage,
                                              final Application aApplication)
    {
        final UserProductImageBean result = new UserProductImageBean();

        result.setImageData(aUserProductImage.getImageData());
        result.setUserProductId(aUserProductImage.getUserProductId());
        result.setCreatorEmail(aUserProductImage.getCreatorEmail());
        result.setMimeType(aUserProductImage.getMimeType());
        result.setFileName(aUserProductImage.getFileName());
        result.setUserProductImageId(aUserProductImage.getUserProductImageId());
        result.imageResource = new UserProductImageResource(aUserProductImage, aApplication);

        return result;
    }
}

public class UserProductImageResource implements ApplicationResource, Resource {
private final UserProductImage userProductImage;
private final Application application;

public UserProductImageResource(final UserProductImage aUserProductImage,
                                final Application aApplication) {
    userProductImage = aUserProductImage;
    application = aApplication;
}

public String getMIMEType() {
    return userProductImage.getMimeType();
}

public DownloadStream getStream() {
    final ByteArrayInputStream byteArrayInputStream = new ByteArrayInputStream(userProductImage
            .getImageData());
    final DownloadStream downloadStream = new DownloadStream(byteArrayInputStream,
            userProductImage.getMimeType(), userProductImage.getFileName());
    return downloadStream;
}

public Application getApplication() {
    return application;
}

public String getFilename() {
    return userProductImage.getFileName();
}

public long getCacheTime() {
    return 0;
}

public int getBufferSize() {
    return userProductImage.getImageData().length;
}

}

As a result of these operations I get a table like shown below.

Screenshot

How can I change the code so that the property imageResource is displayed as an image?

Update 1 (16.10.2014 22:21 MSK):

I've implemented the class ImageColumnGenerator as suggested by Zigac.

public class ImageColumnGenerator implements Table.ColumnGenerator {
    private static final Logger LOGGER = LoggerFactory.getLogger(ImageColumnGenerator.class);

    public final static String IMAGE_FIELD = "image";

    public Object generateCell(final Table aTable, final Object aItemId, final Object aColumnId) {
        if (!IMAGE_FIELD.equals(aColumnId))
        {
             return null;
        }
        final BeanItem<UserProductImageBean> beanItem = (BeanItem<UserProductImageBean>)
                aTable.getItem(aItemId);

        final UserProductImageResource imageResource = beanItem.getBean().getImageResource();

        LOGGER.debug("imageResource: " + imageResource);

        final Embedded embedded = new Embedded("", imageResource);


        return embedded;
    }
}

When I create the table, I specify the column generator like this:

productImagesTable.addGeneratedColumn(ImageColumnGenerator.IMAGE_FIELD,
        new ImageColumnGenerator());

But when I open the page, I get the following exception.

java.lang.NullPointerException: Parameters must be non-null strings
at com.vaadin.terminal.gwt.server.JsonPaintTarget.addAttribute(JsonPaintTarget.java:420)
at com.vaadin.terminal.gwt.server.JsonPaintTarget.addAttribute(JsonPaintTarget.java:387)
at com.vaadin.ui.Embedded.paintContent(Embedded.java:142)
at com.vaadin.ui.AbstractComponent.paint(AbstractComponent.java:781)
at com.vaadin.ui.Table.paintRow(Table.java:3356)
at com.vaadin.ui.Table.paintRows(Table.java:3169)
at com.vaadin.ui.Table.paintContent(Table.java:2776)
at com.vaadin.ui.AbstractComponent.paint(AbstractComponent.java:781)
at com.vaadin.terminal.gwt.server.AbstractCommunicationManager.writeUidlResponce(AbstractCommunicationManager.java:1044)
at com.vaadin.terminal.gwt.server.AbstractCommunicationManager.paintAfterVariableChanges(AbstractCommunicationManager.java:925)
at com.vaadin.terminal.gwt.server.AbstractCommunicationManager.doHandleUidlRequest(AbstractCommunicationManager.java:792)
at com.vaadin.terminal.gwt.server.CommunicationManager.handleUidlRequest(CommunicationManager.java:318)
at com.vaadin.terminal.gwt.server.AbstractApplicationServlet.service(AbstractApplicationServlet.java:501)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:728)

Update 2 (17.10.2014 12:16): I managed to fix that problem (NPE), but now I have another one - see this question.

Update 3 (19.10.2014 00:02 MSK): This is what the table looks like, when the window is opened for the first time.

Before

When the list of images is received from a web service, the table shrinks so that no images are visible.

After

Following code is executed in order to update the table.

    productImageData.removeAllItems();

    for (final UserProductImage curImage : userProductImages)
    {
        productImageData.addBean(UserProductImageBean.create(curImage,
                InwtApplication.getInstance(), this));
    }

    productImagesTable.setColumnWidth(ImageColumnGenerator.IMAGE_FIELD, 1000);
    productImagesTable.setWidth("100%");
    productImagesTable.requestRepaint();

Solution

You may use a Layout as type for Container column, and create a Layout with image (standard vaadin way to add image: vaadin.com/book/vaadin6/-/page/components.embedded.html) inside of it... you'll only have to build the Layouts with the image inside.

To be sure to have the right size of the table, don't fix the width of the column, but just the size of the layout, the table will sizes itself on the size of the content.