Flex 遍历组件的实现

       Flex有两个阵营组件：spark组件和mx组件，关于spark组件和mx组件的区别，spark组件具体有哪些？mx组件具体有哪些？大家请参考adobe的其它文档。

       本文旨在遍历容器的组件，其可以是遍历Application的所有组件，也可以遍历Group、Box中包含的组件等等。

       遍历组件需要做2件事情：

       1）区别是spark组件还是mx组件，因为spark组件和mx组件加载子元素处理方式不同，spark组件通过addElement来加载子元素，而mx则是addChild来加载子元素；

       2）区别是否为容器(container)还是普通的组件(component)；

       下述为一个遍历组建的简单demo，当然代码可以继续优化。

      

<?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" width="600" height="261">

   

    <s:layout>

       <s:BasicLayout/>

    </s:layout>

 

    <fx:Script>

       <![CDATA[        

           import spark.components.supportClasses.SkinnableComponent;

           private var result:String = "";

          

           protected function btnRetrieve_clickHandler(event:MouseEvent):void

           {

              result = "";

              retrieve(this,"");

              txtResult.text = result;

           }

          

           private function retrieve(obj:Object, prefix:String):void{

              if(obj is SkinnableComponent){

                  result +=prefix+obj["id"]+"/r/n";

                  var nums:int = 0;

                  if(obj.hasOwnProperty("numElements"))

                     nums = obj.numElements;

                  for(var i:int = 0; i<nums; i++){

                     var component:Object = obj.getElementAt(i);

                     retrieve(component,prefix+"--");

                  }                

              }else{

                  result+=prefix+obj["id"]+"/r/n";

                  var nums:int = 0;

                  if(obj.hasOwnProperty("numChildren"))

                     nums = obj.numChildren;

                  for(var i:int = 0; i<nums; i++){

                     var component:Object = obj.getChildAt(i);

                     retrieve(component,prefix+"--");

                  }

              }

           }

       ]]>

    </fx:Script>

 

    <s:Panel id="sPanel" title="Spark Panel" width="414">

       <s:TextInput x="10" y="32" id="sPanel_textinput"/>

       <s:Button x="199" y="32" label="按钮" id="sPanel_button"/>

      

    </s:Panel>

    <mx:Panel id="mPanel" title = "MX Panel" x="0" y="135" width="414" height="116" layout="absolute">

       <s:TextInput x="10" y="15" id="mPanel_textinput"/>

       <s:Button label="按钮" x="200" y="16" id="mPanel_button"/>

    </mx:Panel>

    <s:Button x="519" y="10" label="遍历控件" id="btnRetrieve" click="btnRetrieve_clickHandler(event)"/>

    <s:TextArea x="422" y="39" height="212" width="168" id="txtResult"/>

</s:Application>