JSF PrimeFaces チュートリアル

JSFプライムフェイスのチュートリアルへようこそ。JavaServer Facesは、現在のJavaウェブアプリケーションのユーザーインターフェースを実装するために使用される主要なフレームワークの一つです。JSFはコンポーネント化されたウェブアプリケーションを提供し、特にインターフェースに関連する部分において、JSFのすべての単一ビューは、ブラウザにレンダリングされる際にHTMLにデコードされるサーバー側のコンポーネントのツリーを使用して構築されています。

JSF プライムフェイスチュートリアル

JSFでビューをレンダリングするプロセスは、JSFライフサイクルと呼ばれるものを通過します。このチュートリアルは、ライフサイクルがどのように機能するかや、どのように対処するかを詳しく説明することを目的としたものではありません。これは、JSFフレームワークについて知っておくべきことや、JSFビューをレンダリングの準備をする方法についての通知に過ぎません。

JSF 2の新機能

また、JSF 2 に追加された最も素晴らしい機能、つまり Ajax 概念を忘れてはいけません。JSF 2 では、Ajax が JSF フレームワークに本質的に組み込まれています。したがって、JSF コンポーネントのいずれも、Ajax の要素を追加するだけで Ajax 化できます。ナビゲーションルールも変更され、はるかに簡単になりました。今後のチュートリアルでは、JSF 2 に追加されたこれらの機能についてさらに詳しく説明しますが、このチュートリアルでは、シンプルな JSF アプリケーションを作成し、特定のビジネスシナリオを実装するために Primefaces タグを使用する方法の基本的なサンプルを作成します。

チュートリアルを完成させるために使用したツール

このチュートリアルを始めるためには、以下の開発ツールを使う必要があります。

1. トムキャット 7
2. Eclipse IDE
3. メイヴン3
4. JSF 2/プライムフェース 5

私たちがアプリケーションの展開にTomcat 7を使用し、必要なコンポーネントの開発にはEclipse IDEを使用したことは明らかです。また、Mavenはビルドツールとして依存関係の管理にも使用されました。したがって、これらのソフトウェアが開発マシンにどのようにインストールおよび設定されるかを理解していることを確認してください。私たちの最終プロジェクトは以下の画像のようになります。

Eclipseプロジェクトの作成

Eclipse IDEはダイナミックプロジェクトの傘の下でウェブプロジェクトの開発をサポートしています。ダイナミックプロジェクトを作成するには、以下の手順に従ってください:

• Eclipse IDEを開く
• プロジェクトエクスプローラ空間を右クリックし、新規 - ダイナミック Web プロジェクトを選択します。

• プロジェクト名、ターゲットランタイム、ソースフォルダー、コンテキストルート、コンテンツディレクトリ、web.xmlを設定して、プロジェクト作成プロセスを完了してください。

JSFのインストールと設定

先に述べたように、私たちの目標は、PrimeFacesユーザーインターフェースコンポーネントを使用したWebアプリケーションを開発するためにJSF/PrimeFacesを使用することですが、現在私たちが持っているのは、JSFに設定するためにさらにステップが必要なシンプルな動的アプリケーションだけです。プロジェクトにJSFを追加するには、JSFファセットを追加し、JSFの実装を追加することがMojarraを使用したJSFアプリケーションの構築に役立つことに注意する必要があります。そのファセットを追加するには、以下の手順に従う必要があります。

1. 作成したプロジェクトのプロパティウィンドウを開きます
2. プロジェクトのファセットペインから、JavaServer Facesをチェックし、さらなる設定が必要に従って設定を完了してください。
3. さらなる設定が必要をクリックすると、JSF機能ウィンドウが表示される必要があります。
4. ライブラリのダウンロードをクリックして、開いているウィンドウからJSF 2.2 (Mojarra 2.2.0)を選択することで、jsf実装ライブラリを追加します。

JSFライブラリをインストールした後、JSF機能ウィンドウは以下のようになります

このフェーズの終了時には、JSF機能を持つWebアプリケーションが完成しています。

Primefaces 5 のインストール

今のところ、あなたのアプリケーションはJavaServer Facesユーザーインターフェースを使用する準備ができていますが、PrimeFacesは使用できません。PrimeFacesを使用するためには、以下の手順に従う必要があります:

