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

最新推荐文章于 2010-07-14 09:56:57 发布

nasonwys

最新推荐文章于 2010-07-14 09:56:57 发布

阅读量127

点赞数

分类专栏： FLEX 文章标签： Flex JSP JavaScript Flash Adobe ViewUI

FLEX 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

跟我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>


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

    
    <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"/>

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