Flex Tree Control WITHOUT XML

Hi All,

Is it possible to load/use a flex tree control without using XML?
Is there something like tree.addChild, child[5], etc

Thanks
Pete2003Asked:
Who is Participating?
 
IqAndreasCommented:
Try and see if the attached code works.

If not, could you attach the entire project so I can properly debug it (are you using Flex Builder 3 or 4?)

If you get any errors, just post the error message, and I will track down the problems.
var aa:Array = new Array();
var aa1:Array = new Array();
var aa2:Array = new Array();

var o1:Object = new Object();
o1.label = 'Bob';

aa1.push({label:'Billy'});
aa1.push({label:'Billy1'});
aa1.push({label:'Billy2'});

aa2.push({label:'Willy'});
aa2.push({label:'Willy2'});
aa2.push({label:'Willy3'});

aa.push(o1);
aa.push({label:"Category AA1, children:aa1});
aa.push({label:"Category AA2, children:aa2});

myTree.dataProvider = aa;

Open in new window

0
 
IqAndreasCommented:
What is the exact name of the tree class you are working with?

Perhaps the language reference has some more information that can be of use to you:
http://livedocs.adobe.com/flex/3/langref/

But if you give me more information, I can hunt down the instructions on how to add items to that specific tree class.

So, do you mean generate a tree component without using MXML, or populate a tree component via ActionScript?
0
 
Pete2003Author Commented:
mx.flex.tree
http://livedocs.adobe.com/flex/3/langref/mx/controls/Tree.html

I would like to avoid using the XML completely a there will be constant content chnges together with icon changes.
0
Simple Misconfiguration =Network Vulnerability

In this technical webinar, AlgoSec will present several examples of common misconfigurations; including a basic device change, business application connectivity changes, and data center migrations. Learn best practices to protect your business from attack.

 
Pete2003Author Commented:
Also to explain further. The data will be received from a database and user input on the page so there is no clearly defined XML upfront.
0
 
IqAndreasCommented:
Do you mean the XML to populate the content of the tree?

The property for that is "dataProvider"
http://livedocs.adobe.com/flex/3/langref/mx/controls/Tree.html#dataProvider

Which (quoted from the link above) can be any of the following items:
  • A String containing valid XML text is converted to an XMLListCollection.
  • An XMLNode is converted to an XMLListCollection.
  • An XMLList is converted to an XMLListCollection.
  • Any object that implements the ICollectionView interface is cast to       an ICollectionView.
  • An Array is converted to an ArrayCollection.
  • Any other type object is wrapped in an Array with the object as its sole       entry.

This page in the language reference covers how to add items without using XML, and instead using plain Objects and Arrays. (scroll down to the "Using a custom item editor with a Tree control" part)
http://livedocs.adobe.com/flex/3/html/help.html?content=celleditor_9.html

Remember that since you are using plain Objects and Arrays, if you keep a reference to the items, you can always do thing like
arrayItem1.push( {label: "Bob Tabor", status: false, phone: "521-256-6666"} );
or
arrayItem1[3].label = "Jack Sparrow";
And it should update the Tree.

Does that page explain it well enough, or do you want me to elaborate even more on how to do it? I will also gladly modify the code to fit your current project if you give me more details.

0
 
Pete2003Author Commented:
Thanks for that ...
however if I use the array/arraycollection, 2 questions:

1) How do I add sub nodes? I have tried pushing on additional arrays at different nodes but all I get is comma delimited strings.
2) I want a different icon for each node, how would this work?

Thanks
0
 
Pete2003Author Commented:
Not to be too greedy withthe questions but also if you can tell me if the setup will allow for enabling/disabling individual items and whole branches, if so how.

Thanks
0
 
IqAndreasCommented:
For #1, could you post the code you are currently using to populate the tree, and I will see if I can fix it instead of posting a whole lot of code from scratch.

As for #2, check out the "setItemIcon()" function:
http://livedocs.adobe.com/flex/3/langref/mx/controls/Tree.html#setItemIcon%28%29
0
 
Pete2003Author Commented:
var aa:Array = new Array();
               var aa1:Array = new Array();
               var aa2:Array = new Array();
              
               var o1:Object = new Object();
               o1.label = 'Bob';
             
              aa1.push('Billy');
              aa1.push('Billy1');
              aa1.push('Billy2');
             
              aa2.push('Willy');
              aa2.push('Willy2');
              aa2.push('Willy3');
              
               aa.push(o1);
               aa.push(aa1);
               aa.push(aa2);
               myTree.dataProvider = aa;
0
 
IqAndreasCommented:
Whoops. Forgot the ending quotes on lines #16 and #17. They are supposed to read as follows:
aa.push({label:"Category AA1", children:aa1});aa.push({label:"Category AA2", children:aa2});
0
 
Pete2003Author Commented:
Perfect thanks, got everything working including icons.
The only thing outstanding is making items and branches unclickable/unselectable.

I tried clickable, status, enabled all set to false with no luck.

Thanks
0
 
IqAndreasCommented:
Hm... I searched the language reference, but couldn't find anything on it, but a quick Google search returned these pages:
http://blog.flexexamples.com/2008/01/16/preventing-specific-items-from-being-selected-in-a-flex-tree-control/
http://mxmlexamples.com/?p=460

Basically, it checks if the item that was selected is allowed to be selected. If not, it sets the current selection to null. Quite smart really. :)

Anything more you need help with?
0
 
Pete2003Author Commented:
Yeah, I have seen that page already.

The issue there is that it just unselects the node, but it does not disable it or prevent it from expanding.
I'm looking for something that would grey out the entry alltogether.

The other issue is I now found out with icons is that the main folder and arrow icons are not individually replacable, so you can set new open and close icons but they would be tree wide.
0
 
IqAndreasCommented:
To prevent it from expanding, set the children to "null".

Also, if you keep a reference to the last item that was selected, instead of just "unselecting" the current item if a "bad" item was clicked, set the current selection to whatever was selected last.

Otherwise you could just open up a new question asking if it's possible to "disable" tree items. This question is so far down on the list, it probably won't get as much attention as a new question would. Most people who followed it before have likely given up by this point. :P
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.