Using Primefaces and Bootstrap in JSF

Question

Even now I used JSF+Primefaces in my projects and this give me a lot of new components (from primefaces) to work.

But my new customer required a good layout for the Administrator Panel (Responsive + Clean + Beatiful). Searching in http://themeforest.net/ i found a lot of great layouts but almost everything is for bootstrap.

So, my doubt is: Can i continue using primefaces (take advantage of powerfull components) and using a layout for bootstrap ? Is there some limitation ?

Answer 1

I have started a project called AdminFaces. It integrates Primefaces and Bootstrap into a new theme, called admin. This theme integrates some bootstrap style into primefaces components like panels, buttons, messages, datatable, tab view and so on. It also brings a template based on the famous Admin LTE bootstrap admin template.

You can have a look at showcase here: https://adminfaces.github.io/admin-showcase/

The project is in early development stage (e.g: only snapshots are available) so any feedback or contribution is really welcomed. Version 1.0.0 was released, see details on the project blog here.

Answer 2

I have just tested bootfaces, but when I open the page in the tablet and the phone the font's are quite small. I think, IMO this isn't prepared for real "responsive web design" and probably I have to go manually using bootstrap..

But going "manually to use bootstrap" is an extra effort changing from using JavaBeans to RestFul services and add extra security layer... quite a lot of job for a nice Responsive GUI !

Answer 3

I recommend using BootsFaces along with the Bootstrap theme of PrimeFaces (see http://showcase.bootsfaces.net/integration/PrimeFaces.jsf). BootsFaces reduces the boiler plate code needed to write a Bootstrap page. Plus, it offers a couple of widgets that fit better into a Bootstrap page than their PrimeFaces counterpart. We've designed BootsFaces as a plug-in to PrimeFaces, so you can safely use both together.

Answer 4

For a long time I searched for my project information to integrate PrimeFaces + JSF and bootstrap, several say it is impossible but I think that is not so true, I encourage everyone to do it.

you nedeed (modal.js) http://getbootstrap.com/javascript/#modals

private String saludo =""; 
public void mensajito(){
  saludo = "Saludos bitacorawil!!!" + new Date();
}
public String getSaludo() {
  return saludo;
}
public void setSaludo(String saludo) {
  this.saludo = saludo;
}

our form will be

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui" template="/WEB-INF/template.xhtml">
 <ui:define name="head">
  <h:outputScript name="bootstrap/js/modal.js" />
 </ui:define>

 <ui:define name="implementation">
  <h:form id="form">
   <p:messages id="messages" closable="true" autoUpdate="true" />
   <div class="panel panel-default">
    <div class="panel-heading">
     <i class="fa fa-angle-right"></i> Criterios de búsqueda
    </div>
    <div class="panel-body">
     <div class="row">
      <div class="form-group has-success col-md-4">
       <p:commandButton value="Generar Saludo modal con JSF" oncomplete="$('#myModal').modal('show');" title="Ver campos" 
        actionListener="#{backbeanController.mensajito}">
       </p:commandButton>
      </div>
     </div>
    </div>
   </div>

   <p:outputPanel autoUpdate="true">
    <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal" class="modal fade">
     <div class="modal-dialog">
      <div class="modal-content">
       <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">Cerrar</button>
        <h4 class="modal-title">Datos Registro</h4>
       </div>
       <div class="modal-body">
        <h:panelGrid columns="2">
         <h:outputLabel value="Mensaje:" />
         <h:outputText value="#{backbeanController.saludo}" />
        </h:panelGrid>
       </div>

       <div class="modal-footer centered">
        <button data-dismiss="modal" class="btn" type="button">Cerrar</button>
       </div>
      </div>
     </div>
    </div>
   </p:outputPanel>
  </h:form>
 </ui:define>
</ui:composition>

Answer 5

Primefaces and Bootstrap are hard to work together. Bootstrap defines a bunch of css classes (like navbar) which are used in html. But primefaces render the components by using its own css classes (like ui-menubar).

Although Primefaces provide a bootstrap theme, the theme just makes the primefaces components look like bootstrap look an feel. But those components are still rendered by using primefaces css classes, not bootstrap css classes.

Answer 6

You can use primefaces in a bootstrap-themed Portal. you just have to be careful to set sizes with percentages (use % instead of px)

in most cases, you should have your components e.g p:panelGrid with size = 100%

<!-- If the screen is too narrow to hold both columns they will be aligned verically -->
<p:panelGrid columns="2" style="width:100%;">

    <!-- Left Align -->
    <p:panelGrid columns="1" style="width:85%; text-align:left;">
        ...
    </p:panelGrid>
    <!-- Right Align ( Controls )-->
    <p:panelGrid columns="1" style="width:15%; text-align:right; float:right;">
        ...
    </p:panelGrid>

</p:panelGrid>

I've managed to integrate a Primefaces 4.0 powered portlet with liferay 6.2 (it has a responsive theme), and it worked nice, being responsive and neat.

You will have some trouble here and there with overflowing dialogs and scrollBars, which are usually limited with fixed pixel sizes, but it's totally do-able.

You might also want to check primefaces Grid CSS

Answer 7

Primefaces already has a bootstrap theme as mentioned in Primefaces Themes Page

To configure it you can follow this StackOverflow discussion

Glad to be helpful.