11

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

user3696143
  • 301
  • 2
  • 6
  • 23
  • 1
    http://www.primefaces.org/showcase/ try to check new primefaces showcase with desktop PC, tablet and mobile phone (for example using Ripple in Chrome ). It is "responsive" and looks nice on all devices. Tbh did not tested it – anotherUser Jul 02 '14 at 13:14

1 Answers1

14

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

Dave Jarvis
  • 30,436
  • 41
  • 178
  • 315
Hatem Alimam
  • 9,968
  • 4
  • 44
  • 56
  • You may not use `div` directly as this is a plain HTML tag which is not a JSF component. Instead, consider using JSF `` or PrimeFaces `p:panel`. Then in both cases it will be controllable by the respective JSF engine. All the nice things like `rendered="#{someELcode.bla()}"` is then possible. – Roland Aug 29 '17 at 08:25
  • No, as what I have learned, you should avoid direct HTML tags as they are not controlled by JSF engine. Especially when it comes to `
    ` instead of `` tag which will not invoke your action method in your backing bean. Also using `` instead of `` will not trigger it. Using `` instead of `` will not load any JavaScripts from your JSF engine (including all other faces).
     – Roland Aug 29 '17 at 20:51
  • That is what I have learned on training. :-) And I have tried it out and had exactly that, no action method was called. Well, for `
    `, as I know, it will end up as body for some JSF tag.
     – Roland Aug 29 '17 at 20:53
  • This doesn't mean you can't use html, after all, all the final output by these components is HTML, your point is right for specific components that you need to harvest an input from them or so, but to have a layout it's a good practice to use html rather than having extra components on the stack, so using div and span etc.. is a good practice – Hatem Alimam Aug 29 '17 at 20:58
  • Check this: https://stackoverflow.com/questions/4421839/what-is-the-need-of-jsf-when-ui-can-be-achieved-from-css-html-javascript-jqu – Roland Aug 29 '17 at 21:02
  • Yes, of course. You *can* use HTML in JSF, I also use `
  • ` and `
      • – Roland Aug 29 '17 at 21:05
  • I prefer `` over `
    ` for the said reasons, as it (JSF) can be controlled by engine (e.g. `rendered` attribute which is **not** CSS `display:none`!) and allows EL code.
     – Roland Aug 29 '17 at 21:07
  • Use as suitable, this is my argument, if you don't need a rendered why to to use panelGroup in the first place ? Using div is much faster as none of the rendering part is going to take place, such as the panelGroup case – Hatem Alimam Aug 29 '17 at 21:10