Performance Problems

[jan_e]

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...

[jan_e]

The second idea works only after reloading the complete page.

[ilya_shaikovsky]

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

[nbelaevski]

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

2., 3. Please post full page source code

[jan_e]

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>

[mail.micke]

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

[jegancareer]

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 [e-mail]- (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

[nbelaevski]

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.

[jegancareer]

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

[nbelaevski]

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.

[jegancareer]

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.

[nbelaevski]

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.

[shadukan]

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.