Generated IDs are too long in RF 4.3.6
Hello!
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>
