| <!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>Connecting a Dojo Tree to an ArrayList using JSON - NetBeans Tutorial</title> | |
| </head> | |
| <body> | |
| <!-- | |
| Copyright (c) 2009, 2010, Oracle and/or its affiliates. All rights reserved. | |
| --> | |
| <h1>Connecting a Dojo Tree to an ArrayList using JSON</h1> | |
| <p>Web 2.0 features are becoming increasingly predominant in web applications. | |
| Many web applications now use JavaScript toolkits such as | |
| <a href="http://www.dojotoolkit.org/">Dojo</a>, which allow web pages to behave | |
| more like desktop interfaces while overcoming browser incompatibilities and | |
| utilizing code that is maintainable, accessible, and standards-compliant.</p> | |
| <p>This tutorial has been adapted from the | |
| <a href="http://developers.sun.com/learning/javaoneonline/j1lab.jsp?lab=LAB-5573&yr=2009&track=1">Java | |
| One Hands-On Lab: Leveraging JavaScript Toolkits for End-to-End Connectivity | |
| in Web Applications</a>, and demonstrates how to add and configure a | |
| <a href="http://dojocampus.org/explorer/#Dijit_Tree_Basic">Dojo Tree widget</a> | |
| in a web page and enable the server-side to respond to Tree requests in JSON | |
| format. In doing so, you will utilize a set of freely available Java classes from | |
| <a href="http://json.org">http://json.org</a> to process data from an ArrayList | |
| into JSON format.</p> | |
| <img src="../../../images_www/articles/73/netbeans-stamp-80-74-73.png" class="stamp" alt="Content on this page applies to NetBeans IDE 7.2, 7.3, 7.4 and 8.0" title="Content on this page applies to the NetBeans IDE 7.2, 7.3, 7.4 and 8.0" > | |
| <p><strong>Contents</strong></p> | |
| <ul class="toc"> | |
| <li><a href="#addLib">Opening the Sample Project</a></li> | |
| <li><a href="#linkFromFile">Linking to the Toolkit Resources from a Project File</a></li> | |
| <li><a href="#addWidget">Adding and Configuring the Dojo Tree Widget</a></li> | |
| <li><a href="#addJSON">Adding Third-Party JSON Conversion Sources as a JAR File to the Project</a></li> | |
| <li><a href="#prepareServlet">Preparing a Servlet to Initiate a JSON Response</a></li> | |
| <li><a href="#seeAlso">See Also</a></li> | |
| </ul> | |
| <a name="requiredSoftware"></a> | |
| <p><strong>To complete this document, you need the following software and resources.</strong></p> | |
| <table> | |
| <tbody> | |
| <tr> | |
| <th class="tblheader" scope="col">Software or Resource</th> | |
| <th class="tblheader" scope="col">Version Required</th> | |
| </tr> | |
| <tr> | |
| <td class="tbltd1"><a href="https://netbeans.org/downloads/index.html">NetBeans | |
| IDE</a></td> | |
| <td class="tbltd1">7.2, 7.3, 7.4, 8.0, Java EE </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">7 or 8</td> | |
| </tr> | |
| <tr> | |
| <td class="tbltd1">GlassFish server | |
| <br><em class="indent margin-around">or</em> | |
| <br>Tomcat servlet container</td> | |
| <td class="tbltd1">Open Source Edition 3.1.x or 4.x | |
| <br><em class="margin-around indent"> </em> | |
| <br>7.x or 8.x</td> | |
| </tr> | |
| <tr> | |
| <td class="tbltd1"><a href="http://www.dojotoolkit.org/download">Dojo Toolkit</a></td> | |
| <td class="tbltd1">version 1.8.x or later</td> | |
| </tr> | |
| <tr> | |
| <td class="tbltd1"><a href="https://netbeans.org/projects/samples/downloads/download/Samples/Java%20Web/DojoTreeSample.zip">Dojo sample project</a></td> | |
| <td class="tbltd1">n/a</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <br> | |
| <p><strong class="notes">Notes:</strong></p> | |
| <ul> | |
| <li>You will require an Internet connection to complete several of the steps | |
| included in this tutorial.</li> | |
| <li>The NetBeans IDE Java EE download bundle enables you to optionally install and register | |
| the GlassFish Server Open Source Edition with the IDE. You require a server to simulate | |
| client-server communication in this tutorial.</li> | |
| <li><a name="final"></a>The completed project looks as follows: | |
| <br> | |
| <img src="../../../images_www/articles/73/web/js-toolkits-dojo/dojo-tree-complete.png" | |
| alt="Completed exercise viewed in browser" | |
| title="Completed exercise viewed in a browser" | |
| class="b-all margin-around"> | |
| </li> | |
| </ul> | |
| <br><a name="addLib"></a> | |
| <h2>Opening the Sample Project</h2> | |
| <p>Begin by opening the sample project in the IDE. When the project is open, expand the project node | |
| in the Projects window and examine the Dojo resources and libraries that are used in the project.</p> | |
| <ol> | |
| <li>Download the tutorial's <a href="https://netbeans.org/projects/samples/downloads/download/Samples%252FJavaScript%252FDojoTreeSample.zip">Dojo | |
| sample project</a> to a location on your computer.</li> | |
| <li>Click the Open Project button ( | |
| <img src="../../../images_www/articles/73/web/js-toolkits-dojo/open-project-btn.png" | |
| alt="Open Project button"> ) in the IDE toolbar to open the Open Project dialog box.</li> | |
| <li>In the Open Project dialog, locate the | |
| Dojo sample project on your computer and click Open Project. | |
| <p>When you open the <code>DojoTreeSample</code> project in the IDE you will | |
| see that the project is badged with an error badge to indicate that a reference problem exists.</p> | |
| <img src="../../../images_www/articles/80/web/js-toolkits-dojo/proj-win-ref-problems.png" | |
| alt="Projects window displaying DojoTreeSample project in red text and with error badge" | |
| class="b-all margin-around" | |
| title="Project reference problems are indicated by red text and error badge"> | |
| <p> | |
| The reference problem exists because the Java classes used in the project (<code>Tribe</code>, | |
| and <code>TribeDataManager</code>) reference classes found in the JSON JAR file, which you will | |
| later add in the section <a href="#addJSON">Adding the JSON JAR Files to the Project</a>.</p> | |
| <p class="notes"><strong>Note: </strong>The Projects window (Ctrl-1; ⌘-1 on Mac) | |
| provides a <em>logical view</em> of important project contents, and is the main entry | |
| point to your project sources. The Files window (Ctrl-2; ⌘-2 on Mac) shows a | |
| <em>directory-based view</em> of your projects, and includes any files and folders | |
| that are not displayed in the Projects Window. </p> | |
| </li> | |
| <li>Expand the <code>Web Pages</code> node in the Projects window. | |
| <p>You can see that a <tt>resources</tt> folder is listed | |
| under the <code>Web Pages</code> node in the Projects window. | |
| The <tt>resources</tt> folder contains the | |
| Dojo core and Dijit libraries from the | |
| <a href="http://www.dojotoolkit.org/download">Dojo toolkit</a>. | |
| In order to implement Dojo's Tree widget, you essentially require two components: | |
| the <code>ItemFileReadStore</code> module from the core library and the | |
| <code>Tree</code> widget itself contained in the Dijit library.</p> | |
| <ul> | |
| <li><code><a href="http://docs.dojocampus.org/dojo/data/ItemFileReadStore">dojo.data.ItemFileReadStore</a></code>: | |
| reads the JSON structured contents from an HTTP endpoint (in this tutorial, | |
| a servlet) and stores all the items in-memory for simple and quick access.</li> | |
| <li><code><a href="http://docs.dojocampus.org/dijit/Tree">dijit.Tree</a></code>: | |
| The Tree widget that provides a view of the JSON data retrieved from | |
| <code>ItemFileReadStore</code>.</li> | |
| </ul> | |
| <p class="notes"><strong>Note.</strong> | |
| The <code>DojoX</code> library is not required for this project.</p> | |
| </li> | |
| <li>Expand the <code>Libraries</code> node in the Projects window and confirm that all | |
| the required libraries are on the classpath. | |
| <p class="notes"><strong>Note.</strong> Depending on your configuration, you might need to resolve a missing server problem. | |
| If you see a <tt><Missing Java EE Server></tt> node under the <code>Libraries</code> | |
| node, right-click the project node and choose Resolve Missing Server Problem in the popup menu.</p> | |
| <div class="indent"> | |
| <img src="../../../images_www/articles/80/web/js-toolkits-dojo/proj-win-dojo-resources.png" | |
| alt="Projects window displaying Dojo resources" | |
| class="b-all margin-around" | |
| title="Dojo and Dijit libraries are added to the Project's 'resources' folder"> | |
| <p>Select the GlassFish Server in the Resolve References dialog box. Click OK.</p> | |
| <img src="../../../images_www/articles/80/web/js-toolkits-dojo/dojo-add-server.png" | |
| alt="Projects window displaying Dojo resources" | |
| class="b-all margin-around" | |
| title="Dojo and Dijit libraries are added to the Project's 'resources' folder"> | |
| </div> | |
| </li> | |
| </ol> | |
| <p>At this stage, you have successfully opened the <code>DojoTreeSample</code> project in | |
| the IDE and confirmed that the Dojo libraries are included in the application. In the next step, | |
| you will begin working in the HTML file that will display the Tree widget to the end user.</p> | |
| <a name="linkFromFile"></a> | |
| <h2>Linking to the Toolkit Resources from a Project File</h2> | |
| <p>In order to use resources from the toolkit, you need to link to the <code>dojo.js</code> | |
| file, found in the core library. The <code>dojo.js</code> file is the <em>source loader</em> | |
| for Dojo and determines the correct host environment to use. While doing so, you can | |
| also configure <code>djConfig</code> by adding the <code>parseOnLoad</code> parameter.</p> | |
| <ol> | |
| <li>In the Projects window, double-click the <code>dojoDemo.html</code> file to open it | |
| in the editor.</li> | |
| <li>In the <code>dojoDemo.html</code> file, add the following <code><script></code> tags | |
| (in bold) between the <code><head></code> tags. | |
| <pre class="examplecode"><!-- TODO: link to Dojo resources here --> | |
| <strong><script type="text/javascript"> | |
| var djConfig = {parseOnLoad: true, | |
| isDebug: true}; | |
| </script> | |
| <script | |
| type="text/javascript" | |
| src="resources/dojo/dojo.js"> | |
| </script></strong> | |
| </head></pre> | |
| <ul> | |
| <li><code><a href="http://dojotoolkit.org/reference-guide/1.6/djConfig.html">djConfig</a></code> | |
| allows you to override global settings that control how Dojo operates | |
| (e.g., using the <code>parseOnLoad</code> property).</li> | |
| <li><code>parseOnLoad</code> set to <code>true</code> ensures that widgets | |
| and page mark-up are parsed as the page is loaded.</li> | |
| </ul></li> | |
| <li><a name="themes"></a>Add a link to the <code>nihilo</code> | |
| <a href="http://docs.dojocampus.org/dijit/themes">sample theme</a> contained in the toolkit | |
| by adding the following <code>@import</code> statement (in bold) between the <code><head></code> tags | |
| and beneath the <code><script></code> tags that you added. | |
| <pre class="examplecode"><script type="text/javascript"> | |
| var djConfig = {parseOnLoad: true, | |
| isDebug: true}; | |
| </script> | |
| <script | |
| type="text/javascript" | |
| src="resources/dojo/dojo.js"> | |
| </script> | |
| <strong><style type="text/css"> | |
| @import "resources/dijit/themes/nihilo/nihilo.css"; | |
| </style></strong></pre> | |
| <p>The <code>nihilo</code> theme is included by default in the toolkit. | |
| You can expand the <code>dijit/themes</code> folder | |
| in the Projects window to see other sample themes that are provided by default.</p> | |
| </li> | |
| <li>Add the following class selector to the <code><body></code> tag of the page to specify the name of | |
| the theme you are using. When you do this, any Dojo widget which has been loaded | |
| into the page will be rendered using the styles associated with the theme. | |
| <pre class="examplecode"><body <strong>class="nihilo"</strong>></pre> | |
| </li> | |
| </ol> | |
| <p>At this stage, the <code>dojoDemo.html</code> file is ready to accept any code | |
| that references the Dojo core and Dijit libraries, and will render any widgets | |
| using Dojo's <code>nihilo</code> theme.</p> | |
| <a name="addWidget"></a> | |
| <h2>Adding and Configuring the Dojo Tree Widget</h2> | |
| <p>After you have linked to <code>dojo.js</code>, you can begin adding code to utilize | |
| Dojo's modules and widgets. First add code to load the <code>dijit.Tree</code> | |
| widget and <code>dojo.data.ItemFileReadStore</code> using | |
| <code><a href="http://docs.dojocampus.org/dojo/require">dojo.require</a></code> | |
| statements. Then, add the widget and module themselves to the page.</p> | |
| <ol> | |
| <li>Add the following <code>dojo.require</code> statements (in bold) to the file between the | |
| <tt><body<</tt> tags. | |
| <pre class="examplecode"><script type="text/javascript"> | |
| // TODO: add dojo.require statements here | |
| <strong>dojo.require("dojo.data.ItemFileReadStore"); | |
| dojo.require("dijit.Tree");</strong> | |
| </script></pre> | |
| <ul> | |
| <li><code><a href="http://docs.dojocampus.org/dojo/data/ItemFileReadStore">dojo.data.ItemFileReadStore</a></code>: | |
| reads the JSON structured contents from an HTTP endpoint (In | |
| <a href="#prepareServlet">Preparing a Servlet to Initiate a JSON | |
| Response</a>, you'll implement a servlet for this purpose.) and | |
| stores all the items in-memory for simple and quick access.</li> | |
| <li><code><a href="http://docs.dojocampus.org/dijit/Tree">dijit.Tree</a></code>: | |
| The Tree widget that provides a view of the JSON data retrieved from | |
| <code>ItemFileReadStore</code>.</li> | |
| </ul></li> | |
| <li><a name="TribeServlet"></a>Add the following code (in bold) to add an <code>ItemFileReadStore</code> and <code>Tree</code> | |
| widget. | |
| <pre class="examplecode"> | |
| <!-- TODO: specify AJAX retrieval --> | |
| <!-- TODO: add Tree widget and configure attributes --> | |
| <strong><div dojoType="dojo.data.ItemFileReadStore" | |
| url="TribeServlet" | |
| jsId="indianStore"> | |
| </div> | |
| <div dojoType="dijit.Tree" | |
| store="indianStore" | |
| query="{type:'region'}" | |
| label="North American Indians"> | |
| </div></strong></pre> | |
| <ul> | |
| <li><code>ItemFileReadStore</code> requires you to specify the <code>url</code> | |
| property by pointing to the server-side resource that returns the JSON | |
| data. As will be later demonstrated, this is the <code>TribeServlet</code>. | |
| You can use the <code>jsId</code> property to give the retrieved JSON | |
| data an id, which widgets can then use to refer to the data store.</li> | |
| <li><code>Tree</code> uses the <code>store</code> property to point to the | |
| <code>ItemFileReadStore</code>, which provides the JSON data. The <code>query</code> | |
| property enables you to arrange the display of data, based on a keyword | |
| used in the JSON file.</li> | |
| </ul> | |
| <p class="notes"><strong>Note.</strong> You can ignore the warnings that appear | |
| in the editor after adding this code.</p> | |
| </li> | |
| </ol> | |
| <p>At this stage, your <code>dojoDemo.html</code> file is complete, and all <em>client-side</em> | |
| modifications to the project are in place. In the following two steps, you'll make changes | |
| that affect the project's <em>server-side</em> behavior when Tree requests are made.</p> | |
| <br><a name="addJSON"></a> | |
| <h2>Adding Third-Party JSON Conversion Sources as a JAR File to the Project</h2> | |
| <p>In this tutorial, the logic that extracts the ArrayList sample data has been prepared | |
| for you in the <code>Tribe</code> and <code>TribeDataManager</code> classes. Essentially, | |
| it is only necessary to include the third-party Java classes that handle JSON conversion | |
| to the project, then add <code>import</code> statements for these classes in the | |
| <code>Tribe</code> and <code>TribeDataManager</code> classes. To accomplish this however, | |
| you need to first compile the third-party Java classes and create a Java Archive (JAR file). | |
| The IDE can help you do this using the Java Class Library wizard.</p> | |
| <ol> | |
| <li>Visit <a href="http://json.org/java">http://json.org/java</a> and note that Java | |
| classes for JSON conversion are freely available. Click the 'Free source code | |
| is available' link to download the <code>JSON-java-master.zip</code> file that contains | |
| the sources.</li> | |
| <li>Unzip the <code>JSON-java-master.zip</code> file and note that the extracted folder contains | |
| the sources listed on <a href="http://json.org/java">http://json.org/java</a>. | |
| <p>At this point, you want to compile these sources and create a Java archive (JAR file) | |
| which you will add to the <code>DojoTreeSample</code> project.</p></li> | |
| <li>Click the New Project button ( | |
| <img src="../../../images_www/articles/73/web/js-toolkits-dojo/new-project-btn.png" | |
| alt="New Project button"> ) in the toolbar to open the New Project wizard.</li> | |
| <li>In the New Project wizard, select the Java Class Library project template in the | |
| Java category. Click Next.</li> | |
| <li>In the Name and Location panel of the Java Class Library wizard, type | |
| <strong><code>json</code></strong> as the Project Name. Click Finish. | |
| <p>When you click Finish the new project is created | |
| and opens in the Projects window.</p> | |
| <p>You now need to copy the JSON sources that you download to the <tt>json</tt> project | |
| in the same way that you copied the Dojo toolkit resources to the <tt>DojoTreeSample</tt> project.</p> | |
| </li> | |
| <li>Extract the <code>JSON-java-master.zip</code> archive | |
| and copy (Ctrl-C; ⌘-C on Mac) the Java source files that are in the root folder. | |
| <p class="notes"><strong>Note.</strong> You do not need to copy the <code>zip</code> folder and | |
| its contents that is also located in the root folder of the extracted archive.</p></li> | |
| <li>In the IDE's Projects window, right-click the Source Packages node and choose New > Java Package | |
| in the popup menu.</li> | |
| <li>Type <strong>json</strong> as the Package Name. Click Finish.</li> | |
| <li>Right-click the <code>json</code> source package and choose Paste in the popup menu. | |
| <p>When you expand the package you can see the <tt>json</tt> sources.</p> | |
| <img src="../../../images_www/articles/73/web/js-toolkits-dojo/proj-win-json-sources.png" | |
| alt="Projects window - sources contained in 'json' project" class="b-all margin-around" | |
| title="Sources are now contained in the new 'json' project"></li> | |
| <li>Right-click the <code>json</code> | |
| project node in the Projects window and choose Clean and Build to build the project. | |
| <p>When you build your project, all Java classes get compiled into <code>.class</code> | |
| files. The IDE creates a <code>build</code> folder to contain compiled classes, as | |
| well as a <code>dist</code> folder that contains a JAR file for the project. These | |
| folders can be viewed from the IDE's Files window.</p> | |
| <p>After you build the <code>json</code> project, open the Files window (Ctrl-2; | |
| ⌘-2 on Mac) and expand the <code>json</code> folder. The <code>build</code> | |
| folder contains the compiled sources from the <code>JSON-java-master.zip</code> file and | |
| the <code>dist</code> folder contains the JAR file which the <code>DojoTreeSample</code> | |
| project needs to reference.</p> | |
| <img src="../../../images_www/articles/73/web/js-toolkits-dojo/files-win-compiled-classes.png" | |
| alt="Files window - compiled sources shown in 'build' folder" class="b-all margin-around" | |
| title="Compiled sources can be viewed in a project's 'build' folder"> | |
| <p>Now that you have the <code>json.jar</code> file, you can resolve the reference | |
| problems that the <code>DojoTreeSample</code> project has been exhibiting since | |
| you opened it.</p></li> | |
| <li>In the Projects window, right-click the <code>DojoTreeSample</code>'s Libraries | |
| node and choose Add JAR/Folder. Then, in the dialog, navigate to the location of | |
| the <code>json</code> project's <code>dist</code> folder and select the | |
| <code>json.jar</code> file. | |
| <p>Alternatively, you can right-click the Libraries node and choose Add Project in the popup | |
| menu and locate the <code>json</code> project in the Add Project dialog box.</p> | |
| <p>When you exit the dialog, the <code>json.jar</code> file is listed under the | |
| project's <code>Libraries</code> node.</p> | |
| <img src="../../../images_www/articles/73/web/js-toolkits-dojo/libraries-json-jar.png" | |
| alt="Projects window - JAR file added to Libraries node" class="b-all margin-around" | |
| title="JAR file is referenced by the project"> | |
| <p><strong class="notes">Note: </strong>Although the <code>json.jar</code> file is | |
| listed under the project's <code>Libraries</code> node, it is referenced from its | |
| original location - not copied and added to the project (e.g., you won't be able | |
| to locate it under the <code>DojoTreeSample</code> project in the Files window). | |
| Therefore, if you change the location of the JAR file, the reference will be broken.</p></li> | |
| <li>Expand the <code>Source Packages</code> > <code>dojo.indians</code> package | |
| and double-click the <code>Tribe</code> and <code>TribeDataManager</code> classes | |
| to open them in the editor.</li> | |
| <li>Add necessary import statements to both classes. In each class, right-click | |
| in the editor and choose Fix Imports. | |
| <br><br> | |
| The <code>Tribe</code> class requires the following imports: | |
| <pre class="examplecode">import dojo.org.json.JSONException; | |
| import dojo.org.json.JSONObject;</pre> | |
| The <code>TribeDataManager</code> class requires the following imports: | |
| <pre class="examplecode">import dojo.org.json.JSONArray; | |
| import dojo.org.json.JSONException; | |
| import dojo.org.json.JSONObject;</pre> | |
| <p class="tips">Note that the APIs for JSON classes are also provided at | |
| <a href="http://json.org/java">http://json.org/java</a> - you may want | |
| to keep this page open as you later examine code in <code>Tribe</code> | |
| and <code>TribeDataManager</code>.</p></li> | |
| <li>Examine the ArrayList in <code>TribeDataManager</code>. The ArrayList is a | |
| collection of <code>Tribe</code> objects. Looking at the first element of | |
| the ArrayList, you can see a new <code>Tribe</code> object created and added | |
| to the list: | |
| <pre class="examplecode">indians.add(new Tribe("Eskimo-Aleut", "Arctic", "Alaska Natives"));</pre> | |
| Each <code>Tribe</code> object captures three points of information: <em>tribe</em>, | |
| <em>category</em>, and <em>region</em>. The data for this exercise has been taken | |
| from Wikipedia's entry on | |
| <a href="http://en.wikipedia.org/wiki/Native_Americans_in_the_United_States#Ethno-linguistic_classification">Native | |
| Americans in the United States</a>. As you can determine, multiple <em>tribes</em> | |
| are classified within a <em>category</em>, and numerous categories may be contained | |
| within a larger <em>region</em>.</li> | |
| <li>Open the <code>Tribe</code> class in the editor, and note that it is basically a | |
| <a href="http://java.sun.com/docs/books/tutorial/javabeans/index.html">JavaBean</a>, | |
| with the exception of the <code>toJSONObject()</code> method: | |
| <pre class="examplecode">public JSONObject toJSONObject() throws JSONException { | |
| JSONObject jo = new JSONObject(); | |
| jo.put("name", this.name); | |
| jo.put("type", "tribe"); | |
| return jo; | |
| }</pre></li> | |
| <li>Switch back to <code>TribeDataManager</code> (Ctrl-Tab) and examine the methods | |
| included in the class. Open the Navigator (Ctrl-7; ⌘-7 on Mac) to view a | |
| list of fields and properties contained in the class. | |
| <br> | |
| <img src="../../../images_www/articles/73/web/js-toolkits-dojo/dojo-navigator.png" | |
| alt="TribeDataManager class viewed in the Navigator" class="margin-around" | |
| title="Use the Navigator to view class fields and properties"> | |
| <br> | |
| The most significant method contained therein is <code>getIndiansAsJSONObject()</code>. | |
| This method scans the ArrayList, processes the data, and returns it in the form of a | |
| <code>JSONObject</code>. The <code>String</code> form of the JSONObject is what is | |
| required by Dojo's <code>ItemFileReadStore</code>. | |
| <pre class="examplecode">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; | |
| }</pre></li> | |
| <li>Open the Javadoc on the <code>getIndiansAsJSONObject()</code> method. | |
| You can do this by returning to the Navigator (Ctrl-7; ⌘-7 on Mac) | |
| and hovering over the method. Otherwise, choose Window > Other > | |
| Javadoc from the main menu, then click on the method signature in the | |
| editor. | |
| <br><a name="javadoc"></a> | |
| <img src="../../../images_www/articles/73/web/js-toolkits-dojo/javadoc-window.png" | |
| alt="Javadoc window opened to TribeDataManager class" class="margin-around" | |
| title="The Javadoc for TribeDataManager provides an example of JSON data"></li> | |
| <li>Examine the example of JSON data that is provided in the Javadoc. Note | |
| that the format of the data conforms to the examples provided in the | |
| <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 | |
| documentation</a>.</li> | |
| </ol> | |
| <div class="indent"> | |
| <div class="feedback-box float-left" style="width:700px"> | |
| <h3>NetBeans IDE's Java Debugger</h3> | |
| <p>You will implement a servlet that calls the | |
| <code>getIndiansAsJSONObject()</code> method in the next step. | |
| Once you do this, you can perform the following steps to use the IDE's Java debugger to step | |
| through the method and examine how the <code>JSONObject</code> is formed.</p> | |
| <ol> | |
| <li>Set a breakpoint on the method (click the line number | |
| (i.e., line 99) in the left margin of the editor). | |
| <br> | |
| <img src="../../../images_www/articles/73/web/js-toolkits-dojo/debugger-breakpoint.png" | |
| alt="Method breakpoint set in the editor" class="margin-around b-all" | |
| title="Use the Java Debugger to step through code"></li> | |
| <li>Select the <tt>DojoTreeSample</tt> project in the Projects window.</li> | |
| <li>Run the debugger (click the Debug Project button ( | |
| <img src="../../../images_www/articles/73/web/js-toolkits-dojo/debug-btn.png" | |
| alt="Debug Project button"> ) in the toolbar).</li> | |
| <li>Use the Step Into ( | |
| <img src="../../../images_www/articles/73/web/js-toolkits-dojo/step-into-btn.png" | |
| alt="Step Into button"> ) and Step Over ( | |
| <img src="../../../images_www/articles/73/web/js-toolkits-dojo/step-over-btn.png" | |
| alt="Step Over button"> ) buttons in the toolbar.</li> | |
| <li>Examine variable and expression values in the Local Variables | |
| window (Window > Debugging > Variables).</li> | |
| </ol> | |
| <p>For more information on the Java Debugger, see the following screencasts:</p> | |
| <ul> | |
| <li><a href="../java/debug-stepinto-screencast.html">Visual Step Into Action in NetBeans Debugger</a></li> | |
| <li><a href="../java/debug-deadlock-screencast.html">Deadlock Detection Using the NetBeans Debugger</a></li> | |
| <li><a href="../java/debug-evaluator-screencast.html">Using the Code Snippet Evaluator in the NetBeans Debugger</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <br style="clear:both;"> | |
| <p>Within this step, you've compiled third-party sources from <a href="http://json.org">http://json.org</a> | |
| and added them as a JAR file to the <code>DojoTreeSample</code> project. You then | |
| added import statements to classes from the JAR file in the <code>Tribe</code> and | |
| <code>TribeDataManager</code> classes. Finally, you examined some of the methods | |
| contained in <code>TribeDataManager</code> which are used to convert the ArrayList | |
| data into a JSON string.</p> | |
| <p>In the next step, you'll create a servlet which will handle incoming requests by | |
| calling the <code>TribeDataManager</code>'s <code>getIndiansAsJSONObject()</code> | |
| method, and send the resulting JSON string a response to the client.</p> | |
| <br><a name="prepareServlet"></a> | |
| <h2>Preparing a Servlet to Initiate a JSON Response</h2> | |
| <p><a href="#TribeServlet">Recall that you specified '<code>TribeServlet</code>' | |
| as the value for the <code>url</code> property</a> when adding the <code>ItemFileReadStore</code> | |
| to your web page. This is the destination on the server-side that is tasked | |
| with preparing and returning the JSON data to the client. Let's now create this | |
| servlet.</p> | |
| <ol> | |
| <li>In the Projects window, right-click the <code>dojo.indians</code> source | |
| package and choose New > Servlet.</li> | |
| <li>In the New Servlet wizard, type <strong><code>TribeServlet</code></strong> for the class | |
| name. Confirm that <code>dojo.indians</code> is specified as the package. Click Next. | |
| <br> | |
| <img src="../../../images_www/articles/73/web/js-toolkits-dojo/new-servlet-wizard.png" | |
| alt="New servlet wizard" class="margin-around b-all" | |
| title="Use the New Servlet wizard to create servlets"> | |
| </li> | |
| <li>Confirm that the default Servlet Name and URL Patterns values are correct. Click Finish | |
| to generate the skeleton class for the servlet. | |
| <p>The function of the servlet is to call the <code>getIndiansAsJSONObject()</code> method, | |
| and use the data from this method to respond to the client request. In order to prepare | |
| a response in JSON format, we have to first set the mime type of the response to JSON | |
| format.</p> | |
| <p class="notes"><strong>Note.</strong> The wizard will automatically add the servlet name and URL pattern to <code>web.xml</code>. | |
| Consequently, any requests to the host domain (i.e., <code>http://localhost:8080/DojoTreeSample/</code>) | |
| for <code>TribeServlet</code> will be handled by the <code>dojo.indians.TribeServlet</code> class. | |
| If you open <code>web.xml</code> in the editor you can see that the file now contains the | |
| <code><servlet></code> and <code><servlet-mapping></code> elements.</p></li> | |
| <li><a name="contentType"></a>Modify the <code>processRequest()</code> method by making | |
| the following changes (in bold). | |
| <pre class="examplecode">response.setContentType("<strong>application/json</strong>");</pre> | |
| <p>This change sets the <code>Content-Type</code> header of the HTTP Response to indicate that | |
| any returned content is in JSON format.</p></li> | |
| <li>Replace the commented code within the <code>processRequest()</code> method's <code>try</code> | |
| block with the following (changes in <strong>bold</strong>): | |
| <pre class="examplecode">try { | |
| <strong>JSONObject jo = null; | |
| try { | |
| jo = TribeDataManager.getIndiansAsJSONObject(); | |
| } catch (JSONException ex) { | |
| System.out.println("Unable to get JSONObject: " + ex.getMessage()); | |
| } | |
| out.println(jo);</strong> | |
| } finally { | |
| out.close(); | |
| }</pre> | |
| <p class="tips">To reformat your code, right-click within the editor and choose | |
| Format.</p></li> | |
| <li>Use the IDE's hints to add the following import statements. | |
| <pre class="examplecode">import dojo.org.json.JSONException; | |
| import dojo.org.json.JSONObject;</pre></li> | |
| <li>To run the project, select the <code>DojoTreeSample</code> project node in | |
| the Projects window, then click the Run Project ( | |
| <img src="../../../images_www/articles/73/web/js-toolkits-dojo/run-project-btn.png" | |
| alt="Run Main Project button"> ) button in the IDE's toolbar. | |
| <br><br> | |
| The browser opens to display the welcome page (<code>dojoDemo.html</code>), | |
| and you can see that the Dojo Tree widget is displaying data from | |
| the ArrayList properly, as in the <a href="#final">screenshot above</a>.</li> | |
| </ol> | |
| <div class="feedback-box"> | |
| <a href="/about/contact_form.html?to=3&subject=Feedback:%20Connecting%20a%20Dojo%20Tree%20to%20an%20ArrayList">Send | |
| Us Your Feedback</a></div> | |
| <br style="clear:both;"> | |
| <a name="seeAlso"></a> | |
| <h2>See Also</h2> | |
| <p>For more information about Dojo, refer to the official documentation:</p> | |
| <ul> | |
| <li>Dojo Toolkit Reference Guide: <a href="http://dojotoolkit.org/reference-guide/">Reference Guide</a></li> | |
| <li>Online API Reference: <a href="http://api.dojotoolkit.org/">http://api.dojotoolkit.org/</a></li> | |
| <li>Dojo Demo: <a href="http://demos.dojotoolkit.org/demos/">http://demos.dojotoolkit.org/demos/</a></li> | |
| </ul> | |
| <p>For more information about JavaScript and JavaScript toolkit features on | |
| <a href="https://netbeans.org/">netbeans.org</a>, see the following resources:</p> | |
| <ul> | |
| <li><a href="js-toolkits-jquery.html">Using jQuery to Enhance the Appearance and Usability of a Web Page</a>. | |
| An introduction to jQuery is provided, and steps are given showing how to | |
| apply jQuery's accordion widget to HTML markup in a web page.</li> | |
| <li><a href="ajax-quickstart.html">Introduction to Ajax (Java)</a>. Describes how to | |
| build a simple application using servlet technology while teaching the underlying | |
| process flow of an Ajax request.</li> | |
| <li><a href="http://www.oracle.com/pls/topic/lookup?ctx=nb8000&id=NBDAG2272">Creating JavaScript Files</a> in <i>Developing Applications with NetBeans IDE</i>.</li> | |
| </ul> | |
| </body> | |
| </html> |