Represents data in a hierarchal expandable/collapsible structure.

<div control="tree[toggleEffect=slideToggle]">
	<div title="Aliens">
		<div title="Friendly">
			<div>Wookiees</div>
			<div>Vulcans</div>
			<div>Those ones from "Alien" that hug your face</div>
		</div>
		<div title="Angry">
			<div>Rancors</div>
			<div>Klingons</div>
			<div>Those ones from "Alien" that come out of your stomach</div>
		</div>
	</div>
	<div title="Terrestrials">
		<div title="Friendly">
			<div>Kittens</div>
			<div>Puppies</div>
			<div>Dolphins</div>
		</div>
		<div title="Angry">
			<div>Bears</div>
			<div>Tigers</div>
			<div>Raccoons</div>
		</div>
	</div>
</div>

In this sample, a tree with the name of 'myTree' is created with some initial properties. The function argument of createControl is called when the widget renders, and a dataset is added to it.

Create the control…

App.createControl(
	'tree_1',
	'tree',
	{
		property:'rows',
		'toggleEffect':'slideToggle'
	},
	function()
	{
		var d = [
			{id:100,classname:'check',children:[
				{id:101,title:'foo1',children:[
					{id:102,title:'foo2'}
					]},
				{id:104,title:'foo4'},
				{id:105,title:'foo5'}
			]},
			{id:106,title:'foo6',children:[
				{id:107,title:'foo7',children:[
					{id:108,title:'foo8'},
					{id:109,title:'foo9'},
					{id:110,title:'foo10'},
					{id:111,title:'foo11'}
 
					]},
				{id:112,title:'foo12'},
				{id:113,title:'foo13'}
			]},
			{id:114,title:'foo14'}
		];
 
		this.render({'rows':d});
	}
);

Get the handle to an instance of the control and save it to a local variable and set an Entourage Message listener to render the iterator using an arbitrary payload.

var controlInstance = null;
App.getControl('tree_2','tree',function()
{
	controlInstance = this;
});
 
$MQL('l:reload_data',function(msg)
{
	var d = [
		{id:100,classname:'check',children:[
			{id:101,title:'foo1',children:[
				{id:102,title:'foo2'}
				]},
			{id:104,title:'foo4'},
			{id:105,title:'foo5'}
		]},
		{id:106,title:'foo6',children:[
			{id:107,title:'foo7',children:[
				{id:108,title:'foo8'},
				{id:109,title:'foo9'},
				{id:110,title:'foo10'},
				{id:111,title:'foo11'}
 
				]},
			{id:112,title:'foo12'},
			{id:113,title:'foo13'}
		]},
		{id:114,title:'foo14'}
	];
 
	controlInstance.render({'rows':d});
 
});

The tree control is made up of a container div and may contain any number of nested divs which represent nodes in the tree. The control tag on the div indicates what kind of widget the div will become. The widget identity can accept the following initial parameters…

Initial options supported by the widget.

Functions either accept a single argument such as an integer or a string, otherwise they accept a one dimensional object literal. Any function that can be called as an action accepts the same parameters but in the action parameter format.

The addNode function accepts an object literal with two members; “parent”, an integer which should identify the host of the new node. And “node”, an object literal whith three members; “id”, an integer which will be the new node identifier. “title”, a string to visually represent the node. And “children”, an array of the later two objects, and possibly the third). Here's an example…

$MQ('l:add', { parent:null, node:{id:200,title:'1st new node', children:[{ id:201, title:'new node child'}]}});

If this function is called as an action, this data may be provided by an Entourage message, as demonstrated above.