Java Server Faces – JSF Components

A quick Recap

In the previous tutorial, we have learned about the JSF Request Processing Lifecycle and its Phases in great detail. In this, we will learn about the JSF components.

Background with JSF

At High-Level JSF is an Implementation of Model View Controller – MVC. This pattern provides separation of concerns. In MVC we have user data that is the model, a user interface that displays user data that is View and glue that makes the two able to communicate that is the business logic and the business data. By using MVC, we avoid putting calculation in the View Part, because calculations are part of business logic.

Introduction to the JSF Components with MVC

In MVC were this Components Lies, they are the part of the view layer. The view is built by the composing group of components into trees. These trees then form the user interface. Components are reusable from one user interface to another. Components increase flexibility in the application.

Misconception with JSF

JSP are not the only way to compose a user interface. Coders use JSP file and in that file they use JSF tags and HTML tags to create a view. Simple Servlets or a plain Java class can also make it. Developers use JSP because it extends the JSP features, and Java web developers are mostly familiar with the JSPs.

Supporting Classes of JSF Components

In JSF a component is a group of classes that together provide a reusable piece of web-based user interface coding. Three classes work closely together to make components and bring its usability to the developer and the end user.

  • Render Class
  • UI Component Class
  • JSP Costume Action Class

Render Class definition

It creates the client side representation of the component and takes any input from the client and transform it into something that component can understand. It creates the client side representation of the input and takes whatever user has entered and transforms it into the component understandable format.

UI Component Class definition

This Class is mainly responsible for the data and behavior of the component on the server side. Things that are not present in the render class will be present in the Component Class.

JSP Custom Action definition

This class allows the configuration of the component in a JSP and to attach a particular render to the component. One of the standard components in JSF is UI Command component which can render as a link or a button with the help of command button or command link tags.

User Interface JSF Component Model

JSF UI components are configurable reusable that makes the interface for the user in JSF. A component can be simple like button or table. JSF has a very rich and flexible components architecture that includes several classes. We have the following list of UI component models.

  • Classes for State and behavior of the interface components.
  • Rendering Model
  • Event and Listener Model
  • Conversion Model
  • Validation model

UI Component Classes Explanation

In JSf we have UI component classes and their behavioral interfaces which are used to define a component’s attributes and its functionality. With JSF we can also extend the component and build our custom components, you can do this by defining custom classes. The parent class for all the UI components is the UI Component Base class, default values like state and behavior are set in this class. The component can also class implements behavioral interfaces. To add a particular behavior in the component, we should implement the specific behavioral interface. List of the behavioral interface are:

  • Action Source: component can fire action event with it
  • Editable value holder: adds additional features in editable components
  • Naming Container: Defines the component should have Unique ID
  • State Holder: Within multiple request State of a component will be stored in it
  • Value Holder: It maintains components values.

Render Classes Explanation

For every component we have render classes defined. Each class has it’s on implementations of functions to define various render process for the component.  There could be various renders for the one component.

For example

UI Select One Component has three defined renders

  1. radio button renderer: render the UI Select One Component as a radio button
  2. combo box renderer: render the UI Select One Component as the combo box
  3. list box renderer: render the UI Select One Component as the list box

Every UI Component defined in JSF has two main things a Tag to access it and a renderer to render it.

For example

UI Command Component are rendered in two different ways.

  1. commandButton and Renderer: As Button (like standard button)
  2. commandLink and Renderer: As Link (like hyperlink)

Basic approach for learning JSf is “First Learn the Components and then learn what each tag do”

Important JSF Components for User Interface

Some of the important User Interface components are:

  • Form: It’s Like a form in HTML
  • Input: Subclass of UI output, gets data from user
  • Component: fires an action
  • Output: Displays data to a page
  • Message: It shows localized messages.

These All components may be represented in more than one tag as we have shown above in our example. JSF offers several basic components for developing a web application using HTML. During development, we need more complex components that are not in the standard library. Developers then create their costume components.

From the developer point of view each of the developer should know the various components and if the application needs it can then be easily used.


In JSF, a component is a group of classes that together provide a reusable piece of web-based user interface coding. Three classes work closely together to make components and bring its usability to the developer and the end user.

In this tutorial, we have accomplished following things

  • A short recap of the previous tutorial
  • Background of the Java server faces
  • Misconception with JSF
  • Introduction to the Java Server Faces Components
  • A brief explanation of the JSF Components

In the next post, you will learn about Features of The JSF in more detail.

Hope that you like this tutorial. Stay tuned for more upcoming tutorials. Stay Blessed!

About Author: Uzair Ahmed Khan is Technical Content Writer, Computer Software Blogger and Software Engineer Enthusiast with a keen eye on Java Technologies other Related Developments.