PrimeFaces3.5RC1リリース！新コンポーネントを触ってみた

久しぶりにPrimeFacesネタです。本日1月21日に新しいバージョン3.5のRC1が出ました。

PrimeFacesについては過去エントリの「PrimeFacesを使ったJSFリッチユーザインタフェース入門〜ちょっと便利なコンポ達〜」を参照して下さい。

すぐ触ってみたいぜ、という方はこちらも過去エントリですが、NetBeans＆GlassFishを利用してPrimeFacesをセットアップする方法をまとめてますので参考にして頂ければと思います。

私はNetBeansでMavenを利用したケースがメインなので、今日はその流れで書きます。

3.5RC1での変更

以下サイトで変更点の概要および詳細がわかります。

新規に追加されたコンポーネントとしては

時計(Clock)　→Clockデモ
ツリーの水平表示(Horizontal Tree)　→Horizontal Treeデモ

の2つがあるようです。今日の記事はこれを動かしてみます。

既存コンポーネントで機能拡張されたものではデータテーブルに色々と便利機能が追加されてます

データテーブルでのマルチソート(DataTable Multiple Column Sorting)

　　→データテーブルのマルチソートデモ
　　　※2つ目のカラム以降コントロールキー等を押しながら選択する

データテーブルのセル内編集(DataTable InCell Editing)

　　→データテーブルのセル内編集デモ

データテーブルの行固定(Frozen Rows for DataTable)

　　→データテーブルの行固定デモ
辺りでしょうか。

セル内編集は今まで「編集ボタン」を押さないと編集モードにならなかったのですが、マウスダブルクリックで編集できるようになっています。
3つ目の行固定ですが、個人的には「列固定」が欲しい…のでちょっと残念だったりもします(^^;

pom.xmlの編集

Mavenを利用している場合はpom.xmlでバージョン情報を以下のように書き換えます。

<dependency>
    <groupId>org.primefaces</groupId>
    <artifactId>primefaces</artifactId>
    <version>3.5.RC1</version>
</dependency>

新コンポーネント「Clock」を使ってみる

3.5で増えたコンポーネントの1つに「Clock」があります。
最初、針時計のウィジェット的なモノを勝手にイメージしていて熱いぜ！と思ってしましましたが、実際には以下のようなコンポです(^^;

使い方は簡単でxhtmlで

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Clock使ってみる</title>
    </h:head>
    
    <h:body>
        <h:form>
            <p:clock />
        </h:form>
    </h:body>
</html>

のように書きます。動かすと
f:id:kikutaro777:20130121170217j:plain

日付が海外表記…ですね(^^;属性にpatternがあるので、以下のように指定できます。

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Clock使ってみる</title>
    </h:head>
    
    <h:body>
        <h:form>
            <p:clock pattern="yyyy/MM/dd HH:mm:ss" />
        </h:form>
    </h:body>
</html>

実行
f:id:kikutaro777:20130121170249j:plain

なお上記で参照している時刻はクライアントマシンの時刻となっています。
属性「mode」で「server」と記述すればサーバ時刻を参照できるようですね(まだ試してないです)。

新コンポーネント「Horizontal Tree」を使ってみる

New componentと記述があったので、新しいタグかと思いましたが、実際には従来のtreeタグにorientation属性でhorizontalを指定する形で使うようです。

以下サンプルで動かしてみました。ほぼデモのサンプルまんまですが；

JSF管理対象のBeanを定義

package jp.co.mycompany.primefacesmavensample;

import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import javax.faces.bean.SessionScoped;
import org.primefaces.model.DefaultTreeNode;
import org.primefaces.model.TreeNode;

@ManagedBean
@RequestScoped
public class SazaesanTreeBean implements Serializable{

    private TreeNode root;

    public SazaesanTreeBean() {
        root = new DefaultTreeNode("波平", null);
	TreeNode child1 = new DefaultTreeNode("サザエ", root);
	TreeNode child2 = new DefaultTreeNode("カツオ", root);
	TreeNode child3 = new DefaultTreeNode("ワカメ", root);
		
	TreeNode grandchild = new DefaultTreeNode("タラちゃん", child1);
    }

    public TreeNode getRoot() {
        return root;
    }
}

xhtmlでコンポ定義(Treeの定義のみ抜粋)

<p:tree id="tree" value="#{sazaesanTreeBean.root}" var="node" orientation="horizontal" >
    <p:treeNode id="treeNode">
        <h:outputText value="#{node}" id="lblNode"/>
    </p:treeNode>
</p:tree>

動作
初期表示
f:id:kikutaro777:20130121170403j:plain
波平さんの頭をクリックします
f:id:kikutaro777:20130121170422j:plain
サザエさんに「+」がみえるので、さらにクリックします
f:id:kikutaro777:20130121170458j:plain

一見ボタンっぽくみえるので、普通に押せば良いかと思いましたが、実際には「+」マークの部分をクリックしないと展開しない動きでした。ふむ。

3.4から3.5RC1に定義を変えて上手く動かない場合

3.5RC1以前も利用していた場合は「消去してビルド」を行って一度cleanしたほうが良さそうです。
3.4のキャッシュが内部的に残っていて、依存性が書き換わったけれどGlassFishで3.4が読み込まれて3.5RC1のコンポがうまく起動しない、といった現象がありました。
(具体的には、上記例でclockタグを書けるけど、実際に動かすと「そんなタグないよ！」的なエラーとなるなど)

今日はこれくらいで。また新しい機能を触ったら更新します。