テーブルに複数の画像を表示したい 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):
ImageColumnGeneratorZigac の提案に従ってクラスを実装しました。
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 (2014 年 10 月 19 日 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();