固定のJSON を Wicket 使用で配信するサンプル

固定の JSON データを、Wicket で作るサイトに用意して、JavaScript に渡すサンプルである。
バリデーションチェック後のメッセージを jQuery で処理するためにこの方法は使えるだろう。

以下のように、JSONデータがページクラスと同じ階層にあったとする。
------ userinfo.json ------
[
  {   "name" : "Uran"
    , "age"  : 230
    , "code" : "a10834"
  }
 ,{   "name" : "Luke"
    , "age"  : 60
    , "code" : "a20371"
  }
 ,{   "name" : "King"
    , "age"  : 90
    , "code" : "x70201"
  }
]
---------------------------
このデータを返す WebPage

package org.uran.page.jsontest;
import java.io.File;
import java.net.URISyntaxException;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.request.handler.resource.ResourceStreamRequestHandler;
import org.apache.wicket.util.resource.FileResourceStream;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
/**
 * UserInfoJson
 */
public class UserInfoJson extends WebPage{
   public UserInfoJson(){
      try{
      File file = new File(getClass().getResource("userinfo.json").toURI());
      getRequestCycle().scheduleRequestHandlerAfterCurrent(
         new ResourceStreamRequestHandler(new FileResourceStream(file))
      );
      }catch(URISyntaxException e){
         Logger logger = LoggerFactory.getLogger(this.getClass());
         logger.warn(e.getMessage(), e);
      }
   }
}

サンプルページのHTML は、以下の様に用意

<wicket:extend>
<select id="ix">
   <option value="0">0</option>
   <option value="1">1</option>
   <option value="2">2</option>
</select>
<table>
   <tr><td>key = name</td><td><button id="name">view</button></td></tr>
   <tr><td>key = age </td><td><button id="age">view</button></td></tr>
   <tr><td>key = code</td><td><button id="code">view</button></td></tr>
</table>
<div id="info"></div>
</wicket:extend>

サンプルの Webページクラスでは、renderHead をoverride して、jquery-2.0.3.min.js と、以下の JavaScript を
ヘッダで読込むように定義する。
UserInfoJson を package の完全パスで指定した URL を指定することで UserInfoJson で書かれたとおり
JSONデータをサーバから HTTP-GET で取得するようにする。
（以下、debug文、console.log も書いてある）


$(function(){
   var userinfo = {};
   $.getJSON("org.uran.page.jsontest.UserInfoJson", function(d){
      userinfo = d;
   }).done(function(){
      console.log("-- done --");  // for debug
      $.map(this, function(value, key){
         console.log("key="+key+"  value="+value);
      });
      console.log("----------");
   }).fail(function(){
      console.log("-- fail --");
      console.log("url = "+ this.url );
   }).always(function(){
      console.log("-- always --");
   });
   $('#name').click(function(){
      $('#info').html( userinfo[$('#ix').val()].name );
   });
   $('#age').click(function(){
      $('#info').html( userinfo[$('#ix').val()].age );
   });
   $('#code').click(function(){
      $('#info').html( userinfo[$('#ix').val()].code );
   });
});


これで、<select> で選択したインデックスの name, ade , code を、参照することになる。