modalPanel performance issue
vh Aug 9, 2007 7:22 PMI have a main page with a <rich:table>, and a few link at the tool bar above the table. and when you click on a "add" link, it pop up a wizard implemented with ModalPanel. What I found is, when I navigate from step 1 to step 2 in the wizard (the navigation is by adding navigation rule in faces-config.xml, the <rich:table> gets reloaded and the tabe data is refetched. Fetch a large table takes quite some time.
Any way to avoid the datatable reloading but just modify the wizard?
Main page:
<h:form id="desktopForm"> <div class="sample-container" > <!-- The values from the dropdown will be copied into these hidden fields when the form is submitted --> <h:inputHidden id="filterId" value="#{allDesktopBean.filterId}" /> <h:inputHidden id="filterType" value="#{allDesktopBean.filterType}" /> <h:inputHidden id="filterIdLabel" value="#{allDesktopBean.filterIdLabel}" /> <h:inputHidden id="filterTypeLabel" value="#{allDesktopBean.filterTypeLabel}" /> <h:inputHidden id="filterBothLabel" value="#{allDesktopBean.filterBothLabel}" /> <table> <tr align="left"> <td> <rich:toolBar styleClass="filterToolbar" id="toolbarId"> <rich:toolBarGroup styleClass="filterToolbarGroup"> <h:outputLink id="addDesktop" value="#" onclick="Richfaces.showModalPanel('addDesktopMp',{width:700,height:500, top:50});selectType();"> <h:outputText value="#{bundle.Add}"/> </h:outputLink> <a4j:commandLink id="editDesktop" actionListener="#{desktopBean.populateData}" oncomplete="Richfaces.showModalPanel('addDesktopMp',{width:700,height:500, top:50});selectType();" reRender="addDesktopMp"> <h:outputText value="#{bundle.Edit}"/> </a4j:commandLink> <a4j:commandLink id="entitle" oncomplete="Richfaces.showModalPanel('entitleMp',{width:400,height:520, top:50})" reRender="entitleMp" > <h:outputText value="#{bundle.Entitle}"/> </a4j:commandLink> <a4j:commandLink id="deleteDesktop" reRender="deleteDesktopMp" oncomplete="Richfaces.showModalPanel('deleteDesktopMp',{width:400,height:300, top:50});initializeDeleteRadioGroups()"> <h:outputText value="#{bundle.DeleteDesktop}"/> </a4j:commandLink> </rich:toolBarGroup> <rich:toolBarGroup styleClass="filterToolbarGroup" location="right"> <h:outputText id="filterFields" value="" /> <h:graphicImage value="/images/downarrow.gif" style="cursor:pointer" onclick="toggleDropDown('desktopForm:filterFields','dropdownMenuFilter')"/> <h:inputText id="filterText" styleClass="barsearch" value="#{allDesktopBean.searchString}" /> <a4j:commandButton id="goButton" styleClass="barsearchbutton" reRender="filterText,myTable" value="#{bundle.Go}" /> <a4j:commandButton id="clearButton" styleClass="barsearchbutton" actionListener="#{allDesktopBean.clearFilter}" reRender="filterText,myTable" oncomplete="initializeCheckboxes();" value="#{bundle.Clear}" /> </rich:toolBarGroup> </rich:toolBar> </td> </tr> <tr> <td> <rich:dataTable id="myTable" rows="20" onRowMouseOver="richTableRowMouseOver('desktopForm:myTable', this)" onRowMouseOut="richTableRowMouseOut('desktopForm:myTable', this)" onRowClick="richTableRowClick('desktopForm:myTable', this)" cellpadding="0" cellspacing="0" width="700" border="0" var="desktop" value="#{allDesktopBean.list}"> <f:facet name="header"> <rich:columnGroup> <rich:column> <a4j:commandLink value="#{bundle.DesktopId}" action="#{tableBean.sortColumn}" reRender="myTable"> <f:param name="sortColumn" value="0"></f:param> </a4j:commandLink> </rich:column> <rich:column> <a4j:commandLink value="#{bundle.Type}" action="#{tableBean.sortColumn}" reRender="myTable" > <f:param name="sortColumn" value="1"></f:param> </a4j:commandLink> </rich:column> <rich:column> <a4j:commandLink value="#{bundle.Entitled}" action="#{tableBean.sortColumn}" reRender="myTable" > <f:param name="sortColumn" value="2"></f:param> </a4j:commandLink> </rich:column> <rich:column> <a4j:commandLink value="#{bundle.VirtualMachines}" action="#{tableBean.sortColumn}" reRender="myTable" > <f:param name="sortColumn" value="2"></f:param> </a4j:commandLink> </rich:column> <rich:column> <a4j:commandLink value="#{bundle.ActiveSessions}" action="#{tableBean.sortColumn}" reRender="myTable" > <f:param name="sortColumn" value="2"></f:param> </a4j:commandLink> </rich:column> </rich:columnGroup> </f:facet> <rich:column> <h:graphicImage value="/images/desktop-indiv.gif" rendered="#{desktop.indivitualType}"/> <h:graphicImage value="/images/desktop-pools_np.gif" rendered="#{desktop.nonPersistentType}"/> <h:graphicImage value="/images/desktop-pools-p.gif" rendered="#{desktop.persistentType}"/> <rich:spacer width="5px"></rich:spacer> <h:outputText value="#{desktop.id}" /> </rich:column> <rich:column> <h:outputText value="#{desktop.type}" /> </rich:column> <rich:column styleClass="cell-centered"> <h:graphicImage value="/images/checkmark.gif" rendered="#{desktop.entitled}"/> </rich:column> <rich:column> <h:outputText value="#{desktop.vmCount}" /> </rich:column> <rich:column> <h:outputText value="#{desktop.sessionCount}" /> </rich:column> <rich:column style="display:none"> <h:outputText value="#{desktop.id}" /> </rich:column> </rich:dataTable> </td></tr> </table> <h:inputHidden id="selectedIdHidden" value="#{desktopBean.selectedId}"/> </div> </h:form> <rich:modalPanel id="addDesktopMp" minHeight="280" minWidth="300" height="400" width="1000" zindex="2000"> <f:facet id="modalHeader" name="header"> <h:outputText id="modalTitle" value="#{bundle.AddDesktop}" /> </f:facet> <a4j:outputPanel id="wizard"> <a4j:include id="includeId" viewId="/pages/desktop/addDesktopType.xhtml" /> </a4j:outputPanel> </rich:modalPanel>
First step in the wizard:
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:rich="http://richfaces.ajax4jsf.org/rich" xmlns:a4j="https://ajax4jsf.dev.java.net/ajax" xmlns:c="http://java.sun.com/jstl/core"> <f:loadBundle basename="com.vmware.vdi.admin.ui.messages.MessageBundle" var="bundle"/> <h:form id="typeForm"> <rich:tree style="width:300px; display:none" value="#{desktopBean.dummyRoot}" var="item" nodeFace="leaf" ajaxSubmitSelection="true"> <rich:treeNode type="leaf" > <h:outputText value="#{item.name}"/> <h:outputText value="#{item.id}" style="display:none"/> </rich:treeNode> </rich:tree> <a4j:keepAlive beanName="desktopBean" /> <table> <tr> <td colspan="2" align="left"> <h:outputText value="#{bundle.DesktopType}"/> </td> </tr> <tr> <td colspan="2" align="left"> <h:outputText value="#{bundle.SelectDesktopType}"/> </td> </tr> <tr> <td colspan="2"> <rich:spacer height="10px"> </rich:spacer> </td> </tr> <tr> <td> <input type="radio" id="manualRadio" name="desktopTypeRadio" value="0"/> </td> <td> <h:outputText value="#{bundle.ManuallyProvisioned}"/> </td> </tr> <tr> <td></td> <td><h:outputText value="#{bundle.ManuallyProvDesc}"/></td> </tr> <tr> <td colspan="2"> <rich:spacer height="10px"> </rich:spacer> </td> </tr> <tr> <td> <input type="radio" id="stickyRadio" name="desktopTypeRadio" value="1"/> </td> <td> <h:outputText value="#{bundle.AutoProvSticky}"/> </td> </tr> <tr> <td></td> <td><h:outputText value="#{bundle.AutoProvStickyDesc}"/></td> </tr> <tr> <td colspan="2"> <rich:spacer height="10px"> </rich:spacer> </td> </tr> <tr> <td> <input type="radio" id="nonStickyRadio" name="desktopTypeRadio" value="2"/> </td> <td> <h:outputText value="#{bundle.AutoProvNonSticky}"/> </td> </tr> <tr> <td></td> <td><h:outputText value="#{bundle.AutoProvNonStickyDesc}"/></td> </tr> <tr> <td colspan="2"> <rich:spacer height="20px"> </rich:spacer> </td> </tr> <tr> <td colspan="2" align="center"> <h:graphicImage id="progress" value="/images/indicator.gif" style="display:none"/> <a4j:commandButton value="#{bundle.Next}" action="next" onclick="showComponent('includeId:typeForm:progress','inline');saveRadioSelection();" reRender="wizard"/> <rich:spacer width="5px"> </rich:spacer> <a4j:commandButton action="cancel" actionListener="#{desktopBean.cancel}" value="#{bundle.Cancel}" oncomplete="Richfaces.hideModalPanel('addDesktopMp');" reRender="wizard"/> </td> </tr> </table> <h:inputHidden id="selectedType" value="#{desktopBean.type}"/> <h:inputHidden id="editingId" value="#{desktopBean.id}"/> <script> selectType(); disableWhenEditing(); function disableWhenEditing() { var stickyRadio = document.getElementById("stickyRadio"); var nonStickyRadio = document.getElementById("nonStickyRadio"); var manualRadio = document.getElementById("manualRadio"); var editingId = document.getElementById("includeId:typeForm:editingId").value; if (!isEmpty(editingId)) { stickyRadio.disabled = true; nonStickyRadio.disabled = true; manualRadio.disabled = true; } else { stickyRadio.disabled = false; nonStickyRadio.disabled = false; manualRadio.disabled = false; } } </script> </h:form> </jsp:root>
navigation rule in richFaces-cofig.xml
<navigation-rule> <from-view-id>/pages/desktop/addDesktopType.xhtml</from-view-id> <navigation-case> <from-action>next</from-action> <to-view-id>/pages/desktop/addDesktopName.xhtml</to-view-id> </navigation-case> <navigation-case> <from-action>cancel</from-action> <to-view-id>/pages/desktop/addDesktopType.xhtml</to-view-id> </navigation-case> </navigation-rule>