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

最新推荐文章于 2017-04-13 19:17:47 发布

独来独往mk

最新推荐文章于 2017-04-13 19:17:47 发布

阅读量5k

点赞数

分类专栏： flex4.5 文章标签： flex library button object function encoding

本文链接：https://blog.youkuaiyun.com/fly_air/article/details/6821618

版权

flex4.5 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何在Flex4.5中使用TabNavigator组件动态加载和关闭子组件。通过在主程序中创建TabNavigator和Button，新建基于NavigatorContent的子组件并在其内部设置关闭按钮，利用事件监听实现子组件的添加和移除。详细步骤包括添加、选择和删除子组件的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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>