Question

这是较大软件的简化片段。我使用p：grapicImage显示图像时遇到问题。我想在每个“粘贴”之后连续显示图像。通常，外部图形由实用程序类复制并转换为DefaultStreamedContent和* .png文件，后者驻留在resource / images文件夹中。使用DefaultStreamedContent，当我单击第一个粘贴时，它正确显示图像1，但是当我单击第二个粘贴时，图像2显示，图像1消失，当我单击第三个粘贴时，图像3显示但图像2也消失。使用* .png文件，第一个粘贴不显示任何图像，第二个粘贴显示图像1但不显示图像2，第三个粘贴显示图像2和图像1但不显示图像3.最后，如果我单击，我可以看到所有图像第三次粘贴后的网页重新加载按钮。附加的xhtml文件包含* .png文件的活动显示。我尝试了各种方法，包括update =各个段，注意到许多人遇到p：grapicImage的问题，我没有找到补救措施。我的问题是：为什么代码的行为方式以及如何使其正常工作。

使用代码显示图像：

<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>

..和支持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());

}

顺便说一句，我正在使用primefaces 5.3。与日食。

Answer 1

我选择的解决方案涉及在单独的网页（选项卡）上显示每个图像，每个网页使用DefaultStreamedContent创建一个UI图层bean方法，如下例所示：

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

Os在这里是ByteArrayOutputStream。

根据需要，可以立即将所有图像一次传输到SQL Server文件流存储。

在一个页面上显示多个<p：graphicimage>

1 个答案: