JSF Composite component ID

Question

I created a JSF composite component to extend h:inputBox

        <p class="label clear">
            <label for="#{cc.attrs.id}" class="">
                #{cc.attrs.label}:
            </label>
        </p>
        <p>
            <h:inputText id="#{cc.attrs.id}" value="#{cc.attrs.value}" 
                size="#{cc.attrs.size}" />
            <ui:fragment rendered="#{cc.attrs.optional eq 'optional'}">
                <span class="optional">Optional</span>
            </ui:fragment>
        </p>

To use this component..

<my:inputText id="firstName" label="First Name" value="#{nameTO.firstName}"/>

When this component is rendered on the browser, the ID is of the format "firstName:firstName".

<input type="text" value="" name="firstName:firstName" id="firstName:firstName" gtbfieldid="3028">

Is this a standard naming convention with JSF 2.0 templates? I did not get this with JSF 1.2 Facelets templates. Is there any way to generate the ID as just "firstName" instead of "firstName:firstName"

Answer 1

A JSF 2.0 composite component is not the same as a JSF 1.x/2.x Facelets template.

The composite component has its own ID as well. You're basically reusing it on the components in the implementation of the composite component. You may want to consider to add or rename another ID attribute for the components in the implementation. E.g.

<my:inputText name="firstName" label="First Name" value="#{nameTO.firstName}" />

with

<h:inputText id="#{cc.attrs.name}">

It'll however end up as id="ccId:firstName" in HTML where ccId is either the fixed or autogenerated id of my:inputText. You can also just leave it away and use

<h:inputText id="input">

Which ends up as id="firstName:input" in HTML.