What’s New in PrimeFaces 5.2?

Posted on Posted in PrimeFaces

The next version of PrimeFaces is planned to be released on April 6, 2015. Continuing what already has become a tradition, BeyondJava.net gives you a round-up of what’s new and noteworthy in in PrimeFaces 5.2.

The list isn’t complete, by the way. Among other things, the PrimeFaces team has improved the screen reader support and closed more than 200 issues.

Moving to GitHub

Strictly speaking, that’s not a 5.2 topic, but probably it will happen soon after the release. Google is going to close the Google Code repository, so the PrimeFaces team has decided to move to GitHub. That move simplifies contributing code to PrimeFaces. Any developer can fork the repository, develop their changes and send a pull request to the PrimeFaces team. If developers discover and use this option, it could become an important source of innovation in the PrimeFaces ecosystem.

Improved mobile support

Beside the well-known PrimeFaces.jar which is optimized for desktop computers, there’s also PrimeFaces Mobile, offering widgets optimized for cell phones and tablets. The team have started to add responsiveness to the desktop version. So desktop applications also run on mobile devices. However, if you’re targeting the mobile market, you’re better off with the down-scaled mobile branch of PrimeFaces. Since version 5.2 PrimeFaces Mobile also covers two of the most heavily used components: the DataTable and the DataGrid.

Responsive desktop DateTable

Talking of which, the DataTable or the desktop branch of PrimeFaces has also acquired a couple of responsive features in PrimeFaces 5.1 and 5.2. The developers came up with two interesting strategies to scale down nicely on smaller displays:

  • The reflow mode stacks column cells on top of each other if there’s not enough screen estate to display them side-by-side.
  • The column priority mode comes in handy if some columns are less important than others. On smaller screens, only the high-priority columns are displayed. The less crucial columns are silently dropped.

New DataTable listeners

Some time ago, BeyondJava.net reported on useful DataTable events. PrimeFaces 5.2 adds two new events that are called after sorting and filtering a <prime:dataTable />:

<f:event type="org.primefaces.event.data.PostSortEvent" listener="..." />
<f:event type="org.primefaces.event.data.PostFilterEvent" listener="..." />

FontAwesome

Font Awesome is an impressive collection of over 500 icons. PrimeFaces 5.2 makes them available to buttons and menus.

However, you may also want to look at BootsFaces, a framework based on Bootstrap which is designed to be compatible to PrimeFaces. BootsFaces also supports Font Awesome for some time now. It’s easier to configure (actually, you don’t have to do anything), the syntax is more expressive and it offers features for resizing, rotating and spinning the icons. Plus, BootsFaces supports the GLYPHICONS library, pushing the envelope by adding another 670 icons to your toolset.

This example demonstrates some of the possibilities. Along the way, it also shows that PrimeFaces and BootsFaces can be used together:

<b:panelGrid colSpans="4,4,4" size="xs">
	<prime:commandButton value="Edit" icon="fa fa-edit" type="button" />
	<b:commandButton     value="Edit" icon="edit" />
	<b:commandButton     value="Wait" iconAwesome="coffee" />

	<b:icon name="pencil" />
	<b:iconAwesome name="coffee" />
	<b:icon name="globe" size="3x" />

	<b:iconAwesome name="refresh" spin="true" />
	<b:iconAwesome name="shield" rotate="L" />
</b:panelGrid>

Responsive Charts

That’s a minor but useful ticket: Adding the attribute responsive="true" makes for automatic resizing of a chart if the window size grows or shrinks.

Diagram component

The new diagram component is one of my favorites. Mind you – who needs Visio if you can
plot your diagram with a few lines of PrimeFaces code?

Steps component

The PrimeFaces wizard components are somewhat limited in that it requires you to put the entire wizard into a single JSF view. It also has a predefined workflow that may or may not fit your needs. When my team discovered the wizard, we embraced it enthusiastically, only to drop it sometime later when our customer came up with new ideas. The new steps component is a more flexible approach. Basically, it’s simply a menu that doesn’t look like a menu:

