Using Custom Style

see "Folder Style Tree", "Menu Tree" or "Custom Icons in Tree" examples.

Adding Client Side Action Handlers

TreeView component can invoke client side handler functions for "onExpand", "onCollapse", "onItemClick" events. To handle an event, create a javascript function getting the relevant node as parameter and set its name to the proper treeview attribute like below; (see also "TreeView with Events" examples)

//..................

<script type="text/javascript">
 	function nodeExpand(node) {
 		alert("\"" + node.label + "\"" + " was expanded");
 	}
</script>
	
//..................
	
<yui:treeView id="treeView1" value="#{treeViewBean.basicTreeDataModel}" onExpand="nodeExpand">
</yui:treeView>

//..................
				

Lazy Loading

TreeView component also supports lazy loading mode. To make a tree working at lazy mode;

• Implement your lazy loader bean from "TreeViewLazyLoadingListener" interface. This will add "processTreeViewLazyLoad" method which will get the lazy loading event object("net.sf.yui4jsf.component.treeview.event.TreeViewLazyLoadingEvent") and returns your lazy loaded data as a "net.sf.yui4jsf.component.treeview.model.TreeDataModel" object. Like below;

  public class TreeViewBean implements TreeViewLazyLoadingListener {
  
  	public TreeDataModel processTreeViewLazyLoad(TreeViewLazyLoadingEvent event) {
  		// create sample childs for clicked node...
  		Random generator = new Random();
  		int childCount =  generator.nextInt(15) + 1;
  		
  		//  create a base tree data model object
  		TreeDataModel childListDataModel = new BaseTreeDataModelImpl();
  		
  		// ... and add some childs to data model
  		for(int i=1; i<=childCount; i++) {
  			childListDataModel.addNode(new TextNode("c"+i, "dyna child "+i));
  		}
  		
  		// last; return the resulting data model which includes lazy loaded data
  		return childListDataModel;
  	}
  	
  }
  				

• Create a treeview component and bind your lazy loader bean to its "lazyLoadListener" attribute. See "TreeView with ServerSide Events" example and related sample TreeViewBean(lazy loader bean).

  <yui:treeView id="treeView1" value="#{treeViewBean.lazyTreeDataModel}" lazyLoadListener="#{treeViewBean}">
  </yui:treeView>
  				

Adding Server Side Action Handlers

TreeView component can invoke your server side event handling methods when an item clicked, expanded or collapsed. Since it calls your event handlers by ajax way, full page submitting does not occurs.

1. your bean must implement appropriate interface to handle each event type;
   • to handle item click events; your bean must implement "TreeItemClickedListener"
   • to handle item expand events; your bean must implement "TreeItemExpandedListener"
   • to handle item collapse events; your bean must implement "TreeItemCollapsedListener"
2. Each listener will add its necessary event handling method to your bean.
   • for item click listener, processTreeItemClicked(TreeItemClickedEvent) method will be added to handle item click events
   • for item expand listener, processTreeItemExpanded(TreeItemExpandedEvent) method will be added to handle item expand events
   • for item collapse listener, processTreeItemCollapsed(TreeItemCollapsedEvent) method will be added to handle item collapse events
   Event handler method signatures are as follows; (for full working sample see "TreeView with ServerSide Events" example)

   public class TreeViewBean implements TreeItemClickedListener {
   	public void processTreeItemClicked(TreeItemClickedEvent event) {
   		// your item clicked event handling code...
   	}
   }
   			

   public class TreeViewBean implements TreeItemExpandedListener {
   	public void processTreeItemExpanded(TreeItemExpandedEvent event) {
   		// your item expanded event handling code...
   	}
   }
   			

   public class TreeViewBean implements TreeItemCollapsedListener {
   	public void processTreeItemCollapsed(TreeItemCollapsedEvent event) {
   		// your item collapsed event handling code...
   	}
   }
   			

3. Bind your listener bean to appropriate attributes of treeview. Sample treeview tag usage which handles item clicked/expanded/collapsed events is like; See "TreeView with ServerSide Events" example and related sample TreeViewBean(sample listener bean for all events) for full code.

   <yui:treeView id="treeView1" value="#{treeViewBean.sampleTreeDataModel}" 
   	itemClickListener="#{treeViewBean}"
   	itemExpandListener="#{treeViewBean}" itemCollapseListener="#{treeViewBean}">
   </yui:treeView>