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>