PrimeFacesのTreeTableはどこまで使えるか その3

だいぶ時間が経過してしまったのですが、前にPrimeFacesのTreeTableでどんなことができるか、確認してました。

• PrimeFacesのTreeTableはどこまで使えるか
• PrimeFacesのTreeTableはどこまで使えるか その2

で、あれから時間が経過し、当時は簡単な技術検証だったのですが、気が付いたら結構本格的に使うハメになりました…(-_-;うーん。

DataTableコンポーネントと違ってページングやソートができない、という欠点がありつつも、まあ使う業務画面によっては便利な場合もあるのかなぁ、とは思います。

で、どんな感じのことが実際に(今)できているか、いくつか挙げてみます。

Treeの展開

超基本…ですが、TreeTableはこんな感じの展開をします。

表示時

展開

TableとはいえTreeなので、深さはいくらでも可能です(多分、上限ってあるのかな？)

階層ごとの処理

TreeTableはPrimeFacesが定義するTreeNodeにデータを紐づけて定義します。
上記の展開画像にあるデータを例にすると以下のような定義。

//根っこはこんな定義
TreeNode root = new DefaultTreeNode(null, null);

//「システム」をぶらさげる
DeskTopSystem deskSystem = new DeskTopSystem();
TreeNode deskSystemNode = new DefaultTreeNode(deskSystem, root);

//「システム」の下に「CPU」をぶらさげる
DeskTopCpu deskCpu = new DeskTopCpu();
TreeNode deskCpuNode = new DefaultTreeNode(deskCpu, deskSystemNode);

データはオブジェクト型で格納されるので、取るときはちょっと面倒ですが。

そんなこんな、型や階層で判断して、その行にだけ何かを表示したりするのも簡単です。
例えば上記の展開例で出てる「？」マークはGraphicImageコンポ＋リンクで、マウスを置くと以下のようになります。
（今、実装しているものだと、クリックすると別タブでPDFファイル開くとか)

16GBと出てるのは、メモリの配下で選択されたものを表示するようにしただけです。
メモリをさらに展開してみると、以下のように16GBの項目が選択されてます。

このチェックボックスなんかも、最下端なものに表示させてるだけです。

イベント処理

以下のような表示があって、例えば一番上の項目をチェックします。

そのイベントで1つ上の親階層の選択理由カラムに入力項目を出したり。

一応入力してみる。

この例では、あらかじめinputTextを置いておいて、renderedでスイッチしてます。

Treeの展開状態は？

今まで上げた例の多くは、チェックボックスでの選択を契機にTreeのデータを裏で更新しています。画面自体はAjaxで(TreeTableに対して)更新しています。

こういうTree形式では、展開状態がキープされるのか？が非常に気になる所ですが、TreeNodeを再生成するとさすがにダメですが、単にTreeNodeの上から下まで既存データを更新するだけならば展開状態がキープされたまま画面更新されました。

なので、上記の例のようにイベント契機に画面更新してもTreeの展開はキープされたままです。地味に嬉しい(^^)

モデル次第では良い感じ

Treeは自由に階層を構成できるので、例えば下図のように

• CPU 3階層
• メモリ 2階層
• ストレージ 4階層

みたいにできて、TreeNodeに入れるオブジェクトのモデルをしっかり作っておけば、階層ごとに判定して色々な処理ができます。

TreeTableと上手く使い分ければ、良い感じのコンポーネントなんじゃないかなぁと思います。
本当に使いやすいのかどうかは、将来的にエンドユーザさんに聞いてみたい所。