8 Replies Latest reply on Sep 3, 2009 11:40 AM by lvdberg

    After closing Modal Panel is not Rendered

    ambrish_kumar
    ambrish_kumar Sep 2, 2009 9:01 AM

      Hi Everyone,


      I have a modal panel,which is rendered when I press the Add User button as shown below:




      <a:form id="showAddform">
<h:panelGrid columns="1" columnClasses="name" styleClass="panelGrid">
     <a:commandButton id="addUserButton" value="#{messages.btnNewUser}"
     reRender="commonPanel" action="#{userAction.renderAddUser}" />
</h:panelGrid>
</a:form>



      And the code for displaying modal panel is :





      <a:outputPanel id="commonPanel"> 
               <rich:modalPanel id="commonMp" styleClass="modalPanel" top="10"
                    keepVisualState="#{userAction.showOverlay}" autosized="true"
                    minWidth="600" minHeight="100"
                    style="background-image: url('../img/overlayBg.png');background-repeat: repeat;background-color: transparent;"
                    shadowDepth="#{messages.valShadowDepth}"
                    headerClass="modalPanel-header" controlsClass="modalPanel-controls">
                    <f:facet name="header">
                         <h:outputText value="#{userAction.modelPanelHead}" />
                    </f:facet>
                    <f:facet name="controls">
                         <h:graphicImage value="/img/closeButton.png" alt="X" border="0"
                              style="cursor: pointer; cursor: hand;"
                              onclick="Richfaces.hideModalPanel('commonMp')" >
                         <a:support event="onclick" action="#{userAction.closeLayer}" 
                         ajaxSingle="true" disableDefault="true" eventsQueue="closeLayerUserQueue" />     
                         </h:graphicImage>
                    </f:facet>
                    
                    <h:panelGrid styleClass="modalPanel-panelGrid">
                         <h:message styleClass="message" for="commonPanel" style="color:red;"/>
                         <a:form>
                         <h:panelGrid columns="1" columnClasses="name"
                                   rendered="#{userAction.formToLoad=='addUserForm'}"
                                   styleClass="panelGrid">
                                   
                         <s:div styleClass="modalPanel-panelGrid-container-div">
                         
                                   <h:panelGrid columns="1" border="0"
                                        columnClasses="formLabel,formValue" rowClasses="formLabel">
                                        <s:decorate id="userTypeDecoration" template="../layout/edit.xhtml">
                                             <ui:define name="label">#{messages.lblUserType}</ui:define>
                                             <h:selectOneMenu value="#{userBean.userType}" required="true" 
                                             requiredMessage="Value is required">
                                                  <s:selectItems value="#{userAction.userTypes}" var="cs"
                                                       label="#{cs.strUserType}"
                                                       noSelectionLabel="#{messages.defaultListItem}" />
                                                  <s:convertEntity />
                                             </h:selectOneMenu>
                                        </s:decorate>
                                   </h:panelGrid>
                                   <h:panelGrid columns="2" border="0"
                                        columnClasses="formLabel,formValue" rowClasses="formLabel">

                                        <s:decorate id="nameDecoration" template="../layout/edit.xhtml">
                                             <ui:define name="label">#{messages.lblUserName}</ui:define>
                                             <h:inputText id="name" value="#{userBean.strUserName}" required="true" 
                                             requiredMessage="Value is required"/>
                                        </s:decorate>                                        
                                   </h:panelGrid>
                                   <h:panelGrid columns="1" border="0" width="100%"
                                        columnClasses="formLabel,formValue" rowClasses="formLabel">
                                        <s:decorate id="descDecoration" template="../layout/edit.xhtml">
                                             <ui:define name="label">#{messages.lblDescription}</ui:define>
                                             <h:inputTextarea id="desc" rows="8" cols="65"
                                                  value="#{userBean.strDescription}" />
                                        </s:decorate>
                                   </h:panelGrid>                              
                                   
                                   <h:panelGrid width="330" id="save">
                                        <a:commandButton id="saveUserButton" value="#{messages.btnSave}"
                                             reRender="commonPanel"
                                             action="#{userAction.persistUserDetails}"
                                             rendered="#{userBean.iuserId == null}" />     
                                   </h:panelGrid>
                                   
                         </s:div>
                         </h:panelGrid> 
                    </a:form>                         
               </h:panelGrid>
          </rich:modalPanel>
</a:outputPanel>




      I am using the same modal panel but with different form for different operation like edit user , delete user etc.Which form is to be displayed inside the modal panel is decided at run time using formtoload property.


      Now problem is that if I close the modal panel by pressing X (closeLayer method is called), then next time it doesn't reRender. The code for closeLayer() method is 




      public void closeLayer() {          
          super.clearInstance();          
          log.info("Entering closeLayer");
          showOverlay = false;          
          log.info("Exiting closeLayer");           
}




      Any help would be appreciated.


      Thanks


      Ambrish







      • 240 Views
      • Tags:
        • 1. Re: After closing Modal Panel is not Rendered
          lvdberg
          lvdberg Sep 2, 2009 2:01 PM (in response to ambrish_kumar)

          Have you tried to replace the cloxe (x) image with a:support a single a4j:commandButton and add the rerender there and do the closePanel on the oncomplete instead of the onclick?

            • Actions
          • 2. Re: After closing Modal Panel is not Rendered
            ambrish_kumar
            ambrish_kumar Sep 2, 2009 2:38 PM (in response to ambrish_kumar)

            Hi Berg,


            Thanks for the reply.


            I have done some changes,as you suggested. 


            <f:facet name="controls">                    
