PrimeFacesの導入方法とテーマの変え方メモ

PrimeFaces の導入方法とテーマの変え方をメモする。


#環境
##AP サーバ
GlassFish 4.0

##PrimeFaces
4.0

#インストール
PrimeFaces を使用できるようにするには、 jar ファイルを 1 つクラスパスに追加すればいい。

##ダウンロードする場合
[PrimeFaces Download](http://www.primefaces.org/downloads.html)

##Maven のセントラルリポジトリから落とす場合
```groovy:build.gradle
repositories {
    mavenCentral()
}

dependencies {
    compile 'org.primefaces:primefaces:4.0'
}
```

#必要な環境
PrimeFaces を動作させる上で最低限必要な環境は以下。

- Java 5 以上
- JSF 2.0 以上

これ以外には、使用したい機能によって追加のライブラリが必要になる。

例えば、 Excel 出力機能を使用したい場合は Apache POI 3.7 が必要になったり、ファイルアップロード機能を使用したい場合は commons の fileupload 1.2.1 が必要になる。

#プロジェクト構成
##フォルダ構成
```text:
└─src
    └─main
        ├─java    : Java ソースコードとか
        └─webapp  : xhtml とか
```

##ポート
`8080`

##コンテキストルート
`prime-faces`

#Hello World
##web.xml
`src/main/webapp/WEB-INF` の下に `web.xml` を作成する。内容は以下。

```xml:web.xmlを作成する
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
         xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
         id="PrimeFaces" version="3.0">
  <display-name>PrimeFaces Sample</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>*.xhtml</url-pattern>
  </servlet-mapping>
</web-app>
```

##xhtml ファイルを作成する
`src/main/webapp` の下に `hello-world.xhtml` を作成。

```xml:hello-world.xhtml
<!DOCTYPE html>
<html xmlns="http://www.w3c.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">
  <h:head>
  </h:head>
  <h:body>
    <p:button value="hoge" />
  </h:body>
</html>
```

##動作確認
GlassFish を起動して、 `http://localhost:8080/prime-faces/hello-workd.xhtml` にアクセスする。

![prime-faces-hello-world.jpg](https://qiita-image-store.s3.amazonaws.com/0/28302/92ba2faf-6c72-97b5-369f-74742a2f8065.jpeg)

#簡単な画面遷移
テキストを入力してボタンを押したら、次の画面に入力した文字が出力される、という簡単な画面遷移を実装してみる。

![JSF画面遷移-from.jpg](https://qiita-image-store.s3.amazonaws.com/0/28302/8e27a6a5-e22e-2d39-3d84-43a9bd8930bb.jpeg)

![JSF画面遷移-to.jpg](https://qiita-image-store.s3.amazonaws.com/0/28302/6f065cdc-731c-5703-355b-5ca482a69990.jpeg)

##最初の画面
```xml:src/main/webapp/from.xhtml
<!DOCTYPE html>
<html xmlns="http://www.w3c.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">
  <h:head>
  </h:head>
  <h:body>
    <h:form>
      <p:inputText value="#{fromBean.text}" />
      <p:commandButton value="submit" action="#{fromBean.onSubmit}" />
    </h:form>
  </h:body>
</html>
```

`p:inputText` と `p:commandButton` は PrimeFaces が用意しているタグだが、基本的な使い方は JSF 標準のタグ（`h:inputText` と `h:commandButton`） と同じ。

##バッキングビーン
```java:FromBean.java
package sample.faces.prime;

import javax.enterprise.context.RequestScoped;
import javax.inject.Named;

@Named
@RequestScoped
public class FromBean {
    private String text;
    
    public String onSubmit() {
        return "to.xhtml";
    }

    public String getText() {
        return this.text;
    }

    public void setText(String text) {
        this.text = text;
    }
}
```

##遷移後の画面
```xml:src/main/webapp/to.xhtml
<!DOCTYPE html>
<html xmlns="http://www.w3c.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">
  <h:head>
  </h:head>
  <h:body>
    <h:outputText value="#{fromBean.text}" />
  </h:body>
</html>
```

単純なテキスト出力は、標準の `h:outputText` を使用。

#テーマを変更する
PrimeFaces の標準テーマは、シルバーを基調とした `aristo` というテーマが使用される。
このテーマは変更することができる。

##標準で提供されているテーマを利用する
[Themes - PrimeFaces](http://www.primefaces.org/themes.html) ここに、標準で提供されているテーマが紹介されている。
Community Themes の方は無料（[Apache License Version 2.0](http://www.primefaces.org/license.html)）で利用できる。

各テーマは jar ファイルで提供されている。
欲しい jar をダウンロードしたら、クラスパスに追加後 `web.xml` で使用するテーマを指定すればテーマの切り換えができる。

jar の入手方法には、以下の 2 つがある。

###直接 jar をダウンロードする
[Index of /org/primefaces/themes](http://repository.primefaces.org/org/primefaces/themes/) ここから欲しいテーマの jar を直接ダウンロードしてくる。

###Maven のリポジトリを利用する
`http://repository.primefaces.org/` は Maven のリポジトリになっている。

例えば `redmond` を使用したい場合は、次のように依存関係を追加する。

```groovy:build.gradle
repositories {
    maven {
        url "http://repository.primefaces.org/"
    }
}

dependencies {
    compile 'org.primefaces.themes:redmond:1.0.10'
}
```

###web.xml に使用したいテーマを設定する
```xml:web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
         xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
         id="PrimeFaces" version="3.0">
  <display-name>PrimeFaces Sample</display-name>
  
  <context-param>
    <param-name>primefaces.THEME</param-name>
    <param-value>blitzer</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>
</web-app>
```

`context-param` の `primefaces.THEME` で使用するテーマを指定している。

##テーマを自作する
PrimeFaces のテーマは jQuery UI を使用しているので、 [ThemeRoller](http://jqueryui.com/themeroller/) を使って自作することができる。

以下、テーマを自作する場合の手順。

###ThemeRoller でテーマを自作し、ダウンロードする

![カスタムテーマ.jpg](https://qiita-image-store.s3.amazonaws.com/0/28302/0c0d5ade-f8fa-f5ad-6740-922ad6c7785b.jpeg)

ダウンロードするとき、 `Components` のチェックは外しておく。

![Componentsのチェックは外す.jpg](https://qiita-image-store.s3.amazonaws.com/0/28302/99e85664-2929-bd49-d5aa-29b0ae98aefe.jpeg)

###css ファイルを修正する
`jquery-ui-<version>.custom/css/custom-theme/jquery-ui-<version>.custom.min.css` をテキストエディタで開いて、以下のように置換する。

```text:
url(images/ -> url(#{resource['primefaces-<テーマ名>:images/

.png) -> .png']})
```

※テーマ名には任意の名前を指定する（今回は `gl8080`）。

※`jquery-ui-<version>.custom.css` を利用する場合は以下のように置換する。

```text:
url("images/ -> url("#{resource['primefaces-<テーマ名>:images/

.png") -> .png']}")
```

内容を変更したら、ファイル名を `theme.css` に変更する。

###jar ファイルに固める
次のフォルダ構成になるようにして jar に固める。

```text:
>tree
└─META-INF
    │  MANIFEST.MF
    │
    └─resources
        └─primefaces-gl8080
            │  theme.css
            │
            └─images

>jar -cvf gl8080.jar .

>dir /b
gl8080.jar
META-INF
```

###カスタムテーマを適用する
jar ができたら、後は標準のテーマと同じ要領でテーマを適用する。

![カスタムテーマを適用した様子.jpg](https://qiita-image-store.s3.amazonaws.com/0/28302/762b8ff8-3cb4-a275-fdf8-68bfc1b01a5a.jpeg)


#参考
- [User's Guide 4.0 - PrimeFaces](http://www.primefaces.org/documentation.html)
- [PrimeFacesのテーマ設定 - きしだのはてな](http://d.hatena.ne.jp/nowokay/20130129)