无法“隐藏”丰富：fileUpload

Question

我正在尝试创建一个使用 rich:fileUpload 的页面，以（令人惊讶地）上传图像，一旦上传完成我想“隐藏”rich:fileUpload 组件并显示 jQuery 插件 jCrop 以便图像可以在保存前裁剪。从所选裁剪保存图像后，这两个组件应再次切换其可见性。

但是，我似乎无法将 rich:fileUpload 设置为“隐藏”。 jCrop 组件显示良好，jCrop 功能也是如此。但无论我尝试什么，rich:fileUpload 仍然显示在屏幕上。实际上，如果我将 rendered="#{!uploadAndCrop.newImage}" 添加到 rich:fileUpload 所在的 rich:panel 中，似乎没有任何更新。我必须删除它才能显示 jCrop 组件。

我的代码在下面，因为我尝试了很多不同的东西，所以有点乱。如果有人能指出我正确的方向，或者提出更好的方法，将不胜感激。

谢谢

<ui:define name="head">
    <link href="stylesheet/jquery.Jcrop.css" rel="stylesheet"
        type="text/css" />

    <script type="text/javascript" src="scripts/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.Jcrop.js"></script>

    <script language="Javascript">// <![CDATA[ //
     {      
        var $J = jQuery.noConflict();
     }
    //]]> //</script>


</ui:define>

