DTML Basics (part 4) - The Real Thing (
Page 6 of 9 )
How about building
on the basic tree in the previous example, and making it a little more useful?
This next variant allows you to add links to the terminal nodes so that the user
can view the object by clicking it.
<dtml-tree branches_expr="objectValues()" sort="id">
<dtml-if "meta_type=='Folder'">
<img
src="<dtml-var icon>">
<dtml-var getId>
<dtml-else>
<img src="<dtml-var
icon>">
<a href="<dtml-var tree-item-url>">
<dtml-var getId>
</a>
</dtml-if>
</dtml-tree>
Before I dissect this code, let's take a quick peek at the output:
Let's look at the code line-by-line to see how this happened.
<dtml-tree branches_expr="objectValues()" sort="id">
Nothing special here - I've used the objectValues() method to obtain a list of
objects that are located in the current hierarchy, and the "sort" attribute to
sort it by the object ID (in case all this is new to you, go back to the previous
article in this series, refresh your memory and then continue reading).
I've also linked all the objects except the Folder objects, via the following
"if-else" block:
<dtml-if "meta_type=='Folder'">
<img src="<dtml-var icon>">
<dtml-var
getId>
<dtml-else>
<img src="<dtml-var icon>">
<a href="<dtml-var
tree-item-url>">
<dtml-var getId>
</a>
</dtml-if>
The "meta-type" attribute specifies the type of object, and has been used as
the decision variable for the "if-else" block in the code snippet above. This
attribute can come in handy if you're not sure which object you're dealing with
- try typing
I am a <dtml-var meta_type>.
into an empty DTML Document and viewing the output to see how it works.
<dtml-else>
<img src="<dtml-var icon>">
<a href="<dtml-var
tree-item-url>">
<dtml-var getId>
</a>
</dtml-if>
The hyperlinks themselves are accomplished via the special "tree-item-url" variable,
which stores the URL for the current object. You're probably already familiar
with the special "icon" variable, which stores the path to the corresponding object
icon.
Apart from the "tree-item-url" variable, the <dtml-tree> construct also exposes
a number of other interesting variables. These include the "tree-root-url" variable,
which returns the absolute URL to the base of the tree; the "tree-level" variable,
which specifies the depth of the current node; and the "tree-item-expanded" variable,
which returns a Boolean value based on the state of the node (true if it has been
expanded, false if it has been collapsed).
This last property can be easily included in the example above to indicate the
folders which have been expanded. Take a look at the code:
<dtml-tree branches_expr="objectValues()" sort="id">
<dtml-if "meta_type=='Folder'">
<img
src="<dtml-var icon>" >
<dtml-if tree-item-expanded>
<b><dtml-var
getId></b>
<dtml-else>
<dtml-var getId>
</dtml-if>
<dtml-else>
<img src="<dtml-var icon>">
<a href="<dtml-var tree-item-url>">
<dtml-var
getId>
</a>
</dtml-if>
</dtml-tree>
Here's the output:
If you take a close look at the output, you will see that expanded folders are
displayed in bold.
How about the ability to expand or collapse the entire tree? Add this bit of
code to the example above:
<p>
<a href="<dtml-var URL0>?expand_all=1">Expand tree</a> |
<a
href="<dtml-var URL0>?collapse_all=1">Collapse tree</a>
</p>
