class dndTree
- Example:This first example loads data into the Tree from an xml file. The second example adds data to the Tree from the timeline.
// Example 1 // Define XML object to load the external data dataTreeDP = new XML(); // set this to true to get rid of white space in your xml dataTreeDP.ignoreWhite = true; // load data into Tree function loadData() { // load an xml structure data from an xml object dataTreeDP.load("testdata.xml"); // onLoad event gets called when the xml file is loaded dataTreeDP.onLoad = function() { // set the loaded xml file into the Tree // if your xml nodes do not have a label attributes then you need to add it to // your nodes or set the labelField or labelFunction to the attribute you want to use as your label theTree.dataProvider = dataTreeDP; // open the root node theTree.setIsOpen(theTree.getTreeNodeAt(0), true); } } // load data into the tree loadData()// Example 2 // set the dataProvider to a new XML object theTree.dataProvider = new XML(); // using addTreeNode to add a node to the root and get a reference to that node var rootNode = theTree.addTreeNode("Root"); // add node to the root node rootNode.addTreeNode("Child Node"); // open the root node. we could have passed in rootNode and it would have worked the same theTree.setIsOpen(theTree.getTreeNodeAt(0), true);
Field Summary
Property Summary
Method Summary
Field Documentation
ADD_BRANCH
- Usage:trace(myInstance.ADD_BRANCH);
- Example:The example pastes the sourceNode after the targetNode and we can optionally use ADD_BRANCH to generate an addBranchNode event.
theTree.pasteNode(sourceNode, targetNode, theTree.PASTE_AFTER, moveNode, theTree.METHOD_CALL, theTree.ADD_BRANCH);
ADD_LEAF
- Usage:trace(myInstance.ADD_LEAF);
- Example:The example pastes the sourceNode after the targetNode and we can optionally use ADD_LEAF to generate an addLeafNode event.
theTree.pasteNode(sourceNode, targetNode, theTree.PASTE_AFTER, moveNode, theTree.METHOD_CALL, theTree.ADD_LEAF);
addBranchNode_Event
- Usage:myInstance.addEventListener("addBranchNode", myListener);
- Example:The example below adds a listener to the addBranchNode event.
// include delegation class import mx.utils.Delegate; // Add Branch Node event function function addBranchNodeEvent(evt) { trace("A branch node has been added to the tree!"); // reference to the tree var theTree = evt.target; // references to all the nodes involved trace("The added branch node ="+theTree.selectedNode); trace("The target node="+theTree.targetNode); trace("pastePosition="+evt.pastePosition); trace("thePasteToPosition="+theTree.thePasteToPosition); trace("thePasteToParentNode="+theTree.thePasteToParentNode); } // we add a function that "listens" for the add event. When an addBranchNode event is generated this function is called. theTree.addEventListener("addBranchNode", Delegate.create(this, addBranchNodeEvent));
addBranchPastePosition
- Usage:myInstance.addBranchPastePosition = myInstance.PASTE_AFTER
- Example:This code causes added branch nodes to be added after the selected node.
theTree.addBranchPastePosition = theTree.PASTE_AFTER;
addLeafNode_Event
- Usage:myInstance.addEventListener("addLeafNode", myListener);
- Example:The example below adds a listener to the addLeafNode event.
// include delegation class import mx.utils.Delegate; // Add Leaf Node event function function addLeafNodeEvent(evt) { trace("A leaf node has been added to the tree!"); // reference to the tree var theTree = evt.target; // references to all the nodes involved trace("The added leaf node or parent node="+theTree.selectedNode); trace("The target node="+theTree.targetNode); trace("pastePosition="+evt.pastePosition); trace("thePasteToPosition="+theTree.thePasteToPosition); trace("thePasteToParentNode="+theTree.thePasteToParentNode); } // we add a function that "listens" for the add event. When a addLeafNode event is generated this function is called. theTree.addEventListener("addLeafNode", Delegate.create(this, addLeafNodeEvent));
addLeafPastePosition
- Usage:myInstance.addLeafPastePosition = myInstance.PASTE_AFTER;
- Example:This code causes added leaf nodes to be added after the selected node.
theTree.addLeafPastePosition = theTree.PASTE_AFTER;
branchNodeXML
- Usage:myInstance.branchNodeXML = "
"; - Example:This code creates a branch node from the branchNodeXML property and adds it after the selected node.
theTree.branchNodeXML = "<node label='my node'></node>"; theTree.addBranchNode(theTree.selectedNode, theTree.PASTE_INTO);
canDropOnEmptyRows
- Usage:myInstance.canDropOnEmptyRows = newValue;
- Example:The example below enables the property.
theTree.canDropOnEmptyRows = true;
className
clickThreshold
- Usage:myInstance.clickThreshold = 400;
- Example:This code sets the clickThreshold to 400 milliseconds.
theTree.clickThreshold = 400;
cm
The contextMenu has an additional method called, "find(caption:String)" that returns the item by matching the item's caption. Each customItem in the customItems array, the array of items that make up the context menu, have an additional "action" property that contains one of the dndTree contants, PASTE_INTO, PASTER_AFTER, etc. useful for internal dndTree methods.
When you create your own context menu items add the owner property. The owner should be a reference to the component. This allows the component to work inside nested movieclips.
This is also a duplicate of the menu property. You do not want to over write the menu property with your own menu because the menu will not work in nested movieclips in Flash Player 7 and 8. Instead add or remove items from the existing menu or if you would like to use a different menu add it to the contextMenu property. This will provide the necessary behaviors to work in nested movieclips and to handle selecting the node the mouse is over (which is not always the selected node). You can always revert back to the default contextMenu by setting contextMenu to the cm property.
To change the text of any of the existing menu items use the caption property. For example, myTree.cm.customItems[0].caption = "new text".
- Usage:myInstance.cm;
- Example:This example shows adding, removing and renaming of the menu items.
// get reference to the context menu menu items array - you may have to use the theTree.menu property if you are using your own menu var menuItems = theTree.cm.customItems; // create our new context menu items var newMenuItem = new ContextMenuItem("My Menu Item", doSomething, true); var newMenuItem2 = new ContextMenuItem("Inserted Item", doSomething, true); // set this when the component is in a nested movieclip newMenuItem.owner = theTree; newMenuItem2.owner = theTree; // add an item to the end of the component menuItems.push(newMenuItem); // remove two previous menu items menuItems.splice(5,2); // add a new item at the beginning of the menu stack menuItems.splice(0,0,newMenuItem2); // add a separator before item 1 menuItems[1].separatorBefore = true; // rename an existing menu item menuItems[1].caption = "Cut the item out"; // this function is called by our context menu items function doSomething(obj, menuItem) { // be aware of scope issues in this function trace("obj=" + obj) trace("you clicked " + menuItem.caption) } - See also:
COPY_ITEM
- Usage:trace(myInstance.COPY_ITEM);
copyIcon
- Usage:myInstance.copyIcon = "linkageId";
- Example:The example below uses a different copy icon.
theTree.copyIcon = "myIconId";
- See also:
copyNode_Event
- Usage:myInstance.addEventListener("copyNode", myListener);
- Example:The example below adds a listener to the copyNode event.
// include delegation class import mx.utils.Delegate; // Copy event function function copyNodeEvent(evt) { trace("A node has been copied from the tree!"); // reference to the tree var theTree = evt.target; // references to all the nodes involved trace("Copied nodes="+theTree.theCopyNodes); trace("Copied nodes="+theTree.selectedNodes); } // we add a function that "listens" for the copy event. When a copyNode event is generated this function is called. theTree.addEventListener("copyNode", Delegate.create(this, copyNodeEvent));
CUT_ITEM
- Usage:trace(myInstance.CUT_ITEM);
cutNode_Event
- Usage:myInstance.addEventListener("cutNode", myListener);
- Example:The example below adds a listener to the cutNode event.
// include delegation class import mx.utils.Delegate; // Cut event function function cutNodeEvent(evt) { trace("A node has been cut from the tree!"); // reference to the tree var theTree = evt.target; // references to all the nodes and components involved trace("Cut nodes="+theTree.theCopyNodes); trace("The parent or sibling node="+theTree.selectedNode); } // we add a function that "listens" for the cut event. When a cutNode event is generated this function is called. theTree.addEventListener("cutNode", Delegate.create(this, cutNodeEvent));
delayedClick_Event
- Usage:myInstance.addEventListener("delayedClick", myListener);
- Example:The example below adds a listener to the delayed click event.
// include delegation class import mx.utils.Delegate; // Delayed click event function function delayedClickEvent(evt) { trace("A row has been delay clicked!"); // reference to the tree var theTree = evt.target; // references to all the nodes and components involved trace("absRowIndex="+evt.absRowIndex); trace("rowIndex="+evt.rowIndex); trace("delayedclicked node="+theTree.selectedNode); } // we add a function that "listens" for the delayed click event. When a delayedClick event is generated this function gets called. theTree.addEventListener("delayedClick", Delegate.create(this, delayedClickEvent));
dndEnabled
- Usage:myInstance.dndEnabled = newValue;
- Example:The example below enables the property.
theTree.dndEnabled = true;
dndGutter
- Usage:myInstance.dndGutter = newValue;
- Example:The example below sets the property.
theTree.dndGutter = 5;
dndReadOnly
- Usage:myInstance.dndReadOnly = newValue;
- Example:The example below enables the property.
theTree.dndReadOnly = true;
doNotInsertOnDrop
- Usage:myInstance.doNotInsertOnDrop = true;
- Example:The example below creates this behavior.
theTree.doNotInsertOnDrop = true; function droppedOnto(evt) { trace("dropped onto="+evt.targetNode); trace("dropped ="+evt.nodes); } theTree.addEventListener("onDrop",droppedOnto);
doubleClick_Event
- Usage:myInstance.addEventListener("doubleClick", myListener);
- Example:The example below adds a listener to the double click event.
// include delegation class import mx.utils.Delegate; // Double click event function function doubleClickEvent(evt) { trace("A row has been double clicked!"); // reference to the tree var theTree = evt.target; // references to all the nodes and components involved trace("absRowIndex="+evt.absRowIndex); trace("rowIndex="+evt.rowIndex); trace("doubleclicked node="+theTree.selectedNode); } // we add a function that "listens" for the double click event. When a doubleClick event is generated this function gets called. theTree.addEventListener("doubleClick", Delegate.create(this, doubleClickEvent));
drag_mc
theNode.bIsNodeBranch = getIsBranch(theNode);
theNode.bIsNodeOpen = getIsOpen(theNode);
theNode.bIsParentNodeBranch = getIsBranch(theNode.parentNode);
theNode.owner = this;
theNode.indices = indices;
theNode.itemIndex = indices[i];
theNode.readOnly = dndReadOnly;
// we don't use this now but we may in the future
// right now it is the same as calling theNode.removeTreeNode()
theNode.removeMe = function() {
theNode.removeTreeNode();
}
You can use the modifyDragMC function to modify the drag_mc before it is dragged.- Usage:_root.drag_mc;
- Example:The example below adds a property to drag_mc.
myInstance.modifyDragMC = function (drag_mc) { drag_mc.myProp = "Bill"; // enumerate drag_mc here to see it's properties trace(drag_mc.nodes); } - See also:
dragDuplicateRow
- Usage:myInstance.dragDuplicateRow = true;
- Example:The example below disables the dragDuplicateRow property.
theTree.dragDuplicateRow = false;
- See also:
dragHighlightAlpha
- Usage:myInstance.dragHighlightAlpha = 30;
- Example:The example below sets the transparency to 30 percent.
theTree.dragHighlightAlpha = 30;
dragOverPos
- Usage:myInstance.dragOverPos;
- Example:The example below traces the property.
trace(theTree.dragOverPos);
dragRowStyle
- Usage:myInstance.dragRowStyle = "normal";
- Example:The example below sets the dragRowStyle to "normal".
theTree.dragRowStyle = "normal";
- See also:
drop_Event
- Usage:myInstance.addEventListener("onDrop", myListener);
- Example:The example below adds a listener to the drop event.
// include delegation class import mx.utils.Delegate; // Drop Event function nodeDrop(evt) { trace("A node has been dropped onto the Tree!"); // reference to the tree var theTree = evt.target; // references to all the nodes and components involved trace("pastePosition="+evt.pastePosition); trace("thePasteToPosition="+theTree.thePasteToPosition); trace("thePasteToParentNode="+theTree.thePasteToParentNode); trace("lastMovedItem="+theTree.lastMovedItem); trace("lastMovedIndex="+theTree.lastMovedIndex); trace("lastMovedParent="+theTree.lastMovedParent); trace("lastMovedSource="+theTree.lastMovedSource); trace("lastMovedItems="+theTree.lastMovedItems); trace("lastMovedIndices="+theTree.lastMovedIndices); trace("lastMovedParents="+theTree.lastMovedParents); trace("lastMovedSources="+theTree.lastMovedSources); trace("targetNode="+theTree.targetNode); trace("targetNode="+theTree.selectedNode); trace("targetNode="+theTree.selectedNodes); trace("targetNode="+theTree.selectedNode.firstChild); } // we add a function that "listens" for the drop event. When a drop event is generated this function gets called. theTree.addEventListener("onDrop", Delegate.create(this, nodeDrop));
DROP_EVENT
- Usage:trace(myInstance.DROP_EVENT);
- Example:Traces value.
trace(theTree.DROP_EVENT);
enableAutoHorizontalScrollPolicy
enabled
- Usage:myInstance.enabled = true;
- Example:The example below enables the Tree.
theTree.enabled = true;
enableDisplayLabel
- Usage:myInstance.enableDisplayLabel = newValue;
- Example:The example below enables the property.
theTree.enableDisplayLabel = true;
- See also:
enableDragHighlight
- Usage:myInstance.enableDragHighlight = newValue;
- Example:The example below enables the property.
theTree.enableDragHighlight = true;
- See also:
enableDragIcon
- Usage:myInstance.enableDragIcon = newValue;
- Example:The example below enables the property.
theTree.enableDragIcon = true;
- See also:
enableDragLine
- Usage:myInstance.drawDragLine = true;
- Example:The code below turns on the drag line.
theTree.drawDragLine = true;
- See also:
enableGenericIcon
- Usage:myInstance.enableGenericIcon = true;
- Example:The example below enables the generic icon.
theTree.enableGenericIcon = true;
- See also:
enableKeySearch
- Usage:myInstance.enableKeySearch = true;
- Example:The example below disables key searching.
myInstance.enableKeySearch = false;
enableRenameNode
- Usage:myInstance.enableRenameNode = true;
- Example:The example below enables the rename feature.
theTree.enableRenameItem = false;
- See also:
enableToolTip
- See also:
errorMsg
- Usage:myInstance.errorMsg;
- Example:The example below traces debug information in the errorMsg variable.
trace(theTree.errorMsg);
lastMovedIndex
- Usage:movedNodeIndex = myInstance.lastMovedIndex;
- Example:The example returns the index of the last moved node.
movedNodeIndex = theTree.lastMovedIndex;
lastMovedIndices
- Usage:movedNodeIndex = myInstance.lastMovedIndices[0];
- Example:The example returns the index of the first of the last moved nodes.
movedNodeIndex = theTree.lastMovedIndices[0];
lastMovedItem
- Usage:movedNode = myInstance.lastMovedItem;
- Example:The example returns the last moved node.
movedNode = theTree.lastMovedItem;
lastMovedItems
- Usage:movedNode = myInstance.lastMovedItems[0];
- Example:The example gets the number of moved nodes.
movedNode = theTree.lastMovedItems.length;
lastMovedParent
- Usage:parentNode = myInstance.lastMovedParent;
- Example:The example returns the parent node of the last moved node.
parentNode = theTree.lastMovedParent;
lastMovedParents
- Usage:parentNode = myInstance.lastMovedParents[0];
- Example:The example returns the parent node of the firts node of the last moved nodes.
parentNode = theTree.lastMovedParents[0];
lastMovedSource
- Usage:theNodeSource = myInstance.lastMovedSource;
- Example:The example returns the owner of the last moved node.
theNodeSource = theTree.lastMovedSource;
lastMovedSources
- Usage:theNodeSource = myInstance.lastMovedSources[0];
- Example:The example returns the owner of the first node of the last moved nodes.
theNodeSource = theTree.lastMovedSources[0];
lastOver
- Usage:myInstance.lastOver;
- Example:The example below traces the property.
trace(theTree.lastOver);
lastOverIndex
- Usage:myInstance.lastOverIndex;
- Example:The example below traces the property.
trace(theTree.lastOverIndex);
lastSelectedSources
- Usage:theNodeSource = myInstance.lastSelectedSources[0];
- Example:The example returns the owner of the first node of the last selected nodes.
theNodeSource = theTree.lastSelectedSources[0];
leafNodeXML
- Usage:myInstance.leafNodeXML = "
"; - Example:This code creates a leaf node from the leafNodeXML property and adds it after the selected node.
theTree.leafNodeXML = "<node label='my node'/>"; theTree.addLeafNode(theTree.selectedNode, theTree.PASTE_AFTER);
menu
- See also:
MENU_EVENT
- Usage:trace(myInstance.MENU_EVENT);
- Example:Traces value.
trace(theTree.MENU_EVENT);
METHOD_CALL
- Usage:trace(myInstance.METHOD_CALL);
- Example:Traces value.
trace(theTree.METHOD_CALL);
movementBeforeDrag
multipleSelection
- Usage:myInstance.multipleSelection = true;
- Example:The example below enables the multipleSelection.
theTree.multipleSelection = true;
nodeIcon
- See also:
nodeOpen_Event
Event. Event generated when a branch node is opened. This event includes two properties. Target is a reference to the Tree and node contains the node that has closed.
- Usage:myInstance.addEventListener("nodeOpen", myListener);
- Example:
The example below adds a listener to the nodeOpen event.
// include delegation class import mx.utils.Delegate; // Node Open event function function nodeOpenEvent(evt) { trace("A branch node has been opened!"); // reference to the tree var theTree = evt.target; // reference to the node opened trace("The opened node="+evt.target.node); } // we add a function that "listens" for the node open event. When a nodeOpen event is generated this function is called. theTree.addEventListener("nodeOpen", Delegate.create(this, nodeOpenEvent));
nodeOpen_Event
Event. Event generated when a branch node is closed. This event includes two properties. Target is a reference to the Tree and node contains the node that has closed.
- Usage:myInstance.addEventListener("nodeClose", myListener);
- Example:
The example below adds a listener to the nodeOpen event.
// include delegation class import mx.utils.Delegate; // Node Close event function function nodeCloseEvent(evt) { trace("A branch node has been closed!"); // reference to the tree var theTree = evt.target; // reference to the node closed trace("The closed node="+evt.target.node); } // we add a function that "listens" for the node close event. When a nodeClose event is generated this function is called. theTree.addEventListener("nodeClose", Delegate.create(this, nodeCloseEvent));
openClosedBranchOnPasteInto
- Usage:myInstance.openClosedBranchOnPasteInto = newValue;
- Example:The example below enables the property.
theTree.openClosedBranchOnPasteInto = true;
PASTE_AFTER
- Usage:trace(myInstance.PASTE_AFTER);
- Example:The first example inserts the sourceNode after the targetNode. The second example pastes the sourceNode after the targetNode.
// first example theTree.addLeafNode(targetNode, theTree.PASTE_AFTER, sourceNode); // second example theTree.pasteNode(sourceNode, targetNode, theTree.PASTE_AFTER, moveNode);
PASTE_BEFORE
- Usage:trace(myInstance.PASTE_BEFORE);
- Example:The example inserts the sourceNode before the targetNode.
theTree.addLeafNode(targetNode, theTree.PASTE_BEFORE, sourceNode);
PASTE_INTO
- Usage:trace(myInstance.PASTE_INTO);
- Example:The example inserts the sourceNode into the targetNode.
theTree.addLeafNode(targetNode, theTree.PASTE_INTO, sourceNode);
pasteNode_Event
- Usage:myInstance.addEventListener("pasteNode", myListener);
- Example:The example below adds a listener to the pasteNode event.
// include delegation class import mx.utils.Delegate; // Paste Node event function function pasteNodeEvent(evt) { trace("A node has been pasted into the Tree!"); // reference to the tree var theTree = evt.target; // references to all the nodes and components involved trace("pastePosition="+evt.pastePosition); trace("thePasteToPosition="+theTree.thePasteToPosition); trace("thePasteToParentNode="+theTree.thePasteToParentNode); trace("lastMovedItem="+theTree.lastMovedItem); trace("lastMovedIndex="+theTree.lastMovedIndex); trace("lastMovedParent="+theTree.lastMovedParent); trace("lastMovedSource="+theTree.lastMovedSource); trace("lastMovedItems="+theTree.lastMovedItems); trace("lastMovedIndices="+theTree.lastMovedIndices); trace("lastMovedParents="+theTree.lastMovedParents); trace("lastMovedSources="+theTree.lastMovedSources); trace("targetNode="+theTree.targetNode); trace("targetNode="+theTree.selectedNode); trace("targetNode="+theTree.selectedNodes); trace("targetNode="+theTree.selectedNode.firstChild); } // we add a function that "listens" for the paste event. When a pasteNode event is generated this function gets called. theTree.addEventListener("pasteNode", Delegate.create(this, pasteNodeEvent));
preserveBranches
You can use the labelFunction to specifically and automatically type your nodes on an as needed basis. The labelFunction is called when a row is drawn. You would check if an attribute exists or check if childNodes exist (its up to you to determine) and set the node to a leaf or branch. Use setIsBranch(theNode, true) or setIsBranch(theNode, false). Note you cannot set a node to a leaf node type if it has children.
- Usage:myInstance.preserveBranches = newValue;
- Example:The example below enables the property.
theTree.preserveBranches = true;
- See also:
preventDropIntoLeafNodes
- Usage:myInstance.preventDropIntoLeafNodes = newValue;
- Example:The example below prevents drop into leaf node
theTree.preventDropIntoLeafNodes = true;
- See also:
REMOVE_ITEM
- Usage:trace(myInstance.REMOVE_ITEM);
- Example:The example cuts the sourceNode and we can optionally use REMOVE_ITEM to generate a removeItem event.
theTree.cutNode(sourceNode, theTree.REMOVE_ITEM);
removeNode_Event
- Usage:theTree.addEventListener("removeNode", myListener);
- Example:The example below adds a listener to the removeNode event.
// include delegation class import mx.utils.Delegate; // Remove Event function removeNode(evt) { trace("A node has been removed from the Tree!"); // reference to the tree var theTree = evt.target; // references to all the nodes and components involved trace("Removed nodes="+theTree.theCopyNodes); trace("The parent or sibling node="+theTree.selectedNode); } // we add a function that "listens" for the remove event. When a removeNode event is generated this function gets called. theTree.addEventListener("removeNode", Delegate.create(this, removeNode));
RENAME_ITEM
- Usage:trace(myInstance.RENAME_ITEM);
- Example:Traces value.
trace(theTree.RENAME_ITEM);
renameField
- Usage:myInstance.renameField = "mylabel";
- Example:
theTree.renameField = "theLabel";
renameNode_Event
- Usage:myInstance.addEventListener("renameNode", myListener);
- Example:The example below adds a listener to the renameNode event.
// include delegation class import mx.utils.Delegate; // renameNode event function function renameNodeEvent(evt) { trace("A node has been renamed"); // reference to the tree var theTree = evt.target; // references to all the nodes involved trace("The renamed node="+evt.node); trace("The rowIndex="+evt.rowIndex); trace("The row movieclip="+evt.row); trace("The original text="+evt.originalText); } // we add a function that "listens" for the renameNode event. When a renameNode event is generated this function is called. theTree.addEventListener("renameNode", Delegate.create(this, renameNodeEvent)); - See also:
renameOnDoubleClick
- Usage:myInstance.enableRenameItem = true;
- Example:The example below disables the rename feature on double click.
theTree.renameOnDoubleClick = false;
- See also:
renameTextRestrict
- Usage:myInstance.renameTextRestrict = "A-Za-z0-9 ";
- Example:The example limits the text to only allows letters, numbers and spaces.
theTree.renameTextRestrict = "A-Za-z0-9 ";
- See also:
root_mc
- Usage:myInstance.root_mc = _root;
- Example:The example sets a reference to the root movieclip.
theTree.root_mc = _root;
scrollDragSpeed
- Usage:myInstance.scrollDragSpeed = 200;
- Example:Sets the scroll speed to 200 milliseconds.
theTree.scrollDragSpeed = 200;
showDebug
- Usage:myInstance.showDebug = true;
- Example:The example below will show debug information, if any, in the output window.
theTree.showDebug = true;
showToolTipsOnAllRows
- Usage:myInstance.showToolTipsOnAllRows = true;
- Example:This example enables showToolTipsOnAllRows.
theTree.showToolTipsOnAllRows = true;
- See also:
singleClick_Event
- Usage:myInstance.addEventListener("singleClick", myListener);
- Example:The example below adds a listener to the single click event.
// include delegation class import mx.utils.Delegate; // Double click event function function singleClickEvent(evt) { trace("A row has been single clicked!"); // reference to the tree var theTree = evt.target; // references to all the nodes and components involved trace("absRowIndex="+evt.absRowIndex); trace("rowIndex="+evt.rowIndex); trace("selectedIndex="+theTree.selectedIndex); trace("this node has been clicked="+theTree.selectedNode); } // we add a function that "listens" for the single click event. When a singleClick event is generated this function gets called. theTree.addEventListener("singleClick", Delegate.create(this, singleClickEvent));
strAddBranch
- Usage:myInstance.cm.customItems[0].caption = "new text".
- Example:The example below changes the text of the first menu item.
theTree.cm.customItems[0].caption = "new text". theTree.menu.customItems[0].caption = "new text".
strAddLeaf
- Usage:myInstance.cm.customItems[0].caption = "new text".
- Example:The example below changes the text of the first menu item.
theTree.menu.customItems[0].caption = "new text"
strCopyIcon
- Usage:myInstance.strCopyIcon = "newValue";
- Example:The example below sets the property.
theTree.dndCopyIcon = "myIconId";
strCopyItem
- Usage:myInstance.cm.customItems[0].caption = "new text".
- Example:The example below changes the text of the first menu item.
theTree.menu.customItems[0].caption = "new text"
strCutItem
- Usage:myInstance.cm.customItems[0].caption = "new text".
- Example:The example below changes the text of the first menu item.
theTree.menu.customItems[0].caption = "new text";
strDragBranchIcon
- Usage:myInstance.strDragBranchIcon = "newValue";
- Example:The example below sets the property.
theTree.strDragBranchIcon = "myIconId";
strDragBranchOpenedIcon
- Usage:myInstance.strDragBranchOpenedIcon = "newValue";
- Example:The example below sets the property.
theTree.strDragBranchOpenedIcon = "myIconId";
strDragLeafIcon
- Usage:myInstance.strDragLeafIcon = "newValue";
- Example:The example below sets the property.
theTree.strDragLeafIcon = "myIconId";
strGenericIcon
- Usage:myInstance.strGenericIcon = "newValue";
- Example:The example below sets the property.
theTree.strGenericIcon = "myIconId";
- See also:
strNoDropIcon
- Usage:myInstance.strNoDropIcon = "newValue";
- Example:The example below sets the property.
theTree.strNoDropIcon = "myIconId";
strPasteAfter
- Usage:myInstance.cm.customItems[0].caption = "new text".
- Example:The example below changes the text of the first menu item.
theTree.menu.customItems[0].caption = "new text"
strPasteBefore
- Usage:myInstance.cm.customItems[0].caption = "new text".
- Example:The example below changes the text of the first menu item.
theTree.menu.customItems[0].caption = "new text"
strPasteInto
- Usage:myInstance.cm.customItems[0].caption = "new text".
- Example:The example below changes the text of the first menu item.
theTree.menu.customItems[0].caption = "new text"
strRemoveItem
- Usage:myInstance.cm.customItems[0].caption = "new text".
- Example:The example below changes the text of the first menu item.
theTree.menu.customItems[0].caption = "new text"
strRenameItem
- Usage:myInstance.cm.customItems[0].caption = "new text".
- Example:The example below changes the text of the first menu item.
theTree.cm.customItems[0].caption = "new text". theTree.menu.customItems[0].caption = "new text".
symbolName
symbolOwner
targetNode
- Usage:myInstance.targetNode;
- Example:The example below traces the property.
trace(theTree.targetNode);
theCopyGridItems
- Usage:myInstance.theCopyGridItems;
- Example:The example below traces the property.
trace(theTree.theCopyGridItems);
theCopyItems
- Usage:myInstance.theCopyItems;
- Example:The example below traces the property.
trace(theTree.theCopyItems);
- See also:
theCopyNodes
- Usage:myInstance.theCopyNodes;
- Example:The example below traces the property.
trace(theTree.theCopyNodes);
thePasteToParentNode
- Usage:theNodeSource = myInstance.thePasteToParentNode;
- Example:The example returns the parent node of nodes that were most recently pasted.
parentNode = theTree.thePasteToParentNode;
- See also:
thePasteToPosition
- Usage:theNodeSource = myInstance.thePasteToPosition;
- Example:The example returns the position in the parent node of nodes that were most recently pasted.
position = theTree.thePasteToPosition;
- See also:
toolTipDelay
- Usage:myInstance.toolTipDelay = 500;
- Example:This example the tool tip delay to 500 milliseconds.
theTree.toolTipDelay = 500;
- See also:
toolTipDepth
- Usage:myInstance.toolTipDepth = 1000;
- Example:This example the tool tip depth to 2000.
theTree.toolTipDepth = 2000;
- See also:
trackDebug
- Usage:myInstance.trackDebug = true;
- Example:The example below tracks debug information in the errorMsg variable.
theTree.trackDebug = true;
trashCan
versionNumber
visible
- Usage:myInstance.visible = true;
- Example:The example below displays the tree.
theTree.visible = true;
Property Documentation
copyIconX
copyIconX
copyIconY
copyIconY
enableContextMenu
- Usage:myInstance.enableContextMenu = true;
- Example:The example below enables the context menu.
// Example 1 - enable the context menu theTree.enableContextMenu = true;
- See also:
Constructor Documentation
dndTree
- Usage:createClassObject(dndTree,"theTree",5);
- Example:The example below creates a tree at runtime.
// note: be sure to add the tree to the library import com.judah.controls.dndTree; createClassObject(dndTree,"theTree",5); theTree.setSize(180,190); theTree._x = 25; theTree._y = 25; theTree.dataProvider = new XML("<node label='root'><node label='child'/><node label='child 2'/></node>"); var rootNode = theTree.getTreeNodeAt(0); var newChild = rootNode.addTreeNode("new child"); theTree.setIsOpen(rootNode, true); theTree.selectedNode = newChild; theTree.setStyle("selectionColor", 0x006699); theTree.setStyle("rollOverColor", 0xBECAD6); theTree.setStyle("textRollOverColor", 0x2B333C); theTree.setStyle("textSelectedColor", 0xFDFDFD);
Method Documentation
addBranchNode
pastePosition,
theSourceNode)
- Parameters:
theTargetNode - Optional. The location by node of where to add the branch node. If left out then the root node is used. pastePosition - Optional. Constant that refers to the paste position (PASTE_INTO, PASTE_BEFORE, PASTE_AFTER). If the pastePosition is not included then the dndTree uses the property addBranchPastePosition. theSourceNode - Optional. The xml node. If this value is not passed in then the property branchNodeXML is used. - Usage:myInstance.addBranchNode([theTargetNode[, pastePosition[, theSourceNode]]]);
- Example:The example below adds a branch node after the selected node.
var newBranchNode = theTree.addBranchNode(theTree.selectedNode, theTree.PASTE_AFTER); trace("newNode = "+newBranchNode);
addLeafNode
pastePosition,
theSourceNode)
- Parameters:
theTargetNode - Optional. The specific location by node of where to add the leaf node. If left out then the root node is used. pastePosition - Optional. Constant that refers to the paste position (PASTE_INTO, PASTE_BEFORE, PASTE_AFTER). If the pastePosition is not included then the dndTree uses the property addLeafPastePosition. theSourceNode - Optional. The xml node. If this value is not passed in then the property leafNodeXML is used. - Usage:myInstance.addLeafNode(theTargetNode, pastePosition, theSourceNode);
- Example:The example below adds the default leaf node after the selected node.
theTree.addLeafNode(theTree.selectedNode, theTree.PASTE_AFTER);
cancelRename
- Returns:Boolean - True if rename operation was in progress and closed. False if rename node was not in progress.
- Example:The example cancels a rename operation when a user is process of renaming a node.
theTree.cancelRename()
convertToGridItem
- Example:
public function convertToGridItem(theNode) { // create new grid row from xml node var gridItem = new Object(); // NOTE: This may copy references from the node. // loop through and add any attributes for (var prop in theNode.attributes) { gridItem[prop] = theNode.attributes[prop]; } // loop through and add any properties for (var prop in theNode) { gridItem[prop] = theNode[prop]; } return gridItem; }
convertToItem
- Example:The method is shown below.
public function convertToItem(theNode) { // create new item from xml node var newItem = new Object(); // loop through and add any attributes for (var prop in theNode.attributes) { newItem[prop] = theNode.attributes[prop]; } // loop through and add any properties for (var prop in theNode) { newItem[prop] = theNode[prop]; } return newItem; }
copyNode
eventSource)
- Parameters:
theNodes - The selected node or selected nodes eventSource - Optional. Constant that refers to the source of the call. Typically tree.MENU_EVENT - Returns:Reference to the copy nodes
- Usage:myInstance.copyNode(theNodes,eventSource);
- Example:The example below copies the selected node.
theTree.copyNode(theTree.selectedNode);
cutNode
eventSource,
eventType)
- Parameters:
theNodes - The selected node or selected nodes eventSource - Optional. Constant that refers to the source of the call. Typically tree.MENU_EVENT eventType - Optional. Constant that refers to the event of the call. If REMOVE_ITEM is passed in then a removeNode event is generated. - Returns:Reference to the cut nodes
- Usage:myInstance.cutNode(theNodes,eventSource,eventType);
- Example:The example below cuts the selected node from the Tree.
theTree.cutNode(theTree.selectedNode);
drawSeparator
row,
dragOverPos,
bCanDrop)
- Parameters:
objPoint Object. The object pointer. It contains the x and y position of the mouse over the component row Movieclip. A reference to the row the mouse is over dragOverPos Number. The position the mouse is at relative to the row with a value of one of the constants PASTE_BEFORE, PASTE_BEFORE or PASTE_INTO bCanDrop Boolean. Indicates if the user has permission to drop on this row - Example:The method is shown below.
// here is the drawSeparator code function drawSeparator(objPoint, row, dragOverPos, bCanDrop) { //var maxWidth = 24; var maxWidth = _width/2; //var maxWidth = objPoint.x - 5; //trace("maxWidth="+maxWidth) if (dragOverPos == PASTE_BEFORE) { separator._visible = true; if (row.state!="normal") { //row.setState("normal", false); } separator._y = row._y; } else if (dragOverPos == PASTE_BEFORE) { separator._visible = true; //row.icon_mc._alpha = 100; //row.setState("normal", false); //row.icon_mc.gotoAndStop(1); // this unhighlights the row if (row.state!="normal") { //row.setState("normal", false); } separator._y = row._y + rowHeight; } else if(dragOverPos == PASTE_INTO) { //separator._visible = false; // row.icon_mc._alpha = 100; // this highlights the row if (row.state!="highlighted") { //row.setState("highlighted", false); } separator._y = row._y + (rowHeight/2); //separator._y = objPoint.y; //row.icon_mc.gotoAndStop(2); // hide separator if we cannot drop //if (bCanDrop) { // trace("bCanDrop = true") // separator._visible = false; //} //else { // separator._visible = true; //} } separator._alpha = 100; separator._width = maxWidth; separator._height = 1; separator.clear(); separator.lineStyle(1, 0x666666, 50); separator.moveTo(0, 0); separator.lineTo(width,0); //separator._y = objPoint.y; separator._x = 5; // we can track the depth that we are at but it doesn't look that good. //separator._x = row.nodeIcon._x; } - See also:
dropNode
theTargetNode,
pastePosition,
moveNode,
eventSource,
eventConstant)
- Example:The dropNode function defined.
public function dropNode(theSourceNode, theTargetNode, pastePosition, moveNode, eventSource, eventConstant) { return pasteNode(theSourceNode, theTargetNode, pastePosition, moveNode, eventSource, eventConstant); } - See also:
getIsLeaf
- Parameters:
node XMLNode tree node. - Returns:Boolean. True if node is leaf. False if node is branch.
- Usage:theTree.getIsLeaf(node);
- Example:
theTree.getIsLeaf(node);
getNodeIcon
subIcon)
- Parameters:
theNode XMLNode: The tree node subIcon String: Identifier of a substitute icon. Substitute icon is a movieclip. - Returns:String. Name of icon.
- Usage:theTree.getNodeIcon(node);
- Example:
trace(theTree.nodeIcon(node));
getNodeLabel
subLabel)
- Parameters:
theNode XMLNode: The tree node subLabel subIcon String: The text of a substitute label. - Returns:String. Text of the label.
- Usage:theTree.getNodeLabel(node);
- Example:
trace(theTree.getNodeLabel(node));
getRoot
iconFunction
- Overrides:mx.updatedcontrols.listclasses.ScrollSelectList.iconFunction in class mx.updatedcontrols.listclasses.ScrollSelectList
- Parameters:
node XMLNode that is associated with the row being rendered. Contains the property "attributes" that contains a reference to all the attributes in the original xml node. - Usage:theTree.iconFunction = function(node) { return item.attributes.label };
- Example:The example below sets a default icon if the icon attribute is undefined.
// set the icon to use theTree.iconFunction = function(node) { // this icon function checks if a icon attribute exists // if it does not exist it uses the default built in icon var icon = node.attributes.icon; if (icon != undefined && icon!="") { return icon; } } - See also:
labelFunction
- Overrides:mx.updatedcontrols.listclasses.ScrollSelectList.labelFunction in class mx.updatedcontrols.listclasses.ScrollSelectList
- Parameters:
node XMLNode that is associated with the row being rendered. Contains the property "attributes" that contains a reference to all the attributes in the original xml node. - Usage:theTree.labelFunction = function(item) { return item.attributes.label };
- Example:The example below sets a default label if the label attribute is undefined.
//set the label to use theTree.labelFunction = function(node) { // this label function checks if a label attribute exists // if it does not exist it uses the default var label = node.attributes.label; if (label != undefined && label!="") { return label; } else { return "No Label Defined"; } } - See also:
modifyDragMC
theNode.bIsNodeBranch; theNode.bIsBranch; theNode.bIsNodeOpen; theNode.bIsOpen; theNode.owner; theNode.indices; theNode.itemIndex; theNode.readOnly; // self removing method theNode.removeMe()
- Parameters:
drag_mc Movieclip that is being dragged around - Example:The example below adds a property to drag_mc.
myInstance.modifyDragMC = function (drag_mc) { drag_mc.addedProperty = "myAddedValue"; trace(theDrag_mc.nodes.length); } - See also:
onContextMenuSelect
- Example:This function allows you to hide the first menu item
theTree.onContextMenuSelect = function () { var customItems = theTree.cm.customItems; customItems[0].visible = false; }
onRowDragOver
- Overrides:mx.updatedcontrols.listclasses.ScrollSelectList.onRowDragOver in class mx.updatedcontrols.listclasses.ScrollSelectList
onRowRollOut
- Overrides:mx.updatedcontrols.listclasses.ScrollSelectList.onRowRollOut in class mx.updatedcontrols.listclasses.ScrollSelectList
onRowRollOver
- Overrides:mx.updatedcontrols.listclasses.ScrollSelectList.onRowRollOver in class mx.updatedcontrols.listclasses.ScrollSelectList
pasteNode
theTargetNode,
pastePosition,
moveNode,
eventSource,
eventConstant)
- Parameters:
theSourceNode theSourceNodes - The node or nodes that will be inserted into the tree. theTargetNode - The location by node of where to insert the source nodes. pastePosition - Constant that refers to the paste position (PASTE_INTO, PASTE_BEFORE, PASTE_AFTER). moveNode - Boolean. Indicates to move or copy the nodes from their original location. eventSource - Optional. A constant used to indicate the source of the method. Also used to generate the appropriate events (pasteNode, drop, addLeafNode, addBranchNode). Value can be DROP_EVENT, MENU_EVENT or METHOD_CALL. If not specified a pasteNode event is generated. eventConstant - Optional. A constant used to indicate and generate an ADD_LEAF or ADD_BRANCH event. - Returns:Returns a reference to the XMLNode or an array of XMLNodes. Same reference as selectedNode or selectedNodes.
- Usage:myInstance.pasteNode(theSourceNode, theTargetNode, pastePosition, moveNode, eventSource, eventConstant);
- Example:The example below pastes a node into the root node.
theTree.pasteNode(theTree.selectedNode, theTree.dataProvider, theTree.PASTE_INTO, true);
permitClose
- Parameters:
theNode theNode:XMLNode - The selected node - Returns:Boolean
- Usage:myInstance.permitOpen = function(theNode) {};
- Example:The example below prevents a user from closing branch.
theTree.permitClose = function (theNode) { if (this.getIsBranch(theNode)) { return false; } return true; } - See also:
permitContextMenu
theAction,
theMenuItem,
theContextMenu)
- Parameters:
theSourceNode theSourceNode:XMLNode - The selected node theAction theAction:String - Reference to a static event variable if one is assigned such as (PASTE_INTO, ADD_LEAF, etc). theMenuItem theMenuItem:Object - Reference to custom item object theContextMenu theContextMenu:ContextMenu - Reference to the context menu - Returns:Boolean
- Usage:myInstance.permitContextMenu = function(theSourceNode,theAction,theMenuItem,theContextMenu) {};
- Example:The example below hides the "Paste Into" menu item preventing a user from pasting the copied node into a leaf node.
theTree.permitContextMenu = function (theSourceNode, theAction, theMenuItem, theContextMenu) { // trace("the node being examined is " + theSourceNode.attributes.label) // trace(" the menu item being passed in is="+ theMenuItem.caption) // prevent a user from pasting into a leaf node if preventDropIntoLeafNodes is set to true if (theTree.getIsLeaf(theSourceNode) && preventDropIntoLeafNodes && theAction==theTree.PASTE_INTO) { return false; } return true; }
permitDropFunction
theTargetNode,
theAction)
- Parameters:
theSourceNode theSourceNode:XMLNode - The selected node. theTargetNode theTargetNode:XMLNode - The target node. theAction theAction:String - The current drag operation or pastePosition. This can be PASTE_INTO, PASTE_AFTER or PASTE_BEFORE. - Returns:Boolean
- Usage:myInstance.permitDropFunction = userFunctionName;
- Example:The example below prevents a user from pasting the copied node into a leaf node.
theTree.permitDropFunction = function (theSourceNode, theTargetNode, theAction) { if (theTree.getIsLeaf(theSourceNode)) { if (theAction==theTree.PASTE_INTO) { return false; } } return true; }
permitOpen
- Parameters:
theNode theNode:XMLNode - The selected node - Returns:Boolean
- Usage:myInstance.permitOpen = function(theNode) {};
- Example:The example below prevents a user from opening branch.
theTree.permitOpen = function (theNode) { if (this.getIsBranch(theNode)) { return false; } return true; } - See also:
permitOpenClose
bOpen)
- Overrides:
- Parameters:
theNode theNode:XMLNode - The selected node bOpen bOpen:Boolean - Refers to the method being called on the node. If true then the node is trying to be opened. If false then the node is trying to be closed. - Returns:Boolean
- Usage:myInstance.permitOpenClose = function(theNode, bOpen) {};
- Example:The example below prevents a user from closing branch nodes.
theTree.permitOpenClose = function (theNode, bOpen) { if (this.getIsBranch(theNode) && bOpen==false) { return false; } return true; } - See also:
permitRemove
menuItem,
menuCaption,
eventType,
cellIndex)
- Parameters:
obj Object - The tree. menuItem Object - The menuItem. menuCaption String - The caption of the menu item. eventType String - The current event operation. This can be REMOVE_ITEM or CUT_ITEM. cellIndex - Returns:Boolean Returns false to prevent cut or remove. Return true to continue cut or remove.
- Usage:myInstance.permitRemove = someFunction;
- Example:The example prompts the user before removing the selected item.
// import the alert contol - add to the library import mx.controls.Alert; // prompt user on remove event theTree.permitRemove = function (theTree, menuItem, menuCaption, eventType) { // BE CAREFUL of SCOPE ISSUES HERE - check your references are correct var itemLabel = theTree.selectedItem.label; var eventName = "cut"; var output = ""; // check if this is a remove event if (eventType == theTree.REMOVE_ITEM) { eventName = "remove"; } myClickHandler = function (evt) { if (evt.detail == Alert.OK) { theTree.cutNode(theTree.selectedItems, theTree.MENU_EVENT, eventType); } } output = "Are you sure you want to " + eventName + " " + itemLabel + "?"; var myAlert = Alert.show(output, "Confirm File Delete", Alert.OK | Alert.CANCEL, this, myClickHandler, "stockIcon", Alert.OK); return false; } - See also:
permitRename
- Parameters:
theSourceNode theSourceNode:XMLNode - The selected node - Returns:Boolean Return true to show rename text field. Return false to not show rename text field.
- Usage:myInstance.permitRename = function(theSourceNode) {};
- Example:The example below hides the rename text field on branch nodes.
theTree.permitRename = function (theSourceNode) { // check if the node is a branch node if (theTree.getIsBranch(theSourceNode)) { // if it is then do not show the rename text field return false; } return true; } - See also:
removeClipboardItems
renameFunction
eventSource)
- Parameters:
rowIndex Number - The row index eventSource Number - The event source. Either a MENU_EVENT or METHOD_CALL. Optional - Usage:myInstance.renameFunction = function(row,eventSource) {};
- Example:The code below is the default code
// The code below is the default code function renameFunction (rowIndex, eventSource) { // show the rename textfield showRenameNode(rowIndex, eventSource); }
setHorizontalScroll
setHorizontalScrollLater
setNodeLabel
labelText: String): String
- Parameters:
theNode - The node that is being renamed. labelText - Optional. The new text for the label. Only optional if the labelFunction is defined. - Returns:String. A string of the new label text.
- Usage:myInstance.setNodeLabel(theSourceNode, labelText);
- Example:The example below sets the text of the node to "My new label".
theTree.setNodeLabel(theTree.selectedNode, labelText)
// setNodeLabel function defined public function setNodeLabel (theNode:XMLNode, labelText:String):String { var nodeLabel:String; // if a label function exists then set the text to display if (labelField != undefined) { // if an label field exists then set the label for that theNode.attributes[labelField] = labelText; nodeLabel = labelText; } else { // labelField is not set theNode.attributes.label = labelText; nodeLabel = labelText; } return nodeLabel; }
showRenameNode
eventSource)
- Parameters:
rowIndex Relative row index. The selectedIndex, lastOver, lastOverIndex and vPosition are useful in finding the row. eventSource Menu item event or double click event. - Example:
// shows the rename text field on the first visible row theTree.showRenameNode(0);
- See also:
toolTipFunction
- Parameters:
row_mc Row that contains the textfield that is used as the tooltip - Example:This is the code of the tooltip funciton
function toolTipFunction(row_mc) { // determine if we are using a cell renderer by checking if cell has the renameField or a textfield we know exists in our cellrenderer var bCellRenderer:Boolean = (row_mc.cll.renameField != undefined) ? true : false; // get a reference to the row label - you may need to point this to your textfield var rowLabel = (bCellRenderer) ? row_mc.cll.renameField : row_mc.cll; // set selectable to false to prevent text cursor rowLabel.selectable = false; // set border color, border and background rowLabel.setStyle("borderColor",0xD5DDDD); rowLabel.border = true; rowLabel.background = true; // some properties i've turned off but could be enabled //rowLabel.autoSize = "left"; //rowLabel.wordWrap = true; //rowLabel.multiline = true; // autosize text field rowLabel.autoSize = "center"; // snap cell (label) to the left edge of the row which is positioned next to the mouse row_mc.cell._x = 0; }
validateNodeLabel
renameTextField: TextField): Boolean
- Parameters:
newText newText:String - The node or nodes that will be inserted into the tree. renameTextField - The location by node of where to insert the source nodes. - Returns:Boolean - True allows the node label to be renamed. False cancels the changes, enters the original value and highlights the text.
- Example:The example below creates a user defined validation called when a user renames a node.
theTree.validateNodeLabel = function(newText, renameTextField) { // check if new text user entered is blank. this is the default code of this function if (newText=="") { trace("label is blank!!! ahhh run away!!!"); // restore original text renameTextField.text = renameTextField.orgText; // reselect text and cancel commit Selection.setSelection(0, renameTextField.length); return false; } else { // new text is not blank. allow rename return true; } }
- dndTree.as, Last Modified: 6/14/2006 11:15:20 PM