<ui:define name="body">
    <h:form>
        <h:panelGrid columns="2" columnClasses="top,top">

            <h:panelGroup id="uploadgroup">
                <a4j:outputPanel id="uploadpanel">
                    <rich:panel rendered="#{!uploadAndCrop.newImage}">
                        <rich:fileUpload fileUploadListener="#{uploadAndCrop.listener}"
                            maxFilesQuantity="#{uploadAndCrop.uploadsAvailable}" id="upload"
                            immediateUpload="#{uploadAndCrop.autoUpload}"
                            acceptedTypes="jpg, gif, png, bmp"
                            allowFlash="#{uploadAndCrop.useFlash}" listHeight="80px">
                            <ui:remove>
                                onfileuploadcomplete="Richfaces.showModalPanel('croppanel');">
                            </ui:remove>
                            <a4j:support event="onuploadcomplete"
                                reRender="info, uploadgroup, cropgroup" />
                        </rich:fileUpload>
                        <h:outputText value="#{uploadAndCrop.newImage}" id="newimage" />
                        <a onclick="Richfaces.showModalPanel('croppanel');" href="#">Show
                        ModalPanel</a>
                    </rich:panel>
                </a4j:outputPanel>
            </h:panelGroup>



            <h:panelGroup id="info">
                <rich:panel bodyClass="info" rendered="#{!uploadAndCrop.newImage}">
                    <f:facet name="header">
                        <h:outputText value="Uploaded Image Preview" />
                    </f:facet>

                    <rich:dataGrid columns="1" value="#{uploadAndCrop.files}"
                        var="file" rowKeyVar="row">
                        <rich:panel bodyClass="rich-laguna-panel-no-header">
                            <h:panelGrid columns="2">
                                <a4j:mediaOutput element="img" mimeType="#{file.mime}"
                                    createContent="#{uploadAndCrop.paint}" value="#{row}"
                                    style="width:156x; height:71px;" cacheable="false">
                                    <f:param value="#{uploadAndCrop.timeStamp}" name="time" />
                                    <s:conversationId />
                                </a4j:mediaOutput>

                            </h:panelGrid>
                        </rich:panel>
                    </rich:dataGrid>
                </rich:panel>
                <rich:spacer height="3" />
                <br />
                <a4j:commandButton action="#{uploadAndCrop.clearUploadData}"
                    reRender="info, upload" value="Clear Uploaded Image" />
            </h:panelGroup>


            <h:panelGroup id="cropgroup">
                <rich:panel rendered="#{uploadAndCrop.newImage}">
                    <f:facet name="header">
                        <h:outputText value="Crop Image" />
                    </f:facet>
                    <a4j:outputPanel id="crop" layout="inline">
                        <rich:jQuery selector="#cropbox" timing="immediate"
                            query="Jcrop()" />
                        <a4j:mediaOutput element="img"
                            mimeType="#{uploadAndCrop.tempImageStore.mime}" id="cropbox"
                            createContent="#{uploadAndCrop.paintCrop}" value="null"
                            style="width:312; height:142px;" cacheable="false">
                            <f:param value="#{uploadAndCrop.timeStamp}" name="time" />
                            <s:conversationId />
                        </a4j:mediaOutput>
                        <rich:spacer height="3" />
                        <br />
                        <a4j:commandButton action="#{uploadAndCrop.clearUploadData}"
                            reRender="info, upload" value="Crop" />
                    </a4j:outputPanel>
                </rich:panel>
            </h:panelGroup>


        </h:panelGrid>

        <h:commandButton id="save" value="Save"
            action="#{uploadAndCrop.save}">
            <f:param name="cmsCompanyIdCom" value="" />
        </h:commandButton>
        <s:button id="cancelEdit" value="Cancel" propagation="end"
            view="/CmsCompany.xhtml">
            <f:param name="cmsCompanyIdCom" value="" />
        </s:button>
    </h:form>

    <ui:remove>
        <rich:modalPanel id="croppanel" width="350" height="240">
            <f:facet name="header">
                <h:panelGroup>
                    <h:outputText value="Crop Image"></h:outputText>
                </h:panelGroup>
            </f:facet>
            <f:facet name="image">
                <ui:remove>
                    <h:panelGroup>
                        <h:outputText value="close" />
                        <rich:componentControl for="croppanel" attachTo="close"
                            operation="hide" event="onclick" />
                    </h:panelGroup>
                </ui:remove>
            </f:facet>

            <rich:panel rendered="#{uploadAndCrop.newImage}">
                <ui:remove>
                    <f:facet name="header">
                        <h:outputText value="Crop Image" />
                    </f:facet>
                </ui:remove>
                <a4j:outputPanel id="crop" layout="inline">

                    <a4j:mediaOutput element="img"
                        mimeType="#{uploadAndCrop.tempImageStore.mime}" id="cropbox"
                        createContent="#{uploadAndCrop.paintCrop}" value="null"
                        style="width:312; height:142px;" cacheable="false">
                        <f:param value="#{uploadAndCrop.timeStamp}" name="time" />
                        <s:conversationId />
                    </a4j:mediaOutput>


                    <ui:remove>
                        <rich:spacer height="3" />
                        <br />
                        <a4j:commandButton action="#{uploadAndCrop.clearUploadData}"
                            reRender="info, upload" value="Crop" />
                    </ui:remove>
                </a4j:outputPanel>
            </rich:panel>

            <a onclick="Richfaces.hideModalPanel('croppanel');" href="#">Hide
            ModalPanel</a>
        </rich:modalPanel>
    </ui:remove>

</ui:define>

Answer 1

我不知道您的 uploadAndCrop.newImage 方法如何，但您可以使用布尔值并将其在 fileUploadListener 上设置为 false。

但重新渲染 <a4j:outputPanel id="uploadpanel">，而不是 <rich:fileUpload> 或组。

<a4j:outputPanel id="uploadpanel" rendered="#{bean.fileUpRendered}">
   (...)

   <rich:fileUpload...
      <a4j:support event="onuploadcomplete"
                            reRender="info, uploadpanel, cropgroup" />
   </rich:fileUpload>

   (...)
</a4j:outputPanel>

豆子：

Boolean fileUpRendered;

(...)

public void listener(UploadEvent event) throws Exception {
   try {
      (...)

      fileUpRendered = false;
   catch (...) { (...) }

}

//Get set
public get/set fileUpRendered() { }...