Primefacesの紹介

投稿日: 2019-10-19 2022-10-24
タグ: Jakarta EE, JSF

1. 序章

Primefacesは、Java Server Faces （JSF）アプリケーション用のオープンソースUIコンポーネントスイートです。

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

2. 概要

2.1. Java Server Faces

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

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

2.2. Primefaces

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

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

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

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

3.1. Maven構成

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

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

最新バージョンはここにあります。

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 を定義し、JSFファセットからの outputText を設定して、マネージドBeanからのデータを表示します。

各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/wp-content/uploads/2018/04/panelGridPF-300x68.png" alt="" width="256" height="58" />

4.2. SelectOneRadio

selectOneRadioコンポーネントを使用して、ラジオボタン機能を提供できます：

<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で値変数を宣言する必要があります。

private String componentSuite;

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

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;

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

**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;

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

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

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

4.5. ボタン

さらに、 p：commandButton を標準のh：commandButtonコンポーネントの拡張として使用することもできます。

例えば：

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

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

4.6. ダイアログ

さらに、ダイアログの機能を提供するために、p：dialogコンポーネントを使用できます。

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

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

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

5. Primefaces Mobile

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"

標準のPrimefacesjarの他に、構成に追加のライブラリは必要ありません。

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 コンポーネントを使用して、ヘッダー付きの単純なフォームを作成しました。

さらに、ユーザー入力のチェックとナビゲーションにバッキング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>

この構成により、次のレイアウトになります。

間違った単語の場合は、次のページに移動します。

<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>

この構成により、次のレイアウトになります。

PFMはバージョン6.2では非推奨であり、応答性の高い標準キットを優先してバージョン6.3で削除されることに注意してください。

6. 結論

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

さらに、モバイルデバイス専用のUIキットであるPrimefacesMobileを紹介しました。

いつものように、このチュートリアルのコードサンプルはGitHubで提供されています。

getdocs

13036