What’s New in PrimeFaces 5.1?

After two consecutive major, quite revolutionary releases it’s time for consolidation. Çağatay Çivici and his team seem to think the same and call the new release of PrimeFaces a minor version (5.1). It’s not that small, by the way: I’ve counted 660 commits, Granted, many commits deal with the new showcase, some deal with PrimeUI, but what remains is still impressive. According to the PrimeFaces blog the new version brings 225 filed improvements and more than 140 bug fixes.

So what’s new in PrimeFaces 5.1?

Bug fixes and compatibility

First of all, there’s a lot of bug fixes. Elite edition users already have them, but user of the community edition probably should update to PrimeFaces 5.1. As far as I can see the new version doesn’t contain breaking changes, so migration from 5.0 should be painless. AngularFaces and its demo applications for one run flawlessly.

Responsive layout

The number one killer feature of PrimeFaces 5.1 is the new responsive grid. You know Bootstrap? That’s the same idea. Divide the screen into twelve columns, align every widget to the resulting grid and you’ve got a good recipe to write nice-looking applications. Plus, it’s possible to stack the column on smaller devices. If screen estate is scarce, there’s no point in displaying everything in a large horizontal row that needs to be scrolled. Most people prefer to scroll vertically.

For some reason it’s very difficult to use Bootstrap’s CSS file in a PrimeFaces application, so the team chose to write their own CSS file. It’s pretty small – roughly 1.4 KB – and it can be optimized for the PrimeFaces component suite (and vice versa). It also seems to be simpler than Bootstrap, which provides different CSS classes for different devices. PrimeFaces 5.1 provides just one set of classes: ui-grid-col-1 through ui-grid-col-12. For instance, a typical design consisting of a header, a content area and a footer may be implemented like so:

<div class="ui-grid headerDiv ui-grid-responsive">
  <div class="ui-grid-row">
    <div class="ui-grid-col-12">
      header
    </div>
  </div>
</div>
<div class="ui-grid  ui-grid-responsive">
  <div class="ui-grid-row">
    <div class="ui-grid-col-2 menuDiv">small menu column</div>
    <div class="ui-grid-col-8 contentDiv">wide column</div>
    <div class="ui-grid-col-2 sidebarDiv">small sidebar column</div>
   </div>
</div>
<div class="ui-grid footerDiv  ui-grid-responsive">
  <div class="ui-grid-row">
    <div class="ui-grid-col-12">
      footer
    </div>
  </div>
</div>

We’ll come back to responsive grids in a minute.

Input switch

<prime:inputSwitch > has moved from PrimeFaces Mobile (where it used to be called <pm:switch />) to the main branch of PrimeFaces. Basically, it’s a checkbox, but one that looks like a switch. In other words, it matches the usual design of cell phone apps. Sometimes it’s also useful in a desktop application. I use it in the settings form of one of the AngularFaces demos:

<h:panelGrid columns="3">
  <prime:inputSwitch offLabel="JSF" onLabel="AF" 
                     value="{settingsBean.useAngularFacesAJAX" label="AJAX engine" />
  <prime:inputSwitch value="#{settingsBean.useHTML5Style}" label="Use HTML5-friendly markup"/>
  <prime:inputSwitch value="#{settingsBean.usePrimeFaces}" label="Use PrimeFaces" />
</h:panelGrid>

As is so often the case when I write an article, an AngularFaces 2.0 feature found its way into my example: labels and messages are added automatically. That’s the nice thing about AngularFaces 2.0+: its design is flexible enough to work with components I never thought of when I implemented the library.

By the way, the example also shows that it’s possible to use both the responsive layout of Bootstrap and the new PrimeFaces grid classes at the same time. Nothing I’d really recommend – better you choose one and use it consequently – but at least in my example it works fine.

Responsive panel and data grids

Maybe you found it’s a bit surprising to find so many <div> tags in the responsive grid example. Shouldn’t PrimeFaces provide a component to make things simpler? As it turns out, the <prime:panelGrid> and the <prime:dataGrid> components have some built-in support for responsive grids. By default, it renders HTML tables. Beginning with PrimeFaces 5.1 you can also make it render tabular divs. Not only make these panel grids your web-designer happy (remember, there’s a wide-spread aversion against HTML tables, although most of the reasons for this have long since gone), they are also more compact version of responsive grids:

<prime:panelGrid columns="3" layout="grid">
  <prime:inputSwitch offLabel="JSF" onLabel="AF" value="{settingsBean.useAngularFacesAJAX" label="AJAX engine"/>
  <prime:inputSwitch value="#{settingsBean.useHTML5Style}" label="Use HTML5-friendly markup"/>
  <prime:inputSwitch value="#{settingsBean.usePrimeFaces}" label="Use PrimeFaces" />
</prime:panelGrid>

Note that the columns are equal-sized. In this particular example, that’s a bad thing. The labels are cramped in a small column, while the messages column claims 33% of the place. Thing is, there are no messages, so it would be nice to make the second and the third column smaller. In theory, you can achieve this by setting the required classes in the columnClasses attribute, but PrimeFaces 5.1 RC1 doesn’t recognize that. Hence both classes are added, and it’s up to the browser’s implementation which of the two CSS classes is used.

Speaking of the panel grid, there’s another new feature that may come in handy every once in a while: you can repeat both columns and rows using <ui:repeat>. That’s also possible in table headers (not to be confused with dynamic columns, a feature that could have been with &lt:ui:repeat>, too, but hasn’t – see the PrimeFaces show case).

Ribbons

