modalPanel performance issue
I 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>
