11/03/2014

Primefaces and responsive layouts

One of the mayor buzzwords in the last years was "resposive webdesign". What that means is that your webpage responds to the screen that shows the page. A responsive page will have a different layout depending on whether it is shown on a smartphone, a tablet or a PC. This also affects the individual components that make up the page. One of the key features for liferay to support this are responsive themes, created by popular technologies like bootstrap (yes, bootstrap rocks :) ). If you want to know more about responsive design, you can read here: http://en.wikipedia.org/wiki/Responsive_web_design

But what about JSF and primefaces? Good, that I just came across a blog post on the official primefaces blog that explains responsive design for the primefaces DataTable. DataTables don´t leave us much choices when it comes to displaing them on a mobile device: Either we restructure the way we display the data or we don´t show all the data.

The DataTable component uses the following two approaches to deal with changing screen sizes:

Column Toggle

Column Toggle simply means: "Decide which columns are most important to your users and leave away the rest". You, as a developer can prioritize the columns of your DataTable. The columns that have the lowest priority will not be shown when the space on the screen is too small to show them all.

Reflow Mode

Reflow mode transforms the primefaces DataTable into a a list of data. All the data is shown but instead of a horizontal layout it is displayed vertically. Use this if all the data you show is important and should not be left away.

Those features are included in primefaces 5.12, the blogpost can be found here: http://www.primefaces.org/showcase/mobile/dataTable.xhtml


This small introduction to responsive design for primefaces shows that primefaces is still the No 1. choice when it comes to JSF frameworks and it is adressing the issues people care about. Before you simply code your web app with several JS frameworks and then realize that you need a connect to a backend ... take a look at primefaces and see how it integrates responsive web design with reliable and robust java code.


If you have any questions, feel free to leave a comment.