Primefacesの紹介

Posted on: 2019-10-19 2019-11-05
Tags: Java EE, JSF

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="https://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-300×22.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-1024×119-768×89.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-300×27.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-300×77.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-300×137.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-1024×233-768×175.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-1024×138-768×104.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>