Tree component in Flex 4

Are there any known issues with the <mx:Tree component in Flex 4?
We have upgraded from Flex 3 builder to Flex 4 builder. Everything works except any where we have used a tree component the data is no longer showing. Has there been a change in how to populate the Tree component? We populate the tree by setting the dataProvider with an ArrayCollection.

@travr,
I'm not aware of any big known issues in mx:Tree between Flex 3.x and Flex 4.x. What problems are you seeing, and can you reproduce the issue with a simple test case (if so, please post the simple test case here and we can take a look).
This works in Flex 3.5:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:ApplicationControlBar dock="true">
        <mx:Button id="sdkVer" initialize="sdkVer.label = mx_internal::VERSION;" click="System.setClipboard(sdkVer.label);" />
    </mx:ApplicationControlBar>
    <mx:Tree id="tr" labelField="name" width="200" x="20" y="20">
        <mx:dataProvider>
            <mx:ArrayCollection>
                <mx:Object name="1. One">
                    <mx:children>
                        <mx:Object name="1.1 One" />
                        <mx:Object name="1.2 Two" />
                    </mx:children>
                </mx:Object>
                <mx:Object name="2. Two">
                    <mx:children>
                        <mx:Object name="2.1 One" />
                    </mx:children>
                </mx:Object>
            </mx:ArrayCollection>
        </mx:dataProvider>
    </mx:Tree>
</mx:Application>
And this seems to work in Flex 4.5/Hero beta:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:controlBarContent>
        <s:Button id="sdkVer" initialize="sdkVer.label = mx_internal::VERSION;" click="System.setClipboard(sdkVer.label);" />
    </s:controlBarContent>
    <mx:Tree id="tr" labelField="name" width="200" x="20" y="20">
        <mx:dataProvider>
            <s:ArrayCollection>
                <fx:Object name="1. One">
                    <fx:children>
                        <fx:Object name="1.1 One" />
                        <fx:Object name="1.2 Two" />
                    </fx:children>
                </fx:Object>
                <fx:Object name="2. Two">
                    <fx:children>
                        <fx:Object name="2.1 One" />
                    </fx:children>
                </fx:Object>
            </s:ArrayCollection>
        </mx:dataProvider>
    </mx:Tree>
</s:Application>
Peter

