18

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 ?

Tux
  • 233
  • 1
  • 2
  • 8
  • Maybe you can use http://blog.hatemalimam.com/jsf-and-twitter-bootstrap-integration/ – Jaqen H'ghar Dec 13 '14 at 12:42
  • But if i use this twitter-bootstrap-integration can i continue using primefaces ? – Tux Dec 15 '14 at 12:03
  • Just in case someone reads this two-years old thread: I don't see any reason why it shouldn't work with PrimeFaces. But still, being a BootsFaces committer, I recommend using BootsFaces along with PrimeFaces :). – Stephan Rauh Mar 26 '16 at 19:09
  • Hi and what about Icefaces + Bootfaces? – Fernando Pie Jan 01 '17 at 22:59
  • You can use BootsFaces: https://showcase.bootsfaces.net/ – Juan Camacho Feb 04 '17 at 08:32
  • I was thinking but I haven't tried yet. Why not just use plain bootstrap for most of the layout but have the core part be primefaces and JSF? – Archimedes Trajano May 10 '17 at 21:08
  • @ArchimedesTrajano Sorry for replying late - but you're question might be interesting to others, too. Bootstrap uses a different CSS box model than PrimeFaces. So either you use Bootstrap or PrimeFaces. The third option is to invest a lot of work, as described in https://www.beyondjava.net/how-to-use-bootsfaces-and-primefaces-in-the-same-project. There's still another option: AdminFaces may be worth a look. – Stephan Rauh Mar 23 '19 at 19:40
  • I sort of moved on from the JSF field and use RESTful APIs with VueJS. I found it much easier to train existing staff to use that pattern. – Archimedes Trajano Mar 23 '19 at 19:57

7 Answers7

11

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.

Stephan Rauh
  • 3,069
  • 2
  • 18
  • 37
  • I think the link is dead. The integration is now part of the showcase: http://showcase.bootsfaces.net/integration/PrimeFaces.jsf – thatsIch Mar 26 '16 at 07:58
  • Is the Primefaces Bootstrap Theme still applicable? The maintainer of that theme does not exist anymore and the last commit was 3 years ago – thatsIch Apr 10 '16 at 11:42
  • I suggest you open an issue on the PrimeFaces issue tracker. I suppose the theme is maintained by Cagatay himself. In any case, opening an issue should resolve the question soon. – Stephan Rauh Apr 10 '16 at 20:06
  • @StephanRauh do you know of any recent way of respecting the **Bootstrap / BootsFaces** theme in PrimeFaces? Things get really messy when you mix-up the PF datatable with a dark BF theme... (Apologies for reviving this old thread) – Vasil Svetoslavov Apr 21 '20 at 13:15
10

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.

rmpestano
  • 838
  • 1
  • 8
  • 17
8

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.

heq99
  • 81
  • 1
  • 2
2

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.

Community
  • 1
  • 1
giaffa86
  • 708
  • 1
  • 9
  • 22
  • 2
    It's based on a very old version of bootstrap, The integration is fine, if you want to match bootstrap classes you can just extend the renderers of primefaces and change the classes that get output from jQuery UI to the bootstrap templates. – VeenarM Dec 14 '14 at 22:58
0

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

yannicuLar
  • 3,083
  • 3
  • 32
  • 50
-2

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>
konqi
  • 5,137
  • 3
  • 34
  • 52
rico-chango
  • 1
  • 2
  • Please add the code to your post from your blog. Thank you! – maxshuty Oct 15 '15 at 19:14
  • And add an explanation and add how it does not break styilng: http://stackoverflow.com/questions/28183661/using-primefaces-with-bootstrap-causes-changes-in-padding-sizing-borders – Kukeltje Oct 15 '15 at 19:17
  • This 'answer' is a very, very small part of the full 'problem' You only use the bootstrap 'resposinve grid' and modal component. All PF components still look like PF and not Bootstrap, so this is **not** using Bootstrap fully in JSF with PrimeFaces – Kukeltje Oct 16 '15 at 12:07
-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 !

MadMad666
  • 955
  • 3
  • 11
  • 19