Flex4 中使用ModuleLoader为子容器 动态加入到TabNavigator导航器容器中的例子

经常在一些工程中看到 选择左侧目录树 右侧添加TAB加载内容的例子 如图

 

 



在这里使用ModuleLoader作为子容器 将其动态的加入到TabNavigator中

 

首先建立几个Module 其中一个Module代码如下 所有Module结构相同 只是里边的文本有些不同

<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" layout="absolute" width="100%" height="100%" >
<fx:Metadata>
[Event(name="ModuleClose",type="flash.events.Event")]
</fx:Metadata>

<fx:Script>
<!--[CDATA[
protected function button1_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
dispatchEvent(new Event("ModuleClose"));
}
]]-->
</fx:Script>

<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>
<s:Label id="t" x="24" y="21" text="cy1001.com" fontSize="22"/>
<s:Button x="30" y="52" label="关闭" click="button1_clickHandler(event)"/>
</mx:Module>

里面只是显示一个网址 和一个关闭按钮 其中单击关闭按钮指派了一个关闭Module的事件

最后在主程序中使用这些Module

 

下面代码实现了在 TabNavigator 中动态的加入 Tab 并将ModuleLoder 做为子容器 加载前边做的几个Module的功能

这里还加入了使用双击 关闭相关Tab 功能,  而且已经加载过的Module将不重新加载

 

<?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" minWidth="955" minHeight="600">
<s:layout>
<s:BasicLayout/>
</s:layout>

<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.events.ModuleEvent;
import mx.modules.Module;
import mx.modules.ModuleLoader;

import spark.events.IndexChangeEvent;

private var ModuleLoaderList:ArrayCollection = new ArrayCollection();

protected function buttonbar1_changeHandler(event:IndexChangeEvent):void
{
if(bb.selectedIndex!=-1)
{

var url:String = bb.selectedItem.url;
var webName:String = bb.selectedItem.name;

//判断是否已经读取过
for(var i:int = 0; i<ModuleLoaderList.length; i++)
{
if(ModuleLoaderList[i][0]==new String(url+".swf"))
{
tabNav.selectedIndex = ModuleLoaderList[i][1];
return;
}
}

var loder:ModuleLoader = new ModuleLoader();
loder.label = webName;
loder.loadModule(url+".swf");

loder.addEventListener(ModuleEvent.READY,module_readyHandler);
tabNav.addChild(loder);
tabNav.selectedChild = loder;
ModuleLoaderList.addItem(new Array(new String(url+".swf"),tabNav.selectedIndex+""));

}

}

protected function module_readyHandler(event:ModuleEvent):void
{
var loder:ModuleLoader = event.currentTarget as ModuleLoader;
loder.removeEventListener(ModuleEvent.READY,module_readyHandler);
loder.child.addEventListener("ModuleClose",moduleClose_Handler);

}

protected function tabnavigator_dobuleClickHandler(event:MouseEvent):void
{
if(event.target.toString().indexOf("tabBar")!=-1)
{
var loder:ModuleLoader = tabNav.selectedChild as ModuleLoader;
ModuleUnload(loder);
}
}

protected function moduleClose_Handler(event:Event):void
{
var loder:ModuleLoader = tabNav.selectedChild as ModuleLoader;
ModuleUnload(loder);
}

private function ModuleUnload(loder:ModuleLoader):void
{
loder.child.removeEventListener("ModuleClose",moduleClose_Handler);
ModuleLoaderListRemoveByLoder(loder);
loder.unloadModule();
tabNav.removeChild(tabNav.selectedChild as DisplayObject);
}

private function ModuleLoaderListRemoveByLoder(loder:ModuleLoader):void
{
//在列表中删除掉
for(var i:int = 0; i<ModuleLoaderList.length; i++)
{
if(ModuleLoaderList[i][0]==loder.url)
{
ModuleLoaderList.removeItemAt(i);
}
}
}

]]>
</fx:Script>

<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
<s:XMLListCollection id="webList" >
<fx:XMLList>
<webSite>
<name>新浪</name>
<url>module_sina</url>
</webSite>
<webSite>
<name>网易</name>
<url>module_163</url>
</webSite>
<webSite>
<name>搜狐</name>
<url>module_sohu</url>
</webSite>
<webSite>
<name>腾讯</name>
<url>module_qq</url>
</webSite>
<webSite>
<name>诚远</name>
<url>module_cy1001</url>
</webSite>
</fx:XMLList>
</s:XMLListCollection>

