The Real Thing - Zope

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>

>>> More Zope Articles          >>> More By Harish Kamath, (c) Melonfire

blog comments powered by Disqus