Yahoo! User Interface Blog (YUIBlog)

In the YUI 3 Gallery: Adam Moore’s YUI TreeView Port

As the YUI Team wraps up work on the core widget foundation for YUI 3, one of the things we’re seeing in the YUI 3 Gallery is transitional solutions that help flesh out YUI 3 implementations. Some of these, like Julien Lecomte’s SimpleMenu, are pure YUI 3, and others, like Adam Moore’s TreeView module, help bridge the gap between YUI 2 and 3 and will likely be replaced by other gallery modules or shipping YUI 3 widgets down the road.

Adam’s TreeView port is a conversion of the popular TreeView Control from YUI 2. The YUI 3 Gallery version runs on the YUI 3 foundation and makes use of Dav Glass’s gallery-port module to bridge some of the API changes. Not all of the features in the YUI 2 version are supported (date editing and animation, for example, aren’t included), but it’s trivial to get a standard TreeView running with this gallery module. All of the code comes off the CDN and can be combo-handled.

And here’s some sample code. Script and CSS file inclusion:

<link type="text/css" rel="stylesheet"
href="http://yui.yahooapis.com/gallery-2010.02.17-20/build/gallery-treeview/assets/skins/sam
     /gallery-treeview.css" />
<script type="text/javascript"
     src="http://yui.yahooapis.com/combo?3.0.0/build/yui/yui-min.js&
     gallery-2009.11.02-20/build/gallery-port/gallery-port-min.js&
     gallery-2009.11.19-20/build/gallery-treeview/gallery-treeview-min.js"></script>

Markup:

<div id="treeView"></div>

Implementation script:

<script language="javascript">

//Create a YUI instance that uses the treeview gallery module
YUI().use('gallery-treeview', function(Y) {

//Associate the YAHOO variable with and instance of Dav Glass's
//Port utility:
var YAHOO = Y.Port();

//Instantiate the Tree using standard YUI 2 syntax:
var tree = new YAHOO.widget.TreeView("treeView", [
	{type:'Text', label:'Cars',expanded:true, children:[
			'Aston Martin',
			'Bugatti',
			{type: 'Text', label:'GM', href:"http://gm.com", expanded:false, children:[
				'Buick',
				'Cadillac',
				'Chevrolet',
				'GMC'
			]},
			'Renault',
			'Toyota',
			'Volkswagon'
		]
	},
	{type:'Text', label:'Computers', editable:true, children: [
			'Acer',
			'Apple',
			'HP',
			'Dell'
		]
	}
]);

// Render the tree:
tree.render();

});
</script>

Click through for a working version of this example.

Find conversations: bloglines | technorati

Share and extend: Bookmark with del.icio.us | digg it! | reddit!