読者です 読者をやめる 読者になる 読者になる

Challenge Java EE !

Java EEを中心に趣味や仕事における開発メモを書いています。

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

PrimeFaces TreeTable JSF

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

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

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

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

Treeの展開

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

表示時
f:id:kikutaro777:20130815192517j:plain

展開
f:id:kikutaro777:20130815192529j:plain

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ファイル開くとか)
f:id:kikutaro777:20130815193649j:plain

16GBと出てるのは、メモリの配下で選択されたものを表示するようにしただけです。
メモリをさらに展開してみると、以下のように16GBの項目が選択されてます。
f:id:kikutaro777:20130815193743j:plain
このチェックボックスなんかも、最下端なものに表示させてるだけです。

イベント処理

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

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

一応入力してみる。
f:id:kikutaro777:20130815194558j:plain

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

Treeの展開状態は?

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

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

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

モデル次第では良い感じ

Treeは自由に階層を構成できるので、例えば下図のように
f:id:kikutaro777:20130815194830j:plain

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

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

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

にほんブログ村 IT技術ブログへ
にほんブログ村
にほんブログ村 IT技術ブログ Javaへ
にほんブログ村