JSONを使用したDojoツリーのArrayListへの接続

今日のアプリケーションでは、Web 2.0機能の重要性が増しつつあります。有望な機能の1つはDojoなどのJavaScriptツールキットの使用で、これにより、Webページの動作をデスクトップ・インタフェースに近づけることができる一方、ブラウザの非互換性に対処し、標準に準拠した使いやすく保守可能なコードを利用できます。

このチュートリアルは、「Java Oneハンズオン・ラボ: Leveraging JavaScript Toolkits for End-to-End Connectivity in Web Applications」を基にしており、Dojoツリー・ウィジェットをWebページに追加して構成する方法と、サーバー側からJSON形式でツリー・リクエストに応答できるようにする方法について説明しています。このとき、http://json.orgから無料で利用できる一連のJavaクラスを使用して、ArrayListのデータを処理してJSON形式にします。

目次

• NetBeansプロジェクトへのDojoツールキットの追加
• プロジェクト・ファイルからツールキット・リソースへのリンク
• Dojoツリー・ウィジェットの追加と構成
• サードパーティJSON変換ソースをJARファイルとしてプロジェクトに追加
• JSONレスポンスを開始するサーブレットの準備
• 関連項目

このドキュメントを完了するには、次のソフトウェアとリソースが必要です。

ソフトウェアまたはリソース	必須バージョン
NetBeans IDEのJava EEバンドル版	6.7以降
Java Development Kit (JDK)	6または7
GlassFishサーバー または Tomcatサーブレット・コンテナ	Open Source Edition 3.1.x   6.xまたは7.x
Dojoツールキット	バージョン1.2.xまたはそれ以降
Dojoサンプル・プロジェクト	該当なし

注意:

• このチュートリアルを完了するには、いくつかの手順でインターネット接続が必要になります。
• IDEのJavaダウンロード・バンドルでは、IDEとともにGlassFish Server Open Source Editionをインストールして登録することもできます。このチュートリアルでは、クライアント・サーバー通信のシミュレーションを行うために、サーバーが必要です。
• このチュートリアルには、以前のバージョンのIDEを使用できます。バージョン6.5では、様々なツールキットがIDEにバンドルされていました。NetBeans 6.5にはコアDojoライブラリバージョン1.1.0が組み込まれています。このチュートリアルには、DojoコアライブラリとDijitライブラリの両方のコンポーネントが必要です。コア・ライブラリとDijitライブラリの両方を含んでいる更新されたバージョン(1.2.xまたはそれ以降)のツールキットをダウンロードし、IDEのJavaScriptライブラリ・マネージャを使用して登録する必要があります。
• 完成したプロジェクトは次のようになります。
  

NetBeansプロジェクトへのDojoツールキットの追加

最初に、IDEでサンプル・プロジェクトを開きます。プロジェクトが開いたら、IDEの「プロジェクト」ウィンドウで、プロジェクトにDojoリソースを直接コピーします。

1. チュートリアルのDojoサンプル・プロジェクトをコンピュータ上の場所にダウンロードします。
2. NetBeansを起動し、IDEのツールバーの「プロジェクトを開く」ボタン()をクリックします。
3. 表示される「プロジェクトを開く」ダイアログで、コンピュータ上のDojoサンプル・プロジェクトの場所に移動し、「プロジェクトを開く」をクリックします。
   
   DojoTreeSampleプロジェクトをIDEで開くと、最初はエラー・バッジの付いた赤いテキストで表示されますが、これは参照の問題があることを示しています。
   
   参照の問題が存在するのは、プロジェクトで使用されているJavaクラス(TribeとTribeDataManager)がJSON JARファイル内のクラスを参照しているためで、このファイルはプロジェクトにJSON JARファイルを追加する後述の項で追加します。
