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のいいところだと思う。手に馴染む感じ。
追記:
こういうコーディングとかはサブマシン中心なので無問題。