jsf - imagen - Cómo usar<p: graphicImage> con DefaultStreamedContent en un ui: ¿repetir?

mostrar imagen con primefaces

Question

Estaba intentando mostrar un panel donde el usuario puede ver una lista de categorías de elementos (que se muestran como imágenes) y al hacer clic pueden ver productos dentro de la categoría (se mostrarán las imágenes)

Para mostrar la categoría del artículo, utilicé el ui: repeat nad the supporting bean calss A continuación se muestra mi código xhtml

<ui:repeat id="repeat" value="#{getData.images}" var="img" varStatus="loop">
<h:panelGroup>
<p:graphicImage id="img1" value="#{img}" alt="image not available" >
</p:graphicImage>
</h:panelGroup>
</ui:repeat>

Y las partes del código administrado Bean

private ByteArrayOutputStream baos = new ByteArrayOutputStream();
private List<StreamedContent> imageList = new ArrayList<StreamedContent>();

public List<StreamedContent> getImages(){
  for (int i = 0; i < sdh.getNumOfImages(); i++) {
    imageID = imageIDArray.get(i);
    ImageService imgSer = new ImageService();
    imgList.add(imageID);
    imgSer.setData(imageID);
    baos = imgSer.getImage();
    try {
      imageList.add(new DefaultStreamedContent(new 
            ByteArrayInputStream(baos.toByteArray())));
    } catch (Exception ex) {
        ex.printStackTrace();
    }
  }
  imageNum = 0;
  return imageList;
}

public StreamedContent getData() {
    baos = imageList.get(imageNum);
    //imageList.add(baos);
    imageNum++;
    return new DefaultStreamedContent(new ByteArrayInputStream(baos.toByteArray()));
}

Ahora mi problema es que si no elimino el comentario de ''imageList.add (baos)'' en ''getData'', las imágenes no se mostrarán. Ahora realmente quiero saber cómo funciona el ''ui: repeat'', ya que ''imageList'' contiene las imágenes y puedo guardar el mismo si es necesario en cualquiera de los métodos. Si especifico un número fijo (por ejemplo, ''imageList.get (0)'') en el método ''getData'', la misma imagen se mostrará varias veces. Donde como si puse el ''imageNum'' sin el ''imageList.add (baos)'' arrojó el error ''Error in streaming dynamic resource''

Agoté la sugerencia de Bjorn Pollex e hice los cambios necesarios, pero ahora las imágenes no aparecen

Answer 1

Usaste un ui incorrecto: repite la etiqueta. Tiene el atributo var pero no puede usar esto en el atributo de valor de la etiqueta p: graphicImage. Consulte el uso de la muestra,

       <ui:repeat value="#{yourBean.images}" var="img">
           <p:graphicImage value="/images/#{img}" />
        </ui:repeat>

Answer 2

No es posible usar <p:graphicImage> esta manera. Debería iterar sobre una colección de identificadores de imagen únicos, no sobre una colección de StreamedContent . Esos identificadores de imagen únicos tienen que pasarse como un <f:param> a <p:graphicImage> que a su vez generará las URL correctas para el navegador.

<ui:repeat value="#{data.imageIds}" var="imageId">
    <p:graphicImage value="#{imageStreamer.image}">
        <f:param name="id" value="#{imageId}" />
    </p:graphicImage>
</ui:repeat>

Su bean administrado #{data} debe tener simplemente un:

private List<Long> imageIds; // +getter

El #{imageStreamer} debe ser un bean administrado con un ámbito de aplicación separado que se ve básicamente así:

@ManagedBean
@ApplicationScoped
public class ImageStreamer {

    @EJB
    private ImageService service;

    public StreamedContent getImage() throws IOException {
        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()));
        }
    }

}