Table of contents

Introduction

JSF Composite Components

2.1.

Composite Components Tags

2.2.

Advantages

2.3.

Disadvantages

Uses of Composite Components

3.1.

Example

3.1.1.

Configuring Faces Servlet in 'web.xml'

3.1.2.

Creating the Managed Bean

3.2.

Output

Frequently Asked Questions

4.1.

Why is the <f:facet> tag used?

4.2.

What are custom components in JSF?

4.3.

List the key DataTable operations.

Conclusion

Last Updated: Mar 27, 2024

Composite Components in JSF

Author Sayed Fahim Ali Dawdye

Do you think IIT Guwahati certified course can help you in your career?

Yes

Introduction

Significant components can be found in the newest JavaServer Faces release, JSF 2.0. The Java Enterprise Edition 6 platform will include the most recent iteration of the Java component UI framework for creating dynamic web pages. It has several intriguing new capabilities that simplify the creation and deployment of JSF applications. The composite components are one of them. In the article, we will learn everything there is to know about composite components.

JSF Composite Components

These specialized UI elements are a new and exciting addition to JSF 2.0. A user interface (UI) component is a reusable part of a user interface designed for specific functionality and equipped with a predefined collection of validators, converters, and listeners. A composite component may be utilized in the view as a single component. Creating a JSF 2.0 component is as simple as extracting a collection of JSF components into a file, naming it, and calling the group by its name. It's almost identical to the Java IDE's "extract method" refactoring. Now, using a code example with a basic demo application, we will look at the new composite components functionality in JSF 2.0.

Composite Components Tags

The most popular composite components in JSF tags and their functionalities are shown below.

Advantages

Here, we have listed the advantages of using composite components in JSF.

Composite Components that can be reused to make web project creation more accessible.
Application data transfer to and from the interface is well-defined and uncomplicated.
Simple handling of server requests' states.
The Components are suited for simplified event handling.
Custom UI components can be easily created.

Disadvantages

The following are the disadvantages of composite components in JSF.

JSF treats composite components as if they were a single component.
Composite components are helpful tools, but they are severely constrained. They are not intended to generate complex components. Complex components should be written as classic, Java-centric JSF components.
The performance of composite components lags behind standard JSF components: developing a component class and a renderer class and registering them with JSF.
The performance of standard components is significantly better than that of composite components.

Uses of Composite Components

The composite components in JSF are probably one of the most-used elements. We have listed its uses for better understanding.

It is a reusable, user-created component with defined functions that can be altered.
Like any other JavaServer Faces component, it can have validators, converters, and listeners attached to it.
Any component is a reusable piece of code capable of performing specific functions. An inputText component, for example, can receive user input. Validators, converters, and listeners are also attached to components to perform specified operations.

Example

We will be going through the steps of creating composite components in JSF in detail. We have taken the example of creating a simple login page with the username and password.

faces-config.xml:

<?xml version="1.0" encoding="windows-1252"?>
<faces-config version="2.0"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xi="http://www.w3.org/2001/XInclude"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd">
<navigation-rule>
  <from-view-id>home.xhtml</from-view-id>
  <navigation-case>
     <from-outcome>success</from-outcome>
     <to-view-id>welcome.xhtml</to-view-id>
  </navigation-case>  
</navigation-rule>
</faces-config>

Configuring Faces Servlet in 'web.xml'

We will be updating our 'web.xml' file as below:

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0"
       xmlns="http://java.sun.com/xml/ns/javaee"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
       http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
   <servlet>
       <servlet-name>faces</servlet-name>
       <servlet-class>
         javax.faces.webapp.FacesServlet
       </servlet-class>
   </servlet>
   <servlet-mapping>
       <servlet-name>faces</servlet-name>
       <url-pattern>/faces/*</url-pattern>
   </servlet-mapping>
</web-app>

Creating the Managed Bean

We will be updating the 'home.java' file as below:

import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean(name="home", eager = true)
@SessionScoped
/**********************
Managed Bean
@author codingninjas
**********************/

public class Home implements Serializable {
  private static final long serialVersionUID = 1L;
  private String username;
  private String password;
 
  public String getName() {
     return username;
  }
  public void setName(String username) {
     this.username = username;
  }
  public String getPassword() {
     return password;
  }
  public void setPassword(String password) {
     this.password = password;
  }   
  public String login() {
     return "Success";
  }   
}

