Hello, dear friends. In this video, we will examine the Composite Components. Let's begin. Java Server Faces Technology offers the concept of composite components with facelifts. 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 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.

The most commonly used composite tags are Interface, Implementation, Attribute, InsertChildren, ValueHolder, EditableValueHolder, and ActionSource. The 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.

Implementation defines the implementation of the composite component. If an interface element appears, there must be a corresponding implementation. Attribute declares an attribute that may be given to an instance of the composite component in which this tag is declared. Any child components or template text within the composite component tag in the using page, will be re-parented to the composite component at the point indicated by this tag's placement within the implementation section.

ValueHolder declares that the composite component whose contract is declared by the interface in which this element is nested, exposes an implementation of Java X faces component ValueHolder is suitable for use as the target of attached objects in the using page. EdibleValueHolder declares that the composite component whose contract is declared by the interface in which this element is nested, exposes an implementation of Java X faces component. EdibleValueHolder suitable for use as the target of attached objects in the using page.

ActionSource declares that the composite component whose contract is declared by the interface in which this element is nested, exposes an implementation of Java X faces component. ActionSource is suitable for use as the target of attached objects in the using page. That's all I have for now. Now, let's create a project and use composite components.

Open Eclipse. Create a new project. If you want, you can use any older one. Name will be, Composite Component. Now, under the web pages folder, we create a new folder and name it resources. Now, in this folder, we create another folder and name it template. In the template folder, I will now create the composite component. Create new XHTML page and name it loginComponent. Let's define composite URL. Done. In the body, let's define composite.

First, we need composite interface. Now, define attributes. Email and password. After interface, we need implementation. First, add a form. If you want, you can add a grid panel with two columns. Now, add an output tags for email. Now, an input for email. In Input, we have to set value from composite component. cc.attributes.email. Done. Now, add another output for password. And an input value will be attrs.password. Now, let's also add a button for login. Done. Now, we have finished the component, let's use it in a page. Add new XHTML file, name will be index. First, add component URL again. Now, we can call composite with new tag and body.

That will be enough, let's try. And as you can see, we have a form component. We can use this component in any page. You can add any item you want under or over the form. For example, add a label over the form and add another label under the form. Now, try again. And as you can see, there is no issue. We are now done with the JSF topic. Until the next video, take care.