
Wish List
Tags
adobe air ajax apple cf community cfml coldfusion examples ext flash flex google javascript max2007 max2008 misc open source programming railo software technology ui
Recent Entries
The Pirate Bay Sold!
Railo Documentation
iPhone Navi Software Now Available!
iPhone OS3 Cracked!
Search
RSS
Subscribe
Blogroll
An Architect's View
Ben Forta
CFSilence
Coldfusion Jedi
Rey Bango
TalkingTree
Coldfusion 8's CFTREE tag
Coldfusion 8 introduced support for an HTML tree. With the HTML tree you can build an AJAX driven tree, which means you only need to load the to level nodes at first and all subsequent child nodes and leaves are only loaded when needed. The old requirements of the cftree tag, that being living inside of a cfform still exists.
You set up your tree like so:
<cfoutput>
<cfform name="myform">
<cftree name="treeTest" height="400" width="200" format="html">
<cftreeitem bind="cfc:components.tree.getNodes({cftreeitempath},{cftreeitemvalue})">
</cftree>
</cfform>
</cfoutput>
The bind expression, like in my previous post about the cfgrid, is used to bind the creation of the tree elements to the output of a CFC.
Your cfc should return an array of structures that contain a value and a display value for nodes and an additional key "leafnode"=true when you want to show a leaf.
I created a simple function that would generate a two level tree just for example purposes.
<cffunction name="getNodes" access="remote" returntype="array">
<cfargument name="path" type="String" required="false" default=""/>
<cfargument name="value" type="String" required="true" default=""/>
<!--- set up return array --->
<cfset var result= arrayNew(1)/>
<cfset var s =""/>
<!--- if arguments.value is empty the tree is being built for the first time --->
<cfif arguments.value is "">
<cfset x = 0/>
<cfloop from="1" to="10" index="i">
<cfset x = x+1/>
<cfset s = structNew()/>
<cfset s.value=#x#>
<cfset s.display="Node #i#">
<cfset arrayAppend(result,s)/>
</cfloop>
<cfelse>
<!--- arguments.value is not empty --->
<!--- to keep it simple we will only make children nodes --->
<cfset y = 0/>
<cfloop from="1" to="#arguments.value#" index="q">
<cfset y = y + 1/>
<cfset s = structNew()/>
<cfset s.value=#q#>
<cfset s.display="Leaf #q#">
<cfset s.leafnode=true/>
<cfset arrayAppend(result,s)/>
</cfloop>
</cfif>
<cfreturn result/>
</cffunction>
Since the tree binds directly to the cfc, and is therefore called immediately on generating the tree, we need to make sure that we only generate the top level nodes once, that is why we check arguments.value at the very top. If arguments.value eq '' then we generate the parent nodes, otherwise we process the children.
The default styling of the cftree is pretty ugly so you may want to create your own styles.



<cfform name="frmFileTree" format="html" style="font-family:Verdana; font-size:11px;">
<cftree name="clientFileTree" format="html">
<cftreeitem bind="cfc:connect2a.cfc.filemgmt.getFileTreeForMember({cftreeitempath}, {cftreeitemvalue}, #SESSION.appUserID#)">
</cftree>
I've bound a cfinput type text in another form to this tree. Is there anyway that I can show the Display of the selected node (not the node or path) in my bound cfinput?
node 1
node 1
leaf 1
node 2
etc
That also reminds me that onrequest() can not be used either.
Also don't forget to turn off debugoutput ...