webentwicklung-frage-antwort-db.com.de

Verwenden von Primefaces und Bootstrap in JSF

Sogar jetzt habe ich in meinen Projekten JSF + Primefaces verwendet, und dies gibt mir eine Menge neuer Komponenten (von Primefaces) für die Arbeit.

Mein neuer Kunde benötigte jedoch ein gutes Layout für das Administrator-Panel (Responsive + Clean + Beatiful). Suche in http://themeforest.net/ Ich habe viele großartige Layouts gefunden, aber fast alles ist für Bootstrap.

Mein Zweifel ist also: Kann ich weiterhin Primefaces verwenden (leistungsstarke Komponenten nutzen) und ein Layout für bootstrap? Gibt es eine Einschränkung?

18
Tux

Ich empfehle, BootsFaces zusammen mit dem Bootstrap Theme von PrimeFaces zu verwenden (siehe http://showcase.bootsfaces.net/integration/PrimeFaces.jsf ). BootsFaces reduziert den Boiler Plattencode, der zum Schreiben einer Bootstrap Seite benötigt wird. Außerdem bietet er einige Widgets, die besser in eine Bootstrap Seite passen als das PrimeFaces-Gegenstück hat BootsFaces als Plug-in für PrimeFaces entwickelt, sodass Sie beide problemlos zusammen verwenden können.

11
Stephan Rauh

Ich habe ein Projekt namens AdminFaces gestartet. Es integriert Primefaces und Bootstrap in ein neues Thema namens admin . Dieses Thema integriert einige bootstrap Stellt Primefaces-Komponenten wie Bedienfelder, Schaltflächen, Nachrichten, Daten, Registerkarten usw. dar. Außerdem wird eine Vorlage basierend auf dem berühmten Admin-LTE bootstrap = Admin-Vorlage.

Sie können sich das Schaufenster hier ansehen: https://adminfaces.github.io/admin-showcase/

Das Projekt befindet sich in einem frühen Entwicklungsstadium (z. B. sind nur Schnappschüsse verfügbar), daher sind Rückmeldungen und Beiträge sehr willkommen. Version 1.0.0 wurde veröffentlicht, siehe Details im Projektblog hier .

9
rmpestano

Primefaces und Bootstrap sind schwer zusammenzuarbeiten. Bootstrap definiert eine Reihe von CSS-Klassen (wie navbar), die in HTML verwendet werden. Aber Primefaces rendern die Komponenten von mit eigenen CSS-Klassen (wie ui-menubar).

Primefaces bieten zwar ein bootstrap theme, aber das Theme lässt die Primefaces-Komponenten wie bootstrap look an feel aussehen. Diese Komponenten werden jedoch immer noch mit css-Klassen für Primefaces gerendert , nicht bootstrap css classes.

8
heq99

Primefaces hat bereits ein bootstrap Theme wie in Primefaces Themes Page erwähnt

Um es zu konfigurieren, folgen Sie dieser StackOverflow Diskussion

Froh, hilfreich zu sein.

2
giaffa86

Sie können in einem Bootstrap-Portal Primefaces verwenden. Sie müssen nur vorsichtig sein, um Größen mit Prozentsätzen festzulegen (verwenden Sie % anstelle von px)

in den meisten Fällen sollten Sie Ihre Komponenten haben, z. B. p:panelGrid mit einer Größe von 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>

Ich habe es geschafft, ein mit Primefaces 4.0 betriebenes Portlet in Liferay 6.2 zu integrieren (es hat ein responsives Thema), und es hat gut funktioniert, es ist responsiv und ordentlich.

Sie werden hier und da Probleme mit überfüllten Dialogen und Bildlaufleisten haben, die normalerweise mit festen Pixelgrößen begrenzt sind, aber es ist absolut machbar.

Vielleicht möchten Sie auch Primefaces überprüfen Grid CSS

0
yannicuLar