【連載】

攻略! ツール・ド・プログラミング

【第53回】収録数は100以上! JSF用軽量コンポーネントスイート「PrimeFaces」

[2011/05/19 08:00]杉山貴章 ブックマーク ブックマーク

開発ソフトウェア

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 テーマを変更することでコンポーネントの表示が変わる

関連リンク

1300
2
【連載】攻略! ツール・ド・プログラミング [53] 収録数は100以上! JSF用軽量コンポーネントスイート「PrimeFaces」
「PrimeFaces」は、JSF(JavaServer Faces)を利用したWebアプリケーション開発向けの軽量コンポーネント・スイートである。位置づけとしては以前紹介した「OpenFacesと同様にJSFベースのコンポーネント・フレームワークということになるが、100以上のコンポーネントと、30以上の組込みUIテーマを持つスキンフレームワークを備え、高度な設定を必要とせず簡単に使える点が大きな特徴とされている。
https://news.mynavi.jp/itsearch/2016/03/14/programming_tool/index.top.jpg
「PrimeFaces」は、JSF(JavaServer Faces)を利用したWebアプリケーション開発向けの軽量コンポーネント・スイートである。位置づけとしては以前紹介した「OpenFacesと同様にJSFベースのコンポーネント・フレームワークということになるが、100以上のコンポーネントと、30以上の組込みUIテーマを持つスキンフレームワークを備え、高度な設定を必要とせず簡単に使える点が大きな特徴とされている。

会員新規登録

初めてご利用の方はこちら

会員登録(無料)

マイナビニュース スペシャルセミナー 講演レポート/当日講演資料 まとめ
人事・経理・総務で役立つ! バックオフィス系ソリューション&解説/事例記事まとめ

一覧はこちら

今注目のIT用語の意味を事典でチェック!

一覧はこちら

ページの先頭に戻る