There are 3 main elements to this class:
- The object options
- The search settings
- And the template methods
For a tutorial, follow this link.
Object options
This is where the object settings are stored. Inside your code, you can access these settings using this.options. At the very least, these parameters need to be set:- title: The layout title
- objName: The javascript object's name
Amongst other things, you can define an initialize function to be called when the object is instantiated.
Search settings
The object will look here for the SQL queries needed to query the database. In other words, every time a tree item is clicked. The queries can either be supplied directly in a string, or dynamically using a function. In the case of a string, the anchor "[query]" should be placed in a relevant position:var sql = 'SELECT name FROM #__table WHERE id = [query]';NOTE: there shouldn't be any quotes around "[query]": strings will be quoted and escaped automatically.
You can also make use of the "[access]" anchor for the logged-in user's access level:
var sql = 'SELECT id FROM #__table WHERE access <= [access]';In the cases where the children items aren't stored in the database, or when another system is used for retrieving them, you can override the children method (see template methods).
There should be an SQL query for every search type, e.i. as many as you need (!). For example, if the plugin you're writing is for an extension where everything is an item within another item, then you might be able to get away with a single search type:
var searchOptions = { item : 'SELECT id FROM #__table WHERE parent = [query]' };If, on the other hand, the extension has sections which contain categories, then you'll need at least two search types. And so on and so on...
Template methods
The template methods are essentially helper functions. At the very least, a method setupTree must be defined that will return a list of tree items:var tmplMethods =
{
setupTree : function(array, level)
{
// Tree items
var tree = {};
// Setup tree items
array.each(function(item)
{
// Each item has a title, description, URL,
// tree level, expandIcon, collapseIcon,
// and children value. Children is an array
// containing the search type and the search query.
var treeItem =
{
title : 'Test',
level : level, // Item level in tree
children : ['item', 'query']
};
// Each item needs an reference ID
var ref = 'reference-id';
// The item ID is used as a key
// in the tree reference
tree[ref] = treeItem;
});
// Return formatted tree items
return tree;
}
};
For documenation on the use of each (on arrays), follow this link
.Other methods that are defined by default include:
- buildTree: builds the visual tree for display
- toggle: toggles a tree item
- expand: expands a tree item
- collapse: collapses a tree item
- children: builds the visual tree for a tree item