4. これから追加するDojoリソースを格納するためのフォルダを、プロジェクト内に作成します。これを行うには、「プロジェクト」ウィンドウで「Webページ」ノードを右クリックし、「新規」>「フォルダ」を選択します。「新規フォルダ」ダイアログで、「フォルダ名」フィールドに「resources」と入力します。「親フォルダ」フィールドには、デフォルトで「web」と入力されます。「終了」をクリックして新規フォルダを作成し、「プロジェクト」ウィンドウの「Webページ」ノードの下に表示されるようになったことを確認します。
   
   注意: 「プロジェクト」ウィンドウ([Ctrl]-[1]、Macの場合は[⌘]-[1])は、プロジェクト内の重要な項目の論理ビューを示す、プロジェクト・ソースへのメイン・エントリ・ポイントです。「ファイル」ウィンドウ([Ctrl]-[2]、Macの場合は[⌘]-[2])には、プロジェクトのディレクトリ・ベースのビューが表示され、「プロジェクト」ウィンドウでは表示されないすべてのファイルやフォルダが含まれます。このステップの「新規フォルダ」ダイアログでは、「Webページ」ノードから新規項目を作成するときに、「親フォルダ」フィールドにデフォルトで「web」と入力されます。「ファイル」ウィンドウを開くと、新しいresourcesフォルダがwebディレクトリの下に表示されるようになったことがわかります。
5. Dojoツールキット (バージョン1.2.xまたはそれ以降)のコピーを入手します。Dojoツールキットはhttp://www.dojotoolkit.org/downloadsからダウンロードできます。
   
   現在のバージョンのDojoツールキットには、Dojoコア、Dijit、およびDojoXライブラリが含まれています。Dojoのツリー・ウィジェットを実装するには、コア・ライブラリのItemFileReadStoreモジュールと、Dijitライブラリに含まれているツリーウィジェット自体の、2つのコンポーネントが基本的に必要です。
   • dojo.data.ItemFileReadStore: JSON構造化コンテンツをHTTPエンドポイント(このチュートリアルではサーブレット)から読み取り、すべての項目をメモリー内に保存して単純にすばやくアクセスできるようにします。
   • dijit.Tree: ItemFileReadStoreから取得されたJSONデータを表示するツリー・ウィジェットです。
6. Dojoリソースをプロジェクトに追加するには、それらをコンピュータ上の場所から単純にコピー([Ctrl]-[C]、Macの場合は[⌘]-[C])し、次にIDEで、新しいresourcesノードを右クリックして「貼付け」を選択するか、resourcesノードを単純に選択して([Ctrl]-[V]、Macの場合は[⌘]-[V])を押します。
   
   必要なのはDojoコアライブラリとDijitライブラリのみであるため、ツールキットの最近のコピーをダウンロードした場合、DojoXライブラリをプロジェクトに追加する必要はありません。
   
   DojoコアライブラリとDijitライブラリを追加した後、「プロジェクト」ウィンドウは次のようになるはずです。
   

この段階で、DojoTreeSampleプロジェクトをIDEで開き、必要なDojoリソースをプロジェクトに追加することができました。次のステップでは、ツリー・ウィジェットをエンド・ユーザーに表示するHTMLファイルの作業を始めます。

プロジェクト・ファイルからツールキット・リソースへのリンク

ツールキットのリソースを使用するには、コア・ライブラリに含まれているdojo.jsファイルにリンクする必要があります。dojo.jsファイルは、Dojoのソース・ローダーであり、使用すべき正しいホスト環境を判定します。その間に、parseOnLoadパラメータを追加してdjConfigの構成も行うことができます。

1. 「プロジェクト」ウィンドウで、dojoDemo.htmlファイルをダブルクリックしてエディタで開きます。
2. dojoDemo.htmlファイルで、置換します:

   <!-- TODO: link to Dojo resources here -->

   というコメントを次の<script>タグへ:

   <script type="text/javascript"
       src="resources/dojo/dojo.js"
       djConfig="parseOnLoad: true">
   </script>

   • djConfigを使用すると、Dojoの動作を制御するグローバル設定をオーバーライドできます(たとえば、parseOnLoadプロパティを使用して)。
   • parseOnLoadをtrueに設定すると、ページがロードされるときに必ずウィジェットとページ・マークアップが解析されます。
