ColdFusion 8 - Tapping Into the Power of the YUI

Under the hood ColdFusion 8 uses the Yahoo! User Interface Library (YUI) for a lot of its cool new AJAX UI elements. That is great news for CF developers because the YUI is very well documented and has lots of excellent examples. Using these examples and documentation we can easily extend the capabilities of ColdFusion's new AJAX components beyond what Adobe has built for us.

[More]

Comments
Dan Wilson's Gravatar Great post Nathan. Thanks for showing some of the cool new features of ColdFusion 8.
# Posted By Dan Wilson | 6/5/07 2:42 PM
Mark's Gravatar I copied your example and get a javascript error.

missing variable name

function editNodeLabel()
# Posted By Mark | 11/4/07 6:13 AM
Nathan Mische's Gravatar @Mark, it seems if you copy and paste the following lines get compressed into one line:

var oContextMenu, // The YAHOO.widget.ContextMenu instance
oCurrentTextNode = null; // The YAHOO.widget.TextNode instance...

To fix the error you are seeing either remove the JavaScript comments, or break the statement up into two lines as displayed.
# Posted By Nathan Mische | 11/14/07 5:19 PM
keelee's Gravatar I know this is an old posting but, I would like to see the working copy that you provided on HostMySite .
# Posted By keelee | 1/16/09 2:19 PM
keelee's Gravatar I no longer need the visual example. I got that part working! I changed the code to reflect my cfc. However when I edit the Node Label, I would like tosvae thto the DB. How Can I do this? Need to have a function that does an update on the selected node. Help!
# Posted By keelee | 1/16/09 3:28 PM
Mischa's Gravatar Hello Nathan, thank you for posting this! Your code solved exactly my problem (adding a Tooltip to an element in the tree). However, I'm hoping you (or any other reader) can help me understand this:
If I replace in your code (which works fine for me btw) this line:

<cfset element.leafnode = "false" />

with this:

<cfset element.leafnode = "false" />
<cfif len(arguments.nodeitempath) GT 5>
<cfset element.leafnode = "true" />
</cfif>

Which basically limits the "depth" of the tree.

Unfortunately, the side effect becomes that the line

return function (nodesArray, params)

and everything that is in that function, is executed once for every leaf node. That means that if a branch contains 30 leaves, 900 iterations are done in javascript (30 times a loop over all 30 nodes).

I have some branches that contain over 100 items that causes the browser to peg the system for about 20 seconds. Any thoughts?

Thanks!
Mischa.
# Posted By Mischa | 1/26/09 3:25 PM
Saul's Gravatar I've been looking for several days at examples of using a flash file uploader. I was after single or multiple file uploads, a progress bar and the ability to add "vanilla" form fields. The most promising I found was the YUI uploader from those nice people at Yahoo http://developer.yahoo.com/yui/examples/uploader/u......

I got it working fine submitting to a simple CF page

<cfif structkeyexists(form,"Filedata")>
<cffile action="UPLOAD" filefield="Filedata" destination="#expandpath(".")#" nameconflict="OVERWRITE">
</cfif>

<cfif structkeyexists(form,"var1") and structkeyexists(form,"var2")>
<cffile action = "append" file = "#expandpath(".")#\log.txt" output = "var1 = #var1# var2 = #var2#">
</cfif>

I'm a complete novice with Javascript, PHP, flash in fact anything other than CF, so there's a bit I don't understand (well several ... but this one in particular!)

On the example in the YUI documentation they say they are using this PHP scrip to handle server side

1 <?php
2 foreach ($_FILES as $fieldName => $file) {
3 move_uploaded_file($file['tmp_name'], "./" . $file['name']);
4 echo (" ");
5 } ?>

The echo bit seems to "bounce back" the post data which is then picked up by the onuploadresponse(event). In CF how would I pass back some response to the calling page to fire this event?
# Posted By Saul | 3/2/09 4:19 AM
Geng's Gravatar What a great example, Thank you! I copied your code and it works.

I tried to add more items in the context menu like in the Yahoo! example, e.g. add a child, and I found some problems: when I added a node to a tree as following:

var nodeobj = { label: sLabel, expanded: false};
          
oChildNode = new YAHOO.widget.TextNode(nodeobj, oCurrentTextNode);
oCurrentTextNode.refresh();
oCurrentTextNode.expand();
      
ColdFusion.objectCache[oChildNode.labelElId] = oChildNode;

I can not set node properties like "img", "imgopen", "leafnode" as in cftreeitem, because nodes are Yahoo.widget.TextNode objects, there's no such properties
in TextNode class. Is there a way to solve this problem?
# Posted By Geng | 5/21/09 3:36 PM
Josh's Gravatar I am also having the same issue that Mischa is having, where if I set <cfset element.leafnode = "true" /> the function loadNodes is called repeatedly for each leafNode that is currently being displayed in the tree. Is there another function that can be used that only runs once on load of the tree, or how can I make this function only run once?
# Posted By Josh | 9/29/10 8:13 AM
Mischa's Gravatar Josh, I came up with a solution that basically determined whether the current node is being expanded and if it is, don't loop over the leaves to add tooltips. I obtain the unique identifier for the node that is currently being expanded like so:
CurrentNodeBeingExpanded = params.parent.parent.data.id;

and after that, it's basically keeping track of that value, check if it has changed, etc.
Hope this helps!
Mischa.
# Posted By Mischa | 9/29/10 9:00 AM
Josh's Gravatar Thanks Mischa, Your comment sent me in the correct direction and I have it working now.
# Posted By Josh | 9/29/10 2:46 PM
BlogCFC was created by Raymond Camden. This blog is running version 5.8.001.