[Subsonic Airlines] PrimeFacesの導入

今回は、PrimeFacesの導入について説明します。

開発環境
Windows 7 64ビット
Eclipse Luna 4.4.2 64ビット
JBoss Tools 4.2.3.Final
PrimeFaces 5.2
WildFly 8.2.0.Final

PrimeFacesのサイトは次のアドレスです。
http://primefaces.org

PrimeFacesは、有償版のEliteと無償版のCommunityがあります。

プロジェクトの作成
プロジェクト名をsubsonic-airlines2とします。

プロジェクトの作成については、次の記事をご参照ください。
http://subsonic.info/ja/2015/08/10/subsonic-airlines-プロジェクトの作成/

プロジェクトの設定
PrimeFacesのサイトから、jarファイルをダウンロードする方法とMavenを使用する方法があります。今回は、Mavenを使用する方法について説明します。

pom.xmlの編集

dependencies要素に次の要素を追加します。

<dependency>
    <groupId>org.primefaces</groupId>
    <artifactId>primefaces</artifactId>
    <version>5.2</version>
</dependency>
<dependency>
    <groupId>org.primefaces.themes</groupId>
    <artifactId>bootstrap</artifactId>
    <version>1.0.10</version>
</dependency>

repositories要素に次の要素を追加します。

<repository>
    <id>prime-repo</id>
    <name>PrimeFaces Maven Repository</name>
    <url>http://repository.primefaces.org</url>
    <layout>default</layout>
</repository>

dependencies要素の最初のdependencyは、PrimeFaces本体です。
次のdependencyは、テーマです。artifactIdにテーマ名を指定します。今回は、bootstrapを設定しています。

テーマも有償版と無償版があります。Community themesが無償版です。

テーマについてのページのアドレスは、次の通りです。
http://www.primefaces.org/themes

アプリケーションの作成
次にweb.xmlを設定します。

/WEB-INF/web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.1"
    xmlns="http://xmlns.jcp.org/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd">
    <context-param>
        <param-name>primefaces.THEME</param-name>
        <param-value>bootstrap</param-value>
    </context-param>
    <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>*.xhtml</url-pattern>
    </servlet-mapping>
    <welcome-file-list>
        <welcome-file>index.xhtml</welcome-file>
    </welcome-file-list>
</web-app>

context-param要素のprimefaces.THEMEは、PrimeFacesのテーマ名です。今回は、bootstrapを設定しています。

servlet要素とservlet-mapping要素は、JSFの設定です。.xhtmlのファイルをJSFとして扱います。

次にindex.xhtmlを作成します。

/index.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
        xmlns:f="http://xmlns.jcp.org/jsf/core"
        xmlns:h="http://xmlns.jcp.org/jsf/html"
        xmlns:p="http://primefaces.org/ui">
    <f:view transient="true">
        <h:head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
            <title>Subsonic Airlines</title>
        </h:head>
        <h:body>
            <p:clock mode="server" pattern="yyyy-MM-dd HH:mm:ss"/>
        </h:body>
    </f:view>
</html>

PrimeFacesのタグライブラリを使用するため、htmlタグの中で、xmlns:p=”http://primefaces.org/ui”を宣言しています。この宣言により、PrimeFacesのタグライブラリをp:タグで使用できるようになります。

f:viewタグは、ステートレスモードの設定です。transient=”true”とするとステートレスモードとなり、セッションタイムアウトによるViewExpiredExceptionが発生することを防ぎます。

p:clockタグはPrimeFacesのタグで、時計を作成します。

デプロイ
作成したアプリケーションをデプロイして、ブラウザで表示してみます。

http://localhost:8080/subsonic-airlines2/
primefaces1