Adam Adam - 7 months ago 32
Java Question

Display multiple <p:graphicImage> on one page

This is a simplified fragment of a larger software. I have a problem with displaying images using p: grapicImage. I want to display images consecutively after “Paste” of each. In general, external graphics is copied and converted by a utility class into DefaultStreamedContent and *.png files, the latter residing in resource/images folder. Using DefaultStreamedContent, when I click the first paste, it shows correctly Image 1 but when I click the second paste, Image 2 shows up and Image 1 disappears and, when I click the third paste, Image 3 shows up but Image 2 also disappears.
Using *.png files, the first paste does not show any images, the second paste shows Image 1 but not image 2 and the third paste shows image 2 and Image 1 but not Image 3. Finally, I can see all images if I click web page reload button after the third paste.
The attached xhtml file contains active display of *.png files.
I tried a variety of approaches including update= various segments, noting that many people had problems with p:grapicImage, and I did not find a remedy. My questions are: why the code behaves this way and how I can make it work properly.

The display of images using the code:

enter image description here




<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Test</title>
</h:head>

<body>
<h:outputStylesheet name="css/styles.css" />

<h:form id="weeklyupdate">
<p:layout id="panel1" style="width:1240px; height:880px;">

<p:layoutUnit styleClass="layout" position="center">
<h:panelGrid columns="2" style="width:1200px">
<p:layout style="width:600px; height:840px;">
<p:layoutUnit position="center">
<p:commandButton value="Paste 1"
actionListener="#{weeklyProjectsUI.pasteImageWork}" ajax="false" />

<p:graphicImage id="imgwork" url="resources/images/work.png"
style="width: 570px; min-height:25%" cache="false" />

<ui:remove>
<p:graphicImage id="imgwork" styleClass="imagedisplay"
value="#{weeklyProjectsUI.imageWork}"
style="width: 570px; min-height:25%" cache="false" />
</ui:remove>
</p:layoutUnit>
</p:layout>
<p:layout style="width:600px; height:840px;">
<p:layoutUnit styleClass="layout" position="center">
<br></br>

<p:commandButton value="Paste 2"
actionListener="#{weeklyProjectsUI.pasteImageEvidence1}"
ajax="false" />

<p:graphicImage id="imgevidence1" styleClass="imagedisplay"
url="resources/images/evidence1.png"
style="width: 570px; min-height:25%" cache="false" />


<ui:remove>
<p:graphicImage styleClass="imagedisplay"
value="#{weeklyProjectsUI.imageEvidence1}"
style="width: 570px; min-height:25%" cache="false" />
</ui:remove>

<br></br>
<br></br>

<p:commandButton value="Paste 3"
actionListener="#{weeklyProjectsUI.pasteImageEvidence2}"
ajax="false" />

<ui:remove>
<p:graphicImage styleClass="imagedisplay"
value="#{weeklyProjectsUI.imageEvidence2}"
style="width: 570px; min-height:25%" cache="false" />
</ui:remove>

<p:graphicImage id="imgevidenc2" styleClass="imagedisplay"
url="resources/images/evidence2.png"
style="width: 570px; min-height:25%" cache="false" />

</p:layoutUnit>
</p:layout>
</h:panelGrid>
</p:layoutUnit>
</p:layout>
</h:form>
</body>

</html>


..and the essential part of the backing bean

public void pasteImageWork() throws IOException{

String work = "work";
imageService.imageCopy(work);
loadImageWork();
}

public void pasteImageEvidence1() throws IOException {

String evidence1 ="evidence1";
imageService.imageCopy(evidence1);
loadImageEvidence1();
}

public void pasteImageEvidence2() throws IOException {

String evidence2="evidence2";
imageService.imageCopy(evidence2);
loadImageEvidence2();

}

public void loadImageWork() throws IOException{

imageWork = imageService.getGraphicImage();
System.out.println("Work loaded: " + imageWork.toString());

}

public void loadImageEvidence1() throws IOException {

imageEvidence1 = imageService.getGraphicImage();
System.out.println("Evidence1 loaded: " + imageEvidence1.toString());

}

public void loadImageEvidence2() throws IOException {

imageEvidence2 = imageService.getGraphicImage();
System.out.println("Evidence2 loaded: " + imageEvidence2.toString());

}


By the way, I am using primefaces 5.3. with eclipse.

Answer

The solution I have chosen involves a display of each image on a separate web page (tab), each created with a UI layer bean method using DefaultStreamedContent , as shown in the example below:

   public void loadImageWork() throws IOException {
    imageWork = imageService.getGraphicImage();
    imageWorkName = imageWork.getName();
    streamWork = imageService.getOs();
 RequestContext.getCurrentInstance().execute("window.open('weeklyWork.xhtml')");

Os is here ByteArrayOutputStream.

All images can be next transferred at once to SQL Server filestream storage as required.