Question

我有一个<p:contentFlow组件，用于显示使用DefaultStreamedContent呈现的一些图像。 <p:commandButton组件的每个.item内都有一个contentFlow，当点击此按钮时，会调用dialog来渲染更大的.active图像尺寸。

现在，我正在通过javascript将图像信息从contentFlow提取到dialog，我认为这有点简陋，最重要的是，当我调用{{1}时} iteration variable我继续得到变量的最后contentFlow var="i"（最后一张图片）。

¿在state组件之间传递信息以便能够使用bean信息的正确方法是什么？删除所选图像等等？

基本上，将JSF/PF从i.id组件中的活动或当前图像传递到<p:contentFlow 的最简单方法是什么单击内部<p:outputLabel课时弹出的<p:dialog ？

来自：

.item

到

<p:contentFlow value="#{fileUploadMB.personalImgList}" var="i" id="contentFlow" styleClass="contentWrapp">                                                                                                        

  <p:graphicImage value="#{fileUploadMB.image}"  styleClass="content"
                onclick="clickFlow(this, event)"                                                                                
                title="Utilice Scroll,Flechas o Arrastre las imagenes">
    <f:param name="id" value="#{i.id}"/>                                

    <div id="image-options">
        <p:commandButton icon="ui-icon-arrow-4-diag"
                         oncomplete="PF('imageDialog').show()"                                                 
                         onclick="modal(this)">
            <input type="hidden" value="#{i.id}" id="AII"/>                                        
        </p:commandButton>         
    </div>                                
  </p:graphicImage>                               
  <div class="caption">#{i.imageName}</div>                                                     
</p:contentFlow>

或者，如果我只是让这太复杂，那么很乐意采取任何其他解决方案。感谢。

Answer 1

因此，为了在点击commandButton时获取当前/有效图像，我必须使用js，设置新托管bean中的activeImage variable并更新包含所单击图像信息的dialog form。

这是我的解决方案，如果有人有更好的解决方案，那么很多人都会感到很沮丧。

所以我所做的是在内容流程中，在js事件上调用onClick函数：

<p:contentFlow value="#{fileUploadMB.personalImgList}"
               var="i" id="contentFlow"
               styleClass="contentWrapp">                                                                                                        

    <p:graphicImage value="#{fileUploadMB.image}"  styleClass="content"
                    onclick="clickFlow(this, event)"                                                                                
                    title="Utilice Scroll,Flechas o Arrastre las imagenes">
        <f:param name="id" value="#{i.id}"/>                                

        <div id="image-options">
            <p:commandButton icon="ui-icon-arrow-4-diag"
                             oncomplete="PF('imageDialog').show()"                                                 
                             onclick="modal(this)"> <!-- this is the js function -->
                <input type="hidden" value="#{i.id}" id="AII"/>                                        
            </p:commandButton>         
        </div>                                
    </p:graphicImage>                               
    <div class="caption">#{i.imageName}</div>                                                     
</p:contentFlow>

在onclick="modal(this)"功能中，我验证了点击的按钮相关的.active状态，并提取了图像信息，并根据此信息，我设置了属性<p:graphicImage组件内的<p:outputLabel和<p:dialog。

function modal(item) {
    if ($(item).parent().parent().hasClass('active')) {
        var src = $(item).parent().siblings('canvas').attr('src');
        $('.image-lightboxer:first-child').attr('src', src);
        var x = $('.active #image-options #AII').val();
        $("#aiin").val(x);
        $("#aibtn").click();
    }
}

创建了一个单独的<h:form style="display:none"，包括其所有孩子。此表单将用于将modal(item) js 函数中提取的信息传递给managed bean变量，该变量将包含未来所有必需信息，例如CRUD基于业务：

<h:form  prependId="false" style="display: none;">
    <h:inputText binding="#{ai}" id="aiin" style="display: none;"/>
    <p:commandButton  id="aibtn" value="aiii" action="#{fileUploadMB.ai(ai.value)}"
                      style="display: none;"
                      update="aiiform"/>
</h:form>

点击<p:commandButton id="aibtn" js功能，此时managed bean中的变量已设置，对话框显示正确的信息：

<p:dialog resizable="false" 
          fitViewport="true"
          widgetVar="imageDialog"
          style="height: 95vh;width: 95vw;"
          id="imageDialogForm"
          modal="true" 
          showEffect="clip" 
          hideEffect="slide"
          closeOnEscape="true"> 
    <p:layout style="height: 90vh; width: 90vw;" >
        <p:layoutUnit position="center" collapsible="true" gutter="0">
            <h:graphicImage value="" width="80%" styleClass="image-lightboxer"/>                                        
        </p:layoutUnit>
        <p:layoutUnit position="east" size="15%" gutter="0" collapsible="true" style="text-align: left;">
            <h:form prependId="false" id="aiiform">
                <p:outputLabel value="#{fileUploadMB.activeUserImage.id}"/>
                <p:separator/>
                <p:outputLabel value="#{fileUploadMB.activeUserImage.imageName}"/>
                <p:separator/>
                <p:outputLabel value="#{fileUploadMB.activeUserImage.imageDescription}"/>
                <p:separator/>
                <p:commandButton value="Eliminar Foto" icon="ui-icon-trash" iconPos="right"
                                 onclick="PF('imageDialog').hide()"
                                 oncomplete="PF('delImg').show()"/>
            </h:form>       

        </p:layoutUnit>
    </p:layout>
</p:dialog>

如何在JSF / PF组件之间传递EL /变量

1 个答案: