Display image from DB on zk zul listbox - base64

Question

I have an entity that includes image that type byte[]. So the return type is byte[].I have to get image and show on a listbox.My codes are below.
public class KitapListesiControl extends SelectorComposer<Component> {
private static final long serialVersionUID = 1L;
private List<Kitaplar> kitapList = new ArrayList<Kitaplar>();
private ListModel<Kitaplar> kitapListModel;
#Wire
private Listbox kitapListBox;
#Wire
private Image kitapImageId = new Image();
KitapIslemleriDao kid = new KitapIslemleriDaoImpl();
#Override
public void doAfterCompose(Component comp) throws Exception {
super.doAfterCompose(comp);
kitapList = kid.findAllKitaplar();
kitapListModel = new ListModelList<Kitaplar>(kitapList);
kitapListBox.setModel(kitapListModel);
kitapImageId.setId("kitapImageId" + kitapList.get(0).getKitapId());
}
My listbox that want to display image on a cell is below
<listbox id="kitapListBox" emptyMessage="Kayıt yok!"
mold="paging" pageSize="5" width="970px" checkmark="true"
apply="com.mesutemre.kitapIslemleri.KitapListesiControl"
model="${win$composer.kitapListModel}">
<listhead>
<listheader width="32px" />
<listheader label="Kitap Adı" align="center"
sort="auto(kitapad)" width="190px" />
<listheader label="Yazar Adı" align="center"
sort="auto(yazarad)" width="190px" />
<listheader label="Kitap Tür" align="center"
width="190px" sort="auto(kitaptur)" />
<listheader label="Kitap Durum" align="center"
sort="auto(kitapdurum)" width="190px" />
<listheader label="Kitap Resmi" align="center"
width="190px" />
</listhead>
<template name="model">
<listitem>
<listcell />
<listcell label="${each.kitapad}" />
<listcell label="${each.yazarad}" />
<listcell label="${each.kitaptur}" />
<listcell label="${each.kitapdurum}" />
<listcell>
<image
src="#load(each.kitapimage) #converter('com.mesutemre.converter.ImageToZkImageConverter')" />
</listcell>
</listitem>
</template>
</listbox>

Answer 1

Zul:
<image content="#load(each.image) #converter('be.chillworld.web.vm.util.ImageToZkImageConverter')" />
ImageToZkImageConverter.class :
package be.chillworld.web.vm.util;
import java.io.IOException;
import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import org.zkoss.bind.BindContext;
import org.zkoss.bind.Converter;
import org.zkoss.image.AImage;
import org.zkoss.zul.Image;
public class ImageToZkImageConverter implements Converter<AImage, byte[], Image> {
private Log logger = LogFactory.getLog(ImageToZkImageConverter.class);
#Override
public byte[] coerceToBean(AImage compAttr, Image component, BindContext ctx) {
logger.debug("Converting the image");
return compAttr.getByteData();
}
#Override
public AImage coerceToUi(byte[] beanProp, Image component, BindContext ctx) {
try {
if (beanProp != null && beanProp.length > 0) {
AImage im = new AImage("", beanProp);
component.setContent(im);
return im;
}
logger.debug("Return null => image is empty");
return null;
} catch (IOException e) {
logger.error("Error occured, returning null", e);
return null;
}
}
}
source : http://forum.zkoss.org/question/95645/how-to-get-image-lob-attribute-from-database-into-listcell/#95651
For MVC you can do the following :
<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?>
....
<image content="${c:new2('org.zkoss.image.AImage','',each.image)}" />
....