</fx:Declarations>

<s:HGroup x="11" y="14" width="100%" height="100%">
<s:ButtonBar dataProvider="{webList}" width="80" height="136" change="buttonbar1_changeHandler(event)" labelField="name" id="bb">
<s:layout>
<s:VerticalLayout/>
</s:layout>
</s:ButtonBar>
<mx:TabNavigator width="524" height="317" id="tabNav" doubleClickEnabled="true" doubleClick="tabnavigator_dobuleClickHandler(event)">

</mx:TabNavigator>
</s:HGroup>
</s:Application>

 

 

 最后在工程的属性中 找到Flex 模块功能设置 将做好的Module 为主程序设置优化后完毕



 

下面的代码是用 TabBar 和 ViewStack 组合成为导航器容器 并加载Moudle 实现的 思路基本上一样

<?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" minWidth="955" minHeight="600"
>
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Script>
<!--[CDATA[
import mx.collections.XMLListCollection;
import mx.events.FlexEvent;
import mx.events.ModuleEvent;
import mx.modules.Module;
import mx.modules.ModuleLoader;

import spark.events.IndexChangeEvent;

protected function bb_changeHandler(event:IndexChangeEvent):void
{
// TODO Auto-generated method stub
if(bb.selectedIndex!=-1)
{

var url:String = bb.selectedItem.url;
var webName:String = bb.selectedItem.name;

//判断是否已经读取过
for(var i:int = 0; i<ModuleList.getChildren().length; i++)
{
var m:ModuleLoader = ModuleList.getChildAt(i) as ModuleLoader;
if(m.url==url+".swf")
{
tb.selectedIndex = i;
return;
}
}

var loder:ModuleLoader = new ModuleLoader();
loder.label = webName;
loder.loadModule(url+".swf");
loder.addEventListener(ModuleEvent.READY,module_readyHandler);
loder.width=parent.width;
loder.height=parent.height;
ModuleList.addChild(loder);
tb.selectedItem = loder;

}
}

protected function module_readyHandler(event:ModuleEvent):void
{
var loder:ModuleLoader = event.currentTarget as ModuleLoader;
loder.removeEventListener(ModuleEvent.READY,module_readyHandler);
loder.child.addEventListener("ModuleClose",moduleClose_Handler);

}

protected function bb_dobuleClickHandler(event:MouseEvent):void
{
var loder:ModuleLoader =ModuleList.getChildAt(tb.selectedIndex as int) as ModuleLoader;
ModuleUnload(loder);
}

protected function moduleClose_Handler(event:Event):void
{
var loder:ModuleLoader = ModuleList.getChildAt(tb.selectedIndex as int) as ModuleLoader;
ModuleUnload(loder);
}

private function ModuleUnload(loder:ModuleLoader):void
{
loder.child.removeEventListener("ModuleClose",moduleClose_Handler);
loder.unloadModule();
ModuleList.removeChild(loder);
}

]]-->
</fx:Script>
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
<fx:XMLList id="webList">
<webSite>
<name>新浪</name>
<url>module_sina</url>
</webSite>
<webSite>
<name>网易</name>
<url>module_163</url>
</webSite>
<webSite>
<name>搜狐</name>
<url>module_sohu</url>
</webSite>
<webSite>
<name>腾讯</name>
<url>module_qq</url>
</webSite>
<webSite>
<name>诚远</name>
<url>module_cy1001</url>
</webSite>
</fx:XMLList>

</fx:Declarations>

<s:HGroup x="0" y="0" width="100%" height="100%">
<s:ButtonBar dataProvider="{new XMLListCollection(webList)}" width="80" height="136" change="bb_changeHandler(event)" labelField="name" id="bb">
<s:layout>
<s:VerticalLayout/>
</s:layout>
</s:ButtonBar>
<s:VGroup width="100%" height="100%">
<s:TabBar id="tb" dataProvider="{ModuleList}" doubleClickEnabled="true" doubleClick="bb_dobuleClickHandler(event)" />
<s:BorderContainer width="100%" height="100%">
<mx:ViewStack id="ModuleList" />
</s:BorderContainer>
</s:VGroup>
</s:HGroup>
</s:Application>