3. ツールキットに含まれているサンプル・テーマにリンクします。Dijitには、tundra、soriaおよびnihiloという3つのサンプル・テーマが用意されています。これらはdijit/themesフォルダにあり、「プロジェクト」ウィンドウから確認できます。
   
   nihiloテーマにリンクするには、次の@import文をページに追加します。ページの<head>タグの間、たとえば、先ほど追加した<script>タグのすぐ下に追加できます(太字部分が変更箇所)。

   <script type="text/javascript"
       src="resources/dojo/dojo.js"
       djConfig="parseOnLoad: true">
   </script>
   
   <style type="text/css">
       @import "resources/dijit/themes/nihilo/nihilo.css";
   </style>

4. 使用するテーマの名前を指定して、ページの<body>タグにクラスを追加します。これを実行すると、ページにロードされているすべてのDojoウィジェットが、テーマに関連付けられたスタイルを使用してレンダリングされます。

   <body class="nihilo">

この段階で、dojoDemo.htmlファイルは、Dojoコア・ライブラリとDijitライブラリを参照する任意のコードを受け入れる準備ができ、すべてのウィジェットをDojoのnihiloテーマを使用してレンダリングするようになりました。

Dojoツリー・ウィジェットの追加と構成

dojo.jsにリンクした後は、Dojoのモジュールとウィジェットを使用するコードを追加し始めることができます。まず、dojo.require文を使用して、dijit.Treeウィジェットとdojo.data.ItemFileReadStoreをロードするコードを追加します。次に、ウィジェットとモジュール自体をページに追加します。

1. 置換します:

   // TODO: add dojo.require statements here

   というコメント(行8)を次のdojo.require文へ:

   dojo.require("dojo.data.ItemFileReadStore");
   dojo.require("dijit.Tree");

   • dojo.data.ItemFileReadStore: JSON構造化コンテンツをHTTPエンドポイントから読み取り(JSONレスポンスを開始するサーブレットの準備で、この目的に使用するサーブレットを実装します)、すべての項目をメモリー内に保存して単純にすばやくアクセスできるようにします。
   • digit.Tree: ItemFileReadStoreから取得されたJSONデータを表示するツリー・ウィジェットです。
2. ItemFileReadStoreとツリーウィジェットをページに追加します。置換します:

   <!-- TODO: specify AJAX retrieval -->
   
   <!-- TODO: add Tree widget and configure attributes -->

   というコメントを次へ:

   <div dojoType="dojo.data.ItemFileReadStore"
        url="TribeServlet"
        jsId="indianStore">
   </div>
   
   <div dojoType="dijit.Tree"
        store="indianStore"
        query="{type:'region'}"
        label="North American Indians">
   </div>

   • ItemFileReadStoreでは、JSONデータを返すサーバー側リソースを指すようにurlプロパティを指定する必要があります。後で説明するとおり、これはTribeServletです。jsIdプロパティを使用すると、取得されたJSONデータにIDを付けることができ、ウィジェットはそれを使用してデータ・ストアを参照できます。
   • ツリーでは、storeプロパティを使用して、JSONデータを提供するItemFileReadStoreを指します。queryプロパティを使用すると、JSONファイルで使用されているキーワードに基づいて、データの表示を調整できます。

この段階で、dojoDemo.htmlファイルは完成し、プロジェクトに対するクライアント側の変更はすべて適用されました。次の2つの手順では、ツリー・リクエストが行われたときのプロジェクトのサーバー側の動作に影響を与える変更を加えます。

サードパーティJSON変換ソースをJARファイルとしてプロジェクトに追加

