Using Primefaces and Bootstrap in JSF

Using Primefaces and Bootstrap in JSF

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 ?

Solutions/Answers:

Solution 1:

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.

Solution 2:

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.

Related:  Angular-ui-router and href='#'

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.

Solution 3:

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.

Solution 4:

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.

Solution 5:

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.

Related:  How to make panel header clickable with bootstrap? [closed]

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

Solution 6:

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>

Related:  Bootstrap Carousel image doesn't align properly

References