Question

我有一个Vaadin 6应用程序，我希望在表格中显示多个图像。

为此，我定义了以下数据模型。

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

表定义如下。

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

我以UserProductImage实例的形式从服务器获取图像数据：

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

当我更新表格数据时，我会将UserProductImage个实例转换为UserProductImageBean：

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

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

}

UserProductImageBean添加了图片资源属性：

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

}

作为这些操作的结果，我得到如下所示的表格。

Screenshot

如何更改代码以便将属性imageResource显示为图像？

更新1（16.10.2014 22:21 MSK）：

我按照Zigac的建议实施了课程ImageColumnGenerator。

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

当我创建表时，我指定列生成器如下：

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

但是当我打开页面时，我得到以下异常。

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)

更新2（2014年10月17日12:16）：我设法解决了这个问题（NPE），但现在又有了另一个问题 - 请参阅此question。

更新3（19.10.2014 00:02 MSK）：这是第一次打开窗口时表格的样子。

Before

当从Web服务接收图像列表时，表格会缩小，以便不会显示任何图像。

After

执行以下代码以更新表格。

    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();

Answer 1

您可以使用“布局”作为“容器”列的类型，并在其中创建带有图像的布局（标准vaadin方式以添加图像：vaadin.com/book/vaadin6/-/page/components.embedded.html）。 ..你只需要用里面的图像构建布局。

为了确保表格的大小合适，不要固定列的宽度，而只是修改布局的大小，表格会根据内容的大小自行调整大小。

d

如何在Vaadin 6表格中显示图像？

1 个答案: