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形式にします。

目次
このドキュメントを完了するには、次のソフトウェアとリソースが必要です。
注意:
- このチュートリアルを完了するには、いくつかの手順でインターネット接続が必要になります。
- 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リソースを直接コピーします。
- チュートリアルのDojoサンプル・プロジェクトをコンピュータ上の場所にダウンロードします。
- NetBeansを起動し、IDEのツールバーの「プロジェクトを開く」ボタン(
)をクリックします。
- 表示される「プロジェクトを開く」ダイアログで、コンピュータ上のDojoサンプル・プロジェクトの場所に移動し、「プロジェクトを開く」をクリックします。
DojoTreeSample
プロジェクトをIDEで開くと、最初はエラー・バッジの付いた赤いテキストで表示されますが、これは参照の問題があることを示しています。

参照の問題が存在するのは、プロジェクトで使用されているJavaクラス(Tribe
とTribeDataManager
)がJSON JARファイル内のクラスを参照しているためで、このファイルはプロジェクトにJSON JARファイルを追加する後述の項で追加します。
- これから追加するDojoリソースを格納するためのフォルダを、プロジェクト内に作成します。これを行うには、「プロジェクト」ウィンドウで「
Webページ
」ノードを右クリックし、「新規」>「フォルダ」を選択します。「新規フォルダ」ダイアログで、「フォルダ名」フィールドに「resources
」と入力します。「親フォルダ」フィールドには、デフォルトで「web
」と入力されます。「終了」をクリックして新規フォルダを作成し、「プロジェクト」ウィンドウの「Webページ
」ノードの下に表示されるようになったことを確認します。
注意: 「プロジェクト」ウィンドウ([Ctrl]-[1]、Macの場合は[⌘]-[1])は、プロジェクト内の重要な項目の論理ビューを示す、プロジェクト・ソースへのメイン・エントリ・ポイントです。「ファイル」ウィンドウ([Ctrl]-[2]、Macの場合は[⌘]-[2])には、プロジェクトのディレクトリ・ベースのビューが表示され、「プロジェクト」ウィンドウでは表示されないすべてのファイルやフォルダが含まれます。このステップの「新規フォルダ」ダイアログでは、「Webページ
」ノードから新規項目を作成するときに、「親フォルダ」フィールドにデフォルトで「web
」と入力されます。「ファイル」ウィンドウを開くと、新しいresources
フォルダがweb
ディレクトリの下に表示されるようになったことがわかります。
- Dojoツールキット (バージョン1.2.xまたはそれ以降)のコピーを入手します。Dojoツールキットはhttp://www.dojotoolkit.org/downloadsからダウンロードできます。
現在のバージョンのDojoツールキットには、Dojoコア、Dijit、およびDojoXライブラリが含まれています。Dojoのツリー・ウィジェットを実装するには、コア・ライブラリのItemFileReadStore
モジュールと、Dijitライブラリに含まれているツリー
ウィジェット自体の、2つのコンポーネントが基本的に必要です。
- 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
の構成も行うことができます。
- 「プロジェクト」ウィンドウで、
dojoDemo.html
ファイルをダブルクリックしてエディタで開きます。
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
に設定すると、ページがロードされるときに必ずウィジェットとページ・マークアップが解析されます。
- ツールキットに含まれているサンプル・テーマにリンクします。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>
- 使用するテーマの名前を指定して、ページの
<body>
タグにクラスを追加します。これを実行すると、ページにロードされているすべてのDojoウィジェットが、テーマに関連付けられたスタイルを使用してレンダリングされます。
<body class="nihilo">
この段階で、dojoDemo.html
ファイルは、Dojoコア・ライブラリとDijitライブラリを参照する任意のコードを受け入れる準備ができ、すべてのウィジェットをDojoのnihilo
テーマを使用してレンダリングするようになりました。
Dojoツリー・ウィジェットの追加と構成
dojo.js
にリンクした後は、Dojoのモジュールとウィジェットを使用するコードを追加し始めることができます。まず、dojo.require
文を使用して、dijit.Tree
ウィジェットとdojo.data.ItemFileReadStore
をロードするコードを追加します。次に、ウィジェットとモジュール自体をページに追加します。
- 置換します:
// TODO: add dojo.require statements here
というコメント(行8)を次のdojo.require
文へ:
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.Tree");
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クラス・ライブラリ・ウィザードを使用できます。
- http://json.org/javaにアクセスすると、JSON変換用のJavaクラスは無料で利用できます。「Free source code is available」というリンクをクリックし、ソースが入っている
json.zip
ファイルをダウンロードします。
json.zip
ファイルを解凍すると、抽出されたフォルダには、http://json.org/javaに一覧表示されているソースが入っています。
この時点で、これらのソースをコンパイルして、DojoTreeSample
プロジェクトに追加できるJava Archive (JARファイル)を作成します。
- IDEのメイン・ツールバーの「新規プロジェクト」ボタン(
)をクリックします。
- 表示されるウィザードで、「カテゴリ」から「Java」、「プロジェクト」から「Javaクラス・ライブラリ」を選択し、「次」をクリックします。
- Javaクラス・ライブラリ・ウィザードの「名前と場所」パネルで、新しいプロジェクトに「
json
」という名前を付け、「終了」をクリックします。新しいプロジェクトが作成され、「プロジェクト」ウィンドウで開きます。
DojoツールキットのリソースをコピーしてIDEの「プロジェクト」ウィンドウでresources
フォルダに貼り付けたのと同じ方法で、先ほどダウンロードしたソースをコピーし、新しいjson
プロジェクトに直接貼り付けます。
- 抽出した
json.zip
ファイルのあるコンピュータ上の場所に移動し、json
フォルダをコピーします([Ctrl]-[C]、Macの場合は[⌘]-[C])。json
フォルダにはソース・ファイルが入っています。
- IDEの「プロジェクト」ウィンドウで、
json
プロジェクトの<デフォルト・パッケージ>
ノードを右クリックし、「貼付け」を選択します。
これを実行すると、「json
」がパッケージ名になり、その中にすべてのソースが表示されます。

