Display image from DB on zk zul listbox

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)}" />
 ....