JSF PrimeFacesのチュートリアル

11か月 ago
芽依, 雨夜
6 minutes

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

JSFを使ったPrimefacesのチュートリアル

JSFビューのレンダリングプロセスは、JSFライフサイクルとして知られているものを経由します。このチュートリアルでは、ライフサイクルがどのように機能し、どのように扱うかについての詳細な説明を提供することはありません。それは単に、JSFフレームワークについて知っておくべきこと、そしてJSFビューをレンダリングする準備をする方法についての通知です。この記事が書かれた時点では、JSFには2つの主要な実装があります。オラクルの実装であるMojarraとApache MyFacesの実装です。多くのJSFライブラリが存在しており、RichFaces、IceFaces、PrimeFaces、MyFacesなどがありますが、最も多く利用され評価の高いライブラリはPrimeFacesです。数ヶ月前にPrimeFaces 5をリリースしており、このチュートリアルおよび次のチュートリアルの対象です。PrimeFaces 5を使用するためには、プロジェクトにインストールして設定する必要があります。シンプルなテキストエディタを使用するか、エンタープライズ開発環境を使用するかに関係なく、このチュートリアルの終わりまでに、PrimeFacesのすべてのコンポーネントを発見する準備ができるでしょう。

JSF 2において新しく導入された機能は何ですか？

私たちが知っているように、JavaServer Facesは、豊かなユーザーインターフェースのウェブページを開発するためのフレームワークです。JSFは、いくつかのJava Community Request JSRで紹介されたものであり、JSF 2の最終リリースが2009年7月に公開されました。このリリースには、一連の改良と新機能が含まれています。JSF 2以降にはさまざまな結果が生じ、最後のものは2013年5月に公開されたJSF 2.2です。JSF 1.xとは異なり、JSF 2.xにはアノテーションを使用してJSF管理Bean、コンバータ、バリデータ、スコープなどを宣言するといった多くの機能が備わっています。さらに、JSF 2ではViewスコープ、カスタムスコープ、フロースコープ、会話スコープなど、新たなスコープも提供されています。また、JSF 2に追加された最も素晴らしい機能であるAjaxの概念も忘れてはなりません。JSF 2では、AjaxはJSFフレームワークに組み込まれています。そのため、単純にAjaxの要素を追加するだけで、任意のJSFコンポーネントをAjax化することができます。さらに、ナビゲーションルールも変更され、より簡単になりました。次回のチュートリアルでは、JSF 2に追加されたこれらの機能について詳しく説明しますが、このチュートリアルでは、簡単なJSFアプリケーションを作成し、特定のビジネスシナリオを実装するためのPrimefacesタグの基本的なサンプルを作成します。

チュートリアルを完了するために使用したツール

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

    1. Tomcat 7（トムキャット 7）

 

    1. Eclipse IDE（エクリプス アイディーイー）

 

    1. Maven 3（メイブン 3）

 

    JSF 2 / Primefaces 5（JSF 2 / プライムフェイセス 5）

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

Eclipseプロジェクトの作成

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

  • Open Eclipse IDE
  • Right-Click on the project explorer space and select New – Dynamic Web Project
  • Complete the project creation process by setting up the project name, target runtime, source folder, context root, content directory and web.xml

JSFのインストールと設定

前述の通り、私たちの目標は、Primefacesユーザインターフェースコンポーネントを使用してWebアプリケーションを開発するためにJSF/Primefacesを使用することですが、現時点では、単純な動的アプリケーションしかありません。JSFを構成するためには、さらに手順が必要です。プロジェクトにJSFを追加するには、JSFファセットを追加し、JSFの実装を追加する必要があります。そのファセットを追加するためには、以下の手順に従う必要があります。

    1. 作成したプロジェクトのプロパティウィンドウを開いてください。

 

    1. プロジェクトのフェーズパネルから、JavaServer Facesを選択し、構成を完了するために必要な追加設定に従ってください。

 

    1. 「Further configuration required」をクリックすると、JSF Capabilitiesウィンドウが表示されます。

 

    「Download Library」をクリックして、開いたウィンドウからJSF 2.2（Mojarra 2.2.0）を選択し、JSFの実装ライブラリを追加してください。

JSFのライブラリをインストールした後、JSFの機能ウィンドウは次のように表示されます。このフェーズの終了時には、JSF機能を備えたWebアプリケーションが完成します。

Primefaces 5のインストール手順

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

    1. プライムフェイセス公式サイトまたはMaven Centralから必要なプライムフェイスライブラリをダウンロードしてください。

 

    ダウンロードしたプライムフェイスのJARファイルをWEB-INFフォルダの下にあるlibフォルダに含めてください。

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

今、あなたのプロジェクトはJSF/Primefacesアプリケーションの開発に準備が整っています。簡単なアプリケーションを作成します。Primefaces DataTableがバッキングビーンから従業員リストを読み込むことになります。従業員リストは@PostConstruct特別なメソッドによってポピュレートされます。以下の手順に従って完全なJSF/Primefacesアプリケーションを開発してください。

    1. ViewEmployeesManagedBeanという名前のマネージドビーンを作成する。

 

    1. EmployeeNameとEmployeeIdを含むPojoとしてEmployeeを作成する。

 

    定義されたマネージドビーンで従業員リストを消費するために、Primefacesビューを作成する。
package com.scdev.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.scdev.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.scdev.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>

管理されたBeanのプロパティからテーブルを作成するために、dataTable要素の使用に注意してください。PrimeFacesとJSFはこれらをビューページに渡してレンダリングを担当します。Servletの背景を持っている場合、手順の数が減ったことが簡単にわかるでしょう。Servlet環境では、まずServletでリクエストを処理し、モデルデータを作成し、それをリクエスト/セッションの属性として設定し、それを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はコントローラークラスであることに注意してください。これが私たちのWebアプリケーションにJSFをプラグインする場所です。

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

ここでは、JSFコンポーネントの設定（マネージドビーン、i18nグローバルメッセージ、カスタムビューハンドラ、カスタムファクトリクラスなど）を提供しています。アノテーションを使用していてプロジェクトがシンプルなため、ここでは設定は行っていませんが、将来の投稿でその使用法を見ることができます。これを実行すると、以下の画像に示された出力が表示されます。

Mavenに変換する。

MavenはJavaプロジェクトのビルドと依存関係を管理するための最も好まれる方法ですので、ここではMavenへの変換方法を見ていきます。Eclipse IDEでは、Dynamic Web ProjectをMavenに変換するオプションが提供されています。Mavenは必要な依存関係を制御し管理するのに役立ちます。作成したプロジェクトを右クリックし、[設定]メニューから[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ファイルが生成されます。デプロイして調査してみてください。

要約 。

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

プライムフェイセスのHello Worldプロジェクトをダウンロードしてください。

上記のリンクからサンプルプロジェクトをダウンロードし、それを使ってもっと学んでみてください。参考：Primefaces公式ウェブサイト

コメントを残す 0

Your email address will not be published. Required fields are marked *

✖
广告
広告は10秒後に閉じます。
bannerAds