2

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();
Community
  • 1
  • 1
Glory to Russia
  • 17,289
  • 56
  • 182
  • 325
  • Mybe try adding `table.addGeneratedColumn` and into `new ColumnGenerator()` return wrapped `Resource` into `Embedded` `Embedded.setSource(UserProductImageResource);` – Zigac Oct 14 '14 at 19:43
  • @Zigac Thanks. I tried it - see my update 1. – Glory to Russia Oct 16 '14 at 18:22
  • may I suggest another approach? you may use a Layout as type for Container column, and create a Layout with image inside of it... you'll only have to build the Layouts with the image inside – Dan M Oct 17 '14 at 12:11
  • @DanM What kind of component (`Label`?) can I use to display the image? – Glory to Russia Oct 17 '14 at 12:12
  • Any layout... then you add an embedded with the image you want to display :) (you create the embedded image standard way - https://vaadin.com/book/vaadin6/-/page/components.embedded.html) – Dan M Oct 17 '14 at 13:26
  • @DanM Thanks for your proposal. It actually helped me get rid of the error, but now I have another problem - the width of the table is too small for the image to be visible. At the beginning the table is wide enough, after I add some data, it becomes narrow and the images are not visible. Any ideas how to fix this? – Glory to Russia Oct 18 '14 at 15:32
  • if in your table you are using a container to hold the image, try to set the size of the container to full instead of sizing the column. From what I've understood, table sizes itself on the size of the content. – Dan M Oct 20 '14 at 08:35
  • @DanM Setting the width of the table (`table.setWidth("1000px"`) actually helped. You can submit your recommendations as an answer and then I'll accept it and give you the bounty. – Glory to Russia Oct 20 '14 at 08:50
  • glad to have been helpful! I know vaadin may be quite tricky to handle :) – Dan M Oct 20 '14 at 09:21

1 Answers1

1

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.

D.

Dan M
  • 315
  • 2
  • 14