12 Replies Latest reply on Feb 20, 2009 11:12 AM by Nick Mpallas

    Performance Problems

    Jan Ellers Newbie

      Hi,

      we have the problem that we have an huge Form with many components. It takes a lot of time to render the page completly. On the page we have around ten ModalPanel's with ListShuttles. To improve the performance we want to render these modal panels after the rest of the page has been loaded.

      Now I have three ideas:

      1.
      I render the div Element where the modal panels are after the rest of the page has been loaded. But how could i do this?

      2.
      I render the div Element when the element when the User click the link to open one of the modal panels. Like this:

      <a4j:commandLink oncomplete="Richfaces.showModalPanel('meetingTypeSearch',{width:450, top:200})" reRender="searchPanels">
       <h:graphicImage url="/img/edit_item.gif" alt="..." title="#{trans.btnEdit}" />
       <a4j:actionparam name="showPopup" value="true" assignTo="#{projectSearchView.showPopup}"></a4j:actionparam>
      </a4j:commandLink>

      But this don't work that way.

      3.
      The Modal Panels are all nearly the same. Just the source and target Values from the ShuttleList differ from each other. So i wanted to assign these attributes with the "binding" attribute. It works until i want to read the values of the TargetValue list... It's empty!

      I would be pleased about some help...

        • 1. Re: Performance Problems
          Jan Ellers Newbie

          The second idea works only after reloading the complete page.

          • 2. Re: Performance Problems
            Ilya Shaikovsky Master

            2-nd approach should works fine. Provide please more complete code of your implementation.

            • 3. Re: Performance Problems
              Nick Belaevski Master

              1. Use a4j:jsFunction and execute it by onload event.

              2., 3. Please post full page source code

              • 4. Re: Performance Problems
                Jan Ellers Newbie

                1.
                Thank you, I will try it

                2.
                The #{projectSearchView.showPopup} is just a normal boolean value with a getter and setter... Here are the modal panels:

                <t:div id="searchPanels" rendered="#{projectSearchView.showPopup}">
                <rich:modalPanel id="meetingTypeSearch" height="200" width="200">
                 <f:facet name="header">
                 <h:outputText value="#{trans.MeetingTitle}" />
                 </f:facet>
                 <h:form>
                 <rich:listShuttle
                 sourceValue="#{projectSearchView.meetingAll}"
                 targetValue="#{projectSearchView.searchData.kofPProcess_kofMeetingType}"
                 converter="#{projectSearchView.listConverter}"
                 var="items"
                 sourceCaptionLabel="#{trans.project_projectSearch_meeting_type}"
                 targetCaptionLabel="#{trans.MeetingChosen}"
                 copyAllControlLabel="#{trans.listShuttleCopyAll}"
                 copyControlLabel="#{trans.listShuttleCopy}"
                 removeAllControlLabel="#{trans.listShuttleRemoveAll}"
                 removeControlLabel="#{trans.listShuttleRemove}"
                 orderControlsVisible="false"
                 fastOrderControlsVisible="false"
                 listsHeight="100">
                 <rich:column>
                 <h:outputText value="#{items.label}"></h:outputText>
                 </rich:column>
                 </rich:listShuttle>
                 <h:panelGroup>
                 <a4j:commandButton
                 value="#{trans.popupOk}"
                 styleClass="btnSubmit"
                 reRender="meeting_type"
                 onclick="Richfaces.hideModalPanel('meetingTypeSearch')" />
                 </h:panelGroup>
                 </h:form>
                </rich:modalPanel>
                
                [...some more modal panels...]
                </t:div>


                3.
                Link to view the modal panel:
                <a4j:commandLink action="#{projectSearchView.createListShuttlePopup}" onmouseup="Richfaces.showModalPanel('ultimativ',{width:450, top:200})" reRender="searchPanels">
                 <h:graphicImage url="/img/edit_item.gif" alt="..." title="#{trans.btnEdit}" />
                 <a4j:actionparam name="listShuttlePopup" value="meeting" assignTo="#{projectSearchView.listShuttlePopup}"></a4j:actionparam>
                </a4j:commandLink>

                The ProjectSearchView:
                public class ProjectSearchView {
                [...]
                private String listShuttlePopup = "meeting";
                private HtmlListShuttle listShuttleObject;
                [...]
                public void createListShuttlePopup() {
                 // Config
                 listShuttleObject = new HtmlListShuttle();
                 List<ListShuttleObject> lSourceValue = null;
                 List<ListShuttleObject> lTargetValue = null;
                 String lSourceLabel = null;
                 String lTargetLabel = null;
                 String lListHeight = null;
                 if (listShuttlePopup.equals(ProjectSearchView.POPUP_MEETING)) {
                 lSourceLabel = "Zur Auswahl stehend";
                 lTargetLabel = "Ausgewählte Items";
                 lListHeight = "100";
                 listShuttleObject.setSourceValue(this.getMeetingAll()); listShuttleObject.setTargetValue(this.searchData.getKofPProcess_kofMeetingType());
                 }
                 listShuttleObject.setSourceCaptionLabel(lSourceLabel);
                 listShuttleObject.setTargetCaptionLabel(lTargetLabel);
                 listShuttleObject.setListsHeight(lListHeight);
                 }
                }

                The Modal Panel:
                <rich:modalPanel id="ultimativ" height="200" width="200">
                 <f:facet name="header">
                 <h:outputText value="Mehrfachselektion" />
                 </f:facet>
                 <h:form>
                 <rich:listShuttle
                 binding="#{projectSearchView.listShuttleObject}"
                 converter="#{projectSearchView.listConverter}"
                 var="items"
                 copyAllControlLabel="#{trans.listShuttleCopyAll}"
                 copyControlLabel="#{trans.listShuttleCopy}"
                 removeAllControlLabel="#{trans.listShuttleRemoveAll}"
                 removeControlLabel="#{trans.listShuttleRemove}"
                 orderControlsVisible="false"
                 fastOrderControlsVisible="false"
                 immediate="true">
                 <rich:column>
                 <h:outputText value="#{items.label}"></h:outputText>
                 </rich:column>
                 </rich:listShuttle>
                 <h:panelGroup>
                 <a4j:commandButton
                 value="#{trans.popupOk}"
                 styleClass="btnSubmit"
                 reRender="project_type,meeting_type,processesss"
                 onclick="Richfaces.hideModalPanel('ultimativ')" />
                 </h:panelGroup>
                 </h:form>
                </rich:modalPanel>


                • 5. Re: Performance Problems
                  Mikael Andersson Master

                  About 2nd option.

                  Since the div isn't rendered in the first place it can't be shown after the reRender, there is no place holder.

                  How about something like this:

                  
                  <t:div id="searchPanels">
                  <t:div id="modalWrapper" rendered="#{projectSearchView.showPopup}">
                  
                   <!-- the modal panels -->
                  
                  </t:div>
                  </t:div>
                  
                  


                  This way there will always be a div (searchPanels) that can be reRendered.

                  Cheers,
                  micke

                  • 6. Re: Performance Problems
                    jegan Newbie

                    Hello,
                    I am having the same performance related problem because of so many popup's in single page.

                    I tried the above solution given by mail.micke@gmail.com- (render the popup only when needed) but the problem what i am getting is the values are not updated to the popup window's fields.

                    Is there any workaround for this?

                    Thanks in advance.
                    Jegan

                    • 7. Re: Performance Problems
                      Nick Belaevski Master

                      Jegan,

                      This:

                      <h:panelGroup id="group">
                       <rich:modalPanel rendered="#{forum5Bean.show}" id="meetingTypeSearch">
                       <h:form>
                       <h:inputText value="#{forum5Bean.data}" />
                       <h:commandLink>
                       Close
                       <a4j:actionparam name="showPopup" value="false" assignTo="#{forum5Bean.show}"></a4j:actionparam>
                       </h:commandLink>
                       </h:form>
                       </rich:modalPanel>
                       </h:panelGroup>
                      
                       <h:form>
                      
                       <a4j:commandLink oncomplete="Richfaces.showModalPanel('meetingTypeSearch',{width:450, top:200})"
                       reRender="group">
                       Show
                       <a4j:actionparam name="showPopup" value="true" assignTo="#{forum5Bean.show}"></a4j:actionparam>
                       </a4j:commandLink>
                       </h:form>
                      works fine for me. Please make sure you have h:form inside rich:modalPanel and that forms are not nested.


                      • 8. Re: Performance Problems
                        jegan Newbie

                        Hello nbelaevski,
                        I tried as you said. I am able to do the following

                        1. Able to show/hide the modalpanel.
                        2. now the Values are updated to modalpanel components as per the functionality.

                        But, The form inside the modalpanel is not getting submitted..(not able to call any action method from modalpanel.)
                        (I checked in your example there is no action call from modalpanel.)



                        My code is below..,

                        ...
                        <h:form>
                        ...
                        <a4j:commandButton value="Search" action="#{controller.retrieveAction}" reRender="showHidePanel"/>
                        ...
                        ...
                        </h:form>
                        ...
                        ...<!-- MODAL PANEL CODE BELOW -->
                        
                        <h:panelGroup id="showHidePanel">
                        <rich:modalPanel id="editPopup"
                        rendered="#{bean.showHidePopups}">
                        
                        
                        <h:form>
                        ..
                        <h:inputText value="#{bean.value}" />
                        <a4j:commandButton value="Ok" action="#{controller.editOKAction}" />
                        </h:form>
                        </rich:modalPanel>
                        </h:panelGroup>
                        
                        ...
                        ...
                        ...
                        


                        When i pressed OK button The editOKAction method from modalpanel is not getting called...
                        This is due to rendering problem of the form in modalpanel?
                        Please tell me where i am going wrong...

                        Thanks a lot for your reply

                        • 9. Re: Performance Problems
                          Nick Belaevski Master

                          I guess "bean" is request scoped in your example. It should be session-scoped in order for modalPanel to be rendered on subsequent requests. Submits from non-rendered components aren't processed.

                          • 10. Re: Performance Problems
                            jegan Newbie

                            My bean is in request scope but the submit button method (controller.editOKAction) is in session mode. so atleast my method should get called with my bean value as null..

                            But my method itself is not getting called.. Please let me know any alternate for this.

                            • 11. Re: Performance Problems
                              Nick Belaevski Master

                              You change value of component "rendered" attribute between requests. It is true on the first request and then false. Action will not fire. You have to use session-scoped bean.

                              • 12. Re: Performance Problems
                                Nick Mpallas Newbie

                                Also please notice not having nested forms.As in the guide is clearly stated...modal post operations don't work if u have nested forms,that's why is better to have modal panels in separate .xhtml page.On the other hand also if u want to avoid changing the scope of ur been to session u can use a4j:keepAlive option.