2

我有一个 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;
}

}

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

截屏

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

更新 1（16.10.2014 22:21 MSK）：

我已经ImageColumnGenerator按照 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;
    }
}

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

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（17.10.2014 12:16）：我设法解决了这个问题（NPE），但现在我有另一个问题 - 看到这个问题。

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

前

当从 Web 服务接收到图像列表时，表格会缩小，因此没有图像可见。

后

执行以下代码以更新表。

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

1 回答 1

1

您可以使用 Layout 作为 Container 列的类型，并在其中创建一个带有图像的 Layout（添加图像的标准 vaadin 方式：vaadin.com/book/vaadin6/-/page/components.embedded.html）......你' 只需要在内部构建带有图像的布局。

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

D.

于 2014-10-20T09:20:30.637 回答