Java Server Faces (JSF) — To Components and beyond

In the last blog post, we were introduced to how to access the JSF library, Managed Beans, and a couple examples of useful functions contained within the library. In this blog post, we will explore both JSF Components and templates, and how they can be used to streamline and simplify web development.

What are Components?

A JSF component is once of the basic building blocks of creating a JSF user interface. A components represents a configurable element in the user interface. They can be something as simple as a text box and button, or as complicated as dynamically created tables. Components allow developers to reuse code in different situations that require similar functionality. For example: A developer could create a “login” component, which would have a validator and redirector attached to it. This component could then be put into different pages, and would preform the same functionality, without having to rewrite the code for the form other supporting code.

Components can be attached to specific Java objects as well. They can also be attached to each other or combined. Components that are attached together are called Composite Components or Facets, while combining components together creates a view or template.

What is a JSF Template?

A template in the context of JSF is basically a structure for organizing and using JSF components. Luckily, NetBeans has built in support for using JSF Templates and will help you choose which template would be best for your project through the wizard.

Example of the JSF wizard:

Once you implement a template, you can add new or existing components into sections of the template, as well as writing normal html code. After implementation, a CSS file will be generated. This file will control styling for the JSF components, however any user defined styling will override template styling. For example, in the template you can specify an alignment and orientation for a component, but if you have a different alignment defined in a separate CSS file, the browser will use that rather than the JSF template CSS.


Using templates and components allows developers to use pre-made code and formatting to speed up development and construction of web pages. Components can cut down on the amount of code needed to create UI elements. In the next blog post, I will be introducing you to more advanced JSF functions.

Like what you read? Give toddsewers a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.