flex4.5 TabNavigator自动加载于关闭子组件的实现

我还是新手实现的这么方法不是很简练，代码有点繁多。总之效果还是实现了具体步骤是这样的：

1.在住程序中拖入TabNavigator组件，并在外面创建两个Button作用是点击的时候TabNavigator将子对象添加到里面。

2.新建两个基于NavigatorContent的子组件，在组件中放一个Button用于关闭，在它的Click事件中注册。

3.这是关键的地方，在主界面中的不可使代码中引入新建的组件，在主界面的按钮单击事件中写【TabNavigator的id.addChild(组件的id)】，很简单这样就加入了。下来是关闭，需要响应组件中关闭的事件，在主界面的不可视代码中派发关闭事件在方法中写【TabNavigator的id.removeChild(组件的id)】，这样就将组件移除了TabNavigator。

 

下面是我做的一个小例子：

 

主程序：mainmxml

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication 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="800" height="600"
        creationComplete="windowedapplication1_creationCompleteHandler(event)" xmlns:local="*">

 <fx:Script>
  <![CDATA[
   import mx.controls.Alert;
   import mx.core.FlexGlobals;
   import mx.events.FlexEvent;

   protected function windowedapplication1_creationCompleteHandler(event:FlexEvent):void
   {
    this.minHeight=600;
    this.minWidth=800;
   
   }

   protected function aa_clickHandler(event:MouseEvent):void
   {
    if(tabn.contains(dfd)==false){
     tabn.addChild(dfd);
     tabn.selectedChild=dfd;
    }else{
     tabn.selectedChild=dfd;
    }
    dfd.label="ooo";
   }
 
   protected function dfad1_changeHandler(event:Event):void
   {
    // TODO Auto-generated method stub
    tabn.removeChild(dfd);
   }
   
  ]]>
 </fx:Script>
 <fx:Declarations>
  <local:dfad id="dfd" change="dfad1_changeHandler(event)"/>
 </fx:Declarations>
<fx:Style>
 @namespace s "library://ns.adobe.com/flex/spark";
 @namespace mx "library://ns.adobe.com/flex/mx";
 s|WindowedApplication{
  skinClass:ClassReference("spark.skins.spark.SparkChromeWindowedApplicationSkin")
 }
 
</fx:Style>
 
  <s:Rect top="0" bottom="0" left="0" right="0" rotation="90">
   <s:fill>
    <s:LinearGradient>
     <s:GradientEntry color="#000000"/>
     <s:GradientEntry color="0xFFFFFF"/>
     <s:GradientEntry color="#000000"/>
    </s:LinearGradient>
   </s:fill>
  </s:Rect>
 <s:Panel left="50" right="50" top="50" bottom="50" borderVisible="false"
    dropShadowVisible="false">
  <s:HGroup left="10" right="10" top="10" height="71" horizontalAlign="left"
      verticalAlign="middle">

   <s:Button id="aa" width="50" height="50" label="按钮" click="aa_clickHandler(event)"/>
  
  </s:HGroup>
  <mx:TabNavigator id="tabn" left="10" right="10" top="83" bottom="10" tabHeight="30" tabWidth="80">
   
  </mx:TabNavigator>
 </s:Panel>
</s:WindowedApplication>

组件的程序：dfad.maml

<?xml version="1.0" encoding="utf-8"?>
<s:NavigatorContent 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="400" height="300">
 
 <fx:Script>
  <![CDATA[
   protected function button1_clickHandler(event:MouseEvent):void
   {
    // TODO Auto-generated method stub
    dispatchEvent(new Event(Event.CHANGE));
   }
  ]]>
 </fx:Script>
 <fx:Metadata>
  [Event(name="change", type="flash.events.Event")]
 </fx:Metadata>
 <fx:Declarations>
  <!-- 将非可视元素（例如服务、值对象）放在此处 -->
 </fx:Declarations>
 <s:DataGrid x="19" y="27" width="321" height="241" requestedRowCount="4">
  <s:columns>
   <s:ArrayList>
    <s:GridColumn dataField="dataField1" headerText="列 1"></s:GridColumn>
    <s:GridColumn dataField="dataField2" headerText="列 2"></s:GridColumn>
    <s:GridColumn dataField="dataField3" headerText="列 3"></s:GridColumn>
   </s:ArrayList>
  </s:columns>
  <s:typicalItem>
   <fx:Object dataField1="示例数据" dataField2="示例数据" dataField3="示例数据"></fx:Object>
  </s:typicalItem>
  <s:ArrayList>
   <fx:Object dataField1="数据1" dataField2="数据1" dataField3="数据1"></fx:Object>
   <fx:Object dataField1="数据2" dataField2="数据2" dataField3="数据2"></fx:Object>
   <fx:Object dataField1="数据3" dataField2="数据3" dataField3="数据3"></fx:Object>
   <fx:Object dataField1="数据4" dataField2="数据4" dataField3="数据4"></fx:Object>
  </s:ArrayList>
 </s:DataGrid>
 <s:Button right="5" top="5" label="按钮" click="button1_clickHandler(event)"/>
</s:NavigatorContent>