slim3 + JSONICメモ

slim3のtutorialをJSONICを使ってajaxでTweetするようにと、RESTfulに変えてみたのでメモ
できたのはこんなかんじ


JSONICの使い方メモ

準備

 最新のjsonic.jarをダウンロードしてプロジェクトに配置・ライブラリに追加

※追記 2011/02/01 jsonic.jarの配置場所が、war/WEB-INF/lib以下に置かないとローカルで動きませんでした。

エンコード・デコード

 JSON.decode(String json, XXX.class)でjson→javaオブジェクト
 JSON.encode(XXX)でjavaオブジェクト→json

WebサービスAPIを使う

RESTサーブレットを使用する場合

web.xmlへ追加

     restServlet
     net.arnx.jsonic.web.RESTServlet
     
      config{
       "mappings":{
        "/{class}.json":"tutorial.controller.twitter.${class}Controller"
       }
      }
      
    
    ・
    ・
    ・
    
     restServlet
     *.json
    

コントローラは下記のように実装。

RESTfullな操作はJSONICのRESTサーブレットがやってくれるので、

HTTP MethodのGETでfind()メソッド、POSTでcreate()メソッドを呼出すように実装します。

import java.util.List;

import tutorial.model.Tweet;
import tutorial.service.TwitterService;

public class AjaxTweetController {

    private TwitterService service;

    public List find() {

        this.service = new TwitterService();

        List tweetList = service.getTweetList();

        return tweetList;
    }

    public void create(Tweet tweet) {

        this.service = new TwitterService();

        this.service.tweet(tweet);
    }
}

TwitterServiceにメソッド追加

/**
     * JSON形式でもらってDataStoreへ追加
     * @param jsonTweet
     * @return String
     */
    public String jsonTweet(String jsonTweet) {

        Tweet tweet = JSON.decode(jsonTweet, Tweet.class);
        tweet = this.tweet(tweet);
        String retJsonTweet = JSON.encode(tweet);
        return retJsonTweet;
    }

viewは下記

<p>What are you doing?</p>
<form id="tweetForm" action="tweet" method="post" name="tweetForm">
<textarea id="content" name="content"></textarea><br/>
<input type="button" value="tweet" onclick="sendTweetJSON()"/>
</form>

<div id="ajaxTweetList"></div>

</body>
<script type="text/javascript">

function sendTweetJSON() {
 var form = $("#tweetForm");
 var param = {};
 $(form.serializeArray()).each(function(i,v){
  param[v.name] = v.value;
 });
 var jsonval = $.toJSON(param);

 $.ajax({
  type:"POST",
  url:"/AjaxTweet.json",
  contentType:"application/json",
  data:jsonval,
  cache:false,
  success:function(data){getAjaxList();}
  });
}

function displayList(jsonData) {
 var list = jsonData;
 var resultData = "<table><tr><th>TweetList</th></tr>";

 for (var i in list) {
  var content = list[i].content;
  resultData += "<tr><td>" + content + "</td></tr>";
 }
 resultData += "</table>";
 return resultData;
}

function getAjaxList() {
 var list;
 $.get("/AjaxTweet.json", function(data){
  $('#ajaxTweetList').html(displayList(data));
 });
}

$(function() {
 getAjaxList();
});
</script>

jqueryを使用しているのでheadでライブラリを読込み

<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.json-2.2.min.js"></script>
<script type="text/javascript" src="/js/deserialize.js"></script>

参考サイト：
jQueryでフォームの内容をJSONで投げ、受け取ったJSONをフォームに戻す方法

JSONIC