How to create a composite component which switches between inputText and inputSecret?

Question

I'm writing a Facelets composite component that switches between using inputText and inputSecret based on a parameter:

<composite:interface>
    <composite:attribute name="myId" required="true"/>
    <composite:attribute name="secret" required="false" default="false" />
</composite:interface>

<composite:implementation>
    <h:inputSecret rendered="#{cc.attrs.secret}" id="#{cc.attrs.myId}" />
    <h:inputText rendered="#{!cc.attrs.secret}" id="#{cc.attrs.myId}" />
</composite:implementation>

The problem is that I get the following error:

Component ID [JSF mangled id] has already been found in the view.

Answer 1

Use a view build time tag like JSTL <c:if> or <c:choose> instead of the JSF component's rendered attribute. View build time tags are evaluated during constructing the JSF component tree, while the rendered attribute is only evaluated during generating HTML based on the JSF component tree (and thus you still end up with both components with the same ID in the JSF component tree!).

E.g.

<c:if test="#{not cc.attrs.secret}">
    <h:inputText id="input" />
</c:if>
<c:if test="#{cc.attrs.secret}">
    <h:inputSecret id="input" />
</c:if>

See also:

• JSTL in JSF2 Facelets... makes sense?

---

Unrelated to the concrete problem, the myId doesn't make sense. Just give those a fixed ID. In case the reason was the inability to reference them from outside by ajax, head to Referring composite component ID in f:ajax render.