4 Replies Latest reply on Jun 8, 2010 12:01 AM by BhaskerChari

    Differentiating between similar XML elements in Flex.

    MoreGart111

      Please look at the code below and run it using FlexBuilder. Expand the tree items called "Inbox" and "Outbox".  Please notice that there are two blank leaf nodes under Inbox and Outbox. Select "Inbox" which enables the "TEST" botton. Now click "TEST"  button. This selects both leaf nodes. Can anyone explain how can I force it to select just the one under "Inbox".

       

       

      <?xml version="1.0" encoding="utf-8"?>

      <!-- Tree control example. -->

      <mx:Application

       

      xmlns:mx="http://www.adobe.com/2006/mxml">

       

       

       

      <mx:Script>

      <![CDATA[

       

       

      import mx.events.ListEvent;

       

      import mx.controls.Alert;

      [

      Bindable]

       

      public var selectedNode:XML;

       

       

      // Event handler for the Tree control change event.

       

       

      public function treeChanged(event:Event):void {

      selectedNode=Tree(event.target).selectedItem

      as XML;

      }

       

      public function doProcess():void{

       

       

       

      var xmlListTree:XMLList = XML(myTree.selectedItem).children();

       

      for(var iElem:int = 0; iElem < xmlListTree.length(); iElem++){

       

      if(XML(xmlListTree[iElem]).@label == "")

      {

      myTree.selectedItem = xmlListTree[iElem];

       

      }

      }

      }

       

      ]]>

       

      </mx:Script>

       

       

      <mx:XMLList id="treeData">

       

      <node label="Mail Box">

       

      <node label="Inbox">

       

      <node label="Marketing"/>

       

      <node label="Product Management"/>

       

      <node label=""/>

       

      </node>

       

      <node label="Outbox">

       

      <node label="Professional"/>

       

      <node label=""/>

       

      </node>

       

      <node label="Spam"/>

       

      <node label="Sent"/>

       

      </node>

       

      </mx:XMLList>

       

       

      <mx:Panel title="Tree Control Example" height="75%" width="75%"

      paddingTop="

      10" paddingLeft="10" paddingRight="10" paddingBottom="10">

       

       

      <mx:Label width="100%" color="blue"

      text="

      Select a node in the Tree control."/>

       

       

      <mx:HDividedBox width="100%" height="100%">

       

      <mx:Tree id="myTree" width="50%" height="100%" labelField="@label"

      showRoot="

      false" dataProvider="{treeData}" change="treeChanged(event)"/>

       

      <mx:Button label="TEST" enabled="{myTree.selectedItem != null}" click="doProcess()"/>

       

       

      </mx:HDividedBox>

       

       

      </mx:Panel>

      </mx:Application>

        • 1. Re: Differentiating between similar XML elements in Flex.
          meshgraphics Level 2

          Your XMLList looks wonky

          .  My understanding of it is that XMLL

          ist is 2D matrix.  There is no hierarchy (drop-down).  I would try the XML node in hard coded form, like:

           

          var employees:XML =
                          <employees>
                              <employee ssn="123-123-1234">
                                  <name first="John" last="Doe"/>
                                  <address>
                                      <street>11 Main St.</street>
                                      <city>San Francisco</city>
                                      <state>CA</state>
                                      <zip>98765</zip>
                                  </address>
                              </employee>
                              <employee ssn="789-789-7890">
                                  <name first="Mary" last="Roe"/>
                                  <address>
                                      <street>99 Broad St.</street>
                                      <city>Newton</city>
                                      <state>MA</state>
                                      <zip>01234</zip>
                                  </address>
                              </employee>
                          </employees>;

          • 2. Re: Differentiating between similar XML elements in Flex.
            MoreGart111 Level 1

            Thank you. I tried changing XMLList to XML but I get the same result. Below is my new Code.

             

             

            <?xml version="1.0" encoding="utf-8"?>

            <!-- Tree control example. -->

            <mx:Application

             

            xmlns:mx="http://www.adobe.com/2006/mxml">

             

             

             

            <mx:Script>

            <![CDATA[

             

             

            import mx.events.ListEvent;

             

            import mx.controls.Alert;

            [

            Bindable]

             

            public var selectedNode:XML;

             

             

            // Event handler for the Tree control change event.

             

             

            public function treeChanged(event:Event):void {

            selectedNode=Tree(event.target).selectedItem

            as XML;

            }

             

            public function doProcess():void{

             

            var xmlListTree:XMLList = XML(myTree.selectedItem).children();

             

             

            for(var iElem:int = 0; iElem < xmlListTree.length(); iElem++){

             

            if(XML(xmlListTree[iElem]).@label == "")

            {

            myTree.selectedItem = XML(xmlListTree[iElem]);

            }

            }

            }

            ]]>

             

            </mx:Script>

             

             

             

            <mx:XML id="treeData">

            <node label="Mail Box">

            <node label="Inbox">

            <node label="Marketing"/>

            <node label="Product Management"/>

            <node label=""/>

            </node>

            <node label="Outbox">

            <node label="Professional"/>

            <node label=""/>

            </node>

            <node label="Spam"/>

            <node label="Sent"/>

            </node>

             

             

            </mx:XML>

             

             

             

             

             

             

             

             

            <mx:Panel title="Tree Control Example" height="75%" width="75%"

            paddingTop="

            10" paddingLeft="10" paddingRight="10" paddingBottom="10">

             

             

             

            <mx:Label width="100%" color="blue"

            text="

            Select a node in the Tree control."/>

             

             

             

            <mx:HDividedBox width="100%" height="100%">

             

             

            <mx:Tree id="myTree" width="50%" height="100%" labelField="@label"

            showRoot="

            false" dataProvider="{treeData}" change="treeChanged(event)"/>

             

            <mx:Button label="TEST" enabled="{myTree.selectedItem != null}" click="doProcess()"/>

             

             

            </mx:HDividedBox>

             

             

            </mx:Panel>

            </mx:Application>

            • 3. Re: Differentiating between similar XML elements in Flex.
              BhaskerChari Level 4

              Hi MoreGart,

               

              Below is the working code for your Application:

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
              <mx:Script>
              <![CDATA[
                import mx.events.ListEvent;
                import mx.controls.Alert;
                [Bindable]
                public var selectedNode:XML;
                // Event handler for the Tree control change event.
               
                public function treeChanged(event:Event):void {
                 selectedNode=Tree(event.target).selectedItem as XML;
                }
                public function doProcess():void{
                 var xmlListTree:XMLList = XML(myTree.selectedItem).children();
                 for(var iElem:int = 0; iElem < xmlListTree.length(); iElem++){
                  if(XML(xmlListTree[iElem]).@label == "")
                  {
                   myTree.selectedIndex = myTree.selectedIndex + iElem + 1;
                  }
                 }
                }
              ]]>
              </mx:Script>

              <mx:XML id="treeData">
                <node label="Mail Box">
                 <node label="Inbox">
                  <node label="Marketing"/>
                  <node label="Product Management"/>
                  <node label=""/>
                 </node>
                 <node label="Outbox">
                  <node label="Professional"/>
                  <node label=""/>
                 </node>
                 <node label="Spam"/>
                 <node label="Sent"/>
                </node>
              </mx:XML>

              <mx:Panel title="Tree Control Example" height="75%" width="75%"
              paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
              <mx:Label width="100%" color="blue"
              text="Select a node in the Tree control."/>
              <mx:HDividedBox width="100%" height="100%">
              <mx:Tree id="myTree" width="50%" height="100%" labelField="@label"
              showRoot="false" dataProvider="{treeData}" change="treeChanged(event)"/>
              <mx:Button label="TEST" enabled="{myTree.selectedItem != null}" click="doProcess()"/>
              </mx:HDividedBox> 
              </mx:Panel>

              </mx:Application>

              If this post answers your question or helps, please kindly mark it as such.


              Thanks,

              Bhasker Chari

              • 4. Re: Differentiating between similar XML elements in Flex.
                BhaskerChari Level 4

                Hi MoreGart,

                 

                There is one small bug in the previous code...where if you select the first item Inbox without opening the items and click then the wrong item is getting selected.

                 

                I have resolved that bug also ..so here is the total working code:

                 

                <?xml version="1.0" encoding="utf-8"?>
                <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
                <mx:Script>
                <![CDATA[
                  import mx.events.ListEvent;
                  import mx.controls.Alert;
                  [Bindable]
                  public var selectedNode:XML;
                  // Event handler for the Tree control change event.
                 
                  public function treeChanged(event:Event):void {
                   selectedNode=Tree(event.target).selectedItem as XML;
                  }
                  public function doProcess():void{
                   var xmlListTree:XMLList = XML(myTree.selectedItem).children();
                   var selectedItemLabel:String = myTree.selectedItem.@label;
                  
                   for(var iElem:int = 0; iElem < xmlListTree.length(); iElem++){
                    if(XML(xmlListTree[iElem]).@label == "")
                    {
                     var arrOpenItems:Object = myTree.openItems;
                     var isSelectedItemOpen:Boolean = false;
                    
                     for each(var objOpenItems:Object in arrOpenItems)
                     {
                      if(selectedItemLabel == objOpenItems.@label)
                      {
                       isSelectedItemOpen = true;
                      }
                     }
                    
                     if(isSelectedItemOpen)
                     {
                      myTree.selectedIndex = myTree.selectedIndex + iElem + 1;
                     }
                    }
                   }
                  }
                ]]>
                </mx:Script>

                <mx:XML id="treeData">
                  <node label="Mail Box">
                   <node label="Inbox">
                    <node label="Marketing"/>
                    <node label="Product Management"/>
                    <node label=""/>
                   </node>
                   <node label="Outbox">
                    <node label="Professional"/>
                    <node label=""/>
                   </node>
                   <node label="Spam"/>
                   <node label="Sent"/>
                  </node>
                </mx:XML>

                <mx:Panel title="Tree Control Example" height="75%" width="75%"
                paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
                <mx:Label width="100%" color="blue"
                text="Select a node in the Tree control."/>
                <mx:HDividedBox width="100%" height="100%">
                <mx:Tree id="myTree" width="50%" height="100%" labelField="@label"
                showRoot="false" dataProvider="{treeData}" change="treeChanged(event)"/>
                <mx:Button label="TEST" enabled="{myTree.selectedItem != null}" click="doProcess()"/>
                </mx:HDividedBox> 
                </mx:Panel>

                </mx:Application>

                 

                If this post answers your question or helps, please kindly mark it as such.


                Thanks,

                Bhasker Chari