Let’s assume, we use JSF to write an application which offers a simple registration form. This form queries the user for his first name, last name, and email. The page definition might be similar to the one following, but can’t we avoid the repetition of code?

<h:form>

   <div class="inputPart">
       <h:outputLabel for="firstName" 
                                     value="#{msg.lblFirstName}" 
                                     styleClass="label"/>
       <h:message id="msgFirstName" for="firstName" 
                             styleClass="errorMessage"/>
       <h:inputText id="firstName" 
                                 value="#{register.accountRequest.firstName}" 
                                 styleClass="inputFull">
           <f:ajax render="@this msgFirstName"/>
       </h:inputText>
   </div>

   <div class="inputPart">
       <h:outputLabel for="lastName" 
                                     value="#{msg.lblLastName}" 
                                     styleClass="label"/>
       <h:message id="msgLastName" 
                             for="lastName" 
                             styleClass="errorMessage"/>
       <h:inputText id="lastName" 
                                 value="#{register.accountRequest.lastName}" 
                                 styleClass="inputFull">
           <f:ajax render="@this msgLastName"/>
       </h:inputText>
   </div>

   <div class="inputPart">
       <h:outputLabel for="email" 
                                     value="#{msg.lblEmail}" 
                                     styleClass="label"/>
       <h:message id="msgEmail" 
                             for="email" 
                             styleClass="errorMessage"/>
       <h:inputText id="email" 
                                 value="#{register.accountRequest.email}" 
                                 styleClass="inputFull">
           <f:ajax render="@this msgEmail"/>
       </h:inputText>
   </div>

   <div class="buttonBar">
       <h:commandButton value="#{msg.btnRegister}" 
                                         action="#{register.register()}" 
                                         styleClass="button"/>
   </div>

</h:form>

If you take a look at all three input parts, the look very similar. We can use a custom component to define such an input part. This custom component consists of an interface and an implementation.

<?xml version='1.0' encoding='UTF-8' ?>
<html xmlns="http://www.w3.org/1999/xhtml"
           xmlns:cc="http://xmlns.jcp.org/jsf/composite"
           xmlns:h="http://xmlns.jcp.org/jsf/html"
           xmlns:f="http://xmlns.jcp.org/jsf/core">

   <!-- INTERFACE -->
   <cc:interface>
       <cc:attribute name="label"/>
       <cc:attribute name="value"/>
   </cc:interface>

   <!-- IMPLEMENTATION -->
   <cc:implementation>
       <div class="inputPart">
           <h:outputLabel for="input" 
                                         value="#{cc.attrs.label}" 
                                         styleClass="label"/>
           <h:message id="msgInput" for="input"
                 styleClass="errorMessage"/>
           <h:inputText id="input" 
                                     value="#{cc.attrs.value}" 
                                     requiredMessage="#{msg.msgValueRequired}"
                                     styleClass="inputFull">
               <f:ajax render="@this msgInput"/>
           </h:inputText>
       </div>
   </cc:implementation>
</html>

We can use this in the registration form. NetBeans is able to recognize this component and offers all well known features as autocompletion.

By using the custom component, the page definition can clearly be shorter. But, how can we nest a validator tag within the email input, as done in the following page?

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<ui:composition xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                               template="/common/alumniTemplate.xhtml"
                               xmlns:h="http://xmlns.jcp.org/jsf/html"
                               xmlns:c="http://java.sun.com/jsp/jstl/core"
                               xmlns:mm="http://xmlns.jcp.org/jsf/composite/components"
                               xmlns:f="http://java.sun.com/jsf/core">

   <ui:define name="content">
       <h1>Register</h1>

       <h:form>

           <mm:LabeledText label="#{msg.lblFirstName}" 
                                   value="#{register.accountRequest.firstName}" />
           <mm:LabeledText label="#{msg.lblLastName}" 
                                   value="#{register.accountRequest.lastName}"/>

           <mm:LabeledText id="email" label="#{msg.lblEmail}" 
                                   value="#{register.accountRequest.email}">
               <f:validator validatorId="EmailValidator" for="email"/>
           </mm:LabeledText>

           <div class="buttonBar">
               <h:commandButton value="#{msg.btnRegister}" 
                                                 action="#{register.register()}" 
                                                 styleClass="button"/>
           </div>

       </h:form>
   </ui:define>
</ui:composition>

The trick is the usage of an editableValueHolder within the component. The editableValueHolder refers to an id we use calling the component. This is done by the EL #{cc.id}. To get the correct result, it is important to place the  editableValueHolder within the implementation and not within the interface section. And this is the component:

<?xml version='1.0' encoding='UTF-8' ?>
<html xmlns="http://www.w3.org/1999/xhtml"
           xmlns:cc="http://xmlns.jcp.org/jsf/composite"
           xmlns:h="http://xmlns.jcp.org/jsf/html"
           xmlns:f="http://xmlns.jcp.org/jsf/core">

   <!-- INTERFACE -->
   <cc:interface>
       <cc:attribute name="label"/>
       <cc:attribute name="value"/>
   </cc:interface>

   <!-- IMPLEMENTATION -->
   <cc:implementation>
       <cc:editableValueHolder name="#{cc.id}" targets="input"/>       
       <div class="inputPart">
           <h:outputLabel for="input" 
                                         value="#{cc.attrs.label}" 
                                         styleClass="label"/>
           <h:message id="msgInput" for="input" 
                 styleClass="errorMessage"/>
           <h:inputText id="input" 
                                     value="#{cc.attrs.value}" 
                                     requiredMessage="#{msg.msgValueRequired}"
                                     styleClass="inputFull">
               <f:ajax render="@this msgInput"/>
           </h:inputText>
       </div>
   </cc:implementation>
</html>

This blog summarizes the new chapter  “Composite Components” of my book “Web Development with Java and JSF” at a very abstract level. If your not so familiar with theses techniques, I recommend to read the full  chapter in my book. You’ll find detailed explanations of this subject there.