このチュートリアルでは、ArrayListサンプル・データを抽出するロジックが、TribeクラスとTribeDataManagerクラスに準備されています。基本的に、JSON変換を処理するサードパーティJavaクラスをプロジェクトに含め、これらのクラスのimport文をTribeクラスとTribeDataManagerクラスに追加するのみで済みます。ただし、これを実行するには、まずサードパーティJavaクラスをコンパイルし、Java Archive (JARファイル)を作成する必要があります。これには、IDEのJavaクラス・ライブラリ・ウィザードを使用できます。

1. http://json.org/javaにアクセスすると、JSON変換用のJavaクラスは無料で利用できます。「Free source code is available」というリンクをクリックし、ソースが入っているjson.zipファイルをダウンロードします。
2. json.zipファイルを解凍すると、抽出されたフォルダには、http://json.org/javaに一覧表示されているソースが入っています。
   
   この時点で、これらのソースをコンパイルして、DojoTreeSampleプロジェクトに追加できるJava Archive (JARファイル)を作成します。
3. IDEのメイン・ツールバーの「新規プロジェクト」ボタン()をクリックします。
4. 表示されるウィザードで、「カテゴリ」から「Java」、「プロジェクト」から「Javaクラス・ライブラリ」を選択し、「次」をクリックします。
5. Javaクラス・ライブラリ・ウィザードの「名前と場所」パネルで、新しいプロジェクトに「json」という名前を付け、「終了」をクリックします。新しいプロジェクトが作成され、「プロジェクト」ウィンドウで開きます。
   
   DojoツールキットのリソースをコピーしてIDEの「プロジェクト」ウィンドウでresourcesフォルダに貼り付けたのと同じ方法で、先ほどダウンロードしたソースをコピーし、新しいjsonプロジェクトに直接貼り付けます。
6. 抽出したjson.zipファイルのあるコンピュータ上の場所に移動し、jsonフォルダをコピーします([Ctrl]-[C]、Macの場合は[⌘]-[C])。jsonフォルダにはソース・ファイルが入っています。
7. IDEの「プロジェクト」ウィンドウで、jsonプロジェクトの<デフォルト・パッケージ>ノードを右クリックし、「貼付け」を選択します。
   
   これを実行すると、「json」がパッケージ名になり、その中にすべてのソースが表示されます。
   
8. jsonプロジェクトをビルドします。これを行うには、「プロジェクト」ウィンドウでjsonプロジェクトのノードを右クリックし、「消去してビルド」を選択します。
   
   プロジェクトをビルドすると、すべてのJavaクラスが.classファイルにコンパイルされます。IDEは、コンパイル済クラスを格納するためのbuildフォルダと、プロジェクトのJARファイルを格納するdistフォルダを作成します。これらのフォルダはIDEの「ファイル」ウィンドウから表示できます。
   
   jsonプロジェクトをビルドした後、「ファイル」ウィンドウを開き([Ctrl]-[2]、Macの場合は[⌘]-[2])、jsonフォルダを展開します。buildフォルダにはjson.zipファイルのソースがコンパイルされたもの、distフォルダにはDojoTreeSampleプロジェクトで参照する必要のあるJARファイルが入っています。
   
   json.jarファイルができたので、DojoTreeSampleプロジェクトを開いたときから発生している参照の問題を解決できます。
9. 「プロジェクト」ウィンドウでDojoTreeSampleの「ライブラリ」ノードを右クリックし、「JAR/フォルダの追加」を選択します。次に、ダイアログでjsonプロジェクトのdistフォルダの場所に移動し、json.jarファイルを選択します。
   
   ダイアログを終了すると、json.jarファイルがプロジェクトの「ライブラリ」ノードの下に表示されます。
   
   注意: json.jarファイルはプロジェクトの「ライブラリ」ノードの下に表示されますが、元の場所から参照されます。コピーされてプロジェクトに追加されるのではありません(たとえば、「ファイル」ウィンドウでDojoTreeSampleプロジェクトの下には見つかりません)。したがって、JARファイルの場所を変更すると、参照が壊れます。
