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="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>
この設定はこのレイアウトという結果に終ります:
-
バージョン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]にあります。