json
プロジェクトをビルドします。これを行うには、「プロジェクト」ウィンドウでjson
プロジェクトのノードを右クリックし、「消去してビルド」を選択します。
プロジェクトをビルドすると、すべてのJavaクラスが.class
ファイルにコンパイルされます。IDEは、コンパイル済クラスを格納するためのbuild
フォルダと、プロジェクトのJARファイルを格納するdist
フォルダを作成します。これらのフォルダはIDEの「ファイル」ウィンドウから表示できます。
json
プロジェクトをビルドした後、「ファイル」ウィンドウを開き([Ctrl]-[2]、Macの場合は[⌘]-[2])、json
フォルダを展開します。build
フォルダにはjson.zip
ファイルのソースがコンパイルされたもの、dist
フォルダにはDojoTreeSample
プロジェクトで参照する必要のあるJARファイルが入っています。

json.jar
ファイルができたので、DojoTreeSample
プロジェクトを開いたときから発生している参照の問題を解決できます。
- 「プロジェクト」ウィンドウで
DojoTreeSample
の「ライブラリ」ノードを右クリックし、「JAR/フォルダの追加」を選択します。次に、ダイアログでjson
プロジェクトのdist
フォルダの場所に移動し、json.jar
ファイルを選択します。
ダイアログを終了すると、json.jar
ファイルがプロジェクトの「ライブラリ
」ノードの下に表示されます。

注意: json.jar
ファイルはプロジェクトの「ライブラリ
」ノードの下に表示されますが、元の場所から参照されます。コピーされてプロジェクトに追加されるのではありません(たとえば、「ファイル」ウィンドウでDojoTreeSample
プロジェクトの下には見つかりません)。したがって、JARファイルの場所を変更すると、参照が壊れます。
- 「
ソース・パッケージ
」> dojo.indians
パッケージを展開し、Tribe
クラスとTribeDataManager
クラスをダブルクリックしてエディタで開きます。
- 必要なインポート文を両方のクラスに追加します。各クラスで、エディタ上で右クリックし、「インポートを修正」を選択します。
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
のコードを調べるので、このページを開いておいてください。
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つの「地域」に含まれる場合があります。
Tribe
クラスをエディタで開くと、これは基本的にJavaBeanであり、toJSONObject()
メソッドのみが異なることがわかります。
public JSONObject toJSONObject() throws JSONException {
JSONObject jo = new JSONObject();
jo.put("name", this.name);
jo.put("type", "tribe");
return jo;
}
- 再度
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;
}
getIndiansAsJSONObject()
メソッドに関するJavadocを開きます。これは、ナビゲータに戻り([Ctrl]-[7]、Macの場合は[⌘]-[7])、メソッドの上にカーソルを置くことで行うことができます。または、メイン・メニューから「ウィンドウ」>「その他」>「Javadoc」を選択し、エディタでメソッド署名をクリックします。

