Generated IDs are too long in RF 4.3.6
michelleh84 May 28, 2015 2:46 AMHello!
We have just migrated our web application from RichFaces 3.3.3 to RichFaces 4.3.6 (an MyFaces 2.2.6).
Now, we are having the problem, that loading/rendering is quite fast, because the generated html files are really huge, through the generated component IDs. It starts with the menu, where the menu item IDs are like "menuForm:j_id_o_5_h_0_2_0_2_5_0_1_1_2_5_0_1_1_1_2_1_2_1_3_1_4_2_5_0_1_1_1_2_1_3_1_4_1_5_2_5_1_2_0_2_5_0_1_2_2_0_2_4", and in the content area, these IDs are longer.
When I use exakt the same code to setup an example project, the IDs wont be that long. So I'm looking for a reason why this project has so long IDs which cause performance issues.
Using fixed IDs is not a good solution for us as we have lots of dynamic content. Any suggestions would be helpful!
Michelle
This is what out template looks like:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich" xmlns:jawr="https://jawr.dev.java.net/jsf/facelets"> <f:view locale="#{sessionBean.language}"> <f:loadBundle basename="labels" var="labels" /> <f:loadBundle basename="messages" var="messages" /> <h:head> <meta charset="utf-8" /> <title><ui:insert name="title">#{labels.websiteTitle}</ui:insert></title> <link rel="icon" href="#{request.contextPath}/img/favicon.ico" type="image/x-icon" /> <h:outputStylesheet name="css/all.min.css" library="theme" /> <h:outputScript name="jquery.js" target="head" /> <h:outputScript name="js/lib.min.js" target="body" library="theme" /> </h:head> <h:body> <rich:popupPanel id="waitModalPanel" autosized="true" moveable="false" resizeable="false" show="#{true}"> <h:graphicImage title="#{labels.please_wait}" value="/img/ajax_process.gif" alt="#{labels.please_wait}" /> </rich:popupPanel> <!-- definition of layout --> <header> <ui:include src="header.xhtml"/> </header> <div class="container"> <div class="sidebar"> <ui:include src="menu.xhtml" /> </div> <div class="contentArea"> <div id="breadcrumbbar"> <div id="breadcrumb"> <x:breadcrumbsHeader /> </div> </div> <div class="content"> <ui:insert name="content" /> </div> <footer> <ui:include src="footer.xhtml" /> </footer> </div> <br style="clear: both;" /> </div> </h:body> </f:view> </html>
And the menu.xhtml, in which we create a dynamic menu with 3 levels
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich"> <!-- menu --> <h:form id="menuForm" styleClass="menuBar" style="display: #{menuBean.menuHidden ? 'none' : 'inline-block'};"> <rich:panelMenu expandSingle="false" bubbleSelection="true"> <c:forEach var="section" items="#{menuBean.sections}"> <h:outputText value="#{labels['bean_MenuSection_'.concat(section)]}" styleClass="sectionHeader" /> <c:forEach var="item" items="#{menuBean.menu[section]}"> <!-- no children --> <!-- do not replace the onbegin and oncomplete tag with status="waitStatus". status attribute does not show the waitStatus for the complete request --> <rich:panelMenuGroup action="#{navigationBean.goToTarget}" rendered="#{empty item.children}" name="#{item.navigationTarget}" mode="ajax" onbegin="#{rich:component('waitModalPanel')}.show()" oncomplete="#{rich:component('waitModalPanel')}.hide()" id="panel#{item.id}"> <x:navigationParams target="#{item.navigationTarget}" topLevel="true" id="#{item.navigationTargetId}" /> <f:facet name="label"> <h:panelGroup> <h:outputText value="#{item.name}" id="label#{item.id}" style="#{navigationBean.currentTargetName eq item.navigationTarget ? 'color: #b10608 !important;':''}" /> <h:outputText value="#{releaseNoteListBean.newReleaseNotes}" styleClass="newReleaseNotes" rendered="#{item.navigationTarget eq 'goReleaseNotes' and releaseNoteListBean.newReleaseNotes > 0}" /> </h:panelGroup> </f:facet> </rich:panelMenuGroup> <!-- has children --> <rich:panelMenuGroup label="#{item.name}" name="#{item.id}" rendered="#{not empty item.children}" leftCollapsedIcon="#{resource['theme:img/triangle.png']}" leftExpandedIcon="#{resource['theme:img/triangleUp.png']}" expanded="#{item.expanded}" leftIconClass="menuIcon" mode="client"> <a4j:ajax event="collapse" listener="#{menuBean.onCollapse(item)}" /> <a4j:ajax event="expand" listener="#{menuBean.onExpand(item)}" /> <c:forEach var="child" items="#{item.children}"> <rich:panelMenuItem label="#{child.name}" name="#{child.navigationTarget}" onbegin="#{rich:component('waitModalPanel')}.show()" oncomplete="#{rich:component('waitModalPanel')}.hide()" action="#{navigationBean.goToTarget}" id="child#{child.id}" mode="ajax" style="#{navigationBean.currentTargetName eq child.navigationTarget ? 'color: #b10608 !important;':''}"> <!-- toggle the menu state to keep groups open (due to menuGroup mode client) --> <f:actionListener binding="#{!item.expanded ? item.toggleExpanded() : null}" /> <x:navigationParams target="#{child.navigationTarget}" topLevel="false" id="#{child.navigationTargetId}" /> </rich:panelMenuItem> </c:forEach> </rich:panelMenuGroup> </c:forEach> </c:forEach> </rich:panelMenu> </h:form> </html>