5 Replies Latest reply on Jan 22, 2010 6:51 PM by CrazyMerlin

    Clearly misunderstanding tree.

    CrazyMerlin

      I am trying to create a help system for a Flex app, and want to display categories, help items and a synopsis for the item along with a link to the full text, which would be loaded separately.

      I decided the best control for this would be a tree, so came up with a basic XML structure...as in the example below.

      The problem I'm having is that I can't get the tree nodes correct to display the right data, but I'm unsure of whether this shoudl be simply "plug'n'play" architecture or whether I need to do this programatically.

       

      XML Structure

      <?xml version="1.0" encoding="UTF-8"?>
      <helpitems>
           <helpcategory title="Logging In" id="1">
                <helpitem parentid="1" label="Logging In">
                     <synopsis>
                          <![CDATA[
                          This is the text that explained the item that was needed for the app that Paul built.
                          ]]>
                     </synopsis>
                     <fulltextlink>http://webtop-designs.com/infused/help/somepage.html</fulltextlink>
                </helpitem>
                <helpitem parentid="1" label="Viewing Log In Logs">
                     <synopsis>
                          <![CDATA[
                          This is the text that explained the item that was needed for the app that Paul built.
                          ]]>
                     </synopsis>
                     <fulltextlink>http://webtop-designs.com/infused/help/somepage.html</fulltextlink>
                </helpitem>
           </helpcategory>
      </helpitems>
      
      

       

      Tree Control:

      <mx:Tree width="100%" height="100%" id="treeHelp" dataProvider="{helpData}" labelField="label" />
      

       

      AS Code:

      [Bindable]
      private var helpData:XML;
      
      private function getHelpContent(evt:ResultEvent):void {
           // only get them the first time
           helpData = new XML(evt.result);
      }
      

       

       

      If anyone can help me resolve this, I'd be so grateful I'd even give you a mention in the app credits

       

      Thx

        • 1. Re: Clearly misunderstanding tree.
          msakrejda Level 4

          >I can't get the tree nodes correct to display the right data

           

          Can you be more specific? What do you want to see? What are you actually seeing?

           

          I've found that Trees in Flex are easy when they happen to do exactly what you want out of the box (which is sometimes-to-often), but a pain to work with otherwise. The ITreeDataDescriptor and ITreeDataDescriptor2 interfaces are confusing and poorly documented.

          • 2. Re: Clearly misunderstanding tree.
            CrazyMerlin Level 1

            What I'm seeing is the entire XML in the first node, and then subsequent nested nodes as folders in that.

            What I'm aiming at is:

             

            Category as folder

            |

            |__Topic as folder

            |    \__Text + Link as file

            |

            |__Another Topic

            |    \__Next item text + link

            |

            Category 2

            etc

            etc

             

            Thanks.

            • 3. Re: Clearly misunderstanding tree.
              msakrejda Level 4

              <mx:Script>
                  <![CDATA[
                      [Bindable] public var helpData:XML = <helpitems>
                   <helpcategory label="Logging In" id="1">
                        <helpitem parentid="1" label="Logging In" fulltextlink="http://webtop-designs.com/infused/help/somepage.html">
                                  This is the text that explained the item that was needed for the app that Paul built.
                        </helpitem>
                        <helpitem parentid="1" label="Viewing Log In Logs" fulltextlink="http://webtop-designs.com/infused/help/somepage.html">
                                  This is the text that explained the item that was needed for the app that Paul built.
                        </helpitem>
                   </helpcategory>
              </helpitems>;
                  ]]>
              </mx:Script>

               

                  <mx:Tree width="100%" height="100%" id="treeHelp" dataProvider="{helpData}" labelField="@label" showRoot="false"/>

               

               

              This gets you most of the way there (you need to change the XML or write a custom data descriptor). For linking to the files, in the tree's item click handler, you should have a reference to the node you clicked on. You can inspect it to find the fulltextlink and show that page.

              • 4. Re: Clearly misunderstanding tree.
                msakrejda Level 4

                By the way, I don't think you need the node ids and parentIds.


                • 5. Re: Clearly misunderstanding tree.
                  CrazyMerlin Level 1

                  Almost. It displays the category, but when I click on the category it then displays all the remaining XML.

                   

                  I wish I had more time to spend on this but really I only have a couple more days to meet my own set deadline, and I still have a little coding to do.

                   

                  Is this better done with arrays? If so I can just export to JSON from a PHP script and use a HTTPService to grab it.

                   

                  Thanks.