<a:form ajaxSubmit="true" id="closeLayer">
<a:commandButton action="#{manageRateList.closeLayer}"
oncomplete="Richfaces.hideModalPanel('commonMp')" 
reRender="commonPanel">
<h:graphicImage value="/img/closeButton.png" alt="X" border="0" />
</a:commandButton>                         
</a:form>
</f:facet>



            Now the modal panel is reRendered. But it reRenders only on client side, i mean that getter() methods i.e; userBean.getUserType(),userBean.getStrUserName() and userBean.getStrDescription() are not called. I have set the breakpoints on these methods but they are not called.


            But when first time modal panel renders then getter methods are called.Once I closed the modal panel and reRenders again,getters not called.


            Do you have any idea why it is happening?


            Thanks


            Ambrish


              • Actions
            • 3. Re: After closing Modal Panel is not Rendered
              lvdberg
              lvdberg Sep 2, 2009 7:47 PM (in response to ambrish_kumar)

              Hi,



              The oncomplete is fired after completing the action, and the action only calls closeLayer after which the modalPanel is no longer visible, so that's the reason that you're not seeing the getXX called.


              The trick I usaually do is calling reRender of the content of the modal panel after opening it. I define the action (this is basically pre-setting the value), define the oncomplete (which calls the script to open the modelPanel and the reRender of the content. To make this work, shift the a:outputpanel to inside the modalPanel:




              <rich:modalPanel ...
   <a:outputPanel id="commonPanel">
 .... Content goes here ...
   </a:outputPanel>
</rich:modalPanel >



              Additionally: The 

              <a:commandButton />

              tag has an attribute to define the image so you can take out the h:graphicImage tag if you want.



              Hoepfully this works,


              Leo

                • Actions
              • 4. Re: After closing Modal Panel is not Rendered
                ambrish_kumar
                ambrish_kumar Sep 3, 2009 8:31 AM (in response to ambrish_kumar)

                Hi Berg,


                Thanks for the reply.


                I have done the changes but my problem is still unsolved.




                <a:form id="showAddform">
<h:panelGrid columns="1" columnClasses="name" styleClass="panelGrid">
     <a:commandButton id="addUserButton" value="#{messages.btnNewUser}" 
        oncomplete="Richfaces.showModalPanel('commonMp')"
     reRender="commonPanel" action="#{userAction.renderAddUser}" />
</h:panelGrid>
</a:form>



                and I have shifted the a:outputPanel inside rich:modalPanel.


                But when I pressed the Add User button then modal panel shows the previous values , which I entered after validation failure. This is because now the geeter methods are not called. If they called then null values should be shown in modal panel because I have set the bean instance to null in closeLayer() method.


                Thanks


                Ambrish

                  • Actions
                • 5. Re: After closing Modal Panel is not Rendered
                  lvdberg
                  lvdberg Sep 3, 2009 9:22 AM (in response to ambrish_kumar)

                  HI,


                  I can't see what your beans do, but  have you checked the scope and their state while renedering?
                  A little trick I use is adding the @Create and @Destroy on init/destroy methods on the bean to see what happens.


                  The part of the code you have given, makes me assume that you're using the EntityHome component for userAction. The method userAction.renderAddUser should lead to the creation of a new instance which - i again asume - is the userBean (maybe a @Factory ??).


                  The visible part should work the suggested way (well for me it works without s problem) so it has to do something in another part (form  or beans).

                    • Actions
                  • 6. Re: After closing Modal Panel is not Rendered
                    ambrish_kumar
                    ambrish_kumar Sep 3, 2009 10:17 AM (in response to ambrish_kumar)

                    Hi Berg,


                    Thanks again for the quick reply.


                    First of all I am not using EntityHome component. But I implemented the same functionality using my own interfaces and classes.


                    Initially, I am bijecting the UserBean entity in UserAction component and setting it null in both closeLayer() and renderAddUser(), something like,




                    @In (required=false)
@Out (required=false)
UserBean userBean;





                    and




                    userBean = null;



                    I am not using any @Create method. UserAction is a SFSB with conversation scope. The renderAddUser() method is 




                    @Begin(join = true)
public void renderAddUser() {          
     userBean = null;     
     showOverlay = true;     
}



                    persistUserDetails() method is :




                    @Begin(join = true)
public void persistUserDetails() {
//persist user if validation passes
showOverLay = false;
}





                    and destroy() method is 




                    @Destroy
@Remove
@End
public void destroy() {
}



                    I have checked that the userBean is set to null after closeLayer() method is called.But when I reRender addUser modal panel then userBean getter() not called. I am also setting userBean to null value in renderAddUser() method.


                    Are you getting my problem now ?.


                    Thanks


                    Ambrish








                      • Actions
                    • 7. Re: After closing Modal Panel is not Rendered
                      lvdberg
                      lvdberg Sep 3, 2009 10:49 AM (in response to ambrish_kumar)

                      Hi,


                      I am seeing your point. Some of my first thoughts  looking at the code:


                      - When you start the conversation (renderAdUser) check if the userBean is null, if yes, create a new instance, because you need a new instance to work on.
                      - Place the end conversation on the persistUserDetails method and outject tha userBean by setting userBean to its actual value, Because it's a SFSB persistency is co-handled by the container, so why should you leave the conversation open longer than really necessary?


                      Leo

                        • Actions
                      • 8. Re: After closing Modal Panel is not Rendered
                        lvdberg
                        lvdberg Sep 3, 2009 11:40 AM (in response to ambrish_kumar)

                        Hi,


                        an additional remark. Are you sure that userBean is not null when you render it. EL won't complain, but will not  access getters as you've stated before.


                        Leo

                          • Actions