2009年12月28日月曜日

"jQuery & T2"でAjax

スズキです。

GAE/J系、いろいろやっていましたが、
そろそろ、フォームからの入力処理をかためておきたいところです。

フォームからの入力処理は、基本的に非同期通信(Ajax)で行おうと思っています。
そうなると経験的にJavascript側は、
jQuery( Form & Validation Plugin)の選択になります。
http://blog.suz-lab.com/2008/11/jquery-validate-jquery-form.html

コードは下記のような感じです。

簡単なURLを入力して登録するフォームです。
必須かつURLの形式になってないとエラーになります。
通信先は"/mypage/index.json/insert"としています。
--------【Velocity】--------
#set($layout="other/layout.html")
<script type="text/javascript" src="/other/js/ext/form.js"></script>
<script type="text/javascript" src="/other/js/ext/validate.js"></script>
<script type="text/javascript" src="/other/js/app/mypage/index.js"></script>
<h2>マイページ</h2>
<a href="$user.createLogoutURL("/index.html")">ログアウト</a>
<form id="form" method="post" action="/mypage/index.json/insert">
  <input type="text" name="url" class="required url" size="100"/><br />
  <input type="submit" value="登録"/><br />
</form>
--------
http://code.google.com/p/suz-lab-gae/source/browse/trunk/suz-lab-feed/war/WEB-INF/vm/page/other/mypage/index.html?r=70

上記のフォームにValidationプラグインとFormプラグインを適用させています。
帰ってくるデータはJSONを前提にし、成功したらalertで送信したURLが表示されます。
--------【Javascript】--------
$(function() {
  $("#form").validate({
    submitHandler: function(form) {
      $(form).ajaxSubmit({
        dataType: "json",
        success: function(json) {
          alert(json.url);
        }
      });
    }
  });
});
--------
http://code.google.com/p/suz-lab-gae/source/browse/trunk/suz-lab-feed/war/other/js/app/mypage/index.js?r=70


"/mypage/index.json/insert"に非同期通信かつPOSTでアクセスされたら、
引数(url)にPOSTで送られたパラメータ(url)の値が入った形でinsertメソッドが実行されます。
結果はJSONで出力するようにしています。
--------【Java】--------
@Page("/other/mypage/index.json")
public class IndexJson {
  @Ajax
  @POST
  @ActionPath
  public Navigation insert(
    @RequestParam("url") String url
  ) {
    Map<String, String> map = new HashMap<String, String>();
    map.put("url", url);
    return Json.convert(map);
  }
}
--------
http://code.google.com/p/suz-lab-gae/source/browse/trunk/suz-lab-feed/src/suz/lab/feed/page/other/mypage/IndexJson.java?r=70

T2のアノテーションはいろいろと用意されているので、適材適所で使えるように、
下記を熟読しなければ…
▼T2機能
http://sites.google.com/site/t2tips/Home/t2-userguide/3-1-t2kinou
▼アノテーション
http://code.google.com/p/t-2/wiki/Annotation
▼T2 ユーザガイド
http://t-2.googlecode.com/files/T2_UserGuice_Japanese%28ver0.5%29.pdf

【残タスク】
- Pageクラスのネーミングルール
- Pageクラスでのバリデーション
- API用のJSONフォーマット
- cron/task処理結果ページのテンプレート
- Page関係の抽象クラス再考

--------
http://www.suz-lab.com

0 コメント: