7.1

Creating a hierarchical tree
This example explains how to replace the default thumbnail view of the store front with a hierachical tree view. The example
combines PHP, CSS and makes use of the Treeview plugin for jQuery to hide and show branches of a tree.
To install the example copy the template-storefront_overview.php from the storefront_tree_template folder to the root of the
default skin.
The store front using a hierarchical view (tree view).
The sample file contains links to external Javascript files and some custom code to generate the actual tree.
The Javascript file
This is the Javascript code stored in the feil "tree.js":
$(document).ready( function(){
$("ul.filetree").treeview({
collapsed: true
});
The code invokes the Treeview plugin once the browser has finished loading the page. The Treeview pluging uses a standard
HTML <ul> element (unordered list) to render the tree.
The template file
The actual code that retrieves the publication type and document list is placed in the contect block of the template file (tem-
plate-storefront_overview.php). The first section instantiates the Storefront. The getTree() returns a hierachical array of the
publication types and documents. In the following section we will access each array item using the foreach function of PHP.
//Retrieve the publication types and templates for the logged on user
$storeFront = New Storefront();
$treeData = $storeFront->getTree();
Once the publication type and document information is collected in a PHP array we need to iterate through the array values.
For this we use a PHP foreach loop. Within this function a custom PHP function (renderPublicationType) is called to generate
the actual HTML.
©2010 Objectif Lune Inc - 257 -