Click入門記 その5 〜 Tableにリンクを貼る!

いきなりスゴイ期間ブッ飛んでしまいました。でも、仕事で(半分趣味で)使う機会に恵まれたので、Clickは1.2ベースで続行。

まず、Tableを作りましょう必要があります。Click Framework(1.2だけ?)では、

public class HogePage extends Page {
    public Table table = new Table();

のように、

  • public
  • net.sf.Control インタフェースの実装クラスを型に持つフィールド

があれば、 addControl 相当の効果を得ることができます。慣れですね。

上記の例では

 $table

と、Velocityテンプレート内に書けばレンダリングされる、というわけです。
デザイナーにちっとも優しくありませんが、Javaプログラマから見ればすこぶる楽チンです。

表の様式は自動で決まるわけではないので、

        table.setClass(Table.CLASS_ITS);
        table.setPageSize(20);
        table.setSortable(false);
        table.setShowBanner(true);
        table.addColumn(column);
        table.addColumn(new Column("name"));
        table.addColumn(new Column("birthday"));

のように設定してやる必要があります。onInit()とかに仕込むのがいいのではないでしょうか。

表の行、つまりデータをアタッチする必要がありますので、

    table.setRowList(list);

のようにしてセットします。listは java.util.List で、基本的にはJavaBeansの規則に従ったセッタ・ゲッタを持つBeanのリストということになるでしょうか。というのも、

     table.addColumn(new Column("name"));

とすることで、その列に表示される値は、Listの各行(bean)の nameプロパティの値が使われるからです。

ちなみに、object graphを辿ることも出来るようなので

    table.addColumn(new Column("department.section"));

としておけば、 bean.getDepartment().getSection() の値が表示されるでしょう。

型変換とか、細かい話は抜きにします。

ここまでで、まずテーブルは表示できました。


さて、表にリンクを貼ってみましょう。イメージとしては、

操作Id名前電話番号
編集14411hogexxx-xxxx-xxxx
みたいな感じで、「編集」がリンクになっていて、その行をどうこうすることができる、と。

Columnだけではその能力は持っていません。そこで登場するのが net.sf.click.control.Decoratorインタフェースと、その実装クラスである LinkDecorator です。

まず、この「操作」という列を追加しましょう。

        Column column = new Column("action", "操作");
        column.setDecorator(new LinkDecorator(table, editLink, "personId"));

ここで、editLinkという ActionLinkは先に作っておきましょう。こいつも addControl() されている必要がありますので、たとえば

    public ActionLink editLink = new ActionLink("editLink", this, "onEditClicked");

などのようにpublicフィールドを宣言しておけばいいでしょう。Click Frameworkから対象Pageのコントロールを認識できることが重要です。Clickの場合はイベントハンドラのコールバックなどは全て各コントロールに実施させていますから、コントロールとして認識されない限り、コールバックされないことになってしまいます。

さて、これで各行にリンクがActionLinkが貼られました。外観はActionLinkのインスタンスに対する操作で変更できますね。
次は、コールバックされるハンドラを実装しておく必要があります。

    public boolean onEditClicked() {
        int personId = editLink.getValueInteger();

              .
              .
        return true;
    }

ここで、ActionLinkの "value" にセットされる値は

       column.setDecorator(new LinkDecorator(table, editLink, "personId"));

このLinkDecoratorのコンストラクタの第三引数に示される「プロパティ名」が用いられます。上記の例ならば、行に対応するbean.getPersonId()の値が用いられるというわけです。

これでちょっとした表と、表に付随するアクションなんかは作れそうですね。