イージーネット Tech Blog

はじめまして。
プロダクト&サービス事業部の武輪です。

Ajaxと言えば、JavaScriptをごりごり書かないと！ってイメージがあるのですが、JavaScriptを少し書くだけ、もしくはまったく書かずに、コンポーネント側で勝手にやってくれれば簡単ですよね。
Ajaxを用いたJSFコンポーネントやフレームワークって他にも、RichFacesやらajax4jsfやらICEfacesやらがあるのですけども、今回私は、OpenFacesというJSFコンポーネントを紹介したいと思います。

OpenFacesは2009年5月末に出てきたばかりのAjaxを用いたJSFコンポーネントです。
サイトからはfaceletsで実装されたサンプルとJSPで実装されたサンプルをダウンロードすることができます。

早速、faceletsで実装されたサンプルを動かしてみました。

どんな機能があるの？

サンプルにはたくさんの魅力的なデモが含まれていたのですが、そのうちのいくつかを紹介したいと思います。

カレンダー

よくこんなカレンダーありますよね。

1

<o:calendar/>

xhtmlファイルにはたったこれだけで画面にカレンダーがぽんと表示されちゃいます。
また、下のようにスタイルを細かく指定することもできます。

1
2
3
4
5
6
7
8
9
10
11

<o:calendar style="border: 1px solid white;"
            headerStyle="background: #fff;"
            rolloverDayStyle="background: #fff; border: 1px solid #8eb5d4; color: black;"
            rolloverWeekendDayStyle="background: #f9f6f1; border: 1px solid #f3922b; color: black;"
            selectedDayStyle="background: #8eb5d4;"
            todayStyle="color: #ff8a01; font-weight: bold; background: #fff;"
            footerStyle="border-top: 1px solid #505050; background: #fff;"
            daysHeaderStyle="background: #505050; color: white;"
            inactiveMonthDayStyle="color: #b4b4b4; background: #fff;"
            dayStyle="color: #505050;  background: #fff; border: 1px solid #f9f9f9;"
            weekendDayStyle="color: #000000;  background: #fff;"/>

これが画面に表示されるとこんな感じ。

ちなみにデモではすべて～～Styleでcssを直接指定していましたが、～～Classというアトリビュートでcssのクラスを指定することもできます。
JAVA側の実装もシンプルな感じ。
CalendarBean.javaとLocaleItem.javaの2クラスだけでした。

グラフ

OpenFacesでは、JFreeChartというライブラリーを利用してグラフを生成できます。
円グラフ、横棒グラフ、縦棒グラフ、折れ線グラフの4種類が用意されています。

円グラフの記述例は↓こんな感じ。

1
2
3
4
5
6
7
8
9

<o:chart id="yearPrecipitationChart"
        model="#{CityPrecipitation}"
        width="320"
        height="275"
        legendVisible="false">
<o:pieChartView colors="#5a87be, #94c237, #fff555, #da6a28" labelsVisible="true"/>
<o:chartTitle text="Amount of Precipitation During the Year"
                style="font-size: 14px;"/>
</o:chart>

BackingBeanは、それぞれのグラフ用にChartModelというインターフェースを実装したmodelをもっています。
そのmodelを元にグラフが描画されるみたい。

データテーブル

データリストの一覧表示には以下の機能が備わっています。

• 検索
• ソート
• ページング
• 選択・・・1行選択したり複数行選択したり。
• カラムのリサイズ
• キーボード操作・・・方向キーで選択行を変更したり、Shiftキー＋方向キーで複数行選択したり。

他にもいろいろ面白そうな機能があります

ウィンドウの表示とか。
ポップアップメニュー(右クリックでメニュー表示)とか。
ツリー状メニューの表示とか。
カレンダーからの日付選択とか。

たくさんの面白そうな機能がついているので、ぜひ実際に動く様子を見てみてください。(→OpenFaces Live Demo)

ところでライセンスは？

OpenFacesが採用しているライセンスは、dual license modelです。

dual licenseって何よ？って話なんですけども、簡単に言うと、開発したアプリケーションのライセンスをLGPLにするなら無償、そうでないならOpenFacesの商用ライセンスを購入してねってことみたいです。