14.4.1 The Composite Component File

The composite component file is an XHTML file, /web/resources/ezcomp/PrimePanel.xhtml. It has a composite:interface section that declares the labels for the name and a command button. It also declares a managed bean, which defines properties for the name.

<composite:interface>
    <composite:attribute name="namePrompt" 
                         default="Name, word, or phrase: "/>
    <composite:attribute name="calcButtonText" default="Calculate"/>
    <composite:attribute name="calcAction"
                         method-signature="java.lang.String action()"/>
    <composite:attribute name="primeBean"/>
    <composite:editableValueHolder name="nameVal" targets="form:name"/>
</composite:interface>

The composite component implementation accepts the input value for the name property of the managed bean. The h:outputStylesheet tag specifies the stylesheet as a relocatable resource. The implementation then specifies the format of the output, using properties of the managed bean, as well as the format of error messages. The sum value is rendered only after it has been calculated, and the report of whether the sum is prime or not is rendered only if the input value is validated.

<composite:implementation>
    <h:form id="form">
        <h:outputStylesheet library="css" name="default.css" 
                            target="head"/>
        <h:panelGrid columns="2" role="presentation">
            <h:outputLabel for="name"
                           value="#{cc.attrs.namePrompt}"/>
            <h:inputText id="name"
                         size="45"
                         value="#{cc.attrs.primeBean.name}" 
                         required="true"/>
        </h:panelGrid>        
        <p>
            <h:commandButton id="calcButton" 
                             value="#{cc.attrs.calcButtonText}"
                             action="#{cc.attrs.calcAction}">
                <f:ajax execute="name" render="outputGroup"/>
            </h:commandButton>
        </p>
       
       <h:panelGroup id="outputGroup" layout="block">
            <p>
                <h:outputText id="result" style="color:blue"
                              rendered="#{cc.attrs.primeBean.totalSum gt 0}"
                              value="Sum is #{cc.attrs.primeBean.totalSum}" />
            </p>
            <p>
                <h:outputText id="response" style="color:blue"
                              value="#{cc.attrs.primeBean.response}"
                              rendered="#{!facesContext.validationFailed}"/>
                <h:message id="errors1" 
                           showSummary="true" 
                           showDetail="false"
                           style="color: #d20005;
                           font-family: 'New Century Schoolbook', serif;
                           font-style: oblique;
                           text-decoration: overline" 
                           for="name"/>
            </p>
        </h:panelGroup>
    </h:form>
</composite:implementation>

14.4.2 The Using Page

The using page in this example application, web/index.xhtml, is an XHTML file that invokes the PrimePanel.xhtml composite component file along with the managed bean. It validates the user's input.

<div id="compositecomponent">
    <ez:PrimePanel primeBean="#{primeBean}"  
                   calcAction="#{primeBean.calculate}">
    </ez:PrimePanel>
</div>

14.4.3 The Managed Bean

The managed bean, PrimeBean.java, defines a method called calculate, which performs the calculations on the input string and sets properties accordingly. The bean first creates an array of prime numbers. It calculates the sum of the letters in the string, with 'a' equal to 1 and 'z' equal to 26, and determines whether the value can be found in the array of primes. An uppercase letter in the input string has the same value as its lowercase equivalent.

The bean specifies the minimum and maximum size of the name string, which is enforced by the Bean Validation @Size constraint. The bean uses the @Model annotation, a shortcut for @Named and @RequestScoped, as described in Step 7 of To View the hello1 Web Module Using NetBeans IDE.

@Model
public class PrimeBean implements Serializable {
    ...
    @Size(min=1, max=45)
    private String name;
    ...

    public String calculate() {
        ...
    }
}

14.4.4 Running the compositecomponentexample Example

You can use either NetBeans IDE or Maven to build, package, deploy, and run the compositecomponentexample example.