Display multiple <p:graphicImage> on one page
Question
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:
<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.
1 answers
solution1
0 ACCPTED 2016-04-27 17:50:12
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.