跟我StepByStep学FLEX教程－－－－－－Demo7之页面跳转

核心提示：Flex中的页面跳转，之所以要讲这个，跟我StepByStep学FLEX教程－－－－－－Demo7之页面跳转，因为Flex的页面跳转有很多种方式，而且和传统的jsp页面跳转或者C/S方式都有一定的区别，这个以后的高级应用中会具体介绍，源码如下， 现在所讲的只是FLEX本身特色的几种方式（自然，还有其它方式）

Flex中的页面跳转。之所以要讲这个，因为Flex的页面跳转有很多种方式，而且和传统的jsp页面跳转或者C/S方式都有一定的区别。

现在所讲的只是FLEX本身特色的几种方式（自然，还有其它方式）。

先看一下Demo的界面：

从界面就可以看出，该Demo演示了3种方式的页面跳转方式：

1、ViewStack方式；

2、NavigatorToUrl方式（这个函数还可以调用javascript，呵呵）；

3、LoadModule方式；

可以说，每种方式都有各自的优缺点，FLEX的页面跳转方式也可以使用其它方式，特别是在项目中的页面跳转方式更要结合采用的框架本身来进行确定，这个以后的高级应用中会具体介绍。

源码如下，读者可以编码体验一下：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#0CBCC7, #C8F806]" creationComplete="init()">
　<mx:Script>
　　<![CDATA[
　　　　　 import module.MultiWinModule;
　　　　　　　　　　　 import mx.modules.Module;
　　　　　　　　　　　 import mx.events.ModuleEvent;
　　　　　　　　　　　 import mx.modules.ModuleManager;
　　　　　　　　　　　 import mx.modules.IModuleInfo;
　
　　　　　　　　　　　 protected var moduleInfo:IModuleInfo;
　　　　　　　　　　　
　　　　　　　　　　　 private function init():void {
　　　　　　　　　　　　　　　 //创建module（此处只创建，不load）
　　　　　　　　　　　　　　　 moduleInfo = ModuleManager.getModule("module/MultiWinModule.swf");
　　　　　　　　　　　　　　　 //注册ready监听
　　　　　　　　　　　　　　　 moduleInfo.addEventListener(ModuleEvent.READY, onModuleReady);
　　　　　　　　　　　　　　　 moduleInfo.addEventListener(ModuleEvent.ERROR, onModuleLoadError);
　　　　　　　　　　　 }
　　　　　　　　　　　
　　　　　　　　　　　 protected function getModuleInfo ():IModuleInfo {
　　　　　　　　　　　　　　 //返回创建的module对象
　　　　　　　　　　　　　　 return moduleInfo;
　　　　　　　　　　　 }
　　　　　　　　　　　　　　
　　　　　　　　　　　 private function loadModule() : void {
　　　　　　　　　　　　　　　 //load module
　　　　　　　　　　　　　　　 getModuleInfo().load();
　　　　　　　　　　　 }
　　　
　　　　　　　　　　　 private function unloadModule() : void {
　　　　　　　　　　　　　　　 //unload module
　　　　　　　　　　　　　　　 testModuleTile.removeAllChildren();
　　　　　　　　　　　　　　　 getModuleInfo().release();　　　　　　　　　　　
　　　　　　　　　　　 }
　　　　　　　　　　　
　　　　　　　　　　　 private function onModuleReady(e:ModuleEvent):void {
　　　　　　　　　　　　　　　 //currentTarget类型匹配转换
　　　　　　　　　　　　　　　 var moduleInfo:IModuleInfo = e.currentTarget as IModuleInfo;
　　　　　　　　　　　　　　　 //module显示列表
　　　　　　　　　　　　　　　 testModuleTile.addChild(moduleInfo.factory.create() as MultiWinModule);
　　　　　　　　　　　 }
　　　　　　　　　　　
　　　　　　　　　　　 private function onModuleLoadError(e:ModuleEvent):void {
　　　　　　　　　　　 　
　　　　　　　　　　　 }　　　　　　　　　　　 　
　　　　　　　　　　
　　　private function navigatorToPage():void
　　　{
　　　　//调用创建的flex页面
//　　　　var javaeyeUrl:URLRequest = new URLRequest("page/NavigatePage.swf");
　　　　　　　　　　　　　　　 //调用URL（或者其它jsp页面）　　
　　　　var javaeyeUrl:URLRequest=new URLRequest("http://wangyisong.javaeye.com");
　　　　　　　　　　　　　　　 navigateToURL(javaeyeUrl,"_top");
　　　}
　　　
　　]]>
　</mx:Script>
　
　<!--viewStack-->
　<mx:Panel title="多窗口方式一：ViewStack" height="209" width="429"
　　　　　　　　 paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10" fontSize="12" fontWeight="bold" fontStyle="normal" backgroundColor="#F63B09" x="10" y="22" backgroundAlpha="0.5">　　　　　　　　　　
　　　　　　　 <mx:HBox borderStyle="solid" width="388" paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5" fontSize="16">　　　　　　　　
　　　　　　　　　　　 <mx:Button id="searchButton" label="Search Panel"
　　　　　　　　　　　　　　　 click="myViewStack.selectedChild=search;" fontSize="12" fontFamily="Times New Roman"/>
　　　　　　　　　　　　　　　
　　　　　　　　　　　 <mx:Button id="cInfoButton" label="Customer Info Panel"
　　　　　　　　　　　　　　　 click="myViewStack.selectedChild=custInfo;" fontSize="12" fontFamily="Times New Roman"/>
　　　　　　　　　　　　　　　
　　　　　　　　　　　 <mx:Button id="aInfoButton" label="Account Panel"
　　　　　　　　　　　　　　　 click="myViewStack.selectedChild=accountInfo;" fontSize="12" fontFamily="Times New Roman" width="102"/>
　　　　　　　 </mx:HBox>

