web-dev-qa-db-ja.com

PrimefacesおよびBootstrapの使用

今でもプロジェクトでJSF + Primefacesを使用しており、これにより（primefacesから）多くの新しいコンポーネントが動作します。

しかし、私の新しい顧客には、管理者パネルの適切なレイアウトが必要でした（レスポンシブ+クリーン+美しい）。 http://themeforest.net/ で検索すると、多くのすばらしいレイアウトが見つかりましたが、ほとんどすべてがブートストラップ用です。

だから、私の疑問は次のとおりです：Primefaces（強力なコンポーネントを利用する）を使用し続け、bootstrap？

twitter-bootstrapjsfjsf-2primefaces
18
Tux

PrimeFacesのBootstrapテーマと一緒にBootsFacesを使用することをお勧めします（ http://showcase.bootsfaces.net/integration/PrimeFaces.jsf を参照）。BootsFacesはボイラーを削減します） Bootstrapページを書くのに必要なプレートコード。さらに、PrimeFacesの対応物よりもBootstrapページによく適合するいくつかのウィジェットを提供します。 BootsFacesはPrimeFacesのプラグインとして設計されているため、両方を安全に併用できます。

11
Stephan Rauh

AdminFaces というプロジェクトを開始しました。 PrimefacesとBootstrap=adminという新しいテーマに統合します。このテーマは、いくつかのbootstrapパネル、ボタン、メッセージ、データテーブル、タブビューなどのprimefacesコンポーネントにスタイルを設定し、有名な Admin LTE bootstrap =管理者テンプレート。

ここでショーケースを見ることができます： https://adminfaces.github.io/admin-showcase/

このプロジェクトは開発の初期段階にあるため（スナップショットのみが利用可能です）、フィードバックや貢献は大歓迎です。 バージョン1.0.0がリリースされました。詳細は プロジェクトブログはこちら をご覧ください。

9
rmpestano

PrimefacesとBootstrapは連携するのが難しい。Bootstrapは、htmlで使用されるcssクラス（navbarなど）を定義します。独自のcssクラス（ui-menubarなど）を使用します。

Primefacesはbootstrapテーマを提供しますが、テーマはprimefacesコンポーネントをbootstrap=のように見せます。しかし、これらのコンポーネントはprimefaces cssクラスを使用してレンダリングされます。 、bootstrap cssクラス。

8
heq99

Primefacesには、すでにbootstrapテーマがあります Primefaces Themesページ

それを設定するには、これに従うことができます StackOverflowディスカッション

お役に立ててうれしいです。

2
giaffa86

ブートストラップをテーマにしたポータルでプライムフェイスを使用できます。パーセンテージでサイズを設定するように注意する必要があります（%の代わりにpx）

ほとんどの場合、_p:panelGridサイズ= 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>

Primefaces 4.0を搭載したポートレットとliferay 6.2（レスポンシブテーマを含む）を統合することができました。

オーバーフローしたダイアログとscrollBarで、あちこちでいくつかの問題が発生します。通常、これらは固定ピクセルサイズで制限されていますが、完全に実行可能です。

プライムフェイスを確認することもできます Grid CSS

0
yannicuLar