10. 「ソース・パッケージ」> dojo.indiansパッケージを展開し、TribeクラスとTribeDataManagerクラスをダブルクリックしてエディタで開きます。
11. 必要なインポート文を両方のクラスに追加します。各クラスで、エディタ上で右クリックし、「インポートを修正」を選択します。
    
    Tribeクラスには次のインポートが必要です。

    import dojo.org.json.JSONException;
    import dojo.org.json.JSONObject;

    TribeDataManagerクラスには次のインポートが必要です。

    import dojo.org.json.JSONArray;
    import dojo.org.json.JSONException;
    import dojo.org.json.JSONObject;

    JSONクラスのAPIもhttp://json.org/javaで提供されています。後でTribeとTribeDataManagerのコードを調べるので、このページを開いておいてください。

12. TribeDataManagerのArrayListを調べます。ArrayListはTribeオブジェクトのコレクションです。ArrayListの最初の要素を調べると、新しいTribeオブジェクトが作成されてリストに追加されていることがわかります。

    indians.add(new Tribe("Eskimo-Aleut", "Arctic", "Alaska Natives"));

    各Tribeオブジェクトは、「部族」、「カテゴリ」および「地域」という3つの情報を収集します。この課題用のデータは、Wikipediaの「Native Americans in the United States」のエントリから取得されています。ご存知のとおり、複数の「部族」が1つの「カテゴリ」に分類され、多数のカテゴリがより大きな1つの「地域」に含まれる場合があります。
13. Tribeクラスをエディタで開くと、これは基本的にJavaBeanであり、toJSONObject()メソッドのみが異なることがわかります。

    public JSONObject toJSONObject() throws JSONException {
        JSONObject jo = new JSONObject();
        jo.put("name", this.name);
        jo.put("type", "tribe");
    
        return jo;
    }

14. 再度TribeDataManagerに切り替え([Ctrl]-[Tab])、クラスに含まれているメソッドを調べます。ナビゲータを開いて([Ctrl]-[7]、Macの場合は[⌘]-[7])、クラスに含まれているフィールドとプロパティのリストを表示します。
    
    その中で最も重要なメソッドはgetIndiansAsJSONObject()です。このメソッドはArrayListをスキャンし、データを処理してJSONObjectの形式で返します。DojoのItemFileReadStoreに必要なのは、文字列形式のJSONObjectです。

    public static JSONObject getIndiansAsJSONObject() throws JSONException {
    
        JSONObject jo = new JSONObject();
        JSONArray itemsArray = new JSONArray();
    
        jo.put("identifier", "name");
        jo.put("label", "name");
    
        // add regions
        addRegionsToJSONArray(itemsArray);
    
        // add categories
        addCategoriesToJSONArray(itemsArray);
    
        // add tribes
        addTribesToJSONArray(itemsArray);
    
        jo.put("items", itemsArray);
        return jo;
    }

15. getIndiansAsJSONObject()メソッドに関するJavadocを開きます。これは、ナビゲータに戻り([Ctrl]-[7]、Macの場合は[⌘]-[7])、メソッドの上にカーソルを置くことで行うことができます。または、メイン・メニューから「ウィンドウ」>「その他」>「Javadoc」を選択し、エディタでメソッド署名をクリックします。
    
16. Javadocに示されているJSONデータの例を調べます。データの形式は、Dojoのドキュメントに示されている例に準拠しています。

このステップの中で、http://json.orgからのサードパーティ・ソースをコンパイルし、それらをJARファイルとしてDojoTreeSampleプロジェクトに追加しました。次に、JARファイルのクラス、TribeクラスとTribeDataManagerクラスに、インポート文を追加しました。最後に、TribeDataManagerに含まれているメソッドのうち、ArrayListのデータをJSON文字列に変換するために使用されるいくつかのメソッドを調べました。

次のステップでは、受信するリクエストをTribeDataManagerのgetIndiansAsJSONObject()メソッドをコールして処理し、結果となるJSON文字列をクライアントにレスポンスとして送信するサーブレットを作成します。