1. PrimeFacesの公式サイトまたはMaven中央から必要なPrimeFacesライブラリをダウンロードしてください。
2. WEB-INFフォルダーの下にあるlibフォルダーにダウンロードしたPrimefaces JARを含めてください。

Primefacesアプリケーションの開発

さて、あなたのプロジェクトはJSF/Primefacesアプリケーションを開発する準備が整いました。これから、PrimefacesのDataTableがバックビーンから従業員のリストを取得するシンプルなアプリケーションを作成します。従業員のリストは、特別なメソッド@PostConstructによって生成されます。完全なJSF/Primefacesアプリケーションを開発するために、以下の手順に従ってください。

1. ViewEmployeesManagedBeanという名前のマネージドビーンを作成します。
2. 従業員名（EmployeeName）と従業員ID（EmployeeId）を含むPOJOクラスを作成します。
3. 定義された管理Beanから従業員リストを取得するために、Primefacesビューを作成します。

package com.journaldev.data;

public class Employee {
	private String employeeId;
	private String employeeName;
	public String getEmployeeId() {
		return employeeId;
	}
	public void setEmployeeId(String employeeId) {
		this.employeeId = employeeId;
	}
	public String getEmployeeName() {
		return employeeName;
	}
	public void setEmployeeName(String employeeName) {
		this.employeeName = employeeName;
	}
}

package com.journaldev.jsfBeans;

import java.util.ArrayList;
import java.util.List;

import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

import com.journaldev.data.Employee;

@ManagedBean
@SessionScoped
public class ViewEmployeesManagedBean {
	private List<Employee> employees = new ArrayList<Employee>();

	public ViewEmployeesManagedBean(){

	}

	@PostConstruct
	public void populateEmployeeList(){
		for(int i = 1 ; i <= 10 ; i++){
			Employee emp = new Employee();
			emp.setEmployeeId(String.valueOf(i));
			emp.setEmployeeName("Employee#"+i);
			this.employees.add(emp);
		}
	}

	public List<Employee> getEmployees() {
		return employees;
	}

	public void setEmployees(List<Employee> employees) {
		this.employees = employees;
	}
}

JSFアノテーションの使用と、従業員のリストをポピュレートするためのPostConstructアノテーションの使用に注意してください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<p:outputLabel value="JournalDev - JSF2/Primefaces Tutorial"></p:outputLabel>
<p:dataTable value="#{viewEmployeesManagedBean.employees}" var="employee">
	<p:column>
		<f:facet name="header">
			<h:outputText value="Employee ID"></h:outputText>
		</f:facet>
		<h:outputText value="#{employee.employeeId}"></h:outputText>
	</p:column>
	<p:column>
		<f:facet name="header">
			<h:outputText value="Employee Name"></h:outputText>
		</f:facet>
		<h:outputText value="#{employee.employeeName}"></h:outputText>
	</p:column>
</p:dataTable>
</html>

