GWTでJavaScriptを書かないAjax開発--第7回：英単語テストアプリの作成 前編

単語帳データを受信

　テストに用いる単語帳データは、リスト1をアプリケーション起動時に一括して受信する。初めに"fruits"というジャンルがプロパティ名として記され、そのプロパティの値が実際のデータ（配列）となっている。

リスト1 受信するJSON形式のデータ

{ "fruits" :   /* ジャンル(プロパティ名) */
  [            /* 単語帳データ(配列) */
    { "japanese" : "りんご"  , "english" : "apple"      },
    { "japanese" : "みかん"  , "english" : "orange"     },
    { "japanese" : "もも"    , "english" : "peach"      },
    { "japanese" : "いちご"  , "english" : "strawberry" },
    { "japanese" : "パパイヤ", "english" : "papaya"     }
  ]
}

　JSONデータを取得する例をリスト2に示す。JSONParser、JSONValue、JSONExceptionは、JSON形式のデータを扱うためのクラスで、com.google.gwt.json.clientパッケージに属している。

　JSONValueオブジェクトは、JSONParserによる解析によって得られるもので、それが{〜}で表されたオブジェクトならisObject()によりJSONObjectにキャストし、[〜]で表された配列であればisArray()でJSONArrayにキャストして利用する。

リスト2 ResponseTextHandlerによるJSONデータの取得（例）

String    genre = "fruits";  // ジャンル
JSONArray dictionary;        // 単語帳データ
// ....................
HTTPRequest.asyncGet( "リスト1をリクエストするURL", new ResponseTextHandler() {
    public void onCompletion( String responseText ) {
      try {
        // テキストをJSON形式として解析
        JSONValue value = JSONParser.parse( responseText );
        // 特定ジャンルのデータを抽出
        dictionary = value.isObject().get( genre ).isArray();
      }  catch ( JSONException ex )  {
        // 例外処理
      }
    }
  }
);

　リスト2で取得したJSONデータから、さらに出題するデータを抽出する方法をリスト3に示す。単語帳データはJSONArrayオブジェクトなので、get()で要素を順に取得する。その要素はJSONObjectオブジェクトだ。ここからさらにjapanese、englishというプロパティの値を取得する。それぞれ問題として表示される日本語と、答えとなる英単語だ。

リスト3 出題するデータの抽出(例)

int current = 0;
// ....................
// 配列から単語データを抽出
JSONObject word = dictionary.get( current++ ).isObject();
// 画面に表示する日本語
String japanese = word.get( "japanese" ).isString().stringValue();
// 答えとなる英単語
String english  = word.get( "english" ).isString().stringValue();
// 最後までたどり着いたら最初の問題に戻る
if ( current >= dictionary.size() )  current = 0;

　日本語は画面に表示させて設問とする。英単語は、表示させないLabelのテキストに代入しておき、フォームに入力された内容と照合すればよい。画像の切り替えはSimplePanelを用いると良いだろう。

　この連載は次回で最後となる。最終回は、テキストではなくオブジェクトを受信する方法を紹介しよう。