5 Replies Latest reply on Apr 24, 2007 1:20 AM by Source2

    complex xml in tree control

    snafu7x7
      every example you see online is trivial and utterly useless for practical programming purposes...typically you'll see something like this:

      <mx:XML format="e4x" id="myMenuModel">
      <root label="Menu">
      <menuitem label="MenuItem A">
      <menuitem label="SubMenuItem 1-A"/>
      <menuitem label="SubMenuItem 2-A" />
      </menuitem>
      <menuitem label="MenuItem B"/>
      <menuitem label="MenuItem C" type="check"/>
      <menuitem type="separator"/>
      <menuitem label="MenuItem D">
      <menuitem label="SubMenuItem 1-D" type="radio" groupName="one"/>
      <menuitem label="SubMenuItem 2-D" type="radio" groupName="one"/>
      <menuitem label="SubMenuItem 3-D" type="radio" groupName="one"/>
      </menuitem>
      </root>
      </mx:XML>

      ...just hard coded simplistic xml which is fine and dandy if you have a simple xml schema and all the leaves of your tree can be keyed off the same "label" attribute. But what if you have a complex, deeply nested XML file that doesn't follow this nice pattern? What if I want to pull different attributes from different levels in the tree to display, is that even possible? Or what if I dont want to use the attribute at all for my display label in the tree, what if I want to use an element node name? Like for example, say I had:

      <department label="marketing">
      <employee name="Eric Cartman" Age="8">
      <interest>
      <type>food</type>
      <name>cheesiepoofs</name>
      </interest>
      <interest>
      <type>pets</type>
      <name>mr. kitty</name>
      </interest>
      </employee>

      Is there a way I can build my tree to use the department 'label' attribute for the top level, the employee 'name' attribute for the second level and the <type> element nested under <interest> for the third level?

      I confess I'm a Flex newbie but any other language I've worked provides a mechanism to tailor this sort of thing to individual business cases. Any insight would be greatly appreciated.

      thank you.

      S
        • 1. Re: complex xml in tree control
          robsharma1985
          we have the same question so i am posting here so i can find this later,
          • 2. Re: complex xml in tree control
            netsesame
            I think it is impossible in current version of flex, otherwise you write a new component which subclass from Tree class, then override your own codes.
            • 3. Re: complex xml in tree control
              Source2
              In cases like these I think your immediate solution is the labelFunction. Basically for each item about to be shown the specified function is called. In this function which you create, you can return the string that you wish displayed for the label.

              As each node in the tree is about to be displayed your function is called and passed as a parameter the xml value about to be shown, including it’s children.

              Notice I don’t pass any parameters to the function “labelFunction="handleGetLabel"”. The parameter is handled by the tree internally. Have a look in the doc’s for “labelFunction” . The same type of treatment can also be had for icon display using the iconFunction and works in much the same way.

              See below example using your xml structure. Paste into a new flex project and run.

              //Begin code
              <?xml version="1.0"?>
              <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml">

              <mx:Script>
              <![CDATA[

              [Bindable]
              public var dsXml:XML = new XML(
              <root>
              <department label="marketing">
              <employee name="Eric Cartman" Age="8">
              <interest>
              <type>food</type>
              <name>cheesiepoofs</name>
              </interest>
              <interest>
              <type>pets</type>
              <name>mr. kitty</name>
              </interest>
              <interest>
              <type>games</type>
              <name>Halo 2</name>
              </interest>
              </employee>
              </department>
              </root>
              );


              private function handleGetLabel(item:Object):String
              {

              switch(item.localName())
              {
              case "department":
              return item.@label;
              case "employee":
              return item.@name;
              default:
              return item.localName();
              }

              return null;

              }


              ]]>
              </mx:Script>

              <mx:Tree id="firstList" labelFunction="handleGetLabel" height="200" width="200"
              showRoot="true" dataProvider="{dsXml.children()}" />



              </mx:Application>

              //End code

              All that said, using a label attribute as your label source provides normalization and the examples in the docs promote this.

              If your structure should change you would have to re implement the rules of label display (adding case’s to the switch etc..).

              I gather this might be what your looking for given the context of the question.

              Hope this helps.

              Jason Hawryluk
              http://flexibleexperiments.wordpress.com
              • 4. Re: complex xml in tree control
                snafu7x7 Level 1
                YES! Jason that's exactly what I was seeking, thanx a lot. Also, for others interested, to expand on your example a little. If I wanted to display the inner text of a particular sub-element the syntax is exactly as one would expect, for example:

                case "interest":
                return item.type;

                I totally appreciate how it might be 'recommended' that developers try to normalize on using the label attribute but the reality of the situation is that we often have no control over the xml we work with, its often provided by third parties and the schema can't be changed because its being used by multiple different consumers.

                I hate to harass you with questions but this is all new to me and this example brings up another point of interest with the tree. How do I suppress the display of certain nodes? Say for example I wanted to display the "type" element under interest but not the "name" attribute...I assume this is not only possible but also involves much the same mechanism.

                isItemVisible(item:Object):Boolean in the ListBase ancestor looks promising but I'm not sure how to wire this up.

                Also, I assume that just because I dont want to display items in my XML doesnt mean the data won't be available to me when they select an item. So given a node like:

                <department label="marketing" deptCode="MKT" billingNumber="12345">

                I may only wish to display the label, but if the item is selected I can still drill into the item to grab additional non-visible values.

                thanx again Jason, you've been extremely helpful.
                • 5. complex xml in tree control
                  Source2 Level 1
                  What you’ll need to do here is extend the data descriptor for the tree. Have a look in the docs for DataDescriptor, DefaultDataDescriptor, and ITreeDataDescriptor. There are few examples that accompany this documentation.

                  I’ll take the time this week to start a series of extensive tutorials and examples covering the tree control which I’ll post on my blog.

                  Seems there are more than a few people that have trouble bending this control to their will. Hopefully folks can gain some perspective from that.

                  Feel free to forward ideas for this as to what you all may be having trouble with, or what you’d be interesting in learning more about.

                  Jason [dot] hawryluk [at] 3gcomm [dot] fr

                  -jason
                  http://flexibleexperiments.wordpress.com