JSF 2.2 Create a custom Hello World component in 30 seconds

Anghel LeonardNovember 3rd, 2015Last Updated: November 2nd, 2015

2 227 2 minutes read

Let’s jump directly to the cool stuff and say that in JSF 2.0 a custom component was made available to page authors by configuring it in a Facelet tag library (*taglib.xml). Moreover, when the component is mapped in a JAR, a special entry in web.xml is needed to point to the *taglib.xml file. As of JSF 2.2, we don’t need these files anymore. A JSF 2.2 simple custom component contains a single class, and it may look like the following code:

 @FacesComponent(value = "components.HelloWorldComponent", createTag = true)
public class HelloWorldComponent extends UIComponentBase {

 @Override
 public String getFamily() {
  return "hello.world.component";
 }

 @Override
 public void encodeBegin(FacesContext context) throws IOException {
  ResponseWriter writer = context.getResponseWriter();
  writer.write("Hello World!");
 }
}

Most of the hard work is accomplished by the @FacesComponent annotation (javax.faces.component.FacesComponent). All we need to do is set the createTag element to true, and JSF should create the tag for us. Further, we can easily exploit our custom components, as shown in the following code:

 <?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://xmlns.jcp.org/jsf/html"
      xmlns:t="http://xmlns.jcp.org/jsf/component">
 <h:head>
  <title></title>
 </h:head>
 <h:body>
  <t:helloWorldComponent/>
 </h:body>
</html>

Note: Notice that the default namespace of the component is http://xmlns.jcp.org/jsf/component. This is true for all components that don’t have an explicit namespace.

The entire list of elements supported by JSF 2.2 @FacesComponent is as follows:

createTag: This can be set to true or false. When it is set to true, JSF will generate the tag for us (to be more specific, JSF will create, at runtime, a Facelet tag handler that extends ComponentHandler). This element can be used only in JSF 2.2.
tagName: This allows us to indicate the tag name. When createTag is set to true, JSF will use this name for the generated tag. This element can only be used in JSF 2.2.
namespace: This allows us to indicate the tag namespace. When createTag is set to true, JSF will use this namespace for the generated tag. When namespace is not specified, JSF will use the http://xmlns.jcp.org/jsf/ component namespace. This element can be used only in JSF 2.2.
value: This element comes from JSF 2.0 and indicates the component type. The component type can be used as the argument of the Application.createComponent(java.lang.String) method for creating instances of the Component class. As of JSF 2.2, if the value element is missing or is null, JSF will obtain it by calling the getSimpleName() method on the class to which @FacesComponent is attached and lowercasing the first character.