method creates a representation of a Windows OS directory. public Tree buildTree() { Tree tree = new Tree("tree"); // Create a node representing the root directory with the specified // parameter as the value. Because an id is not specified, a random // one will be generated by the node. By default the root node is // not rendered by the tree. This can be changed by calling // tree.setRootNodeDisplayed(true). TreeNode root = new TreeNode("c:"); // Create a new directory, setting the root directory as its parent. Here // we do specify a id as the 2nd argument, so no id is generated. TreeNode dev = new TreeNode("dev","1", root); // The following two nodes represent files in the directory. // The false argument to the constructor below means that these nodes // does not support child nodes. Makes sense since files cannot contain // directories or other files new TreeNode("java.pdf", "2", dev, false); new TreeNode("ruby.pdf", "3", dev, false); TreeNode programFiles = new TreeNode("program files", "4", root); TreeNode adobe = new TreeNode("Adobe", "5", programFiles); TreeNode download = new TreeNode("downloads","6", root); TreeNode web = new TreeNode("web", "7", download); new TreeNode("html.pdf", "8", web); new TreeNode("css.html", "9", web); TreeNode databases = new TreeNode("databases", "10", download); new TreeNode("mysql.html","11",databases); new TreeNode("oracle.pdf","12",databases); new TreeNode("postgres","13",databases); tree.setRootNode(root); return tree; } }
CSS and JavaScript resources
The Tree control makes use of the following resources (which Click automatically deploys to the application directory,
/click/tree):
- click/tree/tree.css
- click/tree/tree.js
- click/tree/cookie-helper.js
To import these Tree files simply reference the variables
$headElements and
$jsElements in the page template. For example:
<html> <head> $headElements </head> <body> $tree $jsElements </body> </html>
Tree customization
The following list of stylesheet classes are used to render the tree icons. One can easily change the
tree.css to use a different set of icons. Note: all CSS classes are set inline in <span> elements.
- <span class="leafIcon"> - renders the leaf node of the tree
- <span class="expandedIcon"> - renders the expanded state of a node
- <span class="collapsedIcon"> - renders the collapsed state of a node
Credit goes to
Wicket for these images:
- images/folder-closed.png
- images/folder-open.png
- images/item.png