Primefacesの紹介

Primefacesの概要

1. 前書き

Primefacesは、open source UI component suite for Java Server Faces(JSF)アプリケーションです。

このチュートリアルでは、Primefacesの概要を説明し、Primefacesを構成してその主な機能のいくつかを使用する方法を示します。

2. 概要

2.1. Java Server Faces

Java Server Facesはcomponent-oriented framework for building user interfaces for Java web applicationsです。 JSF仕様は、Java Community Processを介して形式化され、標準化された表示テクノロジーです。

Spring環境でのJSFの詳細については、hereを参照してください。

2.2. プライムフェイス

JSFの上に構築され、任意のプロジェクトに追加できるPrimefaces supports rapid application development by providing pre-built UI components。

Primefacesに加えて、Primefaces Extensionsプロジェクトもあります。このコミュニティベースのオープンソースプロジェクトは、標準コンポーネントに加えて追加のコンポーネントを提供します。

3. アプリケーションのセットアップ

いくつかのPrimefacesコンポーネントをデモンストレーションするために、Mavenを使用して簡単なWebアプリケーションを作成しましょう。

3.1. Mavenの構成

Primefacesは、jarが1つしかない軽量の構成になっているため、開始するには、pom.xmlに依存関係を追加しましょう。


    org.primefaces
    primefaces
    6.2

最新バージョンはhereで見つけることができます。

3.2. コントローラー–マネージドBean

次に、コンポーネントのBeanクラスを作成しましょう。

@ManagedBean(name = "helloPFBean")
public class HelloPFBean {
}

コントローラをビューコンポーネントにバインドするには、@ManagedBean annotationを提供する必要があります。

3.3. View

最後に、。xhtmlファイルでPrimefaces名前空間を宣言しましょう。

4. コンポーネントの例

ページをレンダリングするには、サーバーを起動して次の場所に移動します。

http://localhost:8080/jsf/pf_intro.xhtml

4.1. PanelGrid

PanelGridをextension to standard JSF panelGrid:として使用しましょう

ここでは、2つの列を持つpanelGridを定義し、JSFファセットからのoutputText を設定して、マネージドBeanからのデータを表示します。

各outputText で宣言された値は、@ManagedBeanで宣言されたfirstName およびlastName propertiesに対応します。

private String firstName;
private String lastName;

最初の単純なコンポーネントを見てみましょう。

4.2. SelectOneRadio

use selectOneRadio component to provide a radio button functionalityできます：

ラジオボタンの値を保持するには、バッキングBeanで値変数を宣言する必要があります。

private String componentSuite;

この設定により、基になるStringプロパティcomponentSuiteに関連付けられた2つのオプションのラジオボタンが作成されます。

4.3. データ表

次に、use the dataTable component to display data in a table layout：

同様に、テーブルのデータを保持するBeanプロパティを提供する必要があります。

private List technologies;

ここには、さまざまなテクノロジーとそのバージョン番号のリストがあります。

**4.4. InputTextを使用したAjax**

use p:ajax to provide Ajax features to our componentsも可能です。

たとえば、このコンポーネントを使用してぼかしイベントを適用してみましょう。

したがって、Beanにプロパティを提供する必要があります。

private String inputText;
private String outputText;

さらに、AJAX blurイベントのBeanでリスナーメソッドを提供する必要もあります。

public void onBlurEvent() {
    outputText = inputText.toUpperCase();
}

ここでは、メカニズムを示すために、テキストを大文字に変換しただけです。

4.5. ボタン

それ以外に、p:commandButton asan extension to the standard h:commandButton componentを使用することもできます。

例えば：

その結果、この構成では、ダイアログを開くために使用するボタンがあります（onclick属性を使用）。

4.6. ダイアログ

さらに、to provide the functionality of the dialog, we can use p:dialog component.

最後の例のボタンを使用して、クリック時にダイアログを開きます。

この場合、前のセクションで説明したcommandButtonを使用してトリガーできる基本構成のダイアログがあります。

5. Primefaces Mobile

Primefaces Mobile（PFM）provides a UI kit to create Primefaces applications for mobile devices。

このため、PFMはモバイルデバイス用に調整されたレスポンシブデザインをサポートしています。

5.1. 設定

まず、faces-config.xml内でモバイルナビゲーションサポートを有効にする必要があります。


    org.primefaces.mobile.application.MobileNavigationHandler

5.2. 名前空間

次に、PFMコンポーネントを使用するには、.xhtmlファイルにPFM名前空間を含める必要があります。

xmlns:pm="http://primefaces.org/mobile"

標準のPrimefaces jarに加えて、構成に追加のライブラリは必要ありません。

5.3. RenderKit

最後に、RenderKit, which is used to render the components in the mobile environment.を提供する必要があります

アプリケーション内の単一のPFMページの場合、ページ内にRenderKitを定義できます。

完全なPFMアプリケーションを使用すると、faces-config.xml内のアプリケーションスコープでRenderKitを定義できます。

PRIMEFACES_MOBILE

5.4. サンプルページ

それでは、PFMページの例を作成しましょう。

ご覧のとおり、PFMのpage, headerおよびcontent componentを使用して、ヘッダー付きの単純なフォームを作成しました。

さらに、ユーザー入力チェックとナビゲーションにバッキングBeanを使用しました。

public String go() {
    if(this.magicWord != null
      && this.magicWord.toUpperCase().equals("example")) {
    return "pm:success";
     }

    return "pm:failure";
}

正しい単語の場合、次のページに移動します。

この構成により、次のレイアウトが得られます。

単語が間違っている場合、次のページに移動します。