yojikのlog

yojikのブログです

WebフレームワークClickでAjaxしたい時

あまりに検索しづらいフレームワークClick関連エントリです。
Click付属のexampleでは、Ajax用のレスポンスを返すためだけのPageクラスを用意していたんだけど、ちょっと冗長に感じる。
ということで、こんな感じのコーディングをしてみる。

Formの作成

Pageの中にこんな形で普通にFormを作っておく。

    Form ajaxForm = new Form("addTodo");
    TextField ajaxContets = new TextField("contents");

Formとリスナーの登録

さらにformにlistnerを設定した上でaddControlしておく

    public void onInit() {
        ajaxForm.add(ajaxContets);
        ajaxForm.setListener(this,"onAddTodo");
        ajaxForm.add(ajaxContets);
        addControl(ajaxForm);
    //省略・・ 

JavaScriptの作成

あとは、form_name=<指定したformの名前>というパラメータを含んだXMLHttpRequestを送るだけ。(サンプルはjQueryを利用)

function postTodo(){
    val = $("input#contents").val();
    $.post("todoList.htm",{
      contents: val,
      form_name: "addTodo"
    },function(xml){ 
      $("div#todoList").append(xml)
        .find("div:last-child").hide().fadeIn("slow");
      TB_init(); 
    });
}      

イベントリスナー

ちなみに受け手では、setPathでXMLテンプレートにフォワードする。

    public boolean onAddTodo() {
        String contents = String.valueOf(ajaxContets.getValue());
         //中略
        setPath("todoListAjaxHandler.htm");
        return false;
    }

Click本体のソースを読むと当たり前の処理なんだけど、なかなか便利です。PageにおけるAjaxなリクエストと、普通のリクエストを統一的に扱える。こういうのを最小のコーディングで作成できるのがClickのいいところだと思う。手に馴染む感じ。
追記:
こういうコーディングとかはサブマシン中心なので無問題。