Flex控件

<1>布局管理控件：

1. <appliction>Layout:

---  vertical:stage中的所有组件垂直表现。

---  horizontal: stage中的所有组件水平表现。

---  absolute: stage中的所有组件利用自己的x,y坐标控制。

2. <vb></vb>对其中的controls垂直排放

3. <hb></hb>对其中的controls水平排放

4. <canvas></canvas>可以容纳组件的容器,默认的为absolute格式，组件只能用(x,y)来显示；也有RelativePositon,这里通过top,left,button,right,horizontalCenter,verticalCenter的值来实现，当窗口大小变化时，组件跟着变动。

5. <form></form>form表单容器，通过<formitem></formitem>来组织组件。有表单头<formheader/>.

6. <HDividedBox></HDividedBox>水平方向可以随便改变大小

7. <VDividedBox></VDividedBox>垂直方向可以随便改变大小

8. <Grid></Grid>表格容器，相当于<table></table>

9. <panel></panel>面板容器，是一种stage，可以表现appliction中的所有组件，可以设置他的absolute和RelativePosition。

10.<TitleWindow></TitleWindow>一种窗口，可以动态生成。

11.<Tile></Tile> ??

12.<Spacer></Spacer>??

13.<HRule></Hrul>

14.<VRule></VRule>

15.<ControlBar></ControlBar>??

16.<ModuleLoader></ModuleLoder>??

<2>导航控件：

1. <Accordion Pane><>

2. <TabNavigator><>

3. <LinkBar><>?

4. <TableBar><>?

5. <MenuBar><MenuBar>?

6. <ToggleButtonBar><>?

<3>普通控件：

1. 1.  <DataGrid>规则化组织数据，dataProvider属性指定显示的数据源，editable属性的bool指定是否可改动。

<datacolumns>

<dataGrideColum   dataField=”” headerText=“”、>

</datacolumns>

1. 2.  <AdvancedDataGrid>可以调整记录的顺序。

 

<4>Chart图：

 

//////////////////////////  Tree Control /////////////////////////

1. 创建树的方式：XML、XMLList组织。

2. 添加、删除树节点：

3. 给结点添加图标：

4. 为结点添加响应函数TreeEvent：

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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

 

<!--TreeControl的创建与消息响应-->

<!--响应Tree控件事件：TreeEvent.itemOpen,Event.change,详细请查阅Tree-->

<mx:Script>

    <![CDATA[

    import mx.controls.*;

    import mx.events.*;

    import flash.events.*;  

   

//利用XML来定义树Tree 

   [Bindable]

   private var tree:XML=

       <root>

         <node label="car">

            <node label="Car_A"/>

            <node label="Car_B"/>

         </node>

         <node label="bus">

            <node label="bus_a"/>

            <node label="bus_b"/>

         </node>

         <node label="bike">

            <node label="bike_a"/>

            <node label="bike_b"/>

            <node label="bike_c"/>

         </node>

      </root>;

///////////////////////////// Tree的事件响应函数 /////////////////////////////

//处理Tree改变的事件

    private function onChange(event:Event):void{

       treeshow.text = event.type + " \n";

    }

    private function onItemOpen(event:TreeEvent):void{

       treeshow.text = event.item.@label;

    }

//利用expandItem()方法，实现当树显示时打开树 Tree中的某个节点 node

   private function initTree():void{

      mapTree.expandItem(layers.getItemAt(0),true);

      mapTree.expandItem(layers.getItemAt(1),true);

      treeshow.text = mapTree.openItems[1].@label;   //被打开的节点在openItem【】中

       mapTree.selectedIndex =2;

   }

 

///////////////  动态打开某个结点  ////////////////////////////////////  

//打开指定的Tree中的某个结点,通过URL参数实现,由服务器或者其他用户请求如：..url:0=1&1=2&2=0

   private var openSequence:Array = [];  

   private function initApp():void{      //用于ApplicationComplete加载是调用

   var paramlen:int = 0;

   for(var str:String in Application.application.parameters)

   {

      if(!isNaN(Number(str))){

         openSequence[str] = Application.application.parameters[str];   //将参数指定到数组中

         paramlen +=1;

      }

   }

   openNodeAsUrl();   //打开url参数指定的结点

   }

   private function openNodeAsUrl():void{

   //将XML定义的tree转化为XMLListCollection对象

   var nodelist:XMLListCollection = myTree.dataProvider as XMLListCollection;

   var node:XMLList = nodelist.source;

   //搜集所有xmllist的Tree结点，查找指定xml型的node对象

   for(var i:int=0;i<openSequence.length;i++){

     var j:int = openSequence[i];

     var n:XML = node[j];     //指定结点

     if(n.children()!=null){

       myTree.expandItem(n,true);    //展开该结点,接续查找

       node = n.children();

     }else{

       break;

     }

   }

   if(n!=null)

   myTree.selectedItem = n; 

   }

  

///////////////////////////// 为树节点指定icon ////////////////////////////////

   [Bindable]

   [Embed(source = "/img/3.JPG")]

   public var rootIcon:Class;

   [Bindable]

   [Embed(source = "/img/4.JPG")]

   public var leafIcon:Class;

  

  

//////////////////////////// 动态加载和删除叶结点 ///////////////////////////////

//给class1加叶子结点xD，删除class1的xB

  [Bindable]

  private var school:XML=

  <list>

     <sclass name="class1">

        <student name="xA"/>

        <student name="xB"/>

        <student name="xC"/>

     </sclass>

     <sclass name="class2">

        <student name="yA"/>

        <student name="yB"/>

        <student name="yC"/>

     </sclass>  

  </list>;

  [Bindable]

  private var treeData:XMLListCollection = new XMLListCollection(school.sclass);

 

  private function treelabel(item:Object):String{

    var node:XML = XML(item);

    if(node.localName() == "class1"){

        return node.@title;

    }else{

        return node.@name;

    }

  }

  //添加学生xD

  private function addStudent():void{

    var newnode:XML = <student/>;

    newnode.@name=stu.text;

    var sc:XMLList = school.sclass.(@title == "class1");

    if(sc.length()>0){

        sc[0].appendChild(newnode);     //添加函数

        stu.text="";

    }

  }

  //删除学生xB

  private function deletStudent():void{

    var node:XML = XML(my_Tree.selectedItem);

    if(node==null) return;

    if(node.localName()!="student")  return;

    var child:XMLList=XMLList(node.parent()).children();

    for(var i:int=0;i<child.length();i++){

      if(child[i].@name == node.@name){

        delete child[i];

      }

    }

  }

    ]]>