　　　　　　　 <mx:ViewStack id="myViewStack" borderStyle="solid" width="387" height="103">
　　　　　　　　　　　 <mx:Canvas id="search" backgroundColor="#FFFFCC" label="Search" width="100%" height="100%" fontSize="12" fontFamily="Times New Roman">
　　　　　　　　　　　　　　　 <mx:Label text="Search Screen" color="#000000"/>
　　　　　　　　　　　 </mx:Canvas>

　　　　　　　　　　　 <mx:Canvas id="custInfo" backgroundColor="#CCFFFF" label="Customer Info" width="100%" height="100%" fontSize="12" fontFamily="Times New Roman">
　　　　　　　　　　　　　　　 <mx:Label text="Customer Info" color="#000000"/>
　　　　　　　　　　　 </mx:Canvas>

　　　　　　　　　　　 <mx:Canvas id="accountInfo" backgroundColor="#FFCCFF" label="Account Info" width="100%" height="100%" fontSize="12" fontFamily="Times New Roman">
　　　　　　　　　　　　　　　 <mx:Label text="Account Info" color="#000000"/>
　　　　　　　　　　　 </mx:Canvas>
　　　　　　　 </mx:ViewStack>
　　　 </mx:Panel>
　　　
　　　 <!--navigateToURL-->
　　　 <mx:Label x="21" y="252" text="多窗口方式二：NavigatorToUrl" fontSize="12" fontWeight="bold"/>
　<mx:LinkButton y="247" label="http://wangyisong.javaeye.com" click="navigatorToPage()" x="216" fontSize="16" fontFamily="Times New Roman" color="#0A1BF8" width="223"/>
　　　
　　　 <!--loadModule-->
　　　 <mx:Panel title="多窗口方式三：LoadModule" x="10" y="285" width="429" height="250" layout="absolute" fontSize="12" backgroundColor="#F0F80A" backgroundAlpha="0.5">　　　　　　　
　　　　　　　 <mx:Tile id="testModuleTile" width="409" height="170" y="0" x="0">
　　　　　　　 </mx:Tile>
　　　　　　　
　　　　　　　 <mx:Button x="76" y="178" label="加载" click="loadModule()"/>
　　　　　　　 <mx:Button x="223" y="178" label="卸载" click="unloadModule()"/>
　　　 </mx:Panel>　　　
</mx:Application>