Extending Primefaces: Input Components

In one of my previous posts I’ve talked about using Primefaces as a JSF component building API, not just as a JSF componet library. I created a component (s:analogClock) using two elements of the famous JSF library: the CoreRender on the server side, the BaseWidget on the client side. The purpose of this article is to explain how to create input components using the same elements. Our objective is to create a simplified version of StrazzFaces’s Knob.


The first class we are going to analyze is the Knob component:

Like any other component that has a client “brother”, our Knob implements Widget. The most important thing to notice here, is that this class extends UIInput. This is the base class for every JSF input components, in this way we are sure that our component will manage the validation phase properly.


The next step is the client side widget:

As you can see there’s nothing special in the Javascript widget, it just extends BaseWidget like any other Primefaces component.


Last but not least the Renderer:

Like I stated at the beginnig of this post, this Renderer extends the CoreRenderer of Primefaces. This fact let us access the getWidgetBuilder method to obtain a WidgetBuilder instance, useful for building a Knob widget. To make the input component work we have to do two important things:

  • In the encode phase we have to create a <input> HTML element, and we have to give it an unique id and name attribute. A good practice is to use the clientId of the component itself.
  • In the decode phase we have to get the value of our component from the requestParameterMap using the unique name of the component, then we set its submittedValue property. Now our value is ready to be converted and validated.

That’s it! You have just created your first JSF input component! 🙂


With Primefaces it’s very simple to create new JSF components for your applications. In the next post of the “extending Primefaces” series we will see how to add AJAX behaviors to our components.

If you want to see the complete Knob code, just check the StrazzFaces Github repository.

The song of this post is The Sad Song by Fredo Viola from his album The TurnHappy Listening.

Go To Spotify

Flattr this!

Pubblicato in Java, JSF, StrazzFaces Taggato con: , ,
4 comments on “Extending Primefaces: Input Components
  1. Bakk scrive:

    Thank you for this.
    I tried to do the same to have a datepicker in a non-gregorian calendar, but i do not understand where to create the component, the widget and the renderer

    Thank you for your time

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.