</mx:Script>

 

 

<!--      mx控件区域    -->

<!--创建控件:-->

<!--在加载initTree()事件时，是响应creationComplete事件-->

<mx:Tree id="mapTree" labelField="@label" showRoot="true" width="30%"

    itemOpen="onItemOpen(event)" change="onChange(event)" creationComplete="initTree()"

    iconField="@icon">

    <mx:XMLListCollection id="layers">

       <mx:XMLList>

           <folder label="water" icon="rootIcon">

              <folder label="w_A" icon="leafIcon"/>

              <folder label="W_B">

                  <Pfolder label="W_B_A" icon="leafIcon"/>

                  <Pfolder label="W_B_b" icon="leafIcon"/>

                  <Pfolder label="W_B_C" icon="leafIcon"/>

              </folder>

              <folder label="W_C"/>

           </folder>

      

           <folder label="land" icon="rootIcon">

               <folder label="L_A"/>

              <folder label="L_B">

                  <Pfolder label="L_B_A" icon="leafIcon"/>

                  <Pfolder label="L_B_b" icon="leafIcon"/>

                  <Pfolder label="L_B_C" icon="leafIcon"/>

              </folder>

              <folder label="L_C"/>

           </folder>

       </mx:XMLList>

    </mx:XMLListCollection>

</mx:Tree>

 

<!--利用XML加载-->

<mx:Tree id="myTree" y="300" dataProvider="{tree.node}" labelField="@label" width="15%"/>

<mx:Text  id="treeshow" x="500" width="60%"/>

 

<!--将xml转化为xmllistcollection加载-->

<mx:Tree id="my_Tree"  x="250" y="300" dataProvider="{treeData}" labelFunction="treelabel" width="15%"/>

<mx:Label text="输入要添加的学生名：" x="200" y="500"/>

<mx:TextInput id="stu" x="300" y="500" width="3%"/>

<mx:Button id="add" label="添加" x="350" y="500" click="addStudent()"/>

<mx:Button id="remove" label="删除" x="400" y="500" click="deletStudent()"/>

</mx:Application>

////////////////////////// Menu Control ////////////////////////////

1. menuControl:

2. menuBarControl:

3. PopUpMenuBarControl:

4. menu数据源的组织方式:

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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<!--Menu的研究-->

<!--组织数据的方式：XML, Other objects, Collections-->

 

 

 

<!--Menu Control-->

<!--定义方式：have cascading submenus 行为方式：define,display,hide it-->

<!--(1)利用AS来实现，调用Menu类的方法实现-->

<!--

