Flex :: Change The Appearance Of Nodes In A Tree Control Using An Extended TreeItemRenderer?
Nov 4, 2009
I'm using a tree control that I want to customize. The data items in the tree's dataProvider have a property name that should be used for labeling the node, and a property type that should be used to select one of several embedded images for use as an icon. The simplest way to do this is by using the labelField and iconFunction properties.
However, I wanted to get started with item renderers and open the door for adding more complex customization later, so I tried making my own item renderer. I extended the TreeItemRenderer class as follows and used it in my tree control:
class DirectoryItemRenderer extends TreeItemRenderer
{
[Embed("assets/directory/DefaultIcon.png")]
private static var _DEFAULT_ICON:Class;
[Code]....
This code has no effect whatsoever, icon and label in the tree control remain at their defaults. Using trace(), I verified that my code is actually executed.
For those unfamiliar with tree structures, tree structures are usually dynamic lists where every node has a pointer to two other nodes. They are arranged so it makes for faster searching and stuff and are very useful in programming languages that offer direct access to heap memory. Although I don't know if there would be benefits of making tree structures in AS would be of any help but I decided to have a go at it anyway. Since there are no pointers in flash I tried to just replace pointers to nodes with nodes themselves. Such things usually work in java I think because the language just automatically makes pointers for variables.
How do I get a Flex tree to display only specific XML nodes?
A sample of the XML data is below. Only the Grouper and Product elements should be displayed as branch and leaf nodes respectively; the Name elements should not be displayed. I can't use XSL or e4x to modify the XML as the Name elements' text is used as the label for the Grouper and Product tree nodes. Also, I cannot move the Name element to be an attribute as it needs to include a CDATA section.
It looks like using a custom TreeDataDescriptor is the way forward but I cannot find any examples of using one with XML.
I have a basic Tree built in Flex. The Tree works fine. I'm attempting to get a list of all of the visible nodes. I know there is a Tree.openItems, but that does not suffice because (for example) if you open all the items in your tree and then close the root, the invisible opened items are still counted.
private function openAllNodes(event:TimerEvent):void { //Alert.show(event.target.currentCount); var index:int =event.target.currentCount - 1;
[Code]....
In my project I want to show the video like growing flex tree. So I tried flex timer based to expand node one by one. But if I open the first node then automatically close second time. If there is any other way to expand nodes one by one then let me know.
I'm having difficulty getting checkboxes on only the leaf nodes of a tree.Before anyone links it, I've seen [URL] and this isn't exactly what I need. I don't want a 3-state checkbox system including both branch and leaf.I understand applying the checkbox item renderer to a data grid but not on a tree.
I'm using the iconField property of the Flex Tree to dynamically set the icon that a node should use. This works fine for leaf nodes but for branch nodes it doesn't seem to respect my iconField and instead just shows the default folder node.
I've spend hours searching for a way to put one paragraph of text in one tree node in Adobe flex. How can I do it? I created a simple tree view but the text is cut after the right border.
So I tried to create a tree renderer. In the renderer I specified width=100 and the text wrapped. But the height of the nodes was not being calculated properly, so the text over consecutive nodes overlapped and got messed.
working with flex 4 and implementing filtering using ITreeDataDescriptor.Filtering worked as expected like the following code snippet however, i am trying to create a on-demand type of filter where user would type in the search clause in a TextInput, and as the user types, the tree nodes would be filtered on the fly.my implementation now is have user click on the search button and then reapply the dataDescriptor then reload the data. A big problem is that the whole tree collapses after setting the dataProvider again.any suggestion on how the on-demand filter can be achieved?
var dataFilter:ServicePricingFilter = new MyFilter(); dataFilter.searchString = this.txtSearchKeyword.text; this.treeService.dataDescriptor = new MyDataDescriptor(dataFilter);
That is I want to hide the contact_person and list nodes.Deleting the nodes from the dataprovider cannot be done.So what i did was to create a custom tree data descriptor by extending DefaultDataDescriptor.Then override the getChildren method and applied a filterfunction to the collection returned by super.getChildren.The problem is when i hide the 'list' node I cannot have the child nodes to show up.So is there any way I can hide 'list' but show the children of 'node'?
I am currently developing a dynamic LineChart in FLEX 4.I am implementing a Tree control next to my LineChart, which will filter the LineChart dataprovider and lineseries. The tree control has several branches and ultimately 5 children (leaf nodes) at the bottom of the last branch.I need the leaf node/children to be displayed as checkboxes inside the tree control.As I understand,this will require overrides in the TreeItemRenderer class.This is where I am a little confused on how to implement that.Currently I can distinguish between leaf and branches using this code, in my main MXML component.I added this because it may be helpful to some beginning FLEXdevelopers, such as myself, who cannot easily find this functionality documented well:
private function treeClick(e:ListEvent):void { _selectedItem = Tree(e.currentTarget).selectedItem; if(mainTree.dataDescriptor.isBranch(_selectedItem)) {[code].....
I am looking at the TreeItemRenderer override class from the following example here: In the example, they override the "createChildden" super function to add checkboxes to the tree control.My question is, can I override the createChildren function directly in my MXML component, and not have to use an entire class file to override this functionality? Must I re-invent the wheel to do this?Also, how can I distinguish that my treeItem is a leaf node and not a parent, in the override function? I only want to add checkboxes to the leaf nodes, how can I differentiate? The following example adds checkboxes to all branches and leaf nodes, but I want to add checkboxes only to leaf node/children. How would you approach that?
override protected function createChildren( ): void { super.createChildren( );[code]............
Im trying to populate a tree control with an external xml file brought in via arraycollection but i need to group the xml data to display in the tree Okay my external xml file is called parts.xml and it looks like this:
[Code]...
additionally what i intend is for the user to have huge tree of parts and they select a node at the partnumber level and drag an drop it on to a datagrid where all the other tags of the part gets displayed.
Ive tried and tried many things without any luck. even now im thinking maybe if i looped through the array-collection and created a new array just for the tree to get it to display the way i need it, then when the user dragged and drop a part onto the grid i would have code that would look for that part number in the original arraycollection and add it to a new array just for the datagrid... i still dont know how i would create that new array for the tree!! cause the xml data is grouped by partgroup and then grouped again by parttype before you get the individual part numbers
I'm doing a drag and drop operation on a tree using some help from Adobe's quick Starts:[URL]
The code suggested is roughly this:
var dropTarget:Tree = Tree(evt.currentTarget); var i:int = dropTarget.calculateDropIndex(evt); myTree.selectedIndex = i;
[Code].....
EDIT: I forgot to post that my current workaround is setting the selectedIndex = -1 after I get my node:XML. I'm afraid that if something bogs on the processor the user may see it select then deselect.
I have a tree control and I want to give the user the ability that he can move up and down the element he just selected with a up and a downbutton. The tree gets generated from XML. I managed to insert the selected item a second time at a other place, with the following code:
var parentXML:XML = XML(containerTree.selectedItem).parent(); var upperItem:XML = topContainer.source[containerTree.selectedIndex-1]; parentXML.insertChildBefore(upperItem,XML(containerTree.selectedItem));
but then I have the item there twice in the List. How can I remove to reinsert it?
I have a Tree Control on which I let user add some nodes. When a node gets added I want to let the user edit the added control right away. How do I get the itemEditorInstance of a just added xml node?
Does anyone know of a way to specify different vertical gaps between siblings in a Tree? I want to child nodes spaced tighter together (maybe 10px) while the top level parents remain spaced further apart (20px). Essentially, I need to change the gap dynamically based upon the depth of the node, but I'm not sure if the Tree class (or the List class, which Tree extends) offers this type of functionality.
I am having some trouble with the flex Tree control.I have a control in my system and of course it is data driven.I have a group which shows a folder icon and that's fine but it also shows an expand icon when the item has no children.I don't what it to show the expand icon when the group has no children but I do want to show the folder icon, because it is different entities in my system.
I've created an mxml page that displays a tree control, however the data is only being displayed as branches. Even items that are leaves are being displayed as branches. <mx:Script> <![CDATA[ import mx.collections.ArrayCollection; public function init():void { var item:Object; var array:Array = new Array(); [Code] .....
just facing a difficulty with tree control drag drop..Suppose i have tree with drag-drop enabled.I want to which node(id) is droped inside which node. 1]if i drag "Cat1" node inside "Cat3",i want to identify ids of siblings of "cat1",and "cat3".2]in general i want to know the ids of current element being moved along withits new parent and new position and save these postions.3] Also "cat4" when moved outside "cat3",i want know its position and its siblings id.
I'm trying to modifty the Flex Tree control to allow a user to select multiple items by just clicking each of the desired elements (ie I don't want them to have to press Ctrl or Shift). If the user clicks a selected item a 2nd time, it will deselect it.
I have a Tree Control inside my Flex Application which I want to edit on a doubleclick on a tree item. I found the properties doubleClickEnabled= "true", doubleClick="startEditMode()", and editable="true". With these functions I can detect a double click and I can change the editable property to true based on a double click. The problem is that after I double clicked on a Item i have to click once more to really enter the edit mode. That doesn't seem to be intuitive at all..
I'm trying to populate a mx:tree component with values that I'm getting from BlazeDS. The returned data from BlazeDS is fine it's an ArrayCollection of Folder value objects.I've been instructed to use Cairngorm for this project. I'm pretty new to Flex and Cairngorm. According to the limited documentation that I've read online I should populate the model with data so I've stuck the array collection there.What I'm stuck with is trying to update the tree component. I feel that I need some way to notify the container component for the tree that the data (i.e. the subfolders) is available on the model. I was hoping that it would be possible to fire a function in the container component to add the subfolders as children of the selected node (I could chuck this on the model before the remote object call I guess) then fire tree.invalidateList() and tree.validateNow(). Any ideas?
I have this button and on this button I have the following AS. It works just the way it is suppose to (miracles really do happen), but now how do I control where the loaded movie appears on the screen? Code: on (release) { loadMovieNum("E:\FLASHMX docs\flashTips\bushbug.swf", 1); }
The problem is that a cannot acces the nodes in the tree using AS3 syntax. My guess is that the problem is nhe namespacing that is making it impossible. I have been sitting for hours trying to set namespaces or removing them, but i just cant get this to work. I can load the XML, but as soon as i try to walk down the tree i get no data output. Here is my actionscript so far:
var myNamespace:Namespace = new Namespace( "http://www.w3.org/2001/XMLSchema-instance" ); default xml namespace = myNamespace; var xmlLoaderAvdelningar:URLLoader = new URLLoader();
[code].....
there is no way for me to acces one of the nodes in the tree and trace the data. To me the namespacing in the XML is very confusing, and i have no experience working with this kind of XML
I have a Tree component that's used as a navigation menu between different 'pages'. When the user clicks a certain option in the menu, I switch the 'page' by switching between State components in my application. The thing is that when the user indeed clicks an option in the menu, I want to perform a validation of some of the information in a certain component. If the validation fails, I show an alert, and I'd like to prevent the navigation to the other page. One part of this is simply not changing the currentState of the document, but the tree component still goes on with the change event, and the result is page A still being shown on the screen, whereas the selected option in the tree is page B (to which the user wanted to navigate, but failed since some of the information wasn't valid).
I tried to figure out how I can cancel the change event on the tree component itself. The thoughts I had didn't quite fit nicely:
I searched for a slightly different event (such as 'changing' or 'startChange') on which I can call the stopPropagation() method (since the regular 'change' event is not cancelable), but none exists for the Tree component.
I also thought about always saving the current option that's selected in the Tree component by myself, and when the validation fails, I will set the Tree's selectedItem to that saved option. That's also ugly because such an action will raise another change event on the Tree, thus another change to the States components, and another population of the page in which I'm already at. That's something I really don't want to do.
I also though about using a different component, such as Menu (and I also found an implementation of a vertical Menu), but that doesn't even seem to help. The same problem will exist there.
There must be a best-practice for preventing a change process to commit!
I have a Flex tree control that holds a tree full of various types of objects. I'd like to change the label of the item based on this type (and other properties). I'd prefer to do this in a custom TreeItemRenderer rather than via label or labelfunction.It seems that whatever I do, I cannot typecheck nor cast the objects and thus I get [Object object] in the nodes of my tree. Here is my renderer:
public class MyCustomTreeItemRenderer extends TreeItemRenderer { // Overriding to set the text for each tree node. override protected function updateDisplayList(unscaledWidth:Number,
