Life-time learner's blog

Tag Archives: input element

[JSF 2] [Overriding Renderer] How to add custom attributes to component

I’ve been working with JSF for almost a year, and sometimes standard components are not enough for rendering rich  HTML5  pages.

For example, if we need to have a placeholder attribute on a particular HTML5 input element, we just write:

<input type="text" name="login" value="" placeholder="User name"/>

Unfortunately, standard JSF 2 library’s component InputText was designed for HTML4 and doesn’t support attribute ‘placeholder’ (as well as other non-standard attributes, such as ‘autofocus’, ‘autocomplete’). So, the following code won’t work because the ‘placeholder’ attribute will be ignored by standard JSF TextRenderer.

<h:inputText value="#{loginBean.login}" placeholder="User name"/>

What if we really need to have placeholder in our input components? One solution would be using third-party libraries, such as PrimeFaces, or RichFaces. The provide placeholder (they call it ‘Water Mark’) and a lot of other features out of the box.

This solution has its drawbacks. Third-party libraries (like PrimeFaces) are quite difficult to cusomize, for the one thing. Besides, they have got their own issues and may not work as we expect. Also, sometimes in some projects we are not able to use these libraries.

We used PrimeFaces 3.1.1 library in our project Reshaka.Ru, and the library really disappointed me. File Upload component doesn’t work properly, dialogs are incorrectly rendered in most browsers. There are many bugs, and it seems to me that PrimeFaces team is not going to fix them. That’s why in our future projects, I won’t use it.

Let’s get back to the main point. 🙂 In order to add custom attribute, we can override standart JSF component Renderer.

Read more of this post