<mx:Script>

    <![CDATA[

       import mx.events.MenuEvent;

        import mx.controls.Menu;

       

        public var menuData:Array = [

             {label:"menuA",children:[{label:"A-1"},{label:"A-2"}]},

             {label:"menuB",enable:true},

             {label:"menuC",children:[

             {label:"C-1",type:"radio",toggled:false,groupName:"c"},

             {label:"C-2",type:"radio",toggled:true,groupName:"c"},

             {type:"separator"},

             {label:"C-3",type:"radio",toggled:false,groupName:"c"}]},

             {label:"menuD",children:[

             {label:"D-1",type:"check",toggled:false},

             {label:"D-2",type:"check",toggled:true}]}

             ];

       [Embed(source="/img/1.JPG")] 

       private var radioIcon:Class;

      

       [Embed(source="/img/2.JPG")]

       private var normalIcon:Class;

        

       private function createMenu():void{

          var menu:Menu = mx.controls.Menu.createMenu(null, menuData, true);

          menu.setStyle('radioIcon',radioIcon);

          menu.setStyle('normalIcon',normalIcon);

          menu.show(10,10);    

       }

      

//////////////////////////for PopupMenuButton /////////////////////////////////

        private function initData():void{

        Menu(pbm.popUp).selectedIndex=2;   //视为当前新创建的菜单

        }

        private function onEvent(event:MenuEvent):void{

        event.currentTarget.label="hello " + event.label;

        }

    ]]>

</mx:Script>

-->

 

 

<!--(2)利用MXML标签实现(有问题？？？？)-->

<!---->

<mx:Script>

    <![CDATA[

        import mx.controls.Menu;

        import mx.events.MenuEvent;

       

        [Embed(source="/img/1.JPG")] 

       private var radioIcon:Class;

      

       [Embed(source="/img/2.JPG")]

       private var normalIcon:Class;

      

        private function createMenu():void{

          var menu:Menu = mx.controls.Menu.createMenu(null, menuData, true);

          menu.labelField="@label";               //显示标签

          menu.setStyle('radicon',radioIcon);

          menu.setStyle('nmaIcon',normalIcon);

          menu.iconField ="@icon";                //显示图标     

          menu.show(10,10); 

       }  

//---------------------for PopupMenuButton-------------------------

        private function initData():void{

        Menu(pbm.popUp).selectedIndex=2;   //视为当前新创建的菜单

        }

        private function onEvent(event:MenuEvent):void{

        event.currentTarget.label="hello " + event.label;

        }

       

//处理所有的菜单事件

        private function onAllMenuEvent(event:MouseEvent):void{

        text.text = event.type +" : " + event.currentTarget.label;

        }

    ]]>

</mx:Script>

 

<mx:XMLList id="menuData"> 

       <menuitem label="menuA">

          <menuitem label="A-1" enable="false"/>

          <menuitem label="A-2" icon="nmaIcon"/>

       </menuitem>

       <menuitem label="menuB">

          <menuitem label="B-1" type="radio" toggled="false" groupName="B"/>

          <menuitem label="B-2" type="radio" toggled="true" groupName="B" icon="radicon"/>

          <menuitem label="B-3" type="radio" toggled="false" groupName="B"/>

       </menuitem>    

</mx:XMLList>

<!--利用方法来实现创建菜单，加载MXML或Array对象中的信息-->

<mx:Button id="menubutton" label="open menu" click="createMenu()"

         mouseOver="onAllMenuEvent(event)"/>

 

 

 

<!--MenuBar control-->

<!--定义方式：have submenu 行为方式：-->

<mx:MenuBar id="menubar" labelField="@label" x="200">

    <mx:XMLList>

       <menuitem label="menuA">

           <menuitem label="A-1" enabled="false"/>

           <menuitem label="A-2" enabled="true"/>

           <menuitem label="A-3" enabled="false"/>

       </menuitem>

       <menuitem label="menuB">

           <menuitem label="B-1" type="radio" toggled="false"/>

           <menuitem label="B-2" type="radio" toggled="true"/>

           <menuitem label="B-3" type="radio" toggled="false"/>

       </menuitem>

       <menuitem label="menuC"/>

    </mx:XMLList>

</mx:MenuBar>

 

 

 

<!--PopUpMenuButton control-->

<!--定义方式： 行为方式 support single level menu item --> 

<mx:XML id="pbdata">

    <root>

      <editItem label="AA"/>

      <editItem label="AB"/>

      <editItem label="AC"/>

      <editItem label="AD"/>

    </root>

</mx:XML>

<mx:PopUpMenuButton id="pbm" dataProvider="{pbdata}" labelField="@label" showRoot="false"

          creationComplete="initData()" y="30" itemClick="onEvent(event)" mouseDown="onAllMenuEvent(event)"/>

         

<!--显示所有的菜单名：和类型-->

<mx:TextArea id="text" x="200" y="100"/>

</mx:Application>