如何在PrimeFaces 6.1中显示动态图像

时间:2018-10-16 15:33:06

标签: primefaces jsf-2.2

我的条件:Java 7 / JSF 2.2 / PrimeFaces 6.1

我有一个编辑页面,该页面应允许加载并保存图像。为了使外观漂亮,应该在用户单击保存之前显示刚刚加载的图像。

我的页面的一部分是:

<h:form enctype="multipart/form-data" id="form">
    <h2 class="page-header">Image load</h2>
    <p:graphicImage id="image" required="true" value="#{bannerEditMB.image}" width="240" height="160"/>
    <p:fileUpload id="imageLoad" fileUploadListener="#{bannerEditMB.imageLoad}"
                      auto="true" mode="advanced" update="image"
                      label="#{messages['banner.image.label']}"
                      allowTypes="/(\.|\/)(jpe?g)$/"
                      invalidFileMessage="Only .jpeg e .jpg" icon="fa fa-file-image-o"/>
    <p:commandButton action="#{bannerEditMB.insert}" ajax="false" icon="fa fa-check" id="buttonAdd" rendered="#{not bannerEditMB.updateMode}"/>
    <p:commandButton action="#{bannerEditMB.update}" ajax="false" icon="fa fa-check" id="buttonUpdate" rendered="#{bannerEditMB.updateMode}"/>
    <p:commandButton action="#{bannerEditMB.cancel}" ajax="false" icon="fa fa-close" id="buttonCancel" immediate="true"/>
</h:form>

(视图作用域)后备bean是:

@ViewController
public class BannerEditMB extends AbstractEditPageBean<Banner, Long> {
    private static final long serialVersionUID = 1L;

    @Inject
    private BannerBC bc;

    private StreamedContent image = new DefaultStreamedContent();

    @Override
    public Banner handleLoad(Long id) {
        Banner bean = bc.load(id);
        imagem = new ByteArrayContent(bean.getImagem());
        return bean;
    }

    public void imageLoad(FileUploadEvent event)
                throws IOException {
        byte[] content = event.getFile().getContents();
        getBean().setImage(content);
        image = new ByteArrayContent(content);
    }

    public StreamedContent getImage() {
        return image;
    }
}

问题是,当我单击加载按钮时,一切正常,包括imageLoad()方法,该方法可以将内容正确设置为正在编辑的对象。实际上,如果单击“保存”按钮,则会按预期更新相应的数据库行,而刚加载的图像将保存在DB中。

调试显示,getImage()方法在图像加载后被调用了两次,但是屏幕上没有任何变化,用户看不到刚刚加载的图像。

我的代码受《 PrimeFaces 6.1用户指南》的启发,该指南提供了类似的代码。

0 个答案:

没有答案