you're reading...


Primefaces Review : Strength and Shortcomings

Hi All,

In this post, I would like to discus about Primefaces, a framework based on Jquery, Ajax and component based JSF 2.0. I am new on this framework, I have just used it for 1-2 months because of a new project in the office. So I am open to other opinion besides mine.

The nice thing about Primefaces is its component based approach and the minimal configuration files. Unlike Struts where I need to modify HTML form components one by one, and specify the validation and navigational logic the in xml files. The website primefaces.org even has a demo section where we can see the components in action, copy and paste the logic to our application.

Seems neat huh? Well, that is not the whole picture. In short, I think Primefaces is a promising platform which offers many productivity leverage for developers. But it is not a mature platform yet. When working with Primefaces in a full blown project, we realise the platform does not work in IE10. Although it works with Chrome and Firefox. The display of the components look different in IE10. The width of drop down lists expand. The components oval cornered css is displayed as boxes, making radio buttons displayed as checkboxes.

  • Figure 1:The display in IE 10
  • Figure 2:The display in Chrome
  • Figure 3:The display in Firefox

When I looked in the web about this issue apparently its because Primefaces 3 is using CSS3 to render the display. By default IE9 and IE10 is not configured to render CSS3. They are running in the browser compatibility mode. You will need to go to the developer tools and select the option ‘Browser mode: IE9’ or ‘Browser mode: IE10’ and change the document mode to ‘IE9 standards’. Using this approach, we need to notify the end users to change their browser settings. After changing the settings, the display of the app looks like below. It is better, the radio buttons and components corners look rounded now. But the CSS rendered is still different from Chrome and Firefox.

  • Figure 4:The display in IE 10 after changing the settings
    InIE2 browsermode ie10 documentmode ie9standards

Another options which would be more seamless to the end user is to manually create specials css files for IE. So when loading a page, the app needs to detect the browser the user is using and load the appropriate CSS. One trick I found useful is to provide the radio button picture in the css.

Below the css code for the radio button. You can get the radio button image for the IE browser when it is running in the ‘Browser mode: IE9’ or ‘Browser mode: IE10’

.ui-radiobutton-box {

background: url(“../mylocal/radio_button.png.jsf?ln=images”) no-repeat !important;

border-style: none !important;


.ui-radiobutton .ui-radiobutton-box {

width: 18px !important;

height:18px !important;


But if you use the approach above, remember to change the radio button picture each time you change the Primefaces theme.

Other issueS we found:

1. It is not compatible with the Bootstrap framework, well that’s what we concluded so far. We tried to include a cool looking calendar and drop down list in which the user is able to type search, and there is a watermark tipping the user. They were beautiful. But when we incorporate Primefaces, the CSS displayed by Primefaces is distorted and the commandButton component of Primefaces does not work. Since my project manager insists on using Primefaces, we need to scrap Bootstrap and use Primefaces components instead.

2.It is painful to change the default CSS style of Primefaces, unless you master using Primefaces theme tool, you will end up modifying its default CSS code.

3.Not all the errors related to the Ajax or javascript generated is reported. Sometimes you just need to look closely with your eyes to see the problem. I had an issue in which the p:messages tag would only display the error message if it is ignited by the actionListener attribute and not the action attribute. Apparently this happens because there is a duplicate javascript id at some of the Primefaces components.

Aireen Deviani

Do you enjoy this post? Enter your e-mail address below to receive articles like this one in your mailbox.
  • Cagatay Civici

    For the IE issue you don’t need tell user to switch to compatibility mode, just add a meta tag with ie=edge option to your pages so that IE opens in standard mode. Rounded corners are supported in IE10, for legacy browsers PrimeFaces can’t do much, one option is htc file but that is a performance killer.

    PrimeFaces works really with Bootstrap, especially with layout framework. PrimeFaces even has a Bootstrap theme -> http://blog.primefaces.org/?p=2149

    PrimeFaces CSS is easy to override as well, just make sure your css selectors have higher priority, one way is to make sure they are included after PF css.

    For the javascript issue, there is proper logging and error handling, can’t say much without seeing your code.

    I think if you gain some css experience, you can take the best our of PrimeFaces.

    PrimeFaces is a mature platform, there are thousand of apps done with it and it is 5 years old ;)

Free Updates!

Learn how to grow your indie business while keeping your day job.



Keep updated!

Don't miss out on new articles!