模块化与加载

 

 

模块化与加载

 

版本号：0.1

制定日期：2010-08-17

 

 

 

 

 

 

 

 

 

 

编制	宋强	日期	2010-8-17
审核		日期
批准		日期

文档修订记录

修订日期	修订内容	审核人

目      录

 

 

1 模块化.......................................................................................................................................... 2

1.1 原理................................................................................................................................... 2

1.2 技术要点............................................................................................................................ 2

1 创建Application类型的Flex程序..................................................................................... 2

2  创建子界面容器。......................................................................................................... 3

3 创建Module类型的flex程序......................................................................................... 5

4  编译Module类型的flex程序........................................................................................ 5

5 动态加载子界面.............................................................................................................. 7

6 界面切换........................................................................................................................ 7

模块化

对于web系统，最基本的特征之一就是多界面。在flex技术中，通过模块化实现多界面效果，每个界面对应一个flex模块。

原理

Flex应用程序以swf形式发布，swf形式的文件分为两种类型。

类型	特征	特点	示例
Application	最外层容器以 开头	可单独执行	App.swf
Module	最外层容器以 开头	不可单独执行，必须被ModuleLoder组件加载后才能执行	Mod.swf

通常，需要定义一个Application类型的界面作为主界面，在其上定义子界面的容器（ModuleLoder组件）。然后定义多个Module类型的子界面。这些子界面就是“模块化”概念中的“模块”。界面切换就是在主界面的ModuleLoder组件中，动态加载不同的Module类型的子界面。

技术要点

   创建Application类型的Flex程序

     单击“文件”，选择新建—>MXML应用程序，即可自动生成Application类型的Flex源文件。

具体方法如图：

     

    源代码：

        

xmlns:fx=""

               xmlns:s="library://ns.adobe.com/flex/spark"

               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

         

            

        

n>

 

   创建子界面容器。

在设计模式下从组件栏中直接拖拽ModuleLoader组件到界面上即可

具体方法如下：

   

       

源代码：

     

xmlns:fx=""

               xmlns:s="library://ns.adobe.com/flex/spark"

               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

        

         

         

           x="325" y="62" width="259" height="226">

          

           x="117" y="62" width="200" height="226">

              text="切换界面示例" width="95" height="44" fontSize="15" verticalAlign="middle"/>

              label="切换到子界面1"/>

              label="切换到子界面2"/>

          

注意：

   ModuleLoader组件所在的位置和大小决定了子界面加载后显示的位置和大小。如果子界面的大小超过了ModuleLoader组件的大小，则子界面加载后会出现滚动条（通过ModuleLoader组件的属性设置也可以不出现滚动条，此时子界面将只能显示一部分）

创建Module类型的flex程序

    单击“文件”，选择新建—>MXML模块

具体方法如下：

     

源代码如下：

      

xmlns:fx=""

           xmlns:s="library://ns.adobe.com/flex/spark"

         xmlns:mx="library://ns.adobe.com/flex/mx" layout="absolute" width="400" height="300">

         

         

        

         x="120" y="138" text="我是子界面1" fontSize="15"/>

 

   编译Module类型的flex程序

        默认情况下Flex Builder 自动编译Application类型的Flex程序，也就是说Module类型的Flex源文件是不能被自动编译的，需要手工配置。方法如下：

       假设如下Flex源文件有如下：

           

 

      

              选择项目（例子），单击鼠标右键选择 “属性”出现如图

 点击“添加”出现如图：

    

 

添加module1.mxml和module2.mxml

点击“确定”即可，经过设置再次编译该flex项目，你会发现在目录bin下生成了module1.swf和module2.swf。

如图所示：

 

 

   动态加载子界面

     其实加载子界面就是把子界面文件的全路径名称赋给ModuleLoader组件的url属性，由ModuleLoader组件自动加载该子界面。

     如果主界面文件和子界面文件存放在同一路径中，则把子界面的文件名称直接赋给ModuleLoader组件的url属性即可。

例如：   moduleLoader1.url=“module1.swf”

     如果主界面文件和子界面文件存放在不同的路径中，例如主界面app.swf文件的存放路径是“……/app.swf”,子界面mod.swf的存放路径是“……/modules/mod.swf”,则加载子界面的代码要改为：

   moduleLoader.url=”modules/mod.swf”

界面切换

    界面切换就是给ModuleLoader组件的url属性赋予不同的值。例如：

//切换到子界面1

 moduleLoader1.url=”module1.swf”;

//切换到子界面2

 moduleLoader1.url=”module2.swf”;

 

本例子的详细代码：见文件夹“src”

演示效果：  bin-debug\lizi.html