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

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

 

 

说明：该文系作者原创，请勿商用或者用于论文发表，转载必须经作者同意并且注明出处。

 

 

      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.iteye.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.iteye.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>

 

 

 

 

 

评论

11 楼 wangsiaofish 2014-01-15  

成功，perfect.

10 楼 feifeiyu1000 2011-09-16  

MultiWinModule.mxml里面的代码：
<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="180">
<mx:Panel x="10" y="10" width="165" height="120" layout="absolute">

<mx:Button x="45.5" y="10" label="Button" fontSize="13"/>
<mx:Label x="38" y="44" text="Test Module" fontSize="14"/>
</mx:Panel>
<mx:Panel x="200" y="10" width="172" height="120" layout="absolute">
<mx:Button x="45.5" y="10" label="Button" fontSize="13"/>
<mx:Label x="38" y="44" text="Test Module" fontSize="14"/>
</mx:Panel>
</mx:Module>

9 楼 oooxxx 2011-05-03  

module.MultiWinModule里面什么内容？
作者忘了贴了吧？

8 楼 doazhang 2010-11-02  

我也想知道，import module.MultiWinModule; 到底在哪的？

7 楼 catlovefox 2010-04-19  

catlovefox 写道

stuhack0303 写道

对啊，我也想知道，import module.MultiWinModule; 到底在哪的？

我也想知道，在哪啊？

自己建了个MultiWinModule MXML Module,按照图上的控件给布置了下，还出来效果啦~ 

6 楼 catlovefox 2010-04-17  

stuhack0303 写道

对啊，我也想知道，import module.MultiWinModule; 到底在哪的？

我也想知道，在哪啊？

5 楼 stuhack0303 2010-03-05  

对啊，我也想知道，import module.MultiWinModule; 到底在哪的？

4 楼 徐晶鑫 2010-01-16  

给个目录结构 

3 楼 lichuhui 2009-11-19  

有两处错误：1：描述 资源 路径 位置 类型
1118: 属于 static 类型 Object 的值的隐式强制指令的目标可能是非相关类型 flash.display:DisplayObject。 main.mxml 9Demo7/src 第 41 行 Flex 问题
2：描述 资源 路径 位置 类型
1120: 访问的属性 MultiWinModule 未定义。 main.mxml 9Demo7/src 第 41 行 Flex 问题

2 楼 skycity220 2009-07-19  

import module.MultiWinModule;
这个在哪里啊？

1 楼 liveingo 2009-07-03  

[asdf]
[asdf]
[asdf]
[asdf]