2

Displaying p:graphicImage dynamic content keeps me busy already quite a few days now. Can anyone help me please, I would appreciate that very much.

I have a straigtforward approach of p:graphicImage as StreamedContent of imgage.jpg loaded into a list (TreeMap).

This is my xhtml snippet:

            <p:dataView var="id"
                value="#{fotoViewer.imagesViewTree.entrySet()}"
                    gridIcon="pi pi-th-large" listIcon="pi pi-bars">

            <p:dataViewListItem>
                <h:panelGrid columns="2" style="width:100%" columnClasses="">

                    <p:graphicImage value="#{id.value.streamedImage}"
                        style="max-width: 30vw; max-height: 53vh;" cache="false"
                        stream="true" styleClass="w3-round-xlarge" />

                    <p:outputPanel>
                        <h:panelGrid columns="2" cellpadding="5">
                            <h:outputText value="Id:" />
                            <h:outputText value="#{id.key}" style="font-weight: bold" />

                            <h:outputText value="naam:" />
                            <h:outputText value="#{id.value.naam}" style="font-weight: bold" />

                        </h:panelGrid>
                    </p:outputPanel>

                </h:panelGrid>
            </p:dataViewListItem>
        </p:dataView>

I can see the dynamicContents sitting in my browser which looks fine as far as can judge, here it is:

(img id="cac010:j_id_11:0:j_id_14" src="/cJsfComponents1/faces/javax.faces.resource/dynamiccontent.properties?ln=primefaces&v=8.0&pfdrid=8ca67d0788631c82cdee936b119abf8e&pfdrt=sc&pfdrid_c=false&uid=6d617a80-1fe2-4b5f-80b8-b7868dac9f10" alt="" class="w3-round-xlarge" style="max-width: 30vw; max-height: 53vh;")

I don't understand why the server does not deliver the contentStream. It responds with an http-status-code-404.

Thx in advance for any help!

Erik DdW
  • 91
  • 1
  • 5
  • Check the docs: https://primefaces.github.io/primefaces/10_0/#/core/dynamiccontent?id=pass-parameters-to-the-resource-request – tandraschko Jan 10 '21 at 16:36

2 Answers2

1

Found the solution given over 8 years ago which is exactly where I was looking for. And.... it works great!

How to use <p:graphicImage> with DefaultStreamedContent in an ui:repeat?

How to use <p:graphicImage> with DefaultStreamedContent in an ui:repeat?

Since I'm using PrimeFaces V8.0 there is some different implementation regarding how to get the StreamedContent of the image. Here's my ImageStreamer method that does it:

public StreamedContent getStreamedContentOfImage(ByteArrayInputStream bais) {
    StreamedContent graphicImage = null;
    graphicImage = DefaultStreamedContent.builder().contentType("image/png").stream(() -> {
        try {
            return bais;
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }
    }).build();

    return graphicImage;

}

Maybe it helps someone in future!?

Erik DdW
  • 91
  • 1
  • 5
0

@tandraschko: thx for your quick reply. The link you included was several days ago also my startingpoint. I must say helas, that it is a very bad example! The code doesn't work and is incomplete. The link How to use <p:graphicImage> with DefaultStreamedContent in an ui:repeat? put me on the right track. I've got it all working now very well and I am getting more and more enthousiastic about PrimeFaces! It's a pitty that not all of the documentation is accurate, actual and clear setup, with all levels of users in mind!. Thx anyway!

Erik DdW
  • 91
  • 1
  • 5
  • We already put many many effort in the documentation but its almost impossible to catch every case for every component :P Feel free to help us to improve the documentation, everything is in GitHub! – tandraschko Jan 12 '21 at 20:47
  • polished it a bit now: https://primefaces.github.io/primefaces/10_0/#/components/graphicimage – tandraschko Jan 12 '21 at 21:38
  • Ok @tandraschko. I was curious about your polishing! But the link you included gives me '404 File not found' at (primefaces.github.io/primefaces/10_0/#/components/graphicimage) – Erik DdW Feb 08 '21 at 10:35
  • link has been changed: https://primefaces.github.io/primefaces/10_0_0/#/components/graphicimage – tandraschko Feb 08 '21 at 14:44
  • @tandraschko, good polishing/enhancement! Thx! – Erik DdW Feb 10 '21 at 10:02