You can also try this code with Online Java Compiler

Run Code

home.xhtml:

<?xml version = "1.0" encoding = "UTF-8"?>
<!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://java.sun.com/jsf/html"
  xmlns:f = "http://java.sun.com/jsf/core"
  xmlns:tp = "http://java.sun.com/jsf/composite/codingninjas">
</html>
 
  <h:head>
     <title>
        CodingNinjas Composite Component
     </title>        
  </h:head>
 
  <h:body>
     <h2>CodingNinjas Composite Component Example</h2>
     <hr>
     <h3>Composite Component in JSF</h3>
     <h:form>
     <tp:loginComponent
        usernameLabel = "Username: "
        usernameValue = "#{home.username}"
        passwordLabel = "Password: "
        passwordValue = "#{home.password}"
        loginButtonLabel = "Login"
        loginButtonAction = "#{home.login}" />
     </h:form>
  </h:body>
</html>

welcome.xhtml:

<?xml version = "1.0" encoding = "UTF-8"?>
<!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://java.sun.com/jsf/html"
  xmlns:f = "http://java.sun.com/jsf/core"
  xmlns:composite = "http://java.sun.com/jsf/composite">
 
  <composite:interface>
     <composite:attribute name = "usernameLabel" />
     <composite:attribute name = "usernameValue" />
     <composite:attribute name = "passwordLabel" />
     <composite:attribute name = "passwordValue" />
     <composite:attribute name = "loginButtonLabel" />
     <composite:attribute name = "loginButtonAction" method-signature = "java.lang.String login()" />
  </composite:interface>
 
  <composite:implementation>
     <h:form>
        <h:message for = "loginPanel"/>
       
        <h:panelGrid columns = "2" id = "loginPanel">
           #{cc.attrs.usernameLabel} :
              <h:inputText id = "username" value = "#{cc.attrs.usernameValue}" />
           #{cc.attrs.passwordLabel} :
              <h:inputSecret id = "password" value = "#{cc.attrs.passwordValue}" />
        </h:panelGrid>
       
        <h:commandButton action = "#{cc.attrs.loginButtonAction}" value = "#{cc.attrs.loginButtonLabel}"/>
     </h:form>
  </composite:implementation>
</html>

Output

We will be getting this output when we run the JSF project. The output will be displayed in 'http://localhost:8000/comcomponent/faces/home.xhtml'.

Frequently Asked Questions

Why is the <f:facet> tag used?

In a data table, the header and footer can be customized. A data table component and its children column component can use the header and footer facet to make the data more intelligible.

What are custom components in JSF?

An application may need a new facility or a component with more capability. The creation of new components or the ability to extend existing ones' functionality is made possible by JavaServer Faces technology. The term "custom components" refers to this ability to create.

List the key DataTable operations.

The key Data Table operators are, Show DataTable, Add information Using the data model, edit and delete data.

Conclusion

In this blog, we covered the composite components in JSF. JSF 2.0 added a fantastic tool for creating user-defined components. Simple components are generated quickly. The article describes the advantages, disadvantages, uses, and working of composite components in JSF. Explore our courses on HTML and CSS here for free. You can check out various Java topics and blogs on JSF to follow.

Explore Code Studio to find more exciting stuff. Happy Coding!

Live masterclass

Amazon PowerBI & AI Essentials: Data Visualization Tips

by Abhishek Soni

10 Jul, 2025

01:30 PM

245+ registered

Must-have GenAI skills as developer to not get replaced

by Shantanu Shubham

07 Jul, 2025

08:30 AM

682+ registered

Amazon Data Analyst: Advanced Excel & AI Interview Tips

by Megna Roy

08 Jul, 2025

01:30 PM

189+ registered

Build ChatGPT-like Search Using RAG - Live with Google SDE3

by Saurav Prateek

09 Jul, 2025

01:30 PM

71+ registered

Amazon PowerBI & AI Essentials: Data Visualization Tips

by Abhishek Soni

10 Jul, 2025

01:30 PM

245+ registered

Must-have GenAI skills as developer to not get replaced

by Shantanu Shubham

07 Jul, 2025

08:30 AM

682+ registered

View more events