Google Git
Sign in
apache / netbeans-website-cleanup / refs/heads/asciidoc-features / . / src / content / kb / 71 / web / js-toolkits-dojo_ja.html
blob: ca7bbd6fc7fa2360093566def30f26b5b1f46018 [file] [log] [blame]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="author" content="troy.giunipero@sun.com">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="description" content="A tutorial demonstrating how to connect a
Dojo Tree widget to an ArrayList using JSON">
<meta name="keywords" content="NetBeans, IDE, integrated development environment,
JavaScript, JavaScript Toolkit, Dojo, JavaScript Editor, web 2.0, Ajax, open
source, web technology">
<link rel="stylesheet" type="text/css" href="../../../netbeans.css">
<link rel="stylesheet" type="text/css" href="../../../lytebox.css" media="screen">
<script type="text/javascript" src="../../../images_www/js/lytebox-compressed.js"></script>
<title>JSONを使用したDojoツリーのArrayListへの接続 - NetBeansチュートリアル</title>
</head>
<body>
<!--
Copyright (c) 2009, 2010, Oracle and/or its affiliates. All rights reserved.
-->
<h1>JSONを使用したDojoツリーのArrayListへの接続</h1>
<p>今日のアプリケーションでは、Web 2.0機能の重要性が増しつつあります。有望な機能の1つは<a href="http://www.dojotoolkit.org/">Dojo</a>などのJavaScriptツールキットの使用で、これにより、Webページの動作をデスクトップ・インタフェースに近づけることができる一方、ブラウザの非互換性に対処し、標準に準拠した使いやすく保守可能なコードを利用できます。</p>
<p>このチュートリアルは、「<a href="http://developers.sun.com/learning/javaoneonline/j1lab.jsp?lab=LAB-5573&yr=2009&track=1">Java Oneハンズオン・ラボ: Leveraging JavaScript Toolkits for End-to-End Connectivity in Web Applications</a>」を基にしており、<a href="http://dojocampus.org/explorer/#Dijit_Tree_Basic">Dojoツリー・ウィジェット</a>をWebページに追加して構成する方法と、サーバー側からJSON形式でツリー・リクエストに応答できるようにする方法について説明しています。このとき、<a href="http://json.org">http://json.org</a>から無料で利用できる一連のJavaクラスを使用して、ArrayListのデータを処理してJSON形式にします。</p>
<p><img alt="このページの内容は、NetBeans IDE 6.7から7.1に適用されます" class="stamp" src="../../../images_www/articles/69/netbeans-stamp-69-70-71.png" title="このページの内容は、NetBeans IDE 6.7から7.1に適用されます"></p>
<p><strong>目次</strong></p>
<ul class="toc">
<li><a href="#addLib">NetBeansプロジェクトへのDojoツールキットの追加</a></li>
<li><a href="#linkFromFile">プロジェクト・ファイルからツールキット・リソースへのリンク</a></li>
<li><a href="#addWidget">Dojoツリー・ウィジェットの追加と構成</a></li>
<li><a href="#addJSON">サードパーティJSON変換ソースをJARファイルとしてプロジェクトに追加</a></li>
<li><a href="#prepareServlet">JSONレスポンスを開始するサーブレットの準備</a></li>
<li><a href="#seeAlso">関連項目</a></li>
</ul>
<a name="requiredSoftware"></a>
<p><strong>このドキュメントを完了するには、次のソフトウェアとリソースが必要です。</strong></p>
<table>
<tbody>
<tr>
<th class="tblheader" scope="col">ソフトウェアまたはリソース</th>
<th class="tblheader" scope="col">必須バージョン</th>
</tr>
<tr>
<td class="tbltd1"><a href="https://netbeans.org/downloads/index.html">NetBeans IDEのJava EEバンドル版</a></td>
<td class="tbltd1">6.7以降</td>
</tr>
<tr>
<td class="tbltd1"><a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html">Java Development Kit (JDK)</a></td>
<td class="tbltd1">6または7</td>
</tr>
<tr>
<td class="tbltd1">GlassFishサーバー<br><em class="indent margin-around">または</em><br>Tomcatサーブレット・コンテナ</td>
<td class="tbltd1">Open Source Edition 3.1.x<br><em class="margin-around indent">&nbsp;</em><br>6.xまたは7.x</td>
</tr>
<tr>
<td class="tbltd1"><a href="http://www.dojotoolkit.org/download">Dojoツールキット</a></td>
<td class="tbltd1">バージョン1.2.xまたはそれ以降</td>
</tr>
<tr>
<td class="tbltd1"><a href="https://netbeans.org/projects/samples/downloads/download/Samples%252FJavaScript%252FDojoTreeSample.zip">Dojoサンプル・プロジェクト</a></td>
<td class="tbltd1">該当なし</td>
</tr>
</tbody>
</table>
<br>
<p><strong class="notes">注意: </strong></p>
<ul>
<li>このチュートリアルを完了するには、いくつかの手順でインターネット接続が必要になります。</li>
<li>IDEのJavaダウンロード・バンドルでは、IDEとともにGlassFish Server Open Source Editionをインストールして登録することもできます。このチュートリアルでは、クライアント・サーバー通信のシミュレーションを行うために、サーバーが必要です。</li>
<li>このチュートリアルには、以前のバージョンのIDEを使用できます。バージョン6.5では、様々なツールキットがIDEにバンドルされていました。NetBeans 6.5にはコアDojoライブラリバージョン1.1.0が組み込まれています。このチュートリアルには、<a href="http://dojotoolkit.org/projects/core">Dojoコア</a>ライブラリと<a href="http://dojotoolkit.org/projects/dijit">Dijit</a>ライブラリの両方のコンポーネントが必要です。コア・ライブラリとDijitライブラリの両方を含んでいる更新されたバージョン(1.2.xまたはそれ以降)のツールキットをダウンロードし、IDEのJavaScriptライブラリ・マネージャを使用して登録する必要があります。
</li>
<li><a name="final"></a>完成したプロジェクトは次のようになります。<br><img alt="ブラウザに表示された完成した課題" class="b-all margin-around" src="../../../images_www/articles/71/web/js-toolkits-dojo/dojo-tree-complete.png" title="ブラウザに表示された完成した課題">
</li>
</ul>
<br><a name="addLib"></a>
<h2>NetBeansプロジェクトへのDojoツールキットの追加</h2>
<p>最初に、IDEでサンプル・プロジェクトを開きます。プロジェクトが開いたら、IDEの「プロジェクト」ウィンドウで、プロジェクトにDojoリソースを直接コピーします。</p>
<ol>
<li>チュートリアルの<a href="https://netbeans.org/projects/samples/downloads/download/Samples%252FJavaScript%252FDojoTreeSample.zip">Dojoサンプル・プロジェクト</a>をコンピュータ上の場所にダウンロードします。</li>
<li>NetBeansを起動し、IDEのツールバーの「プロジェクトを開く」ボタン(<img alt="「プロジェクトを開く」ボタン" src="../../../images_www/articles/71/web/js-toolkits-dojo/open-project-btn.png">)をクリックします。</li>
<li>表示される「プロジェクトを開く」ダイアログで、コンピュータ上のDojoサンプル・プロジェクトの場所に移動し、「プロジェクトを開く」をクリックします。<br><br><code>DojoTreeSample</code>プロジェクトをIDEで開くと、最初はエラー・バッジの付いた赤いテキストで表示されますが、これは参照の問題があることを示しています。<br><img alt="DojoTreeSampleプロジェクトが赤いテキストとエラー・バッジで表示された「プロジェクト」ウィンドウ" class="b-all margin-around" src="../../../images_www/articles/71/web/js-toolkits-dojo/proj-win-ref-problems.png" title="プロジェクトの参照の問題を示す赤いテキストとエラー・バッジ"><br>参照の問題が存在するのは、プロジェクトで使用されているJavaクラス(<code>Tribe</code>と<code>TribeDataManager</code>)がJSON JARファイル内のクラスを参照しているためで、このファイルは<a href="#addJSON">プロジェクトにJSON JARファイルを追加</a>する後述の項で追加します。</li>
<li>これから追加するDojoリソースを格納するためのフォルダを、プロジェクト内に作成します。これを行うには、「プロジェクト」ウィンドウで「<code>Webページ</code>」ノードを右クリックし、「新規」>「フォルダ」を選択します。「新規フォルダ」ダイアログで、「フォルダ名」フィールドに「<code>resources</code>」と入力します。「親フォルダ」フィールドには、デフォルトで「<code>web</code>」と入力されます。「終了」をクリックして新規フォルダを作成し、「プロジェクト」ウィンドウの「<code>Webページ</code>」ノードの下に表示されるようになったことを確認します。<br><br><strong class="notes">注意: </strong>「プロジェクト」ウィンドウ([Ctrl]-[1]、Macの場合は[⌘]-[1])は、プロジェクト内の重要な項目の<em>論理ビュー</em>を示す、プロジェクト・ソースへのメイン・エントリ・ポイントです。「ファイル」ウィンドウ([Ctrl]-[2]、Macの場合は[⌘]-[2])には、プロジェクトの<em>ディレクトリ・ベースのビュー</em>が表示され、「プロジェクト」ウィンドウでは表示されないすべてのファイルやフォルダが含まれます。このステップの「新規フォルダ」ダイアログでは、「<code>Webページ</code>」ノードから新規項目を作成するときに、「親フォルダ」フィールドにデフォルトで「<code>web</code>」と入力されます。「ファイル」ウィンドウを開くと、新しい<code>resources</code>フォルダが<code>web</code>ディレクトリの下に表示されるようになったことがわかります。</li>
<li><a href="http://www.dojotoolkit.org/downloads">Dojoツールキット</a> (バージョン1.2.xまたはそれ以降)のコピーを入手します。Dojoツールキットは<a href="http://www.dojotoolkit.org/downloads">http://www.dojotoolkit.org/downloads</a>からダウンロードできます。<br><br>現在のバージョンのDojoツールキットには、<a href="http://www.dojotoolkit.org/projects/core">Dojoコア</a>、<a href="http://www.dojotoolkit.org/projects/dijit">Dijit</a>、および<a href="http://www.dojotoolkit.org/projects/dojox">DojoX</a>ライブラリが含まれています。Dojoのツリー・ウィジェットを実装するには、コア・ライブラリの<code>ItemFileReadStore</code>モジュールと、Dijitライブラリに含まれている<code>ツリー</code>ウィジェット自体の、2つのコンポーネントが基本的に必要です。
<ul>
<li><code><a href="http://docs.dojocampus.org/dojo/data/ItemFileReadStore">dojo.data.ItemFileReadStore</a></code>: JSON構造化コンテンツをHTTPエンドポイント(このチュートリアルではサーブレット)から読み取り、すべての項目をメモリー内に保存して単純にすばやくアクセスできるようにします。</li>
<li><code><a href="http://docs.dojocampus.org/dijit/Tree">dijit.Tree</a></code>: <code>ItemFileReadStore</code>から取得されたJSONデータを表示するツリー・ウィジェットです。</li>
</ul></li>
<li>Dojoリソースをプロジェクトに追加するには、それらをコンピュータ上の場所から単純にコピー([Ctrl]-[C]、Macの場合は[⌘]-[C])し、次にIDEで、新しい<code>resources</code>ノードを右クリックして「貼付け」を選択するか、<code>resources</code>ノードを単純に選択して([Ctrl]-[V]、Macの場合は[⌘]-[V])を押します。<br><br>必要なのは<code>Dojoコア</code>ライブラリと<code>Dijit</code>ライブラリのみであるため、ツールキットの最近のコピーをダウンロードした場合、<code>DojoX</code>ライブラリをプロジェクトに追加する必要は<em>ありません</em>。<br><br><code>Dojoコア</code>ライブラリと<code>Dijit</code>ライブラリを追加した後、「プロジェクト」ウィンドウは次のようになるはずです。<br><img alt="Dojoリソースが表示された「プロジェクト」ウィンドウ" class="b-all margin-around" src="../../../images_www/articles/71/web/js-toolkits-dojo/proj-win-dojo-resources.png" title="プロジェクトの「resources」フォルダに追加されたDojoライブラリとDijitライブラリ">
</li>
</ol>
<p>この段階で、<code>DojoTreeSample</code>プロジェクトをIDEで開き、必要なDojoリソースをプロジェクトに追加することができました。次のステップでは、ツリー・ウィジェットをエンド・ユーザーに表示するHTMLファイルの作業を始めます。</p>
<br><a name="linkFromFile"></a>
<h2>プロジェクト・ファイルからツールキット・リソースへのリンク</h2>
<p>ツールキットのリソースを使用するには、コア・ライブラリに含まれている<code>dojo.js</code>ファイルにリンクする必要があります。<code>dojo.js</code>ファイルは、Dojoの<em>ソース・ローダー</em>であり、使用すべき正しいホスト環境を判定します。その間に、<code>parseOnLoad</code>パラメータを追加して<code>djConfig</code>の構成も行うことができます。</p>
<ol>
<li>「プロジェクト」ウィンドウで、<code>dojoDemo.html</code>ファイルをダブルクリックしてエディタで開きます。</li>
<li><code>dojoDemo.html</code>ファイルで、置換します:
<pre class="examplecode">&lt;!-- TODO: link to Dojo resources here --&gt;</pre>
というコメントを次の<code>&lt;script></code>タグへ:
<pre class="examplecode">&lt;script type=&quot;text/javascript&quot;
src=&quot;resources/dojo/dojo.js&quot;
djConfig=&quot;parseOnLoad: true&quot;&gt;
&lt;/script&gt;</pre>
<ul>
<li><code><a href="http://docs.dojocampus.org/djConfig">djConfig</a></code>を使用すると、Dojoの動作を制御するグローバル設定をオーバーライドできます(たとえば、<code>parseOnLoad</code>プロパティを使用して)。</li>
<li><code>parseOnLoad</code>を<code>true</code>に設定すると、ページがロードされるときに必ずウィジェットとページ・マークアップが解析されます。</li>
</ul></li>
<li><a name="themes"></a>ツールキットに含まれている<a href="http://docs.dojocampus.org/dijit/themes">サンプル・テーマ</a>にリンクします。Dijitには、<code>tundra</code>、<code>soria</code>および<code>nihilo</code>という3つのサンプル・テーマが用意されています。これらは<code>dijit/themes</code>フォルダにあり、「プロジェクト」ウィンドウから確認できます。<br><img alt="「プロジェクト」ウィンドウに表示されたDijitテーマ・フォルダ" class="b-all margin-around" src="../../../images_www/articles/71/web/js-toolkits-dojo/dijit-themes.png" title="「dijit/themes」フォルダに入っているDijitサンプル・テーマ"><br><code>nihilo</code>テーマにリンクするには、次の<code>@import</code>文をページに追加します。ページの<code>&lt;head></code>タグの間、たとえば、先ほど追加した<code>&lt;script></code>タグのすぐ下に追加できます(<strong>太字</strong>部分が変更箇所)。
<pre class="examplecode">&lt;script type=&quot;text/javascript&quot;
src=&quot;resources/dojo/dojo.js&quot;
djConfig=&quot;parseOnLoad: true&quot;&gt;
&lt;/script&gt;
<strong>&lt;style type=&quot;text/css&quot;&gt;
@import &quot;resources/dijit/themes/nihilo/nihilo.css&quot;;
&lt;/style&gt;</strong></pre></li>
<li>使用するテーマの名前を指定して、ページの<code>&lt;body></code>タグにクラスを追加します。これを実行すると、ページにロードされているすべてのDojoウィジェットが、テーマに関連付けられたスタイルを使用してレンダリングされます。
<pre class="examplecode">&lt;body <strong>class=&quot;nihilo&quot;</strong>&gt;</pre>
</li>
</ol>
<p>この段階で、<code>dojoDemo.html</code>ファイルは、Dojoコア・ライブラリとDijitライブラリを参照する任意のコードを受け入れる準備ができ、すべてのウィジェットをDojoの<code>nihilo</code>テーマを使用してレンダリングするようになりました。</p>
<br><a name="addWidget"></a>
<h2>Dojoツリー・ウィジェットの追加と構成</h2>
<p><code>dojo.js</code>にリンクした後は、Dojoのモジュールとウィジェットを使用するコードを追加し始めることができます。まず、<code><a href="http://docs.dojocampus.org/dojo/require">dojo.require</a></code>文を使用して、<code>dijit.Tree</code>ウィジェットと<code>dojo.data.ItemFileReadStore</code>をロードするコードを追加します。次に、ウィジェットとモジュール自体をページに追加します。</p>
<ol>
<li>置換します:
<pre class="examplecode">// TODO: add dojo.require statements here</pre>
というコメント(行8)を次の<code>dojo.require</code>文へ:
<pre class="examplecode">dojo.require(&quot;dojo.data.ItemFileReadStore&quot;);
dojo.require(&quot;dijit.Tree&quot;);</pre>
<ul>
<li><code><a href="http://docs.dojocampus.org/dojo/data/ItemFileReadStore">dojo.data.ItemFileReadStore</a></code>: JSON構造化コンテンツをHTTPエンドポイントから読み取り(<a href="#prepareServlet">JSONレスポンスを開始するサーブレットの準備</a>で、この目的に使用するサーブレットを実装します)、すべての項目をメモリー内に保存して単純にすばやくアクセスできるようにします。</li>
<li><code><a href="http://docs.dojocampus.org/dijit/Tree">digit.Tree</a></code>: <code>ItemFileReadStore</code>から取得されたJSONデータを表示するツリー・ウィジェットです。</li>
</ul></li>
<li><a name="TribeServlet"></a><code>ItemFileReadStore</code>と<code>ツリー</code>ウィジェットをページに追加します。置換します:
<pre class="examplecode">&lt;!-- TODO: specify AJAX retrieval --&gt;
&lt;!-- TODO: add Tree widget and configure attributes --&gt;</pre>
というコメントを次へ:
<pre class="examplecode">&lt;div dojoType=&quot;dojo.data.ItemFileReadStore&quot;
url=&quot;TribeServlet&quot;
jsId=&quot;indianStore&quot;&gt;
&lt;/div&gt;
&lt;div dojoType=&quot;dijit.Tree&quot;
store=&quot;indianStore&quot;
query=&quot;{type:'region'}&quot;
label=&quot;North American Indians&quot;&gt;
&lt;/div&gt;</pre>
<ul>
<li><code>ItemFileReadStore</code>では、JSONデータを返すサーバー側リソースを指すように<code>url</code>プロパティを指定する必要があります。後で説明するとおり、これは<code>TribeServlet</code>です。<code>jsId</code>プロパティを使用すると、取得されたJSONデータにIDを付けることができ、ウィジェットはそれを使用してデータ・ストアを参照できます。</li>
<li><code>ツリー</code>では、<code>store</code>プロパティを使用して、JSONデータを提供する<code>ItemFileReadStore</code>を指します。<code>query</code>プロパティを使用すると、JSONファイルで使用されているキーワードに基づいて、データの表示を調整できます。</li>
</ul>
</li>
</ol>
<p>この段階で、<code>dojoDemo.html</code>ファイルは完成し、プロジェクトに対する<em>クライアント側の</em>変更はすべて適用されました。次の2つの手順では、ツリー・リクエストが行われたときのプロジェクトの<em>サーバー側の</em>動作に影響を与える変更を加えます。</p>
<br><a name="addJSON"></a>
<h2>サードパーティJSON変換ソースをJARファイルとしてプロジェクトに追加</h2>
<p>このチュートリアルでは、ArrayListサンプル・データを抽出するロジックが、<code>Tribe</code>クラスと<code>TribeDataManager</code>クラスに準備されています。基本的に、JSON変換を処理するサードパーティJavaクラスをプロジェクトに含め、これらのクラスの<code>import</code>文を<code>Tribe</code>クラスと<code>TribeDataManager</code>クラスに追加するのみで済みます。ただし、これを実行するには、まずサードパーティJavaクラスをコンパイルし、Java Archive (JARファイル)を作成する必要があります。これには、IDEのJavaクラス・ライブラリ・ウィザードを使用できます。</p>
<ol>
<li><a href="http://json.org/java">http://json.org/java</a>にアクセスすると、JSON変換用のJavaクラスは無料で利用できます。「Free source code is available」というリンクをクリックし、ソースが入っている<code>json.zip</code>ファイルをダウンロードします。</li>
<li><code>json.zip</code>ファイルを解凍すると、抽出されたフォルダには、<a href="http://json.org/java">http://json.org/java</a>に一覧表示されているソースが入っています。<br><br>この時点で、これらのソースをコンパイルして、<code>DojoTreeSample</code>プロジェクトに追加できるJava Archive (JARファイル)を作成します。</li>
<li>IDEのメイン・ツールバーの「新規プロジェクト」ボタン(<img alt="「新規プロジェクト」ボタン" src="../../../images_www/articles/71/web/js-toolkits-dojo/new-project-btn.png">)をクリックします。</li>
<li>表示されるウィザードで、「カテゴリ」から「Java」、「プロジェクト」から「Javaクラス・ライブラリ」を選択し、「次」をクリックします。</li>
<li>Javaクラス・ライブラリ・ウィザードの「名前と場所」パネルで、新しいプロジェクトに「<code>json</code>」という名前を付け、「終了」をクリックします。新しいプロジェクトが作成され、「プロジェクト」ウィンドウで開きます。<br><br> DojoツールキットのリソースをコピーしてIDEの「プロジェクト」ウィンドウで<code>resources</code>フォルダに貼り付けたのと同じ方法で、先ほどダウンロードしたソースをコピーし、新しい<code>json</code>プロジェクトに直接貼り付けます。</li>
<li>抽出した<code>json.zip</code>ファイルのあるコンピュータ上の場所に移動し、<code>json</code>フォルダをコピーします([Ctrl]-[C]、Macの場合は[⌘]-[C])。<code>json</code>フォルダにはソース・ファイルが入っています。</li>
<li>IDEの「プロジェクト」ウィンドウで、<code>json</code>プロジェクトの<code>&lt;デフォルト・パッケージ></code>ノードを右クリックし、「貼付け」を選択します。<br><br>これを実行すると、「<code>json</code>」がパッケージ名になり、その中にすべてのソースが表示されます。<br><img alt="「プロジェクト」ウィンドウ - 「json」プロジェクトに含まれているソース" class="b-all margin-around" src="../../../images_www/articles/71/web/js-toolkits-dojo/proj-win-json-sources.png" title="新しい「json」プロジェクトに含まれるようになったソース"></li>
<li><code>json</code>プロジェクトをビルドします。これを行うには、「プロジェクト」ウィンドウで<code>json</code>プロジェクトのノードを右クリックし、「消去してビルド」を選択します。<br><br>プロジェクトをビルドすると、すべてのJavaクラスが<code>.class</code>ファイルにコンパイルされます。IDEは、コンパイル済クラスを格納するための<code>build</code>フォルダと、プロジェクトのJARファイルを格納する<code>dist</code>フォルダを作成します。これらのフォルダはIDEの「ファイル」ウィンドウから表示できます。<br><br><code>json</code>プロジェクトをビルドした後、「ファイル」ウィンドウを開き([Ctrl]-[2]、Macの場合は[⌘]-[2])、<code>json</code>フォルダを展開します。<code>build</code>フォルダには<code>json.zip</code>ファイルのソースがコンパイルされたもの、<code>dist</code>フォルダには<code>DojoTreeSample</code>プロジェクトで参照する必要のあるJARファイルが入っています。<br><img alt="「ファイル」ウィンドウ - 「build」フォルダに表示されたコンパイル済ソース" class="b-all margin-around" src="../../../images_www/articles/71/web/js-toolkits-dojo/files-win-compiled-classes.png" title="プロジェクトの「build」フォルダに表示されたコンパイル済ソース"><br><code>json.jar</code>ファイルができたので、<code>DojoTreeSample</code>プロジェクトを開いたときから発生している参照の問題を解決できます。</li>
<li>「プロジェクト」ウィンドウで<code>DojoTreeSample</code>の「ライブラリ」ノードを右クリックし、「JAR/フォルダの追加」を選択します。次に、ダイアログで<code>json</code>プロジェクトの<code>dist</code>フォルダの場所に移動し、<code>json.jar</code>ファイルを選択します。<br><br>ダイアログを終了すると、<code>json.jar</code>ファイルがプロジェクトの「<code>ライブラリ</code>」ノードの下に表示されます。<br><img alt="「プロジェクト」ウィンドウ - 「ライブラリ」ノードに追加されたJARファイル" class="b-all margin-around" src="../../../images_www/articles/71/web/js-toolkits-dojo/libraries-json-jar.png" title="プロジェクトにより参照されるJARファイル"><br><strong class="notes">注意: </strong><code>json.jar</code>ファイルはプロジェクトの「<code>ライブラリ</code>」ノードの下に表示されますが、元の場所から参照されます。コピーされてプロジェクトに追加されるのではありません(たとえば、「ファイル」ウィンドウで<code>DojoTreeSample</code>プロジェクトの下には見つかりません)。したがって、JARファイルの場所を変更すると、参照が壊れます。</li>
<li>「<code>ソース・パッケージ</code>」> <code>dojo.indians</code>パッケージを展開し、<code>Tribe</code>クラスと<code>TribeDataManager</code>クラスをダブルクリックしてエディタで開きます。</li>
<li>必要なインポート文を両方のクラスに追加します。各クラスで、エディタ上で右クリックし、「インポートを修正」を選択します。<br><br><code>Tribe</code>クラスには次のインポートが必要です。
<pre class="examplecode">import dojo.org.json.JSONException;
import dojo.org.json.JSONObject;</pre>
<code>TribeDataManager</code>クラスには次のインポートが必要です。
<pre class="examplecode">import dojo.org.json.JSONArray;
import dojo.org.json.JSONException;
import dojo.org.json.JSONObject;</pre>
<p class="tips">JSONクラスのAPIも<a href="http://json.org/java">http://json.org/java</a>で提供されています。後で<code>Tribe</code>と<code>TribeDataManager</code>のコードを調べるので、このページを開いておいてください。</p></li>
<li><code>TribeDataManager</code>のArrayListを調べます。ArrayListは<code>Tribe</code>オブジェクトのコレクションです。ArrayListの最初の要素を調べると、新しい<code>Tribe</code>オブジェクトが作成されてリストに追加されていることがわかります。
<pre class="examplecode">indians.add(new Tribe(&quot;Eskimo-Aleut&quot;, &quot;Arctic&quot;, &quot;Alaska Natives&quot;));</pre>
各<code>Tribe</code>オブジェクトは、「<em>部族</em>」、「<em>カテゴリ</em>」および「<em>地域</em>」という3つの情報を収集します。この課題用のデータは、Wikipediaの「<a href="http://en.wikipedia.org/wiki/Native_Americans_in_the_United_States#Ethno-linguistic_classification">Native Americans in the United States</a>」のエントリから取得されています。ご存知のとおり、複数の「<em>部族</em>」が1つの「<em>カテゴリ</em>」に分類され、多数のカテゴリがより大きな1つの「<em>地域</em>」に含まれる場合があります。</li>
<li><code>Tribe</code>クラスをエディタで開くと、これは基本的に<a href="http://java.sun.com/docs/books/tutorial/javabeans/index.html">JavaBean</a>であり、<code>toJSONObject()</code>メソッドのみが異なることがわかります。
<pre class="examplecode">public JSONObject toJSONObject() throws JSONException {
JSONObject jo = new JSONObject();
jo.put(&quot;name&quot;, this.name);
jo.put(&quot;type&quot;, &quot;tribe&quot;);
return jo;
}</pre></li>
<li>再度<code>TribeDataManager</code>に切り替え([Ctrl]-[Tab])、クラスに含まれているメソッドを調べます。ナビゲータを開いて([Ctrl]-[7]、Macの場合は[⌘]-[7])、クラスに含まれているフィールドとプロパティのリストを表示します。<br><img alt="ナビゲータに表示されたTribeDataManagerクラス" class="margin-around" src="../../../images_www/articles/71/web/js-toolkits-dojo/dojo-navigator.png" title="ナビゲータを使用した、クラスのフィールドおよびプロパティの表示"><br>その中で最も重要なメソッドは<code>getIndiansAsJSONObject()</code>です。このメソッドはArrayListをスキャンし、データを処理して<code>JSONObject</code>の形式で返します。Dojoの<code>ItemFileReadStore</code>に必要なのは、<code>文字列</code>形式のJSONObjectです。
<pre class="examplecode">public static JSONObject getIndiansAsJSONObject() throws JSONException {
JSONObject jo = new JSONObject();
JSONArray itemsArray = new JSONArray();
jo.put(&quot;identifier&quot;, &quot;name&quot;);
jo.put(&quot;label&quot;, &quot;name&quot;);
// add regions
addRegionsToJSONArray(itemsArray);
// add categories
addCategoriesToJSONArray(itemsArray);
// add tribes
addTribesToJSONArray(itemsArray);
jo.put(&quot;items&quot;, itemsArray);
return jo;
}</pre></li>
<li><code>getIndiansAsJSONObject()</code>メソッドに関するJavadocを開きます。これは、ナビゲータに戻り([Ctrl]-[7]、Macの場合は[⌘]-[7])、メソッドの上にカーソルを置くことで行うことができます。または、メイン・メニューから「ウィンドウ」>「その他」>「Javadoc」を選択し、エディタでメソッド署名をクリックします。<br><a name="javadoc"></a><img alt="TribeDataManagerクラスについて開いたJavadocウィンドウ" class="margin-around" src="../../../images_www/articles/71/web/js-toolkits-dojo/javadoc-window.png" title="JSONデータの例を示すTribeDataManagerのJavadoc"></li>
<li>Javadocに示されているJSONデータの例を調べます。データの形式は、<a href="http://o.dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dijit-and-dojo/what-dojo-data/available-stores/dojo-data-item">Dojoのドキュメント</a>に示されている例に準拠しています。</li>
</ol>
<div class="indent">
<div class="feedback-box float-left" style="width:700px">
<h3>NetBeans IDEのJavaデバッガ</h3>
<p>次のステップでは、<code>getIndiansAsJSONObject()</code>メソッドをコールするサーブレットを実装します。これを実行した後、IDEのJavaデバッガを使用してメソッドをステップ実行し、<code>JSONObject</code>がどのように形成されるかを調べることができます。これは次のように実行できます。</p>
<ol>
<li>メソッドにブレークポイントを設定する(エディタの左マージンで行番号(行99)をクリックする)。<br><img alt="エディタで設定されたメソッドのブレークポイント" class="margin-around b-all" src="../../../images_www/articles/71/web/js-toolkits-dojo/debugger-breakpoint.png" title="Javaデバッガを使用したコードのステップ実行"></li>
<li>デバッガを実行する(IDEのツールバーから「メイン・プロジェクトをデバッグ」(<img alt="「メイン・プロジェクトをデバッグ」ボタン" src="../../../images_www/articles/71/web/js-toolkits-dojo/debug-btn.png">)ボタンをクリックする)。</li>
<li>「デバッガ」ツールバーの「ステップ・イン」(<img alt="ステップ・イン・ボタン" src="../../../images_www/articles/71/web/js-toolkits-dojo/step-into-btn.png">)ボタンと「ステップ・オーバー」(<img alt="ステップ・オーバー・ボタン" src="../../../images_www/articles/71/web/js-toolkits-dojo/step-over-btn.png">)ボタンを使用する。</li>
<li>変数と式の値を「ローカル変数」ウィンドウ(「ウィンドウ」>「デバッグ」>「ローカル変数」)で調べる。</li>
</ol>
<p>Javaデバッガの詳細は、次のスクリーンキャストを参照してください。</p>
<ul>
<li><a href="../java/debug-stepinto-screencast.html">NetBeansデバッガでの視覚的なステップ・イン・アクション</a></li>
<li><a href="../java/debug-deadlock-screencast.html">NetBeansデバッガを使用したデッドロックの検出</a></li>
<li><a href="../java/debug-evaluator-screencast.html">NetBeansデバッガのコード・スニペット評価の使用</a></li>
</ul>
</div>
</div>
<br style="clear:both;">
<br>
<p>このステップの中で、<a href="http://json.org">http://json.org</a>からのサードパーティ・ソースをコンパイルし、それらをJARファイルとして<code>DojoTreeSample</code>プロジェクトに追加しました。次に、JARファイルのクラス、<code>Tribe</code>クラスと<code>TribeDataManager</code>クラスに、インポート文を追加しました。最後に、<code>TribeDataManager</code>に含まれているメソッドのうち、ArrayListのデータをJSON文字列に変換するために使用されるいくつかのメソッドを調べました。</p>
<p>次のステップでは、受信するリクエストを<code>TribeDataManager</code>の<code>getIndiansAsJSONObject()</code>メソッドをコールして処理し、結果となるJSON文字列をクライアントにレスポンスとして送信するサーブレットを作成します。</p>
<br><a name="prepareServlet"></a>
<h2>JSONレスポンスを開始するサーブレットの準備</h2>
<p>Webページに<code>ItemFileReadStore</code>を追加したとき、<a href="#TribeServlet"><code>url</code>プロパティの値として「<code>TribeServlet</code>」を指定</a>しました。クライアントに対してJSONデータを準備して返す作業を担当するサーバー側では、これは送信先です。このサーブレットを作成しましょう。</p>
<ol>
<li>「プロジェクト」ウィンドウで<code>dojo.indians</code>ソース・パッケージを右クリックし、「新規」>「サーブレット」を選択します。</li>
<li>「新規サーブレット」ダイアログで、クラス名に「<code>TribeServlet</code>」と入力します。また、サーブレットが<code>dojo.indians</code>パッケージ内に作成されるようにします。<br><img alt="新規サーブレット・ウィザード" class="margin-around b-all" src="../../../images_www/articles/71/web/js-toolkits-dojo/new-servlet-wizard.png" title="新規サーブレット・ウィザードを使用したサーブレットの作成"><br><br>「次」をクリックします。</li>
<li>ウィザードの「サーブレット・デプロイメントを構成」ステップでは、「デプロイメント・ディスクリプタに情報を追加」オプションがデフォルトで選択されており、これは、デフォルトのサーブレット名とURLパターンが<code>web.xml</code>に自動的に追加されることを意味します。その結果、<code>TribeServlet</code>のホスト・ドメイン(<code>http://localhost:8080/DojoTreeSample/</code>)に対するすべてのリクエストが、<code>dojo.indians.TribeServlet</code>クラスによって処理されます。</li>
<li>「終了」をクリックします。新しいサーブレットのスケルトン・クラスが生成され、エディタで開かれます。<br><br>サーブレットの機能は、<code>getIndiansAsJSONObject()</code>メソッドをコールし、このメソッドからのデータを使用してクライアント・リクエストに応答することです。JSON形式のレスポンスを準備するには、最初にレスポンスのMIMEタイプをJSON形式に設定する必要があります。</li>
<li><a name="contentType"></a><code>processRequest()</code>メソッドを見つけて変更します。元:
<pre class="examplecode">response.setContentType(&quot;text/html;charset=UTF-8&quot;);</pre>
先:
<pre class="examplecode">response.setContentType(&quot;application/json&quot;);</pre>
これにより、HTTPレスポンスの<code>Content-Type</code>ヘッダーが、返される内容がすべてJSON形式であることを示すように設定されます。</li>
<li><code>processRequest()</code>メソッドの<code>try</code>ブロック内のコメントアウトされているコードを、次のように置き換えます(<strong>太字</strong>部分が変更箇所)。
<pre class="examplecode">try {
<strong>JSONObject jo = null;
try {
jo = TribeDataManager.getIndiansAsJSONObject();
} catch (JSONException ex) {
System.out.println(&quot;Unable to get JSONObject: &quot; + ex.getMessage());
}
out.println(jo);</strong>
} finally {
out.close();
}</pre>
<p class="tips">コードを再フォーマットするには、エディタ内で右クリックし、「フォーマット」を選択します。</p></li>
<li>IDEのヒントを使用して、必要なインポート文を追加します。これらを次に示します。
<pre class="examplecode">import dojo.org.json.JSONException;
import dojo.org.json.JSONObject;</pre></li>
<li>プロジェクトを実行するには、「プロジェクト」ウィンドウで<code>DojoTreeSample</code>プロジェクト・ノードを選択し、IDEのツールバーの「プロジェクトの実行」(<img alt="「メイン・プロジェクトの実行」ボタン" src="../../../images_www/articles/71/web/js-toolkits-dojo/run-project-btn.png">)ボタンをクリックします。<br><br>ブラウザが開いて開始画面(<code>dojoDemo.html</code>)が表示され、<a href="#final">上のスクリーンショット</a>のように、Dojo TreeウィジェットでArrayListのデータが正しく表示されます。</li>
</ol>
<div class="feedback-box">
<a href="/about/contact_form.html?to=3&amp;subject=Feedback: Connecting a Dojo Tree to an ArrayList">ご意見をお寄せください</a></div>
<br style="clear:both;">
<a name="seeAlso"></a>
<h2>関連項目</h2>
<p>Dojoの詳細は、公式ドキュメントを参照してください。</p>
<ul>
<li>Dojoツールキットのリファレンス・ガイド: <a href="http://dojotoolkit.org/reference-guide/">Reference Guide</a></li>
<li>オンラインAPIリファレンス: <a href="http://api.dojotoolkit.org/">http://api.dojotoolkit.org/</a></li>
<li>Dojoデモ: <a href="http://demos.dojotoolkit.org/demos/">http://demos.dojotoolkit.org/demos/</a></li>
</ul>
<p>JavaScriptとJavaScriptツールキットの機能の詳細は、<a href="https://netbeans.org/">netbeans.org</a>の次のリソースを参照してください。</p>
<ul>
<li><a href="js-toolkits-jquery.html">jQueryを使用した、Webページの見た目と使いやすさの向上</a>。jQueryの概要を説明し、WebページでHTMLマークアップにjQueryのアコーディオン・ウィジェットを適用する手順を示します。</li>
<li><a href="ajax-quickstart.html">Ajax入門(Java)</a>。サーブレット・テクノロジを使用した単純なアプリケーションのビルド方法を示すと同時に、Ajaxリクエストの基盤となるプロセス・フローについて解説します。</li>
<li><a href="../../docs/73/javascript-editor.html">JavaScriptの編集</a>。IDEが提供する基本的なJavaScript編集機能を説明するドキュメントです。</li>
</ul>
</body>
</html>