<prime:steps activeIndex="1">
	<prime:menuitem value="Read article" />
	<prime:menuitem value="Download PrimeFaces" />
	<prime:menuitem value="Enjoy!" />
</prime:steps>

Miscellaneous

There’s a couple of minor improvements I’ll cover in brevity:

  • The PhotoCam widget has been re-impemented.
  • Dynamic columns for TreeTable allow you to add or remove columns programmatically.
  • Geocoding with GMap component
  • Now the tooltip widget supports Javascript callbacks: beforeShow, onShow and onHide.
  • Portlet support has been improved. But before you get too optimistic: using JSF in a portlet container is still a questionable idea. I’ve been doing it for five years, and still regret it. You’re better off with the technology your portal of choice supports natively. In any case, you should ask yourself if you really want to use a portal server. JSF is used best for big applications. Portlets, in contrast, are meant to be small snippets that work independently of each other. Try to implement a big application in a portlet container, and you run into all sorts of problems.

Improved Search Expression Framework

The search expression framework has several useful improvements. First of all, search expressions now can cover more than one component. That’s useful for jQuery expressions such as @(body>*), which allows you to update everything within the <body> tag, but without replacing the <body> tag itself. Plus, now search expressions can address rows and columns within a table:

<p:commandButton value="update first row" update="myDataTable:@row(0)" />

Improved Client Side Bean Validation

The client side bean validation framework now deals better with labels. They are displayed (whereas previous versions of PrimeFaces silently omitted the labels), and now custom messages can refer to a client side message bundle:

@NotNull(message="{de.test.Message}")

Wrapping it up

To most developers PrimeFaces 5.2 will be a bugfix release. However, it contains a couple of features that make the update worthwhile.

8 thoughts on “What’s New in PrimeFaces 5.2?

  1. Hello Stephan,
    can you tell me where should I put Messages for client side bean validation?

    for example when I have:

    @NotNull(message="{test.should.not.be.null}")
    private String test;

    and my file CustomMessages.properties contains property test.should.not.be.null what configuration do I need to enable messages?

    Thanks in advance

    1. The PrimeFaces manual refers to a client-side message bundle. This message bundle is a hash table within the locales object:

      PrimeFaces.locales ['en_US'] = {
         ... // many other translatations
        messages: {
              'javax.faces.component.UIInput.REQUIRED': '{0}: Validation Error: Value is required.',
             // many other standard messages
             'your.own.error.message': '{0} This is my custom message.'
         }
      };
      

      You find the complete list of locales and message bundles here, along with a couple of explanations.

      1. actually I was thinking about Messages for JSR303.
        I don’t know where was the problem, but when I started application next day in the morning everything was good.

        I’m using ValidationMessages.properties as per JSR303 documentation and also this messages as messages for JSF (defined in faces-config.xml as message-bundle)

        regards

  2. Hi,
    I wanted to know whether form submit on onclick event of Htmlbooleancheckbox present in header of datatable custom component is working fine with primefaces this 5.2 version.
    Because I am facing issue, that onclick event of header checkbox doesn’t return form element as we are submitting form onclick event.
    If anyone have any suggestion.Please Share.

    Thanks in advance

    1. If I get you right, that’s quite a few conditions. You put a checkbox into a custom component into the header of a PrimeFaces datatable? I don’t nothing about your project, so I can’t judge over it, but it sounds pretty sophisticated. That said, let’s collect some ideas how to make it work:

      • Simplify things (for the sake of debugging). Move the checkbox out of the datatable and check if it works now. Put it into the header, but not into a custom component. And so on. Most of the time, you’ll either find your error, or you learn which is the precise condition causing the error, so you can ask more precise questions.
      • Why don’t you simply test the new PrimeFaces version – be it 5.2, 5.3 or a custom-build 5.4?
      • Most developers shy away from it, but it’s possible to debug JSF components. Most PrimeFaces components have been carefully designed, so debugging is simple.
      • If you’re still stuck, ask StackOverflow. Those guys are awesome. Often you get an answer within hours. Don’t forget to add a code snippet. It helps other developers to understand your question.

      Good luck!

Leave a Reply

Your email address will not be published.