Step 2 – The Dijit Tree

To get started we need to create a template index.html file in our html directory or default.html for our Microsoft IIS fans. The goal here is to show the original dijit tree first before we start adding our checkboxes. This is also a good exercise to verify that your environment is working.

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  4   <head>
  5     <title>Dijit Tree with Checkboxes </title>
  6     <link rel="stylesheet" href="/js/dojotoolkit/dijit/themes/soria/soria.css" />
  7     <script type="text/javascript" src="/js/dojotoolkit/dojo/dojo.js"
  8         djConfig="parseOnLoad:true, isDebug:true"></script>
  9 
 10     <script type="text/javascript">
 11     dojo.require("dojo.data.ItemFileReadStore");
 12     dojo.require("dijit.Tree");
 13 
 14     function myTree( domLocation ) {
 15       var store = new dojo.data.ItemFileReadStore( {
 16               url: "/js/datastore/countries.json"});
 17       var model = new dijit.tree.ForestStoreModel( {
 18               store: store,
 19               query: {type: 'continent'},
 20               rootId: 'root',
 21               rootLabel: 'Continents'});
 22       var tree = new dijit.Tree( {
 23               model: model,
 24               id: "MenuTree"});
 25       tree.placeAt( domLocation );
 26     }
 27     </script>
 28   </head>
 29     <body class="soria">
 30     <div id="CheckboxTree">
 31       <script type="text/javascript">
 32         myTree("CheckboxTree");
 33       </script>
 34     </div>
 35   </body>
 36 </html>

First, at line 6 we add some dojo CSS stuff, dojo has several ‘themes’ one of them is soria. At line 7 we actually start loading dojo and one of the most important things is the djConfig attribute, I’m not going to explain this configuration options so for the time being just use it, it’s all we need. The option isDebug:true will fire-up Firebug if you are using FireFox or Firebug-Lite if you use any other browser. For development and debugging I personally like to use Firefox just because of Firebug but that’s just me. If you don’t have Firebug and you want to give it a spin go to: http://getfirebug.com/ another very good tool for Firefox would be the Web Developer plug-in. Just as a heads-up it appears the isDebug:true options no longer start Firebug-Lite with dojo version 1.4 you will have to manually add Firebug-Lite to your html scripts if you’re not using Firefox. See http://getfirebug.com/lite.html for details.

Continuing with the code, on line 11 and 12 we include the required dojo files to make the initial tree example work. The first one is the file store, the second is the actual dijit Tree widget. On line 14 I defined my method and on line 15 we create the dojo store followed by the dijit model. As you can see the store is one of the arguments/attributes of the model and this is how we establish the relationship between the model and the store. There are a couple of additional arguments used in the creation of the model:

Query The query specifies what element in your Json file the model is going to ask the store to retrieve when fetching items from the Json file. Required
rootId The Identification the model will assign to the root element of the tree. The actual tree root is a fake element which is used to anchor the tree. Even though it is considered to be part of the tree it does not represent a valid element in the Json file and/or the datastore. Optional
rootLabel The text to display for the root element if you decide you want to show the root. The tree attribute showRoot will actually determine if the root will be displayed. The showRoot default is true Optional

Later in this tutorial I will spend some more time on some other useful attributes.

On line 22 we create the tree and this time the model is one of the arguments for the tree, this establishes the relationship between the tree and the model. If you paid attention you will now know that the tree does not have any direct relation with the underlying store.

On line 29 we start the body with the class soria which is the theme I selected previously on line 6, next we create a div with the id=CheckboxTree and finally we call the method myTree and specify CheckboxTree as the name of the DOM element where we want to place our tree.

Ok, let fire it up, go to your browser and enter the url: http://localhost:8080 (that is if you created a virtual server as I mentioned earlier. If everything went according to plan you should see the following:

Tree-phase-1

Well, that was easy just a couple of lines in your index.html file and you have a fully functional tree. Ok, I know, the page title doesn’t reflect what you are seeing right now but soon it will, trust me.

In the next step, STEP 3, we will be adding some checkboxes.

One Reply to “Step 2 – The Dijit Tree”

Leave a Reply

Your email address will not be published. Required fields are marked *