dataTable要素を使用してマネージドビーンプロパティからテーブルを作成する使用法に注意してください。PrimeFacesとJSFは、これらをビューページに渡してレンダリングします。サーブレット環境から来た方には、ステップ数が削減されていることがすぐにわかるでしょう - サーブレット環境では、まずサーブレットでリクエストを処理し、モデルデータを作成し、リクエスト/セッションの属性として設定し、それからJSPページに転送してレスポンスをレンダリングします。

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"
	xmlns="https://java.sun.com/xml/ns/javaee"
	xsi:schemaLocation="https://java.sun.com/xml/ns/javaee https://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
	id="WebApp_ID" version="3.0">
	<display-name>JournalDev-PrimefacesWebApplication</display-name>
	<servlet>
		<servlet-name>Faces Servlet</servlet-name>
		<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>Faces Servlet</servlet-name>
		<url-pattern>/faces/*</url-pattern>
	</servlet-mapping>
	<context-param>
		<description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2</description>
		<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
		<param-value>client</param-value>
	</context-param>
	<context-param>
		<param-name>javax.servlet.jsp.jstl.fmt.localizationContext</param-name>
		<param-value>resources.application</param-value>
	</context-param>
	<listener>
		<listener-class>com.sun.faces.config.ConfigureListener</listener-class>
	</listener>
</web-app>

javax.faces.webapp.FacesServletがコントローラークラスであることに注意してください。ここでJSFをWebアプリケーションに組み込むことができます。

<?xml version="1.0" encoding="UTF-8"?>
<faces-config
    xmlns="https://xmlns.jcp.org/xml/ns/javaee"
    xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="https://xmlns.jcp.org/xml/ns/javaee https://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd"
    version="2.2">

</faces-config>

ここでは、Managed Beans、i18nグローバルメッセージ、カスタムビューハンドラー、およびカスタムファクトリークラスなどのJSFコンポーネントの設定を提供します。アノテーションを使用しており、プロジェクトがシンプルなので、ここでは設定はしていませんが、今後の投稿でその使用法を見ていきます。さて、これを実行すると、以下の画像のような出力が得られます。

Mavenに変換する

MavenはJavaプロジェクトのビルドと依存関係を管理するための最も好ましい方法ですので、ここではそれをMavenに変換する方法を見ていきます。Eclipse IDEは、Dynamic Web ProjectをMavenに変換するオプションを提供します。Mavenは、必要な依存関係を制御し管理するのに役立ちます。作成したプロジェクトを右クリックし、設定メニューからConvert into Maven Projectを選択します。一度プロジェクトをMavenに変更すると、Maven自体がプロジェクトをコンパイル可能にするために必要な依存関係を追加する必要があります。アプリケーションをMavenプロジェクトに変換した後、JSF 2、Primefaces、およびその他のライブラリを追加したときに得られる予定のMaven XMLは次のとおりです:

<project xmlns="https://maven.apache.org/POM/4.0.0" xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="https://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>JournalDev-PrimefacesWebApplication</groupId>
	<artifactId>JournalDev-PrimefacesWebApplication</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>war</packaging>
	<build>
		<sourceDirectory>src</sourceDirectory>
		<plugins>
			<plugin>
				<artifactId>maven-compiler-plugin</artifactId>
				<version>3.1</version>
				<configuration>
					<source>1.6</source>
					<target>1.6</target>
				</configuration>
			</plugin>
			<plugin>
				<artifactId>maven-war-plugin</artifactId>
				<version>2.3</version>
				<configuration>
					<warSourceDirectory>webapp</warSourceDirectory>
					<failOnMissingWebXml>false</failOnMissingWebXml>
				</configuration>
			</plugin>
		</plugins>
		<finalName>${project.artifactId}</finalName>
	</build>
	<repositories>
		<repository>
			<id>prime-repo</id>
			<name>PrimeFaces Maven Repository</name>
			<url>https://repository.primefaces.org</url>
			<layout>default</layout>
		</repository>
	</repositories>
	<dependencies>
		<!-- Servlet -->
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>servlet-api</artifactId>
			<version>2.5</version>
			<scope>provided</scope>
		</dependency>
		<!-- Faces Implementation -->
		<dependency>
			<groupId>com.sun.faces</groupId>
			<artifactId>jsf-impl</artifactId>
			<version>2.2.4</version>
		</dependency>
		<!-- Faces Library -->
		<dependency>
			<groupId>com.sun.faces</groupId>
			<artifactId>jsf-api</artifactId>
			<version>2.2.4</version>
		</dependency>
		<!-- Primefaces Version 5 -->
		<dependency>
			<groupId>org.primefaces</groupId>
			<artifactId>primefaces</artifactId>
			<version>5.0</version>
		</dependency>
		<!-- JSP Library -->
		<dependency>
			<groupId>javax.servlet.jsp</groupId>
			<artifactId>javax.servlet.jsp-api</artifactId>
			<version>2.3.1</version>
		</dependency>
		<!-- JSTL Library -->
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>jstl</artifactId>
			<version>1.1.2</version>
		</dependency>
	</dependencies>
</project>

プロジェクトに対してmvn clean packageを実行することで、Java EEコンテナにデプロイ可能なWARファイルが得られます。デプロイして確認してください。

要約

このチュートリアルでは、JSF 2/Primefacesを使用してウェブアプリケーションのユーザーインターフェイスを実装する方法を紹介しました。その中で、Eclipse IDEを使用して動的プロジェクトを作成し、JSF 2の実装に必要なライブラリやPrimefacesコンポーネントに必要なライブラリを追加しました。次のチュートリアルからは、Mavenを使用して例のプロジェクトを作成します。

PrimeFaces Hello World プロジェクトをダウンロードする

上のリンクからサンプルプロジェクトをダウンロードして、もっと学ぶために試してみてください。参考：Primefaces公式ウェブサイト