- Javadocに示されているJSONデータの例を調べます。データの形式は、Dojoのドキュメントに示されている例に準拠しています。
このステップの中で、http://json.orgからのサードパーティ・ソースをコンパイルし、それらをJARファイルとしてDojoTreeSample
プロジェクトに追加しました。次に、JARファイルのクラス、Tribe
クラスとTribeDataManager
クラスに、インポート文を追加しました。最後に、TribeDataManager
に含まれているメソッドのうち、ArrayListのデータをJSON文字列に変換するために使用されるいくつかのメソッドを調べました。
次のステップでは、受信するリクエストをTribeDataManager
のgetIndiansAsJSONObject()
メソッドをコールして処理し、結果となるJSON文字列をクライアントにレスポンスとして送信するサーブレットを作成します。
JSONレスポンスを開始するサーブレットの準備
WebページにItemFileReadStore
を追加したとき、url
プロパティの値として「TribeServlet
」を指定しました。クライアントに対してJSONデータを準備して返す作業を担当するサーバー側では、これは送信先です。このサーブレットを作成しましょう。
- 「プロジェクト」ウィンドウで
dojo.indians
ソース・パッケージを右クリックし、「新規」>「サーブレット」を選択します。
- 「新規サーブレット」ダイアログで、クラス名に「
TribeServlet
」と入力します。また、サーブレットがdojo.indians
パッケージ内に作成されるようにします。

「次」をクリックします。
- ウィザードの「サーブレット・デプロイメントを構成」ステップでは、「デプロイメント・ディスクリプタに情報を追加」オプションがデフォルトで選択されており、これは、デフォルトのサーブレット名とURLパターンが
web.xml
に自動的に追加されることを意味します。その結果、TribeServlet
のホスト・ドメイン(http://localhost:8080/DojoTreeSample/
)に対するすべてのリクエストが、dojo.indians.TribeServlet
クラスによって処理されます。
- 「終了」をクリックします。新しいサーブレットのスケルトン・クラスが生成され、エディタで開かれます。
サーブレットの機能は、getIndiansAsJSONObject()
メソッドをコールし、このメソッドからのデータを使用してクライアント・リクエストに応答することです。JSON形式のレスポンスを準備するには、最初にレスポンスのMIMEタイプをJSON形式に設定する必要があります。
processRequest()
メソッドを見つけて変更します。元:
response.setContentType("text/html;charset=UTF-8");
先:
response.setContentType("application/json");
これにより、HTTPレスポンスのContent-Type
ヘッダーが、返される内容がすべてJSON形式であることを示すように設定されます。
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();
}
コードを再フォーマットするには、エディタ内で右クリックし、「フォーマット」を選択します。
- IDEのヒントを使用して、必要なインポート文を追加します。これらを次に示します。
import dojo.org.json.JSONException;
import dojo.org.json.JSONObject;
- プロジェクトを実行するには、「プロジェクト」ウィンドウで
DojoTreeSample
プロジェクト・ノードを選択し、IDEのツールバーの「プロジェクトの実行」(
)ボタンをクリックします。
ブラウザが開いて開始画面(dojoDemo.html
)が表示され、上のスクリーンショットのように、Dojo TreeウィジェットでArrayListのデータが正しく表示されます。
関連項目
Dojoの詳細は、公式ドキュメントを参照してください。
JavaScriptとJavaScriptツールキットの機能の詳細は、netbeans.orgの次のリソースを参照してください。