Jsf+Primefaces responsive design

Question

I have started working of JSF+Primefaces latest version for my website is this somehow possible i can make my design responsive with these technology. I do not want to use Primefaces mobile or i do not want to create two different page for same functionality

Answer 1

PrimeFaces 6.x has responsive design updates, including a Responsive Grid.

The grid is not a JSF component, it's a simple div with a ui-grid classes.

Example of 3 column layout:

<div class="ui-grid">
   <div class="ui-grid-col-4">Col1</div>
   <div class="ui-grid-col-4">Col2</div>
   <div class="ui-grid-col-4">Col2</div>
 </div>

---

In real case scenarios having only a grid won't fill the requirements so you should usually use some frameworks like bootstrap or foundation.

Both frameworks provide CSS/Javascript rules, they can be applied easily on the JSF components, for example if you have a button:

<h:commandButton styleClass="btn" value="Button">
</h:commandButton>

btn is a bootstrap CSS class.

You might run into some components which won't accept such styles, like the table of Primefaces, in these cases you should write your own CSS media queries/Javascript in order to maintain the responsiveness.

See more

• JSF and Twitter Bootstrap Integration