Come utilizzare <p: ​​graphicImage> con DefaultStreamedContent in ui: repeat?

Question

Stavo cercando di visualizzare un pannello dove l'utente può visualizzare un elenco di voci di categoria (visualizzato come immagini) e facendo clic si possono visualizzare i prodotti all'interno della categoria (verranno visualizzate le immagini)

Per visualizzare la categoria oggetto, i utilizzata l'interfaccia utente: ripetere nad il supporto calss di fagioli Di seguito è riportato il mio codice 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> 

E le parti di codice Bean Managed

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())); 
} 

Ora il mio problema se non rimuovere il commento esimo e 'imageList.add (baos)' in 'getData', le immagini non vengono visualizzate. Ora voglio davvero sapere come funziona 'ui: repeat', dato che 'imageList' contiene le immagini e io posso salvare lo stesso se richiesto in uno dei due metodi. Se si specifica un numero fisso (es: 'imageList.get (0)') nel metodo 'getData', la stessa immagine viene mostrata più volte. Dove se metto il 'imageNum' senza 'imageList.add (baos)' genera errore 'Errore nella risorsa dinamica di streaming'

Ho stancato il suggerimento di Bjorn Pollex e ho apportato le modifiche necessarie ma ora le immagini non appaiono

Answer 1

Non è possibile utilizzare <p:graphicImage> in questo modo. Dovresti piuttosto eseguire iterazioni su una raccolta di identificatori di immagini univoci, non su una raccolta di StreamedContent. Questi identificatori di immagine univoci devono quindi essere passati come <f:param> a <p:graphicImage> che a sua volta genererà gli URL corretti per il browser.

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

tuo #{data} gestito bean deve solo avere un:

private List<Long> imageIds; // +getter 

Il #{imageStreamer} dovrebbe essere un'applicazione separata ambito gestita fagioli che sembrano sostanzialmente in questo modo:

@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())); 
     } 
    } 

} 

Answer 2

Hai usato ui errato: ripeti tag. Hai attributo var ma non è possibile utilizzare questo in p: graphicImage valore di tag attribute.Please vedi esempio dell'uso,

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