Utilisation de Primefaces et Bootstrap dans le JSF

je recommande D'utiliser BootsFaces avec le thème Bootstrap de PrimeFaces (voir http://showcase.bootsfaces.net/integration/PrimeFaces.jsf). BootsFaces réduit le code de la plaque de chaudière nécessaire pour écrire une page Bootstrap. De plus, il offre un couple de widgets qui s'adaptent mieux dans une page Bootstrap que leur contrepartie PrimeFaces. Nous avons conçu BootsFaces comme un plug-in de PrimeFaces, de sorte que vous pouvez utiliser en toute sécurité les deux ensemble.

j'ai commencé un projet appelé AdminFaces. Il intègre Primefaces et Bootstrap dans un nouveau thème, appelé admin. Ce thème intègre un style bootstrap dans des composants de primefaces comme des panneaux, des boutons, des messages, des données, une vue tabulaire et ainsi de suite. Il apporte également un modèle basé sur la célèbre Admin LTE bootstrap modèle d'administrateur.

vous pouvez jeter un oeil à showcase ici: http://admin-showcase-admin-showcase.7e14.starter-us-west-2.openshiftapps.com/showcase/

le projet en est à ses débuts (E. g: seuls les instantanés sont disponibles) de sorte que toute rétroaction ou contribution est vraiment la bienvenue.

Primefaces et Bootstrap sont difficiles à travailler ensemble. Bootstrap définit un tas de classes css (comme navbar) qui sont utilisées en html. Mais primefaces rend les composants en utilisant ses propres classes css (comme ui-menubar).

bien que Primefaces fournissent un thème bootstrap, le thème fait juste les composants de primefaces ressembler bootstrap regarder une sensation. Mais ces composants sont encore rendus en utilisant des classes CSS de primefaces, pas des classes CSS de bootstrap.

Primefaces a déjà un thème bootstrap comme mentionné dans Primefaces Thèmes Page

Pour le configurer, vous pouvez suivre ce StackOverflow discussion

content d'être utile.

vous pouvez utiliser des primefaces dans un portail à thème bootstrap. vous devez juste faire attention à définir les tailles avec des pourcentages (utilisez % au lieu de px)

dans la plupart des cas, vous devriez avoir vos composants électronique.g p:panelGrid taille = 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>

j'ai réussi à intégrer un portlet propulsé Primefaces 4.0 avec liferay 6.2 (il a un thème responsive), et ça a bien fonctionné, être responsive et soignée.

vous aurez des problèmes ici et là avec les boîtes de dialogue débordantes et les barres de défilement, qui sont habituellement limitées avec des tailles de pixels fixes, mais c'est totalement faisable.

Vous pouvez aussi consulter primefaces grille CSS

pendant longtemps j'ai cherché des informations sur mon projet pour intégrer PrimeFaces + JSF et bootstrap, plusieurs disent que c'est impossible mais je pense que ce n'est pas si vrai, j'encourage tout le monde à le faire.

vous 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;
}

notre formulaire

<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>

je viens de tester bootfaces, mais quand j'ouvre la page dans la tablette et le téléphone la police est assez petite. Je pense, IMO ceci n'est pas préparé pour le vrai "responsive web design" et je dois probablement aller manuellement en utilisant bootstrap..

mais aller "manuellement pour utiliser bootstrap" est un effort supplémentaire passant de L'utilisation de JavaBeans à des services RestFul et ajouter une couche de sécurité supplémentaire... beaucoup de travail pour une GUI Responsive !