如何在 p:dataTable 中使用 p:graphicImage 和 StreamedContent？ [复制]

Question

我想使用 PrimeFaces 数据表从数据库中动态加载图像。基于this PF forum topic的代码如下所示：

<p:dataTable id="tablaInventario" var="inv" value="#{registrarPedidoController.inventarioList}" paginator="true" rows="10"
    selection="#{registrarPedidoController.inventarioSelected}" selectionMode="single"                                     
    update="tablaInventario tablaDetalle total totalDesc" dblClickSelect="false" paginatorPosition="bottom">
    <p:column sortBy="producto.codigo" filterBy="producto.codigo">
        <f:facet name="header">#{msg.codigo}</f:facet>
        #{inv.producto.codProducto}
    </p:column>                            
    <p:column>
        <f:facet name="header">Foto</f:facet>
        <p:graphicImage id="photo" value="#{registrarPedidoController.streamedImageById}" cache="FALSE">
            <f:param name="inv" value="#{inv.id}" />
        </p:graphicImage>                                
    </p:column>
</p:dataTable>

与

public StreamedContent getStreamedImageById() {
    DefaultStreamedContent image = null;
    String get = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("inv");
    System.out.println("[Param]: " + get); // This prints null.
    Long id = new Long(get);
    List<Inventario> listInventarios = controladorRegistrarPedido.listInventarios();

    for (Inventario i : listInventarios) {
        if (i.getId().compareTo(id) == 0) {
            byte[] foto = i.getProducto().getFoto();
            image = new DefaultStreamedContent(new ByteArrayInputStream(foto), "image/png");
        }
    }

    return image;
}

但是我无法让它工作。我的参数正在将“null”传递给我的支持 bean。这是如何引起的，我该如何解决？

我正在使用 Netbeans 6.9.1、JSF 2.0 和 Primefaces 2.2.RC2。

我继续使用 BalusC 第一个解决方案，它运行良好，但图像没有在 UI 中呈现。 Glassfish 抛出异常：

WARNING: StandardWrapperValve[Faces Servlet]: PWC1406: Servlet.service() for servlet Faces Servlet threw exception
java.lang.NullPointerException
        at com.sun.faces.mgbean.BeanManager$ScopeManager$ViewScopeHandler.isInScope(BeanManager.java:552)

看来，感谢 BalusC，我可以开始工作了。我已经使用 RequestScoped、SessionScoped 或 ApplicationScoped 来管理 getStreamedImageId。但是，在 UI 中始终设置默认图像（对于 null 情况），而不是按预期设置与每一行对应的图像。新代码是：

public StreamedContent streamedById(Long id) {
    DefaultStreamedContent image = null;

    System.out.println("[ID inventario]: " + id);

    List<Inventario> listInventarios = controladorRegistrarPedido.listInventarios();
    for (Inventario i : listInventarios) {
        if (i.getId().equals(id)) {
            byte[] foto = i.getProducto().getFoto();
            if (foto != null) {
                System.out.println("   [Foto]: " + foto);
                image = new DefaultStreamedContent(new ByteArrayInputStream(foto), "image/png");
                break;
            }
        }


    }
    if (image == null) {
        System.out.println("       [Image null]");
        byte[] foto = listInventarios.get(0).getProducto().getFoto();
        image = new DefaultStreamedContent(new ByteArrayInputStream(foto), "image/png");
    }

    System.out.println("   [Foto Streamed]: " + image);

    return image;

}

Answer 1

<p:graphicImage> 将调用 getter 方法两次。第一次是将<img> 元素呈现为HTML，因此需要src 属性中的URL。如果您只返回new DefaultStreamedContent()，那么它将在src 属性中自动生成正确的URL。第二次是浏览器真正请求图片的时候，此时你应该返回实际的图片。

所以，getter 方法基本上应该是这样的：

public StreamedContent getStreamedImageById() {
    FacesContext context = FacesContext.getCurrentInstance();

    if (context.getCurrentPhaseId() == PhaseId.RENDER_RESPONSE) {
        // So, we're rendering the view. Return a stub StreamedContent so that it will generate right URL.
        return new DefaultStreamedContent();
    }
    else {
        // So, browser is requesting the image. Get ID value from actual request param.
        String id = context.getExternalContext().getRequestParameterMap().get("id");
        Image image = service.find(Long.valueOf(id));
        return new DefaultStreamedContent(new ByteArrayInputStream(image.getBytes()));
    }
}

Answer 2

在 PrimeFaces 3.2 中，该错误仍然存​​在。我解决了

<p:graphicImage value="#{company.charting}">
    <f:param id="a" name="a" value="#{cc.attrs.a}" />
    <f:param id="b" name="b" value="#{cc.attrs.b}" />
</p:graphicImage>

和

ExternalContext externalContext = FacesContext.getCurrentInstance().getExternalContext();
String a= externalContext.getRequestParameterMap().get("a");
String b= externalContext.getRequestParameterMap().get("b");

但即使这样，bean 也会被调用 2 次。但是在第二个调用变量中 a + b 被填充了 ;-)

该死的虫子

Answer 3

如果我们通过休眠将图像保存在数据库中，则它们会以 byte[] 的形式保存。我上传了带有<p:fileUpload...标签的图像，然后我使用休眠将图像与其他数据值一起保存。

在第二页上，我正在使用

显示整个表格数据（当然还有图像）

<p:dataTable  var="data" value="#{three.all}" ....

和动态图像使用

<p:graphicImage   alt="image"  value="#{three.getImage(data)}" cache="false"  >
                <f:param id="image_id" name="image_id" value="#{data.number}" />
</p:graphicImage></p:dataTable>

这里的“三”是Backing Bean的名称。在方法getAll() 中，我通过休眠从表中检索数据，并且在相同的方法中，我创建了一个HashMap<Integer, byte[]>。 HashMap 是 bean 的实例变量，而 Bean 是 SessionScoped。我将images（采用byte[] 形式）与一个整数image_id 放在一起。

代码：

    for (int i=0; i<utlst.size(); i++ ){
             images.put(utlst.get(i).getNumber(), utlst.get(i).getImage());}
//utlst is the object retrieved from database. number is user-id.

在getImage.xhtml视图中，<p:graphicImage alt="image" value="#{three.getImage(data)}" cache="false" >调用方法getImage(data /*I am passing current object of the list which is being iterated by*/ )

getImage 代码：

public StreamedContent getImage(Util ut) throws IOException {
       //Util is the pojo

          String image_id = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("image_id");
          System.out.println("image_id: " + image_id);

          if (image_id == null) {

                defaultImage=new DefaultStreamedContent(FacesContext.getCurrentInstance().getExternalContext().getResourceAsStream("/Capture.PNG"), "image/png");

            return defaultImage; 
        }


         image= new DefaultStreamedContent(new ByteArrayInputStream(images.get(Integer.valueOf(image_id))), "image/png");

        return image;
    }

只需将带有 id 的动态图像保存在会话中的 A HashMap 中，它们就会被正确流式传输。

感谢和问候， 泽山