JSONレスポンスを開始するサーブレットの準備

WebページにItemFileReadStoreを追加したとき、urlプロパティの値として「TribeServlet」を指定しました。クライアントに対してJSONデータを準備して返す作業を担当するサーバー側では、これは送信先です。このサーブレットを作成しましょう。

1. 「プロジェクト」ウィンドウでdojo.indiansソース・パッケージを右クリックし、「新規」>「サーブレット」を選択します。
2. 「新規サーブレット」ダイアログで、クラス名に「TribeServlet」と入力します。また、サーブレットがdojo.indiansパッケージ内に作成されるようにします。
   
   
   「次」をクリックします。
3. ウィザードの「サーブレット・デプロイメントを構成」ステップでは、「デプロイメント・ディスクリプタに情報を追加」オプションがデフォルトで選択されており、これは、デフォルトのサーブレット名とURLパターンがweb.xmlに自動的に追加されることを意味します。その結果、TribeServletのホスト・ドメイン(http://localhost:8080/DojoTreeSample/)に対するすべてのリクエストが、dojo.indians.TribeServletクラスによって処理されます。
4. 「終了」をクリックします。新しいサーブレットのスケルトン・クラスが生成され、エディタで開かれます。
   
   サーブレットの機能は、getIndiansAsJSONObject()メソッドをコールし、このメソッドからのデータを使用してクライアント・リクエストに応答することです。JSON形式のレスポンスを準備するには、最初にレスポンスのMIMEタイプをJSON形式に設定する必要があります。
5. processRequest()メソッドを見つけて変更します。元:

   response.setContentType("text/html;charset=UTF-8");

   先:

   response.setContentType("application/json");

   これにより、HTTPレスポンスのContent-Typeヘッダーが、返される内容がすべてJSON形式であることを示すように設定されます。
6. processRequest()メソッドのtryブロック内のコメントアウトされているコードを、次のように置き換えます(太字部分が変更箇所)。

   try {
   
       JSONObject jo = null;
       try {
           jo = TribeDataManager.getIndiansAsJSONObject();
       } catch (JSONException ex) {
           System.out.println("Unable to get JSONObject: " + ex.getMessage());
       }
   
       out.println(jo);
   
   } finally {
       out.close();
   }

   コードを再フォーマットするには、エディタ内で右クリックし、「フォーマット」を選択します。

7. IDEのヒントを使用して、必要なインポート文を追加します。これらを次に示します。

   import dojo.org.json.JSONException;
   import dojo.org.json.JSONObject;

8. プロジェクトを実行するには、「プロジェクト」ウィンドウでDojoTreeSampleプロジェクト・ノードを選択し、IDEのツールバーの「プロジェクトの実行」()ボタンをクリックします。
   
   ブラウザが開いて開始画面(dojoDemo.html)が表示され、上のスクリーンショットのように、Dojo TreeウィジェットでArrayListのデータが正しく表示されます。

関連項目

Dojoの詳細は、公式ドキュメントを参照してください。

• Dojoツールキットのリファレンス・ガイド: Reference Guide
• オンラインAPIリファレンス: http://api.dojotoolkit.org/
• Dojoデモ: http://demos.dojotoolkit.org/demos/

JavaScriptとJavaScriptツールキットの機能の詳細は、netbeans.orgの次のリソースを参照してください。

• jQueryを使用した、Webページの見た目と使いやすさの向上。jQueryの概要を説明し、WebページでHTMLマークアップにjQueryのアコーディオン・ウィジェットを適用する手順を示します。
• Ajax入門(Java)。サーブレット・テクノロジを使用した単純なアプリケーションのビルド方法を示すと同時に、Ajaxリクエストの基盤となるプロセス・フローについて解説します。
• JavaScriptの編集。IDEが提供する基本的なJavaScript編集機能を説明するドキュメントです。