web-dev-qa-db-fra.com

Utilisation de Primefaces et Bootstrap en JSF

Même maintenant, j'ai utilisé JSF + Primefaces dans mes projets et cela me donne beaucoup de nouveaux composants (à partir de Primefaces) pour travailler.

Mais mon nouveau client avait besoin d'une bonne mise en page pour le panneau administrateur (Responsive + Clean + Beatiful). Recherche dans http://themeforest.net/ j'ai trouvé beaucoup de superbes dispositions mais presque tout est pour le bootstrap.

Donc, mon doute est: puis-je continuer à utiliser des primefaces (profiter des composants puissants) et à utiliser une mise en page pour bootstrap? Y a-t-il une limitation?

twitter-bootstrapjsfjsf-2primefaces
18
Tux

Je recommande d'utiliser BootsFaces avec le thème Bootstrap de PrimeFaces (voir http://showcase.bootsfaces.net/integration/PrimeFaces.jsf ). BootsFaces réduit la chaudière le code de plaque nécessaire pour écrire une page Bootstrap. De plus, il propose quelques widgets qui s'intègrent mieux dans une page Bootstrap que leur homologue PrimeFaces. Nous avons conçu BootsFaces comme un plug-in pour PrimeFaces, afin que vous puissiez utiliser les deux ensemble en toute sécurité.

11
Stephan Rauh

J'ai lancé un projet appelé AdminFaces . Il intègre Primefaces et Bootstrap dans un nouveau thème, appelé admin . Ce thème intègre quelques bootstrap style dans les composants primefaces comme les panneaux, boutons, messages, datatable, onglet, etc. Il apporte également un modèle basé sur le célèbre Admin LTE bootstrap = modèle d'administration.

Vous pouvez voir la vitrine ici: https://adminfaces.github.io/admin-showcase/

Le projet est au stade de développement précoce (par exemple: seuls des instantanés sont disponibles), donc tout commentaire ou contribution est vraiment le bienvenu. La version 1.0.0 est sortie, voir les détails sur le blog du projet ici .

9
rmpestano

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 par en utilisant ses propres classes css (comme ui-menubar).

Bien que Primefaces fournisse un thème bootstrap, le thème donne juste l'apparence des composants primefaces bootstrap ressemble à une sensation. Mais ces composants sont toujours rendus en utilisant des classes css primefaces , pas bootstrap classes css.

8
heq99

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

Pour le configurer, vous pouvez suivre ceci discussion StackOverflow

Heureux d'être utile.

2
giaffa86

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

dans la plupart des cas, vous devriez avoir vos composants, par exemple p:panelGrid avec 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 alimenté par Primefaces 4.0 avec liferay 6.2 (il a un thème réactif), et cela a bien fonctionné, étant réactif et soigné.

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

Vous pouvez également vérifier les primefaces Grid CSS

0
yannicuLar