type=page
status=published
title=The compositecomponentexample Example Application
next=jsf-custom.html
prev=jsf-advanced-cc003.html
~~~~~~
= The compositecomponentexample Example Application


[[GKHVN]]

[[the-compositecomponentexample-example-application]]
The compositecomponentexample Example Application
-------------------------------------------------

The `compositecomponentexample` application creates a composite
component that accepts a name (or any other string). The component
interacts with a managed bean that calculates whether the letters in the
name, if converted to numeric values, add up to a prime number. The
component displays the sum of the letter values and reports whether it
is or is not prime.

The `compositecomponentexample` application has a composite component
file, a using page, and a managed bean.

The source code for this application is in the
tut-install`/examples/web/jsf/compositecomponentexample/` directory.

The following topics are addressed here:

* link:#GKHUU[The Composite Component File]
* link:#GKHVX[The Using Page]
* link:#GKHVQ[The Managed Bean]
* link:#GLECV[Running the compositecomponentexample Example]

[[GKHUU]]

[[the-composite-component-file]]
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.

[source,oac_no_warn]
----
<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.

[source,oac_no_warn]
----
<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>
----

[[GKHVX]]

[[the-using-page]]
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.

[source,oac_no_warn]
----
<div id="compositecomponent">
    <ez:PrimePanel primeBean="#{primeBean}"
                   calcAction="#{primeBean.calculate}">
    </ez:PrimePanel>
</div>
----

[[GKHVQ]]

[[the-managed-bean]]
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 link:webapp003.html#CHDCABHC[7] of
link:webapp003.html#GJWTV[To View the hello1 Web Module Using NetBeans
IDE].

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

    public String calculate() {
        ...
    }
}
----

[[GLECV]]

[[running-the-compositecomponentexample-example]]
Running the compositecomponentexample Example
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

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

The following topics are addressed here:

* link:#GKHVC[To Build, Package, and Deploy the
compositecomponentexample Example Using NetBeans IDE]
* link:#GLEAE[To Build, Package, and Deploy the
compositecomponentexample Example Using Maven]
* link:#GLEEU[To Run the compositecomponentexample Example]

[[GKHVC]]

[[to-build-package-and-deploy-the-compositecomponentexample-example-using-netbeans-ide]]
To Build, Package, and Deploy the compositecomponentexample Example Using NetBeans IDE
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

1.  Make sure that GlassFish Server has been started (see
link:usingexamples002.html#BNADI[Starting and Stopping GlassFish
Server]).
2.  From the File menu, choose Open Project.
3.  In the Open Project dialog box, navigate to:
+
[source,oac_no_warn]
----
tut-install/examples/web/jsf
----
4.  Select the `compositecomponentexample` folder.
5.  Click Open Project.
6.  In the Projects tab, right-click the `compositecomponentexample`
project and select Build.
+
This command builds and deploys the application.

[[GLEAE]]

[[to-build-package-and-deploy-the-compositecomponentexample-example-using-maven]]
To Build, Package, and Deploy the compositecomponentexample Example Using Maven
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

1.  Make sure that GlassFish Server has been started (see
link:usingexamples002.html#BNADI[Starting and Stopping GlassFish
Server]).
2.  In a terminal window, go to:
+
[source,oac_no_warn]
----
tut-install/examples/web/jsf/compositecomponentexample/
----
3.  Enter the following command to build and deploy the application:
+
[source,oac_no_warn]
----
mvn install
----

[[GLEEU]]

[[to-run-the-compositecomponentexample-example]]
To Run the compositecomponentexample Example
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

1.  In a web browser, enter the following URL:
+
[source,oac_no_warn]
----
http://localhost:8080/compositecomponentexample
----
2.  On the page that appears, enter a string in the Name, word, or
phrase field, then click Calculate.
+
The page reports the sum of the letters and whether the sum is prime. A
validation error is reported if no value is entered or if the string
contains more than 45 characters.
