「PrimeFaces」は、JSF(JavaServer Faces)を利用したWebアプリケーション開発向けの軽量コンポーネント・スイートである。位置づけとしては以前紹介した「OpenFacesと同様にJSFベースのコンポーネント・フレームワークということになるが、100以上のコンポーネントと、30以上の組込みUIテーマを持つスキンフレームワークを備え、高度な設定を必要とせず簡単に使える点が大きな特徴とされている。また、iPhoneやAndroidをはじめとした各種モバイル端末向けのモジュールも用意されており、モバイル対応のWebアプリケーションを開発する場合にも大きな威力を発揮する。その他、PrimeFacesの特徴としては次のような項目が挙げられている。

  • JSF 2.0 Ajax APIをサポート
  • ネイティブAjaxによるPush/Cometをサポート
  • 1つのjarファイルのみで構成され、軽量に動作する
  • 活発なコミュニティからのフィードバックを得られる

PrimeFacesはApache License 2.0に基づいてオープンソースで公開されている。本稿執筆時点における最新版はPrimeFaces 2.2.1だが、次期バージョンであるPrimeFaces 3.0もマイルストーン1(3.0 M1)が公開されている。PrimeFaces 3.0では12のコンポーネントの追加やjQuery Mobileベースのモバイルサポートを含む100以上の拡張が行われる予定であり、3.0 M1ではその一部機能を試すことができるようになっている。

PrimeFacesの利用方法

では実際にPrimeFacesを使ってみよう。PrimeFacesはこのページよりダウンロードできる。Binary版は単体のjarファイルであり、単にPrimeFacesを使うだけであれば、これをダウンロードしてプロジェクトのクラスパスに含めるだけでよい。Bundle版はjarファイルの他にソースコードとjavadoc形式のAPIドキュメントが付属する。

本稿では、PrimeFaces 3.0 M1をNetBeans 7.0上で利用するものとして解説を進める。作成するプロジェクトのタイプとしては通常どおり[Java Web]-[Webアプリケーション]を選択すればよいが、フレームワークの選択ではJavaServer Facesにチェックを入れておく必要がある(図1)。

図1 JSFコンポーネントを利用するためJSFには必ずチェックを入れておく

実はNetBeans 7.0にはすでにPrimeFacesが組み込まれており、フレームワークとしてJSFを選択すると、その構成の設定でPrimeFacesのコンポーネントが選択できるようになっている(図2)。この場合、バージョンは2.2.1となる(本稿執筆時点)。その他のバージョンを利用する場合には、作成したプロジェクトのライブラリに、入手したjarファイル(primefaces-3.0.M1.jarなど)を追加すればよい。

図2 NetBeansにはPrimeFacesが組み込まれている

web.xmlは次のようになる。NetBeansでプロジェクトを作成した場合にも、OpenFacesの場合と同様に、javax.faces.PROJECT_STAGEのパラメータの値を「Development」ではなく「Production」に変更しておこう。

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee"
    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">


    <context-param>
        <param-name>javax.faces.PROJECT_STAGE</param-name>
        <param-value>Production</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>/faces/*</url-pattern>
    </servlet-mapping>
    <session-config>
        <session-timeout>
            30
        </session-timeout>
    </session-config>
    <welcome-file-list>
        <welcome-file>faces/index.xhtml</welcome-file>
    </welcome-file-list>

</web-app>

PrimeFacesのコンポーネントを使うためには、ページごとにhtmlタグのxmlns属性のパラメータとしてPrimeFacesのネームスペース「http://primefaces.prime.com.tr/ui」を追加する。プレフィックスに「p」を使うとすると次のような記述になる。

xmlns:p="http://primefaces.prime.com.tr/ui

キーボードコンポーネントを利用する

今回はソフトウェア・キーボードによる入力を可能にするテキストフィールド・コンポーネントを使ってみよう。以下の例のように、keybordタグを記述することによって、ソフトウェア・キーボードの機能を持ったテキストフィールドを表示することができる。

<?xml version="1.0" encoding="UTF-8"?>
<!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:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.prime.com.tr/ui">

    <h:head>
        <title>PrimeFacesのサンプル</title>
    </h:head>

    <h:body>
        <h1>キーボード</h1>

        <p:keyboard />


    </h:body>
</html>

Webブラウザからアクセスした場合の表示は図3のようになる(テキストフィールドをクリックするとソフトウェア・キーボードが表示される)。

図3 ソフトウェア・キーボードを持ったテキストフィールド

テーマを変更する

続いてページに適用するテーマを変更してみよう。PrimeFacesには30種類超のテーマがあらかじめ用意されており、このページよりダウンロードすることができる。ファイルはjar形式になっている。

テーマを変更するには、ダウンロードしたjarファイルをプロジェクトのライブラリに追加し、web.xmlを利用してテーマを設定するためのパラメータを追加する。例えば「ui-darkness」というテーマを使いたい場合には、次の設定を追加すればよい。

<context-param>
        <param-name>primefaces.THEME</param-name>
        <param-value>ui-darkness</param-value>
</context-param>

ui-darknessを適用した場合、さきほどのソフトウェアキーボードの表示は図4のように変わる。テーマの変更はプロジェクト内で利用している全てのコンポーネントに自動的に適用される。

図4 テーマを変更することでコンポーネントの表示が変わる