6 Replies Latest reply on Mar 28, 2008 11:06 AM by ericbelair

    Display Tree Structure with Button Renderers

    ericbelair Level 1
      Ok, so here's what I'm trying to do:

      I have a flat Array Collection of data from a CF Query Result. Something like this:

      CATNAMETXT SUBCATNAMETXT REPORTNAMETXT
      ------------------------------ ------------------------------ ----------------------------
      Main Custom Rpt 1
      Main Custom Rpt 2
      Main Template Rpt 3
      Main Template Rpt 4
      Main Template Rpt 5
      Other Canned Rpt 6
      Other Canned Rpt 7
      Other Canned Rpt 8


      I want to display this data in a Tree structure, with the bottom-most node in the tree displayed as a Button:

      - Main
      - Custom
      (Rpt 1)
      (Rpt 2)
      - Template
      (Rpt 3)
      ...


      I am using an AdvancedDataGrid component with one column, because I could not figure out a way to get the button item renderer to work with the Tree component.

      I am converting the Array Collection to a Hierarchical Data Object, placing the value of each column in a new Object property, and using that property as the dataField for the ADG Column. This works for smaller sets of data, but, when I use this with a larger set of data, weird things start happening. Basically, when I open a node, the data is displayed correctly. However, if I open another node, it seems to "borrow" the data from the first node. Then, if there are a large amount of nodes in the open node, and I scroll down, the button nodes shift around - the node at teh top of the list suddenly moves to the middle, then it moves again, as I scroll.

      Does anyone have any suggestions for me? I'm willing to completely redesign this to make it work. Please help.

      Thank you.

        • 1. Display Tree Structure with Button Renderers
          ericbelair Level 1
          I really need help with this....

          This is what the ArrayCollection looks like before I create the HierarchicalData Object from it:

          NAMETXT: 'Main', children:
          ---{[NAMETXT: 'Custom', children:
          ------{
          ------[NAMETXT: 'Rpt1', NAMETXT: 'Rpt2']
          ------}
          ---]}

          Thank you.
          • 2. Re: Display Tree Structure with Button Renderers
            ntsiii Level 3
            First, is your ArrayCollection nested? That appears to be what you are showing above. Which is not what you said in the first post.

            Also, I do not understand the display you are trying to acheive. Can you explain again?

            Item renderers must be entirely data driven. Do yours override the set data function?

            The problem you describe sounds like the result of not properly handling the renderer recycling. If you do not know what that means, google "Alex Harui itemRenderer recycle"

            Tracy
            • 3. Re: Display Tree Structure with Button Renderers
              ericbelair Level 1
              The original Array Collection is flat, since it is the result of a SQL Query. I then convert it to a nested Array Collection, as shown in my second post above, in order to make a Hierarchical Data Object.

              FYI, I am seeing weird things happen simply by opening and closing one node - it appears that the items re-order themselves each time.

              My item renderer is an MXML component. Here are the contents of that component:

              <?xml version="1.0" encoding="utf-8"?>
              <mx:HBox xmlns:mx=" http://www.adobe.com/2006/mxml" width="100%" height="100%" paddingLeft="30" creationComplete="init();">
              <mx:Script>
              <![CDATA[
              // Handler for Component's Creation Complete event
              private function init():void
              {
              // Create a Data Provider for the Button Bar, as an Array with the Object's Name property and "Edit Report" as the Button Labels
              buttonBar.dataProvider = [data.NAMETXT, "Edit Report"];

              // Update the display of the Button Bar
              buttonBar.validateNow();
              }

              ]]>
              </mx:Script>

              <mx:ButtonBar id="buttonBar"
              width="100%"
              height="100%"
              horizontalAlign="left"
              />
              </mx:HBox>
              • 4. Re: Display Tree Structure with Button Renderers
                ericbelair Level 1
                Nevermind, after reading your post again, I realized what was wrong. I WAS NOT using an override set data function. I do this in another item renderer in my app, so I basically copied that logic into this item renderer and removed the creationComplete listener and handler. Works like a charm now (though it seems a little slow when rendering)!

                Thanks!
                • 5. Re: Display Tree Structure with Button Renderers
                  ntsiii Level 3
                  Regarding performance:

                  Using a container as a renderer is a simple solution, but it tends to be very "heavy". In your case, you do not need an HBox container since you are not using any of that container's layout functionality.

                  Best practice is to extend UIComponent. Now, this is a bit harder to code, but if you are seeing rendering performance issues, and it matters, you will see an amazing difference in performace if you do this.

                  See the "More Thinking About Item Renderers" at this blog:
                  http://blogs.adobe.com/aharui/item_renderers/

                  Tracy
                  • 6. Re: Display Tree Structure with Button Renderers
                    ericbelair Level 1
                    Thanks for the suggestion Tracy. I'm now working on moving my MXML item renderer components to AS Classes, as well as dropping the containers from the renderers, and i'm liking it very much. I'm so new to OO programming, so this is a learning experience, but i feel like i'm finally starting to grasp how OO works.