Similar Messages

  • Flex 2 Tree component vertical scrollbar not updating

    I am using a Tree component to hold a very large dataset. So
    instead of loading the whole tree view at once, I only load the
    first level and make webservice calls every time the user opens a
    node using the itemOpen event handler. My only problem is that the
    data shows but the scrollbar does not appear. When I close said
    folder, and reopen, then the scrollbar appears.
    How should I notify the Tree component that the data has
    changed and that it should update the scrollbar. I dont want to use
    ItemRenderer if I dont have to.
    Ive tried these but they dont work:
    m_tree.dataProvider.refresh();
    List(m_tree).invalidateDisplayList();
    List(m_tree).validateNow();
    m_tree.expandItem(m_selectedNode, true, true, true);
    Thanks

    didn't work for me, but i found something that did:
    // set the child data
    m_selectedNode.setChildren( node_xml.children() );
    // dont show it
    m_tree.expandChildrenOf(m_selectedNode, false);
    // show it w/o raising an event
    m_tree.expandItem(m_selectedNode, true, true, false);

  • Flex 4, is it possible to populate a tree component with sqlite table data?

    is it possible to populate a tree component with sqlite table data?
    If it is, how would I go about doing this?
    Thanks
    Kristin

    Hi Mustafa,
    it is true, the function can return component as type. This is more for the scenario, when you want to recognize some component based on some checks, eg.
    if(something)
    return CHECKBOX_1;
    else
    return CHECKBOX_2;
    so, the use case exists for sure. But of course the application itself is static.
    where do you see a scenario for dynamic creation of components?
    The only one component which can instantiate new components is the SplitCellContainer, and this is restricted to the drag&drop action from Fragment Bookmark Gallery. And this is again restricted to containers, as Fragment can hold containers as parent component. Of course the container content will be created/instantiated as well (I have coded example with ComponentManager in the Community SDK: Second Functional Application with SDK Components (Online Composition v.2) blog).
    As far I know there is no function in SplitCellContainer which would "simulate" the drop of a Fragment today (perhaps worth an Idea on this?). Having that - the scenario would be possible. Today, this can be made partly - but the user would need to drag&drop a prepared fragment with the component.
    Anyway, the problems will start after the creation - then it would be require to have also functions to re-position the new created component in some other container - this would be complex probably.
    Karol

  • Incremental Loading of a Tree Component

    I'm working on an explorer-type interface in Flex 2 for
    browsing a remote file repository. It's a standard split-pane
    affair with a directory tree on the left and a listing on the
    right.
    Because the entire directory tree can be rather large, I need
    to load it incrementally as the user expands nodes rather than all
    at once. I failed to find a relevant example so I wrote my own. It
    works, but I'm new to Flex and am not sure if there's an easier way
    or if there are any pitfalls to the way I did it.
    I posted my code here:
    http://xocoatl.blogspot.com/2007/01/incremental-loading-of-tree-in-flex-2.html
    Any comments here or on the blog are appreciated; I'm
    guessing that having a good example of the "right" way to do this
    will be useful to many others.
    Thanks.

    i am also using another workaround using CSS trick(inlineStyle). if #{node.children} is null, i am placing an empty 10x10 white png image file over expand icon on tree node.
    following code is nodeStamp of tree component.
    <f:facet name="nodeStamp">
      <af:group id="g1">
        <af:image source="/images/spacer.png" id="i1" inlineStyle="border: 2px solid white; position: absolute; margin-left:-14px;" rendered="#{node.children == null}"/>
        <af:commandLink text="#{node.name}" id="cl1" partialSubmit="true"/>
      </af:group>
    </f:facet>

  • Tree Component and as3

    Hello ..
    my problem is tree component and AS3 , before we hade such
    easy time with tree component in as2 but now i founded that we cant
    talk directly to tree component and we have to use API and XML ,
    well i never liked XML and before i worked with tree component
    directly and no problem but now , Flex force me to work with XML or
    API(well I don’t know what dose it mean ) and I was tiring to
    find any way to get directly to tree component in Flex2 and no
    result … so my question , do I have use XML ? Is there any
    another way to get to Tree Component ? I was looking in Flex help ,
    and I find the help content is really bad . pleas help , I get
    crazy about this problem …….
    BWY this form work terrible on my PC ….. anyone have
    same problem ?

    Use xml. Resistance is futile.
    Tracy

  • Tree Component ... getting crazy !

    So tree component is terrible , every thing is gone , trying
    all day to get directly to tree component and no result ,and there
    is no basic explanation and no examples , i tried to search in Flex
    Help Content , but I get more Cold Fusion tree help than Flex tree
    .. spend 800 dollar for flex and get CFHelp , I don’t think
    is good idea , so pleas help me , how can i add simple tree node
    with out XML , I hate XML , and i know some how we can work with
    Tree component directly though ITreeDataDescriptor , but how ..?
    In As2 it was simple and easy, now how to do this I
    don’t know and I am not only one!
    I am not a specialist in Action Script but in AS2 I never had
    a problem, and if I did, we have a lot of documentation about AS2
    and examples, but Flex trying to sell a product that not supports
    any examples and documentation... Write in search content
    ‘tree’ and you get cf tree examples and structures, but
    I don’t need cftree information, I need flex tree exemplas,
    but there is few... Working with flex all week I get more tired and
    depressed.. Any thing I trying to do is going wrong, AS2 is not
    there any more and I understand that I have to learn AS3 from
    beginning to understand it... I hate it!!!!!!
    Flex - Rich Application for users and Rich work for
    Developers!

    Eddy, chill out man.
    How can you say, "I hate XML," and really even try to learn
    Flex? Flex is based on XML, MXML is XML, any services you call
    (HTTP or WEB) are XML. I think it's time for change and time you
    picked up XML. It's actually very, very simple.
    You don't have to learn AS3 from the ground up. There are a
    lot of similarities between AS2 and AS3.
    You just need to write a simple function which goes through
    the array and converts it to xml. While I could program that for
    you, I think you could probably figure it out yourself.
    But why even bother? Using an XMLList is just as easy.
    Behold:
    <mx:XMLList id="treeData">
    <node label="Mail Box">
    <node label="Inbox">
    <node label="Marketing"/>
    <node label="Product Management"/>
    <node label="Personal"/>
    </node>
    <node label="Outbox">
    <node label="Professional"/>
    <node label="Personal"/>
    </node>
    <node label="Spam"/>
    <node label="Sent"/>
    </node>
    </mx:XMLList>
    XML is composed of parents and children. You can do much more
    with XML than you can with plain old arrays, plus, when's the last
    time you saw a 10-tiered multi-dimensional array? It's not possible
    to do something like that without XML.
    Over and out - Taka.

  • Tree component customization

    Hi all,
    I'm new to flex and having a hard time figuring out the best way to approach the following problem (in Flex context, _not_ AIR):
    I need a tree representation of some hierarchical/composite data structures as depicted below (for those familiar with XMLSpy, the diagram is similar to the XSD tree structure diagrams):                                                                                     |-------------|
                                                                                         | Child       |
                                                                                         | child info  |
                                          |------------------|                           |-------------|
                                       |--| Child            |--------- Choice (x) ------|
                                       |  | Child Info      (x)                          |-------------|
                                       |  --------------------                           | Child       |
                                       |                                                 | child info  |
    ---------------                    |  |------------------|                           |-------------|
    | Parent      |------ Sequence (x)-|--| Child            |
    | Parent Info (x)                  |   | Child Info     (x)
    ---------------                    |   --------------------
                                       |
                                       |  |------------------|
                                       |--| Child            |
                                          | Child Info      (x)
    The (x) in the picture are the collapse/expand buttons.
    What would be the best way to approach this project ?
    - Is it a customization of the standard Tree component + custom Tree Item Renderer ?
    - The nodes should be expandable/collapsible + selectable (additional information to be displayed on selection of node without expand/collapse effect)
    - For the nodes would it make sense to derive them from the ToggleButton ? (and what would be the most sensefull way of introducing the second line on the button ? Or just building a proper graphical component for it (derived from Group)?
    - What is the most effective way to deal with the balancing of the tree in such a way that subtrees move out of the way/in place on expand resp. collapse of nodes ? (through (H/V)groups ?)
    - What would be the most efficient way to deal with the connectors between nodes ?
    - dataprovider would be an XML structure - what is the best place to put the building algo ? (Every node know how to create itself and the first level children ? Or a tree traverse on the XML structure, building all components in one go ?)
    Any advice/thoughts/references are welcome !
    Thanks in advance,
    Best regards,
    Bart

    Sorry for the "text picture" - if you copy/paste it in word (with courier new font
    ), the picture becomes clear ;-)

  • Tree Component Drag and Drop

    Hi, I've been playing around with a trail version of flex and
    was interested to know if anybody had tried to implement the drag
    and drop functionality of the Tree component to a TileList? After
    much messing about I noticed the format of the Tree data in the
    DragSource was different to that of other lists. I've tried
    overriding the addDragData method to see if I can change the format
    of the data although this seems to cause problems when the Drag
    complete event is triggered. Any ideas or help would be
    appreciated.

    Hey, Thanks for the reply. Yes this appears to work although
    it took a bit of messing around and I still had to override the
    dragCompleteHandler method of the Tree component to get the tree
    view to update. One issue I do have (This appears to be an issue
    with the tree component) is as you drag and drop files across from
    one tree to another, when you remove the last child node the parent
    node which has a folder icon changes to a document icon. Is there a
    way around this?

  • Styling a tree component

    Hi!
    I would like to customize a tree component so that "nodes"
    actually look like buttons.
    i tried exporting the style and edit with flash, but that way
    I can only edit the tree icons...
    what I want is the Name of my node appearing inside of the
    icon so that if i make the icon wide and look like a button, the
    text should not be beside it....if i make any sense here..
    maybe there's a way to use another component?
    i only want one level below the node, so i could use an
    Accordion but it doesn't work for empty containers (Canvas), it
    always slides down a bit , even if you set the canvas' width and
    height to 0 and the accordion to resizeToContent..
    i hope i'm not too confusing and that someone can help me :)
    cheers

    Some people have adapted the tree control to make Treemaps.
    Maybe that could help you
    http://www.zeuslabs.us/2006/12/25/flex-treemap-subversion-download/

  • Save last selected and state for Tree Component?

    I have a Tree component that refreshes its data everytime I
    open the Tab containing it (doing a SQL call to return an index of
    models). The problem is that everytime the dataProvider changes (a
    new one overwrites the old one) with databinding, even if the data
    is exactly the same, it loses its old state and selected node. Is
    there any way to save this state/selected node when the
    dataProvider updates?

    good article on all aspects of trees including your issue.
    http://www.adobe.com/devnet/flex/quickstart/working_with_tree/

  • Custom icon per entry in the AS2 Tree Component (using CS3)

    I have a tree component that loads its data from an XML file and I wonder if I can customize every entry to have its own icon by adding an icon attribute to every entry in the XML and giving the tree an action to read that icon (which would exist in the library of the Flash file). My goal is to reproduce a tree within an application that my company is developing (it's for a training tool related to that application).
    My XML says something like <node label = 'Label' heading = 'LABEL' desc = 'Description' icon = 'icon1' />
    My label is what the tree displays, the heading is what the information dialog in the training tool displays as a title bar, the desc is what the training tool displays within the body of the text for the function description and the icon is what I want to be a reference to the graphic in the library to place as an icon in front of the item rather than use setStyle with the properties for disclosure, leaf, and folder icons.
    Is that possible? I haven't found a solution for it yet.

    I've never used the Tree component, so I'm just guessing here....
    There is a slight delay before the xml file loads and your tree has its data provider.
    Perhaps during that time there is no node at mTree.getTreeNodeAt(0) to open? Try adding this just before the last line of your code:
    trace("the node is: "+mTree.getTreeNodeAt(0));
    What do you get?
    You might need to move that code inside the xml's load event handler.
    Another thing is that the Flash components tend to work on an invalidate-then-wait-one-frame-to-redraw kind of model. So it is possible you will need to wait one frame after the xml has loaded and then tell it to open that node.
    The doLater method might help with that.
    var home:MovieClip=this;
    var xmlTreeData:XML = new XML();
    xmlTreeData.onLoad = function() {
    mTree.dataProvider = this.firstChild;
    mTree.doLater(home,"delay");
    xmlTreeData.ignoreWhite = true;
    xmlTreeData.load("xml/treeValues1.xml");
    mTree.setStyle("fontSize","11");
    mTree.setStyle("selectionColor","0xE0E0E0");
    mTree.setStyle("useRollOver",false);
    function delay(){ 

  • Label display issue in Tree component when it is having vertical scrollbar

    I am using tree component as dropdown factory for combo box. When i open dropdown, it doesn't have vertical scrollbar and all the root nodes are getting displayed correctly(in closed mode). Now if i try to open any node, i am getting vertical scrollbar as the child nodes are more. Now the problem is if scroll down, some of the nodes(labels) are not getting displayed but i am able to see the icon. If i keep on scrolling bottom to top and top to bottom, some of the nodes are showing labels and some are not(It is inconsistant).
    I have not used any custom item renderer for tree control. I used my custom dataDescriptor which i have implemented from ITreeDataDescriptor. Also I tried extending DefalutDataDescriptor, but no luck.

    Does it work if the tree is not in a combobox?

  • Layout issue with af:tree component

    I am using af:tree component but I am finding layout issue with it. I have a requirement where in I need the tree to stretch to the available space but a horizontal and a vertical scrollbar comes up automatically. Is there a way to handle this issue?

    User, without your jdev version it's hard to help.
    Have you embedded the tree component in a stretch layout?
    Timo

  • How to set multiple styles on a single component in flex ?

    Hi ,
    I would like to know how to set multiple styles on a single component in flex.
    Can anyone give me an example as to how to set multiple styles for a single component ?
    Thanks ,
    Regards,
    Ajantha

    Hi tuliptaurus,
    You can setStyleName property for chnaging the external css dynamically by using the setStyle() method ...
    btn.setStyle("styleName","blendButtonSkinOther");
    You can change the external css by using the styleaName property with setStyle method..the line in blue..where blendButtonSkinOther is another css class..
    blendButtonSkin {
        fontFamily: Arial;
        fontSize: 11;
        color: #F1F1F1;
        textRollOverColor: #F1F1F1;
        textSelectedColor: #F1F1F1;
        horizontal-align:center;
        width:150;
        height:30;
        cornerRadius:5;
        upSkin:ClassReference('assets.skins.BlendButtonSkin');
        downSkin:ClassReference('assets.skins.BlendButtonSkin');
        overSkin:ClassReference('assets.skins.BlendButtonSkin');
        disabledSkin:ClassReference('assets.skins.BlendButtonSkin');
        selected-up-skin: ClassReference('assets.skins.BlendButtonSkin');
        selected-down-skin: ClassReference('assets.skins.BlendButtonSkin');
        selected-over-skin: ClassReference('assets.skins.BlendButtonSkin');
    blendButtonSkinOther {
        fontFamily: Arial;
        fontSize: 11;
        color: #F1F1F1;
        textRollOverColor: #F1F1F1;
        textSelectedColor: #F1F1F1;
        horizontal-align:center;
        width:150;
        height:30;
        cornerRadius:5;
        upSkin:ClassReference('assets.skins.BlendButtonSkin');
        downSkin:ClassReference('assets.skins.BlendButtonSkin');
        overSkin:ClassReference('assets.skins.BlendButtonSkin');
        disabledSkin:ClassReference('assets.skins.BlendButtonSkin');
        selected-up-skin: ClassReference('assets.skins.BlendButtonSkin');
        selected-down-skin: ClassReference('assets.skins.BlendButtonSkin');
        selected-over-skin: ClassReference('assets.skins.BlendButtonSkin');
    Thanks,
    Bhasker Chari

  • [F8] Tree Component: How can I hide/remove the scrollbar and border?

    I'm using the Tree Component in my Flash 8 Pro - Project. I'm
    trying to customize the look of the Tree component in two ways:
    1. Is there any way to remove the scrollbar from the Tree
    Component?
    2. Can I also remove the Border from the Tree Component?
    I checked the Component Inspector and couldn't find any
    options for the scrollbar nor the border.
    Does anyone know how to do this or could you point me in the
    right direction?
    Thanks

    You can use the Status-4-Evar extension to replace some functionality that was lost withthe removal of the Status bar in Firefox 4.
    Open the Customize window via "View > Toolbars > Customize" or via "Firefox > Options > Toolbar Layout" after you have installed the Status-4-Evar extension and drag the items (Status Text, Progress Meter, Download Status) upon the Add-ons Bar (View > Toolbars > [X] Add-on Bar)
    * Status-4-Evar: https://addons.mozilla.org/firefox/addon/235283/

Maybe you are looking for

  • Can't Set CardBacks in Klondike

    I recently learned of the capability to set card backs in Klondike and tried it out Klondike then reset my statistics except for $50 something dollars and set my average as -$47 I have an iPod classic 6th gen 80GB and I know someone else had this pro

  • Batch file execution error in windows

    I am running 2 batch files . The 2nd one runs only after the execution of the 1st one. So while the 2nd one runs , i get the following error in command prompt: "The process cannot access the file because it is being used by another process."

  • How to get my authorization code

    I had my serial number and activation number,but how to get my authorization code

  • Javascript popup

    Hi everybody, I've programmed a Javascript popup (window.open ... window.document.write). This does not work in the EP running on Internet Explorer 6.0 SP 1 (no problems in my PDK). In the EP this script only open the new window, but without contents

  • After 3.0.1, ringer & key clicks stop working! HELP!

    After upgrading my 3GS yesterday, my ringer, key clicks, calendar alerts, just stopped working. I've to reset the phone but they still don't working. Vibrate feature still works when I turn down volume of ringer. Any help is appreciated. Thanks.