The Dojo Tree Control for beginners - part 1
The Dojo toolkit provides web developers with a great toolbox for developing Ajax/DHTML applications, but unfortunately this great power comes with great complexity. I needed the tree control but I couldn’t find any simple examples, so I dissected the examples from the Dojo website that use Ajax calls to get their data and poked around the Dojo source code a bit to find out how it works. I wrote down my experimentations to try to find the simplest example possible; I thought I’d share my experience here.
This will show a tree with no drag and drop and no editing of the nodes. The nodes in the tree will be predetermined by the html we write, so no nodes will be added in dynamically.
a. In the <head></head> section, add the following:
<script type="text/javascript">
dojo.require("dojo.widget.Tree");
dojo.require("dojo.widget.TreeSelector");
dojo.require("dojo.widget.TreeNode");
dojo.require("dojo.widget.TreeContextMenu");
</script>
This is apart from the normal dojo javascript include that you need in all dojo-enabled pages:
<script type="text/javascript" src="/js/dojo/dojo.js"></script>
This last include should always be done before any other dojo calls are made, so it should be before the dojo.require’s that we did above.
b. In the <body>, add the following div:
<div dojoType="TreeSelector" widgetId="treeSelector"></div>
The attributes are:
- dojoType: always “TreeSelector”. This is an attribute all Dojo controls have, it identifies what type of Dojo control the div should be morphed into.
- widgetId: a name for the selector. You can make up any name, as long as it’s unique throughout your document.
c. Add a <div> that represents the actual tree view:
<div dojoType="Tree" widgetId="tree_widget" selector="treeSelector" toggler="fade">
</div>
The attributes are:
- dojoType: always “Tree”. This is an attribute all Dojo controls have, it identifies what type of Dojo control the div should be morphed into.
- widgetId: a name for the tree. You can make up any name, as long as it’s unique throughout your document.
- selector: the widgetid of the selector you made in step b.
- toggler: the name of the toggle function to use. Can be any of the functions in dojo.lfx.toggle. As of Dojo 0.3.1, these are ‘plain’, ‘fade’, ‘wipe’ and ‘explode’. This argument determines how branches will be shown or hidden when a node is opened or closed.
Finally, add some nodes to the tree view. Add them inside the <div> that is the treeview itself, so that it looks like this:
<div dojoType="Tree" widgetId="tree_widget" selector="treeSelector" toggler="fade">
<div dojoType="TreeNode" widgetId="0" title="First node" isFolder="false"></div>
<div dojoType="TreeNode" widgetId="1" title="Second node" isFolder="false">
<div dojoType="TreeNode" widgetId="2" title="Third node" isFolder="false"></div>
</div>
</div>
As you can see, you can nest nodes by nesting divs.
The attributes are:
- dojoType: Always “TreeNode”. This is an attribute all Dojo controls have, it identifies what type of Dojo control the div should be morphed into.
- widgetId: A name for the node. You can make up any name, as long as it’s unique throughout your document. It makes sense here to use a better naming scheme than the one used in the example, eg naming them ‘1′, ‘2′ for top level nodes, ‘1.1′, ‘1.2′, ‘2.1′, ‘2.2′ etc. for children of those top level nodes
and so on.
- title: The text that should be displayed next to a node. If you want, you can add some color to the node texts by adding html to the ‘title’ attribute:
<div dojoType="TreeNode" widgetId="1" title="<span style='color:blue'>This text is blue"></div>
or add checkboxes like this:
<div dojoType="TreeNode" widgetId="1" title="<input type='checkbox'>First node"></div>
- isFolder: This attribute is optional but if you leave it out, the default value of ‘false’ is assumed. When set to ‘true’, it will force an ‘expand/collapse’ image on every node, even if it doesn’t have any children.
And that’s it. You can see this minimal example at work here.
) Anyway, here it is:
