type=page
status=published
title=Composite Components
next=jsf-facelets006.html
prev=jsf-facelets004.html
~~~~~~
= Composite Components


[[GIQZR]]

[[composite-components]]
Composite Components
--------------------

JavaServer Faces technology offers the concept of composite components
with Facelets. A composite component is a special type of template that
acts as a component.

Any component is essentially a piece of reusable code that behaves in a
particular way. For example, an input component accepts user input. A
component can also have validators, converters, and listeners attached
to it to perform certain defined actions.

A composite component consists of a collection of markup tags and other
existing components. This reusable, user-created component has a
customized, defined functionality and can have validators, converters,
and listeners attached to it like any other component.

With Facelets, any XHTML page that contains markup tags and other
components can be converted into a composite component. Using the
resources facility, the composite component can be stored in a library
that is available to the application from the defined resources
location.

link:#GJCWC[Table 8-3] lists the most commonly used composite tags and
their functions.

[[sthref31]][[GJCWC]]

*Table 8-3 Composite Component Tags*

[width="99%",cols="20%,80%"]
|=======================================================================
|*Tag*|*Function*
|`composite:interface` |Declares the usage contract for a composite
component. The composite component can be used as a single component
whose feature set is the union of the features declared in the usage
contract.

|`composite:implementation` |Defines the implementation of the composite
component. If a `composite:interface` element appears, there must be a
corresponding `composite:implementation`.

|`composite:attribute` |Declares an attribute that may be given to an
instance of the composite component in which this tag is declared.

|`composite:insertChildren` |Any child components or template text
within the composite component tag in the using page will be reparented
into the composite component at the point indicated by this tag's
placement within the `composite:implementation` section.

|`composite:valueHolder` |Declares that the composite component whose
contract is declared by the `composite:interface` in which this element
is nested exposes an implementation of `ValueHolder` suitable for use as
the target of attached objects in the using page.

|`composite:editableValueHolder` |Declares that the composite component
whose contract is declared by the `composite:interface` in which this
element is nested exposes an implementation of `EditableValueHolder`
suitable for use as the target of attached objects in the using page.

|`composite:actionSource` |Declares that the composite component whose
contract is declared by the `composite:interface` in which this element
is nested exposes an implementation of `ActionSource2` suitable for use
as the target of attached objects in the using page.
|=======================================================================


For more information and a complete list of Facelets composite tags, see
the JavaServer Faces Facelets Tag Library documentation.

The following example shows a composite component that accepts an email
address as input:

[source,oac_no_warn]
----
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:composite="http://xmlns.jcp.org/jsf/composite"
  xmlns:h="http://xmlns.jcp.org/jsf/html">

    <h:head>
        <title>This content will not be displayed</title>
    </h:head>
    <h:body>
        <composite:interface>
            <composite:attribute name="value" required="false"/>
        </composite:interface>

        <composite:implementation>
            <h:outputLabel value="Email id: "></h:outputLabel>
            <h:inputText value="#{cc.attrs.value}"></h:inputText>
        </composite:implementation>
    </h:body>
</html>
----

Note the use of `cc.attrs.value` when defining the value of the
`inputText` component. The word `cc` in JavaServer Faces is a reserved
word for composite components. The `#{cc.attrs.`attribute-name`}`
expression is used to access the attributes defined for the composite
component's interface, which in this case happens to be `value`.

The preceding example content is stored as a file named `email.xhtml` in
a folder named `resources/emcomp`, under the application web root
directory. This directory is considered a library by JavaServer Faces,
and a component can be accessed from such a library. For more
information on resources, see link:jsf-facelets006.html#GIRGM[Web
Resources].

The web page that uses this composite component is generally called a
using page. The using page includes a reference to the composite
component, in the `xml` namespace declarations:

[source,oac_no_warn]
----
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://xmlns.jcp.org/jsf/html"
  xmlns:em="http://xmlns.jcp.org/jsf/composite/emcomp">

    <h:head>
        <title>Using a sample composite component</title>
    </h:head>

    <body>
        <h:form>
            <em:email value="Enter your email id" />
        </h:form>
    </body>
</html>
----

The local composite component library is defined in the `xmlns`
namespace with the declaration
`xmlns:em="http://xmlns.jcp.org/jsf/composite/emcomp"`. The component
itself is accessed through the `em:email` tag. The preceding example
content can be stored as a web page named `emuserpage.xhtml` under the
web root directory. When compiled and deployed on a server, it can be
accessed with the following URL:

[source,oac_no_warn]
----
http://localhost:8080/application-name/emuserpage.xhtml
----

See link:jsf-advanced-cc.html#GKHXA[Chapter 14, "Composite Components:
Advanced Topics and an Example,"] for more information and an example.
