ColdFusion 8 Binding Part 1
In Part 1 of this tutorial we set up our component that will provide both the CFTREE and CFGRID with their data in JSON format. We also made sure that
both of the functions that return the data have been set to remote access.
Ok brace yourself, this is where things get tough!
In the bind attribute we indicate that we want to bind to a coldfusion component by prefixing the bind expression with "cfc:". We then follow on with the dot notation path to our component. If you have the component in the same directory as your tree.cfm the bind expression would be as the above code, if not you need to provide the path to the component using dot notation. If your component is in the webroot\components\ajax\ directory your bind expression would look something like: "cfc:components.ajax.fileExp.getDirectories(...".
If you remember from our component the name of the method that provides the data for the tree is getDirectories. We then just set up the variables that we are going to pass to the function namely the cftreeItemPath and cftreeItemValue and we do this using the curly {} braces to specify that both of those arguments are bound.
Building the Tree
Coldfusion 8 uses, for their Ajax tree, the Yahoo UI toolkit tree, while I think they probably should have gone with the EXT implementation we are going to use what is available to us for the time being. As you saw in Part 1 the tree expects the data to be returned as a simple JSON array following a format similar to:
[{"DISPLAY":"mylabel","VALUE":"myvalue"},{"DISPLAY":"mylabel","VALUE":"myvalue"},{"DISPLAY":"mylabel","VALUE":"myvalue","LEAFNODE":true}]
As you can see its a relatively simple structure the only interesting note here is how the tree knows how to style each node of the tree.
In the above dataset all nodes except for the last node have child nodes. The last node has the attribute "LEAFNODE":true which tells the tree that
this node is a leaf node and to not display the expander icon.
The Tree Code
Copy the code below and save the file as tree.cfm.Ok brace yourself, this is where things get tough!
<cfoutput>
<cfform name="mytree" >
<cftree format="html" name="directories">
<cftreeitem bind="cfc:#request.cfcpath#.fileExp.getDirectories({cftreeItemPath},{cftreeItemValue})">
</cftree>
</cfform>
</cfoutput>
Ok so I lied, as you can see it's not tough at all is it? We have three tags, <cfform><cftree> and <cftreeitem>. Of the three tags the only one of note is
the <cftreeitem> tag with the bind attribute.
<cfform name="mytree" >
<cftree format="html" name="directories">
<cftreeitem bind="cfc:#request.cfcpath#.fileExp.getDirectories({cftreeItemPath},{cftreeItemValue})">
</cftree>
</cfform>
</cfoutput>
bind="cfc:fileExp.getDirectories({cftreeItemPath},{cftreeItemValue})"
In the bind attribute we indicate that we want to bind to a coldfusion component by prefixing the bind expression with "cfc:". We then follow on with the dot notation path to our component. If you have the component in the same directory as your tree.cfm the bind expression would be as the above code, if not you need to provide the path to the component using dot notation. If your component is in the webroot\components\ajax\ directory your bind expression would look something like: "cfc:components.ajax.fileExp.getDirectories(...".
If you remember from our component the name of the method that provides the data for the tree is getDirectories. We then just set up the variables that we are going to pass to the function namely the cftreeItemPath and cftreeItemValue and we do this using the curly {} braces to specify that both of those arguments are bound.