Primefacesの紹介

1前書き

Primefacesはlink:/spring-jsf (JSF) アプリケーション用の オープンソースUIコンポーネントスイートです。

このチュートリアルでは、Primefacesの概要を説明し、その設定方法と主要機能の使用方法を説明します。

2概要

2.1. Java Server Faces

Java Server Facesは、Java Webアプリケーション用のユーザーインタフェースを構築するための** コンポーネント指向のフレームワークです。 JSF仕様は、Java Community Processを通じて形式化されており、標準化された表示テクノロジです。

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

2.2. プライムフェイス

JSF上に構築された Primefacesは、任意のプロジェクトに追加できる 事前構築されたUIコンポーネント** を提供することによって迅速なアプリケーション開発をサポートします。

Primefacesに加えて、http://primefaces-extensions.github.io/[Primefaces Extensions]プロジェクトもあります。

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

3アプリケーション設定

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

3.1. Mavenの設定

Primefacesは、たった1つのjarファイルで軽量の設定になっているので、まず始めに、 pom.xml に依存関係を追加しましょう。

<dependency>
    <groupId>org.primefaces</groupId>
    <artifactId>primefaces</artifactId>
    <version>6.2</version>
</dependency>

最新版はhttps://search.maven.org/classic/#search%7Cga%7C1%7Cg%3A%22org.primefaces%22[here]にあります。

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

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

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

コントローラをビューコンポーネントにバインドするために __ @ ManagedBean __アノテーションを提供する必要があります。

3.3. 見る

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

<html xmlns:p="http://primefaces.org/ui">

** 4コンポーネント例

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

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

4.1. PanelGrid

PanelGrid を標準のJSF panelGridの 拡張として使用しましょう _: _

<p:panelGrid columns="2">
    <h:outputText value="#{helloPFBean.firstName}"/>
    <h:outputText value="#{helloPFBean.lastName}"/>
</p:panelGrid>

ここでは、2つの列で panelGrid を定義し、マネージドBeanのデータを表示するようにJSFファセットの____outputTextを設定しました。

__outputTextで宣言されている値は、 @ ManagedBean で宣言されている firstName および lastName __の各プロパティーに対応しています。

private String firstName;
private String lastName;

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

<img class=" wp-image-32802 alignnone" style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; white-space: normal;" src="http://www.baeldung.com/uploads/panelGridPF-300x68.png" alt="" width="256" height="58"/>

4.2. SelectOneRadio

ラジオボタン機能を提供するために __selectOneRadio __componentを使用することができます。

<h:panelGrid columns="2">
    <p:outputLabel for="jsfCompSuite" value="Component Suite"/>
    <p:selectOneRadio id="jsfCompSuite" value="#{helloPFBean.componentSuite}">
        <f:selectItem itemLabel="ICEfaces" itemValue="ICEfaces"/>
        <f:selectItem itemLabel="RichFaces" itemValue="Richfaces"/>
    </p:selectOneRadio>
</h:panelGrid>

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

private String componentSuite;

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

リンク:/uploads/selectOneRadioPF-300x22.png%20300w[]

4.3. データ表

次に、 dataTable コンポーネントを使用して、テーブルレイアウトでデータを表示しましょう** 。

<p:dataTable var="technology" value="#{helloPFBean.technologies}">
    <p:column headerText="Name">
        <h:outputText value="#{technology.name}"/>
    </p:column>

    <p:column headerText="Version">
        <h:outputText value="#{technology.currentVersion}"/>
    </p:column>
</p:dataTable>

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

private List<Technology> technologies;

ここでは、さまざまなテクノロジとそのバージョン番号の一覧を示します。

リンク:/uploads/datatablePF-1024x119-768x89.png%20768w[]

4.4. InputText を使用したAjax

__p:ajax __を使用して、Ajax機能をコンポーネントに提供することもできます。

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

<h:panelGrid columns="3">
    <h:outputText value="Blur event "/>
    <p:inputText id="inputTextId" value="#{helloPFBean.inputText}}">
        <p:ajax event="blur" update="outputTextId"
      listener="#{helloPFBean.onBlurEvent}"/>
    </p:inputText>
    <h:outputText id="outputTextId"
      value="#{helloPFBean.outputText}"/>
