攻略! ツール・ド・プログラミング(50) Ajaxを利用したJSFコンポーネントライブラリ「OpenFaces」

「OpenFaces」は、Ajaxによるサーバとの非同期な通信を利用したJSF(JavaServer Faces)コンポーネント・フレームワークである。WebアプリケーションにおいてAjaxを利用する場合、通常であればJavaScriptを記述する必要がある。単にJavaScriptを利用するだけであればそれほど難しくないが、JSFを並用するとなると少々話が複雑になってくる。クライアントサイドで動作するJavaScriptと、サーバサイドで動作するJavaBeans(Managed Bean/Backing Bean)、そしてAjaxによる非同期のデータの受け渡しが絡み合ってくるからである。

そこでJSFでAjaxを利用する場合には、Ajaxによるインタラクティブな機能を内包したJSFコンポーネントを利用するのが一般的になっている。これならばAjaxを実現する複雑なJavaScriptコードはJSFコンポーネントよって隠蔽されるため、開発者はJSFのタグを記述するだけで、JavaScriptは最小限か、あるいは全く記述しなくてもリッチなUIを実現できるというわけだ。今回紹介するOpenFacesも、そのようなJSFコンポーネントを多数提供してくれるAjax対応のWebアプリケーションフレームワークである。

前回紹介したVaadinがJavaのコードだけでAjaxを実現するフレームワークだったのに対し、OpenFacesのようなフレームワークはUIの実装部分がJSFコンポーネントとして提供されるので、記述するコード量はJava/JavaScriptともに大幅に削減できる。そのようなフレームワークの性質の違いにも注目していただきたい。

OpenFacesの使用方法

OpenFacesはこのページよりダウンロードすることができる。ラインセンスはLGPLと商用ライセンスのデュアルライセンスとなっている。本稿執筆時点での最新版はOpenFaces 3.0であり、これはJSF 2.0をサポートしている。

WebアプリケーションでOpenFacesを利用するには、ダウンロードしたファイルを解凍し、中に含まれる「openfaces.jar」と、libフォルダ以下にある各jarファイルをプロジェクトのクラスパスに含めるようにする。ここでは開発環境としてNetBeansを利用するケースを例として解説を進める。NetBeansでOpenFacesを使う場合、作成するプロジェクトのタイプは通常のWebアプリケーションと同様に[Java Web]-[Webアプリケーション]でよい。ただし、最後のフレームワークの選択でのようにJavaServer Facesを選んでおく必要がある(図1)。プロジェクトの雛形ができたら、ライブラリとして前述の各jarファイルを追加する(図2)。


図1 : JSFコンポーネントを利用するのでJSFは必須	図2 : 必要なjarファイルをライブラリに追加する

OpenFacesで提供されるJSFコンポーネントを使うためには、ページ毎にタグライブラリをインポートする必要がある。タグライブラリのネームスペースは「http://openfaces.org/」で、プレフィックスには「o」を使う。インポートの方法は2種類あって、JSPを使うWebアプリケーションの場合にはjspファ折るに次のように記述する。

<%@taglib uri="http://openfaces.org/" prefix="o" %>

一方、<HTML>タグのパラメータとして記述する方法もある。その場合はxmlns属性のパラメータとして次のような記述を追加する。

xmlns:o="http://openfaces.org/

いずれも、JSFやFaceletsなどのカスタムタグを利用する場合と同様である。

カレンダーコンポーネントを利用する

OpenFacesには非常に多くのコンポーネントが用意されているが、ここではそのひとつであるカレンダーを使ってみる。カレンダーはタグを使って次のように記述することで、HTMLのページに貼り付けることができる。

<o:calendar value="#{CalendarBean.selectedDate}" />

CalendarBeanはカレンダーコンポーネントと関連付けられたManaged Beanであり、value属性に指定しているCalendarBean.selectedDateは現在選択されている日付を表すもので、サーバ側ではjava.util.Dateのインスタンスとして実装されている。以下に、タグを使ったXHTMLのコード例を示す。

<?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:o="http://openfaces.org/">


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


    <h:body>
        <h1>カレンダー</h1>
        <h:form id="form">
          <o:calendar id="calendar" value="#{CalendarBean.selectedDate}" />
        </h:form>
    </h:body>
</html>

このページにWebブラウザからアクセスすると、図3のようにカレンダーのコンポーネントが表示される。

図3 : カレンダーコンポーネントの使用例

ここではもっともシンプルなタグの利用例を示したが、属性などを細かく指定すれば、様々な形式に表示をカスタマイズすることができるようになっている(開発ガイド参照)。また、OpenFacesの各コンポーネントにはJavaScriptと連携させて利用するためのAPIも用意されている。カレンダーの場合には、選択されている日付を取得するためのgetSelectedDate()や、逆に日付をセットするためのsetSelectedDate()などの関数があり、JavaScriptを使ってこれらの関数を呼び出すことができるようになっている。また、イベント処理の仕組みも用意されており、カレンダーでは日付の選択が変更された場合に発行されるonchangeイベントや、カレンダーが最初にロードされたときおよびユーザが月や年の表示を変更したときに発行されるonperiodchangeイベントを利用できる。

次の例は、ユーザが日付の選択を変更した場合に、選択された日付を下部のテキストフィールドに表示するというものである。

<?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:o="http://openfaces.org/">


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


        <script type="text/javascript">
          function changeDate() {
            selectedDate = O$('form:calendar').getSelectedDate();
            O$("form:selectedDateText").setValue(selectedDate);
          }
        </script>
    </h:head>


    <h:body>
      <h1>カレンダー</h1>


        <h:form id="form">
          <o:calendar id="calendar" value="#{CalendarBean.selectedDate}" onchange="changeDate();"/>


          選択されている日付は<o:inputText id="selectedDateText" size="50"/>です。
        </h:form>


    </h:body>
</html>

ここではonchangeイベントが発生した場合にchangeDate()メソッドが呼び出され、そのときに選択されている日付を取得してテキストフィールドに渡すようにしている。テキストフィールドにはというOpenFacesで提供されるコンポーネントを利用している。このコンポーネントにはsetValue()メソッドで値をセットできる。

このページにWebブラウザからアクセスすると、最初は図4のように表示される。カレンダー上で適当な日付をクリックすれば、図5のようにその日付が下部のテキストフィールドに表示される。


図4 : イベントとクライアントAPIを利用したカレンダーコンポーネントの例	図5 : 日付を選択すると、選択された日付が表示される