Simple example

Location

main
|_ java
|_ resources
|_ webapp
   |_ resources
      |_ util
         |_ debug.xhtml

The component (debug.xhtml)

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:cc="http://java.sun.com/jsf/composite">

    <cc:interface>
         <cc:attribute name="hello"/>
    </cc:interface>

    <cc:implementation>
        <h:outputText value="#{cc.attrs.hello}"/>
    </cc:implementation>

</html>

Usage

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:util="http://java.sun.com/jsf/composite/util">
    ...
    <util:debug hello="hello world!"/>
    ...
</html>

Method expression example

Use the loginAction attribute of the composite component as the value for action attribute of a command button

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:cc="http://java.sun.com/jsf/composite">

    <cc:interface>
         <cc:attribute name="loginAction" method-signature="java.lang.String action()"/>
    </cc:interface>

    <cc:implementation>
        <h:form>
            ...
            <h:commandButton value="Submit" action="#{cc.attrs.loginAction}"/>
            ...
        </h:form>
    </cc:implementation>

</html>

Editable value holder (inputs)

<cc:interface>
   <cc:attribute name="name"/>
   <cc:attribute password="password">
   <cc:editableValueHolder name="nameInput" targets="form:name"/>
   <cc:editableValueHolder name="passwordInput" targets="form:password"/>
   <cc:editableValueHolder name="inputs" targets="form:name form:password"/>
</cc:interface>
<cc:implementation>
    <h:form id="form">
        <h:inputText id="name" value="#{cc.attrs.name}"/>
        <h:inputText id="password" value="#{cc.attrs.password}"/>
    </h:form>
</cc:implementation>

<util:login name="#{user.name}" password="#{user.password}">
    <f:validateLength maximum="10" for="inputs"/>
    <f:validateLength minimum="4" for="nameInput"/>
    <f:validator id="com.example.PasswordValidator" for="passwordInput"/>
</util:login>

Value holder (outputs)

<cc:interface>
    <cc:valueHolder name="dateOutput" targets="date"/>
</cc:interface>
<cc:implementation>
    <h:outputText id="date" value="#{myBean.date}"/>
</cc:implementation>

<util:printDate>
    <f:convertDateTime for="date" dateStyle="full" />
</util:printDate>

Action source (commands/links)

<cc:interface>
   <cc:actionSource name="submitButton" targets="form:submit"/>
</cc:interface>
<cc:implementation>
    <h:form id="form">
        <h:commandButton id="submit" value="Submit" action="login"/>
    </h:form>
</cc:implementation>

<util:login>
    <f:actionListener for="submit" binding="#{myBean.login()}"/>
</util:login>

Facet

<cc:interface>
    <cc:facet name="header"/>
    <cc:facet name="error"/>
</cc:interface>
<cc:implementation>
    <cc:renderFacet name="header"/>
    <h:form>
        ...
    </h:form>
    <cc:renderFacet name="error"/>
</cc:implementation>

<util:loginForm>
    <f:facet name="header">
        ...
    </f:facet>
    <f:facet name="error">
       ...
    </f:facet>
</util:loginForm>

Children

By default child components of a composite component are ignored, to render children use cc:insertChildren

<cc:interface>
    <cc:facet name="header"/>
    <cc:facet name="error"/>
</cc:interface>
<cc:implementation>
    <cc:renderFacet name="header"/>
    <h:form>
        ...
    </h:form>
    <cc:renderFacet name="error"/>
    <cc:insertChildren />
</cc:implementation>

<util:loginForm>
    <f:facet name="header">
        ...
    </f:facet>
    <f:facet name="error">
       ...
    </f:facet>
    <h:link>#{myBean.link}</h:link>
</util:loginForm>

Using AJAX in composite components

....

Composite component JAR packaging

components.jar
|_ META-INF
   |_ resources
      |_ css
      |  |_ styles.css
      |_ images
      |  |_ back.png
      |_ util
         |_ icon.xhtml
         |_ login.js
         |_ login.properties
         |_ login.xhtml

Wiki

Oracle JSF Expert 1Z0-896 / Composite components