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へ追加

view plainprint?

1. <servlet>  
2.      <servlet-name>restServlet</servlet-name>  
3.      <servlet-class>net.arnx.jsonic.web.RESTServlet</servlet-class>  
4.      <init-param>  
5.       <param-name>config</param-name><param-value>{  
6.        "mappings":{  
7.         "/{class}.json":"tutorial.controller.twitter.${class}Controller"  
8.        }  
9.       }  
10.       </param-value></init-param>  
11.     </servlet>  
12.     ・  
13.     ・  
14.     ・  
15.     <servlet-mapping>  
16.      <servlet-name>restServlet</servlet-name>  
17.      <url-pattern>*.json</url-pattern>  
18.     </servlet-mapping>  

     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()メソッドを呼出すように実装します。

view plainprint?

1. import java.util.List;  
2.   
3. import tutorial.model.Tweet;  
4. import tutorial.service.TwitterService;  
5.   
6. public class AjaxTweetController {  
7.   
8.     private TwitterService service;  
9.   
10.     public List<tweet> find() {  
11.   
12.         this.service = new TwitterService();  
13.   
14.         List<tweet> tweetList = service.getTweetList();  
15.   
16.         return tweetList;  
17.     }  
18.   
19.     public void create(Tweet tweet) {  
20.   
21.         this.service = new TwitterService();  
22.   
23.         this.service.tweet(tweet);  
24.     }  
25. }  
26. </tweet></tweet>  

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にメソッド追加

view plainprint?

1. /** 
2.      * JSON形式でもらってDataStoreへ追加 
3.      * @param jsonTweet 
4.      * @return String 
5.      */  
6.     public String jsonTweet(String jsonTweet) {  
7.   
8.         Tweet tweet = JSON.decode(jsonTweet, Tweet.class);  
9.         tweet = this.tweet(tweet);  
10.         String retJsonTweet = JSON.encode(tweet);  
11.         return retJsonTweet;  
12.     }  

/**
     * 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は下記

view plainprint?

1. <p>What are you doing?</p>  
2. <form id="tweetForm" action="tweet" method="post" name="tweetForm">  
3. <textarea id="content" name="content"></textarea>  
4.   
5. <input type="button" value="tweet" onclick="sendTweetJSON()"/>  
6. </form>  
7.   
8. <div id="ajaxTweetList"></div>  
9.   
10. </body>  
11. <script type="text/javascript">  
12.   
13. function sendTweetJSON() {  
14.  var form = $("#tweetForm");  
15.  var param = {};  
16.  $(form.serializeArray()).each(function(i,v){  
17.   param[v.name] = v.value;  
18.  });  
19.  var jsonval = $.toJSON(param);  
20.   
21.  $.ajax({  
22.   type:"POST",  
23.   url:"/AjaxTweet.json",  
24.   contentType:"application/json",  
25.   data:jsonval,  
26.   cache:false,  
27.   success:function(data){getAjaxList();}  
28.   });  
29. }  
30.   
31. function displayList(jsonData) {  
32.  var list = jsonData;  
33.  var resultData = "<table><tr><th>TweetList</th></tr>";  
34.   
35.  for (var i in list) {  
36.   var content = list[i].content;  
37.   resultData += "<tr><td>" + content + "</td></tr>";  
38.  }  
39.  resultData += "</table>";  
40.  return resultData;  
41. }  
42.   
43. function getAjaxList() {  
44.  var list;  
45.  $.get("/AjaxTweet.json", function(data){  
46.   $('#ajaxTweetList').html(displayList(data));  
47.  });  
48. }  
49.   
50. $(function() {  
51.  getAjaxList();  
52. });  
53. </script>  

<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でライブラリを読込み

view plainprint?

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

<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