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

Webアプリケーションでは、Web 2.0機能の重要性が増しつつあります。多くのWebアプリケーションは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 IDE 7.2、7.3および7.4に適用されます

目次

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

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

注意:

  • このチュートリアルを完了するには、いくつかの手順でインターネット接続が必要になります。
  • NetBeans IDE Java EEのJavaダウンロード・バンドルでは、IDEとともにGlassFish Server Open Source Editionをインストールして登録することもできます。このチュートリアルでは、クライアント・サーバー通信のシミュレーションを行うために、サーバーが必要です。
  • 完成したプロジェクトは次のようになります。
    ブラウザに表示された完成した課題

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

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

  1. チュートリアルのDojoサンプル・プロジェクトをコンピュータ上の場所にダウンロードします。
  2. IDEツールバーの「プロジェクトを開く」ボタン(「プロジェクトを開く」ボタン)をクリックして、「プロジェクトを開く」ダイアログ・ボックスを開きます。
  3. 「プロジェクトを開く」ダイアログで、コンピュータ上のDojoサンプル・プロジェクトを特定し、「プロジェクトを開く」をクリックします。

    IDEでDojoTreeSampleプロジェクトを開くと、参照の問題が存在することを示すエラー・バッジがプロジェクトに付きます。

    DojoTreeSampleプロジェクトが赤いテキストとエラー・バッジで表示された「プロジェクト」ウィンドウ

    プロジェクトで使用されているJavaクラス(TribeおよびTribeDataManager)はJSON JARファイルに見つかったクラスを参照していますが、これは後で「サードパーティJSON変換ソースをJARファイルとしてプロジェクトに追加」の項で追加するため、参照の問題が存在します。

  4. 「プロジェクト」ウィンドウの「Web Pages」ノードを右クリックし、「新規」→「フォルダ」を選択して、追加しようとしているDojoリソースを含めるフォルダを作成します。
  5. 新規フォルダウィザードの「フォルダ名」フィールドに「resources」と入力します。

    「親フォルダ」フィールドには、デフォルトで「web」と入力されます。

  6. 「終了」をクリックして新規フォルダを作成します。

    「プロジェクト」ウィンドウの「Web Pages」ノードの下に新規フォルダが表示されます。

    注意: 「プロジェクト」ウィンドウ([Ctrl]-[1]、Macの場合は[⌘]-[1])は、プロジェクト内の重要な項目の論理ビューを示す、プロジェクト・ソースへのメイン・エントリ・ポイントです。「ファイル」ウィンドウ([Ctrl]-[2]、Macの場合は[⌘]-[2])には、プロジェクトのディレクトリ・ベースのビューが表示され、「プロジェクト」ウィンドウでは表示されないすべてのファイルやフォルダが含まれます。このステップの「新規フォルダ」ダイアログでは、「Webページ」ノードから新規項目を作成するときに、「親フォルダ」フィールドにデフォルトで「web」と入力されます。「ファイル」ウィンドウを開くと、新しいresourcesフォルダがwebディレクトリの下に表示されるようになったことがわかります。

  7. Dojoツールキット(バージョン1.8.x以降)のコピーをhttp://www.dojotoolkit.org/downloadからコンピュータにダウンロードします。

    現在のバージョンのDojoツールキットには、Dojoコア、Dijit、およびDojoXライブラリが含まれています。Dojoのツリー・ウィジェットを実装するには、コア・ライブラリのItemFileReadStoreモジュールと、Dijitライブラリに含まれているTreeウィジェット自体の、2つのコンポーネントが基本的に必要です。

    • dojo.data.ItemFileReadStore: JSON構造化コンテンツをHTTPエンドポイント(このチュートリアルではサーブレット)から読み取り、すべての項目をメモリー内に保存して単純にすばやくアクセスできるようにします。
    • dijit.Tree: ItemFileReadStoreから取得されたJSONデータを表示するツリー・ウィジェットです。
  8. ダウンロードしたDojoツールキット・アーカイブを抽出し、プロジェクトのdojoおよびdojitフォルダをresourcesフォルダにコピーします。

    これらをプロジェクトにコピーするには、ローカル・システムでフォルダを特定し、コンピュータ上の場所から単純にコピー([Ctrl]-[C]、Macの場合は[⌘]-[C])し、次にIDEの「プロジェクト」ウィンドウで、新しいresourcesノードを右クリックしてポップアップ・メニューの「貼付け」を選択します(またはresourcesノードを単純に選択して、[Ctrl]-[V]、Macの場合は[⌘]-[V])押します)。

    注意:プロジェクトにDojoXライブラリを追加する必要はありません

    DojoおよびDijitライブラリを追加した後、「プロジェクト」ウィンドウは次の図のようになります。

    Dojoリソースが表示された「プロジェクト」ウィンドウ

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

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

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

  1. 「プロジェクト」ウィンドウで、dojoDemo.htmlファイルをダブルクリックしてエディタで開きます。
  2. dojoDemo.htmlファイルで、次の<script>タグ(太字)を<head>タグの間に追加します。
    <!-- TODO: link to Dojo resources here -->
    
    <script type="text/javascript">
        var djConfig = {parseOnLoad: true,
            isDebug: true};
    </script> 
    <script
        type="text/javascript"
        src="resources/dojo/dojo.js">
    </script>
        
    </head>
    • djConfigを使用すると、Dojoの動作を制御するグローバル設定をオーバーライドできます(たとえば、parseOnLoadプロパティを使用して)。
    • parseOnLoadtrueに設定すると、ページがロードされるときに必ずウィジェットとページ・マークアップが解析されます。
  3. 次の@import文(太字)を<head>タグの間と追加する<script>タグの下に追加して、ツールキットに含まれるnihiloサンプル・テーマへのリンクを追加します。
    <script type="text/javascript">
        var djConfig = {parseOnLoad: true,
            isDebug: true};
    </script> 
    <script
        type="text/javascript"
        src="resources/dojo/dojo.js">
    </script>
    
    <style type="text/css">
        @import "resources/dijit/themes/nihilo/nihilo.css";
    </style>

    nihiloテーマはツールキットにデフォルトで含まれています。「プロジェクト」ウィンドウでdijit/themesフォルダを展開して、デフォルトで提供されている他のサンプル・テーマを表示できます。

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

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

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

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

  1. 次のdojo.require文(太字)をファイルの<body<タグの間に追加します。
    <script type="text/javascript">
    
        // TODO: add dojo.require statements here
        dojo.require("dojo.data.ItemFileReadStore");
        dojo.require("dijit.Tree");
    
    </script>
  2. 次のコード(太字)を追加して、ItemFileReadStoreおよびTreeウィジェットを追加します。
    <!-- 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-java-master.zipファイルをダウンロードします。
  2. JSON-java-master.zipファイルを解凍すると、抽出されたフォルダには、http://json.org/javaに一覧表示されているソースが入っています。

    この時点で、これらのソースをコンパイルして、DojoTreeSampleプロジェクトに追加するJava Archive (JARファイル)を作成します。

  3. ツールバーの「新規プロジェクト」ボタン(「新規プロジェクト」ボタン)をクリックして新規プロジェクト・ウィザードを開きます。
  4. 新規プロジェクト・ウィザードで、「Java」カテゴリの「Javaクラス・ライブラリ」プロジェクト・テンプレートを選択します。「次」をクリックします。
  5. Javaクラス・ライブラリ・ウィザードの「名前と場所」パネルで、「プロジェクト名」として「json」を入力します。「終了」をクリックします。

    「終了」をクリックすると新しいプロジェクトが作成され、「プロジェクト」ウィンドウで開きます。

    Dojoツールキット・リソースをDojoTreeSampleプロジェクトにコピーしたのと同じ方法で、jsonプロジェクトにダウンロードするJSONソースをコピーする必要があります。

  6. JSON-java-master.zipアーカイブを抽出し、ソース・ファイルを含むjsonフォルダをコピー([Ctrl]-[C]、Macの場合は[⌘]-[C])します。
  7. IDEの「プロジェクト」ウィンドウで、jsonプロジェクトの<デフォルト・パッケージ>ノードを右クリックし、ポップアップ・メニューの「貼付け」を選択します。

    これを実行すると、「json」がパッケージ名になり、パッケージを展開してjsonソースを表示できます。

    「プロジェクト」ウィンドウ - 「json」プロジェクトに含まれているソース
  8. 「プロジェクト」ウィンドウで「json」プロジェクト・ノードを右クリックし、「消去してビルド」を選択してプロジェクトをビルドします。

    プロジェクトをビルドすると、すべてのJavaクラスが.classファイルにコンパイルされます。IDEは、コンパイル済クラスを格納するためのbuildフォルダと、プロジェクトのJARファイルを格納するdistフォルダを作成します。これらのフォルダはIDEの「ファイル」ウィンドウから表示できます。

    jsonプロジェクトをビルドした後、「ファイル」ウィンドウを開き([Ctrl]-[2]、Macの場合は[⌘]-[2])、jsonフォルダを展開します。buildフォルダにはJSON-java-master.zipファイルのソースがコンパイルされたもの、distフォルダにはDojoTreeSampleプロジェクトで参照する必要のあるJARファイルが入っています。

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

    ダイアログを終了すると、json.jarファイルがプロジェクトの「ライブラリ」ノードの下に表示されます。
    「プロジェクト」ウィンドウ - 「ライブラリ」ノードに追加された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で提供されています。後でTribeTribeDataManagerのコードを調べるので、このページを開いておいてください。

  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])、クラスに含まれているフィールドとプロパティのリストを表示します。
    ナビゲータに表示されたTribeDataManagerクラス
    その中で最も重要なメソッドは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」を選択し、エディタでメソッド署名をクリックします。
    TribeDataManagerクラスについて開いたJavadocウィンドウ
  16. Javadocに示されているJSONデータの例を調べます。データの形式は、Dojoのドキュメントに示されている例に準拠しています。

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

次のステップでは、受信するリクエストをTribeDataManagergetIndiansAsJSONObject()メソッドをコールして処理し、結果となる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("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の詳細は、公式ドキュメントを参照してください。

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

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

Support


By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2013, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo