Skip to content

Responsive Layout

In order to get a web application that has a responsive layout, you have to enable one of the templates RESPONSIVE or PRIMEFACES CALIFORNIA by letting getDefaultTemplate() in AppLayoutCustomizationBean return Template.RESPONSIVE or Template.PRIMEFACES_CALIFORNIA.

@ManagedBean(name="layoutCustomizationBean2")
@RequestScoped
public class AppLayoutCustomizationBean
    implements LayoutCustomizationBean.LayoutCustomizationI {

    ...

    @Override
    public LayoutCustomizationBean.Template getDefaultTemplate() {
        return Template.PRIMEFACES_CALIFORNIA;
    }

    ...

}

In order to be allowed to use the PrimeFaces Premium Layout California, you have to buy a license. But the money is worth it: With those premium layouts you get a better looking and working web application compared to when you use Template.RESPONSIVE. The main purpose of Template.RESPONSIVE is to be able to get a quick start without having to buy a license first. If you want to develop a web application for a few users only and those users do more care about the application’s functionality than about the look of the application, Template.RESPONSIVE should be sufficient.

Info

There are plans to support more PrimeFaces Premium Layouts in the future. Amongst them is the free template Nova that is planned for PrimeFaces 6.3.

Responsive Features of PrimeFaces Components

Many of the PrimeFaces JSF components are optimized for responsive layout. And some of them have special responsive layout functionality that can be enabled by setting XML attributes. Some components have an attribute responsive that can be set to true. The default value of that attribute is false for all such components.

  • <p:panelGrid> has the attribute layout, which has to be set to grid in order to enable its responsive layout features (results in <div> being used in HTML instead of <table>).
  • <p:dataTable> has the following attributes that are related to responsive layout:
    • priority (attribute of <p:column>): priority of the column defined as an integer, lower values have more priority, default value is 0
    • reflow: reflow mode is a responsive mode to display columns as stacked depending on screen size, set it to true to enable it