3 Replies Latest reply on May 28, 2015 9:03 AM by michpetrov

    Generated IDs are too long in RF 4.3.6

    michelleh84

      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>
      
      
        • 1. Re: Generated IDs are too long in RF 4.3.6
          michpetrov

          In most cases RichFaces isn't doing anything with the ids, the "j_id_xxxx" strings are generated by MyFaces, could you show a bit of the generated HTML? How many menuitems do you have on the page?

          • 2. Re: Generated IDs are too long in RF 4.3.6
            michelleh84

            About 50 menu items.


            Generated html of the first few menu items:

             

                <div class="container">

                  <div class="sidebar"><html xmlns="http://www.w3.org/1999/xhtml"><form id="menuForm" name="menuForm" method="post" action="/pages/home.jsf" style="display: inline-block;" class="menuBar" enctype="application/x-www-form-urlencoded"><div id="menuForm:j_id_o_5_g" class="rf-pm"><input id="menuForm:j_id_o_5_g-value" name="menuForm:j_id_o_5_g-value" type="hidden" value="" /><span class="sectionHeader">Service Operation</span><div id="menuForm:j_id_o_5_h_0_2_0_2_4" class="rf-pm-top-gr"><input id="menuForm:j_id_o_5_h_0_2_0_2_4:expanded" name="menuForm:j_id_o_5_h_0_2_0_2_4:expanded" type="hidden" value="true" /><div id="menuForm:j_id_o_5_h_0_2_0_2_4:hdr" class="rf-pm-top-gr-hdr rf-pm-hdr-exp"><table class="rf-pm-top-gr-gr"><tbody><tr><td class="rf-pm-top-gr-ico menuIcon"><img alt="" class="rf-pm-ico-colps" src="/javax.faces.resource/img/triangle.png.jsf?ln=theme" /><img alt="" class="rf-pm-ico-exp" src="/javax.faces.resource/img/triangleUp.png.jsf?ln=theme" /></td><td class="rf-pm-top-gr-lbl">Incidents and Problems</td><td class="rf-pm-top-gr-exp-ico"><div class="rf-pm-ico-colps rf-ico-transparent-hdr"></div><div class="rf-pm-ico-exp rf-ico-transparent-hdr"></div></td></tr></tbody></table></div><div id="menuForm:j_id_o_5_h_0_2_0_2_4:cnt" class="rf-pm-top-gr-cnt rf-pm-exp"><div id="menuForm:child7" class="rf-pm-itm"><table class="rf-pm-itm-gr"><tbody><tr><td class="rf-pm-itm-ico rf-ico-transparent"></td><td class="rf-pm-itm-lbl">Accumulative tickets/problem tickets</td><td class="rf-pm-itm-exp-ico rf-ico-transparent"></td></tr></tbody></table></div><div id="menuForm:child6" class="rf-pm-itm"><table class="rf-pm-itm-gr"><tbody><tr><td class="rf-pm-itm-ico rf-ico-transparent"></td><td class="rf-pm-itm-lbl">Tickets</td><td class="rf-pm-itm-exp-ico rf-ico-transparent"></td></tr></tbody></table></div></div></div><div id="menuForm:j_id_o_5_h_0_2_0_2_5_0_1_1_2_4" class="rf-pm-top-gr"><input id="menuForm:j_id_o_5_h_0_2_0_2_5_0_1_1_2_4:expanded" name="menuForm:j_id_o_5_h_0_2_0_2_5_0_1_1_2_4:expanded" type="hidden" value="true" /><div id="menuForm:j_id_o_5_h_0_2_0_2_5_0_1_1_2_4:hdr" class="rf-pm-top-gr-hdr rf-pm-hdr-exp"><table class="rf-pm-top-gr-gr"><tbody><tr><td class="rf-pm-top-gr-ico menuIcon"><img alt="" class="rf-pm-ico-colps" src="/javax.faces.resource/img/triangle.png.jsf?ln=theme" /><img alt="" class="rf-pm-ico-exp" src="/javax.faces.resource/img/triangleUp.png.jsf?ln=theme" /></td><td class="rf-pm-top-gr-lbl">Master Data</td><td class="rf-pm-top-gr-exp-ico"><div class="rf-pm-ico-colps rf-ico-transparent-hdr"></div><div class="rf-pm-ico-exp rf-ico-transparent-hdr"></div></td></tr></tbody></table></div><div id="menuForm:j_id_o_5_h_0_2_0_2_5_0_1_1_2_4:cnt" class="rf-pm-top-gr-cnt rf-pm-exp"><div id="menuForm:child21" class="rf-pm-itm"><table class="rf-pm-itm-gr"><tbody><tr><td class="rf-pm-itm-ico rf-ico-transparent"></td><td class="rf-pm-itm-lbl">Clients</td><td class="rf-pm-itm-exp-ico rf-ico-transparent"></td></tr></tbody></table></div><div id="menuForm:child18" class="rf-pm-itm"><table class="rf-pm-itm-gr"><tbody><tr><td class="rf-pm-itm-ico rf-ico-transparent"></td><td class="rf-pm-itm-lbl">Contacts</td><td class="rf-pm-itm-exp-ico rf-ico-transparent"></td></tr></tbody></table></div><div id="menuForm:child19" class="rf-pm-itm"><table class="rf-pm-itm-gr"><tbody><tr><td class="rf-pm-itm-ico rf-ico-transparent"></td><td class="rf-pm-itm-lbl">Customers</td><td class="rf-pm-itm-exp-ico rf-ico-transparent"></td></tr></tbody></table></div><div id="menuForm:child22" class="rf-pm-itm"><table class="rf-pm-itm-gr"><tbody><tr><td class="rf-pm-itm-ico rf-ico-transparent"></td><td class="rf-pm-itm-lbl">Locations</td><td class="rf-pm-itm-exp-ico rf-ico-transparent"></td></tr></tbody></table></div><div id="menuForm:child17" class="rf-pm-itm"><table class="rf-pm-itm-gr"><tbody><tr><td class="rf-pm-itm-ico rf-ico-transparent"></td><td class="rf-pm-itm-lbl">Mapping data (115)</td><td class="rf-pm-itm-exp-ico rf-ico-transparent"></td></tr></tbody></table></div><div id="menuForm:child15" class="rf-pm-itm"><table class="rf-pm-itm-gr"><tbody><tr><td class="rf-pm-itm-ico rf-ico-transparent"></td><td class="rf-pm-itm-lbl">Participant master data (115)</td><td class="rf-pm-itm-exp-ico rf-ico-transparent"></td></tr></tbody></table></div></div></div><div id="menuForm:j_id_o_5_h_0_2_0_2_5_0_1_1_2_5_0_1_1_1_2_1_3_1_4_1_2_2_4" class="rf-pm-top-gr"><input id="menuForm:j_id_o_5_h_0_2_0_2_5_0_1_1_2_5_0_1_1_1_2_1_3_1_4_1_2_2_4:expanded" name="menuForm:

            • 3. Re: Generated IDs are too long in RF 4.3.6
              michpetrov

              So it starts at the panelGroup, our renderer simply does this:

               

              writer.startElement(HtmlConstants.DIV_ELEM, component);
              writer.writeAttribute(ID_ATTRIBUTE, component.getClientId(context), "clientId");
              

               

              I have no idea why the renderer generates the ids the way you see it (and ignores the values set by you). If you can't reproduce it outside the app it's probably due to some settings, like web.xml