- 

Available since OmniFaces 2.0

This ViewHandler once installed will during development stage throw an IllegalStateException whenever an automatically generated Faces component ID (j_id...) is encountered in the rendered output. This has various advantages:

  • Keep the HTML output free of autogenerated Faces component IDs.
  • No need to fix the IDs again and again when the client side unit tester encounters an unusable autogenerated ID.
  • Make the developer aware which components are naming containers and/or implicitly require outputting its ID.

Note that this does not check every component for its ID directly, but instead checks the ResponseWriter for writes to the "id" attribute. Components that write their markup in any other way won't be checked and will thus slip through.

Additionally, since version 3.0 it will also log a warning line when prependId="false" is encountered. This is considered bad practice. See also UIForm with prependId=“false” breaks <f:ajax render>.

Installation

Register it as <view-handler> in faces-config.xml.

<application>
    <view-handler>org.omnifaces.viewhandler.NoAutoGeneratedIdViewHandler</view-handler>
</application>

Note that this only runs if Application.getProjectStage() equals to ProjectStage.Development.

Demo source code
<ul>
    <li><h:link><f:param name="component" value="form" />Test <code>&lt;h:form&gt;</code> without ID</h:link></li>
    <li><h:link><f:param name="component" value="input" />Test <code>&lt;h:inputText&gt;</code> without ID</h:link></li>
    <li><h:link><f:param name="component" value="table" />Test <code>&lt;h:dataTable&gt;</code> without ID</h:link></li>
    <li><h:link><f:param name="component" value="subview" />Test <code>&lt;f:subview&gt;</code> without ID</h:link></li>
    <li><h:link><f:param name="component" value="tabview" />Test <code>&lt;p:tabView&gt;</code> without ID</h:link></li>
    <li><h:link><f:param name="component" value="tab" />Test <code>&lt;p:tab&gt;</code> without ID</h:link></li>
</ul>

<c:choose>
    <c:when test="#{param.component eq 'form'}">
        <h:form/>
    </c:when>
    <c:when test="#{param.component eq 'input'}">
        <h:form id="form1">
            <h:inputText><f:ajax /></h:inputText>
        </h:form>
    </c:when>
    <c:when test="#{param.component eq 'table'}">
        <h:form id="form2">
            <h:dataTable value="">
                <h:column>
                    <h:inputText id="input"><f:ajax /></h:inputText>
                </h:column>
            </h:dataTable>
        </h:form>
    </c:when>
    <c:when test="#{param.component eq 'subview'}">
        <f:subview>
            <h:outputText id="output" />
        </f:subview>
    </c:when>
    <c:when test="#{param.component eq 'tabview'}">
        <h:form id="form3">
            <p:tabView />
        </h:form>
    </c:when>
    <c:when test="#{param.component eq 'tab'}">
        <h:form id="form4">
            <p:tabView id="tabview">
                <p:tab />
            </p:tabView>
        </h:form>
    </c:when>
    <c:otherwise />
</c:choose>