richを非表示にできません：fileUpload

Question

アップロードが完了したら画像をアップロードするためにrich：fileUploadを使用するページを作成しようとしています。私はrich：fileUploadコンポーネントを '非表示'にしたい保存する前に画像を切り取ることができるようにjQueryプラグインjCrop選択されたクロップから画像が保存されると、2つのコンポーネントは視認性を再度切り替える必要があります。

しかし、私はrich：fileUploadを 'hide'にすることはできないようです。 jCropの機能と同様に、jCropコンポーネントがうまく表示されます。私が何を豊かにしようとも、fileUploadはまだ画面に表示されます。実際には、豊富な：fileUploadがあるrich：パネルにrendered="#{!uploadAndCrop.newImage}"を追加すると、何も更新されないようです。 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に設定します。

しかし、を再レンダリングし、<rich:fileUpload>またはグループを再レンダリングしないでください。

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

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

    (...) 
</a4j:outputPanel> 

豆：あなただけのFileUploadのそれを自己にレンダリングを使用することはできませんなぜ

Boolean fileUpRendered; 

(...) 

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

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

} 

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