Another cool component is the ribbon. In a way, it’s the opposite of the input switch: it makes only sense in a desktop-centric environment. The ribbon components looks just like the ribbon toolbar of MS Office products. I’ll show you two examples, one from the PrimeFaces showcase demonstrating how the component is meant to be used, and another one that may become part of an AngularFaces demo and shows how flexible the ribbon component is. It even supports input fields:

<prime:ribbon>
  <prime:tab title="AJAX Response Statistics">
    <prime:ribbonGroup label="Options" style="width:90px">
      <prime:commandButton value="New" icon="ui-icon-pencil"
        type="button" />
      <prime:commandButton value="Save" icon="ui-icon-disk"
        type="button" />
    </prime:ribbonGroup>
    <prime:ribbonGroup label="Memory" style="width:245px">
      <h:panelGrid columns="2" styleClass="ui-widget"
        style="text-align:right">
        <prime:inputText value="764 Bytes" label="request size:"
          addmessage="false" />
        <prime:inputText value="384 Bytes" label="response size:"
          addmessage="false" />
      </h:panelGrid>
    </prime:ribbonGroup>
    <prime:ribbonGroup label="Performance" style="width:280px">
      <h:panelGrid columns="2" styleClass="ui-widget"
        style="text-align:right">
        <prime:inputText value="23 ms" label="time spent on server:"
          addmessage="false" />
        <prime:inputText value="75 ms" label="time spent on client:"
          addmessage="false" />
      </h:panelGrid>
    </prime:ribbonGroup>
  </prime:tab>
</prime:ribbon>

Bar codes

<prime:barcode> is a component I could have used years ago. It generates a wide range of bar codes and QR codes. At the time we had to look for a bar code library, figure out how to use it and how to use it in a JSF application. PrimeFaces 5.1 delivers it out of the box. Pretty cool.

<prime:panelGrid columns="2">
  <prime:barcode value="5675354567230" type="ean13" />
  <h:outputText value="5675354567230" />
  <prime:barcode value="5675354567230" type="postnet" />
  <h:outputText value="5675354567230" />
  <prime:barcode value="http://www.angularfaces.com" type="qr" />
  <h:outputText value="http://www.angularfaces.com" />
</prime:panelGrid>
<dependency>
  <groupId>net.glxn</groupId>
  <artifactId>qrgen</artifactId>
  <version>1.4</version>
</dependency>
<dependency>
  <groupId>net.sf.barcode4j</groupId>
  <artifactId>barcode4j</artifactId>
  <version>2.1</version>
</dependency>

The bar code generator itself is an external library, so you have to add one or two libraries to your project. As the name implies, the qrgen libraries is only required if you need QR codes.

Minor (but useful) improvements

That were the big tickets. There are plenty of interesting minor tickets: FileUpload now tidies it’s temporary directory (provided you add the listener class to the web.xml). The team cared a lot about accessibility. Mind you: how many web applications do you know that can be used without the mouse, or which are optimized for screen readers? PrimeFaces makes both things possible. For instance it’s possible to sort a data table by hitting the tab key until the sort icons get the focus, and then hitting the enter key to trigger the actual sorting.

Custom data table paginators

I almost forgot to mention a very cool improvement: custom layout of data table paginators. A lot of work went into the data table: they improved the implementation of the scrollable data table, improved lazy loading and – that’s a cool one – made it possible to use a custom layout of the data table paginator. I even managed to include an AngularJS clock in the paginator row:

<prime:dataTable value="#{carPool.selectedCars}" var="car" id="tbl"
  paginator="true" rows="10"
  paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} 
                     {NextPageLink} {LastPageLink}  
                     AngularJS time: {{getTime()}}  
                     {Exporters}">
  <f:facet name="{Exporters}">
    <h:commandLink  style="float:right">
      <img src="csv.png" width="24" />
      <prime:dataExporter type="csv" target="tbl" fileName="cars" />
    </h:commandLink>
  </f:facet>
  <prime:column headerText="brand">#{car.brand}</prime:column>
  <prime:column headerText="type">#{car.type}</prime:column>
  ...
</prime:datatable>

All you need to do is to add the attribute “paginatorTemplate”. This parameter itself is a bit limited. It can take text, a selection of predefined keywords (such as “{FirstPageLink}” and “{NextPageLink}”), but little else. In particular, it mustn’t contain HTML tags. You can work around this limitation by defining a facet which is referenced within the template. In our example, it’s “{Exporters}”. You can define multiple facets and put them at arbitrary positions within the template (i.e. not necessarily at the end).

Wrapping it up

PrimeFaces 5.1 may be a consolidation release, but who’s to say consolidation is boring?

Dig deeper:

PrimeFaces showcase
responsive layout

2 thoughts on “What’s New in PrimeFaces 5.1?

  1. tutor

    is possible to use this new 1,4KB Flexible-Response-Design CSS file without PrimeFaces?
    In my application not all pages uses Primefaces.
    Is there any support/linked with current components like autocomplete? I want only to flexible-change only the input part and not button one.

    Reply
    1. Stephan Rauh Post author

      Yes, it’s possible. PrimeFaces components make using their responsive grid more comfortable, but basically the CSS grid is only a couple of classes you can use in every HTML page. You can download it from the PrimeFaces source code repository.

      However, I suggest another approach. BootsFaces is a JSF framework that makes using Bootstrap a breeze. BootsFaces plays nicely with PrimeFaces (especially if you use only the structural components, such as <b:row>, <b:column> and <b:panelGrid>). At the same time it offers the full wealth of Bootstrap features. For instance, have a look at our PanelGrid demo: BootsFaces <b:panelGrid />.

      As for your second question: I’m sorry, I didn’t get it. Would you mind to reword your question?

      Reply

Leave a Reply

Your email address will not be published.