</h:panelGrid>

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

private String inputText;
private String outputText;

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

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

ここでは、メカニズムを説明するためにテキストを大文字に変換しました。

リンク:/uploads/blurPF-300x27.png%20300w[]

4.5. ボタン

それ以外に、標準の __h:commandButton component の拡張として p:commandButton __as を使用することもできます。

例えば:

<p:commandButton value="Open Dialog"
  icon="ui-icon-note"
  onclick="PF('exDialog').show();">
</p:commandButton>

その結果、この設定では、( onclick 属性を使って)ダイアログを開くために使うボタンがあります。

リンク:/uploads/commandButton-300x77.png[]

4.6. ダイアログ

さらに、** ダイアログの機能を提供するために、 p:dialog componentを使用できます。

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

<p:dialog header="Example dialog" widgetVar="exDialog" minHeight="40">
    <h:outputText value="Hello Baeldung!"/>
</p:dialog>

この場合、前のセクションで説明した commandButton を使用して起動できる基本設定のダイアログがあります。

リンク:/uploads/dialog-300x137.png[]

5. Primefacesモバイル

Primefaces Mobile(PFM) は、モバイルデバイス 用のPrimefacesアプリケーションを作成するためのUIキットを提供します。

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

5.1. 構成

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

<navigation-handler>
    org.primefaces.mobile.application.MobileNavigationHandler
</navigation-handler>

5.2. ネームスペース

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

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

標準のPrimefaces jarファイル以外に、この設定に追加のライブラリは必要ありません。

5.3. RenderKit

最後に、モバイル環境でコンポーネントをレンダリングするために使用される** RenderKit、 を提供する必要があります。

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

<f:view renderKitId="PRIMEFACES__MOBILE"/>

フルPFMアプリケーションでは、 faces-config.xml 内のアプリケーションスコープで RenderKit を定義できます。

<default-render-kit-id>PRIMEFACES__MOBILE</default-render-kit-id>

5.4. 例のページ

それでは、PFMページの例を見てみましょう。

<pm:page id="enter">
    <pm:header>
        <p:outputLabel value="Introduction to PFM"></p:outputLabel>
    </pm:header>
    <pm:content>
        <h:form id="enterForm">
            <pm:field>
            <p:outputLabel
                  value="Enter Magic Word">
                </p:outputLabel>
            <p:inputText id="magicWord"
                  value="#{helloPFMBean.magicWord}">
                </p:inputText>
        </pm:field>
            <p:commandButton
              value="Go!" action="#{helloPFMBean.go}">
            </p:commandButton>
    </h:form>
     </pm:content>
</pm:page>

見てわかるように、PFMの page、header および __content __componentを使用して、ヘッダー付きの単純なフォームを作成しました。

リンク:/uploads/pfmIntroBaeldung-1024x233-768x175.png%20768w[]

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

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

    return "pm:failure";
}

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

<pm:page id="success">
    <pm:content>
        <p:outputLabel value="Correct!">
        </p:outputLabel>
    <p:button value="Back"
          outcome="pm:enter?transition=flow">
        </p:button>
    </pm:content>
</pm:page>

この設定はこのレイアウトという結果に終ります:

リンク:/uploads/correctPagePFM-1024x138-768x104.png%20768w[]

単語が間違っている場合は、次のページに進みます。

<pm:page id="failure">
    <pm:content>
        <p:outputLabel value="That is not the magic word">
        </p:outputLabel>
    <p:button value="Back" outcome="pm:enter?transition=flow">
        </p:button>
    </pm:content>
</pm:page>

この設定はこのレイアウトという結果に終ります:

  • バージョン6.2ではhttps://www.primefaces.org/primefaces-6-2-roadmap/[PFMは廃止予定]で、レスポンシブスタンダードキットのためにバージョン6.3では削除される予定です。

6.まとめ

このチュートリアルでは、Primefaces JSFコンポーネントスイートを使用する利点について説明し、MavenベースのプロジェクトでPrimefacesを設定して使用する方法を説明しました。

また、モバイル機器専用のUIキットであるPrimefaces Mobileを紹介しました。

いつものように、このチュートリアルのコードサンプルはhttps://github.com/eugenp/tutorials/tree/master/jsf[over on GitHub]にあります。