只看楼主 楼主

没事露一露,提高知名度——艾睿我看贴我回贴宣言(支持 / 反对)

Adobe Flex迷你教程 -- 合理使用Module分割项目以及对Module的使用

现在说说Module,这篇教程代码不是最重要的,怎么样合理的使用Module以及注意的问题才是关键,所以建议大家注意下面红色语句。Module,可以将我们的项目按需划分为N个模块,在编译时将项目编译为主文件以及N个module的swf。Module基本上可以分为两种:

  1. 完整的Module,可以被外部app所使用 -- 会将所有涉及到的引用编译到module中,主文件的体积得到缩减,但是Module本身的体积可能会很大,比如Module和主程序都应用了对象C,那对象C会被编译到主程序以及Module中,这样Module的体积就会很大。

  2. 关联到主程序的Module -- 比如Module和主程序都应用了对象C,那对象C会只编译在主程序中,从而减小Module的体积。我今天主要讲这一种Module,也是我们最常用到的。
了解了Module的种类,再简单说说使用Module要注意的地方。

  1. 绝对不能在Module以外的地方直接引用Module中的对象。这样Module会被编译到引用它的模块中去,如果从主程序中引用,那么Module就实际上没有效果了。

  2. 既然不能引用,那么建议对Module对象的使用用接口实现。在Module中实现接口方法,在外部使用这个接口不会导致Module被误编译。

  3. Module可以引用主程序中的东西,但是不要引用其他Module中的东西。

Module可以做什么呢?我主要将Module用于以下下两种情况

  1. 缩减主程序的体积,点击Module功能块时加载Module.
  2. 再入主程序后在用户感觉不到的情况下预加载剩下的Module.

现在讲正题,在demo中我这样表现Module的使用。(为了体现Module的意义,主程序生成的大小是原始flex大小248K, module内嵌了两张图片是674K)

  1. 如何创建Module.
  2. 主程序中点击按钮加载Module PictureWindow.
  3. 加载完毕后将模块添加到Box中,并通过接口调用PictureWindow中的方法setSelectIndex()设置显示的图片。

1. 如何创建Module.

可以通过New --> MXML Module -->Optmize for applicaiton --> OK 或者修改任意的已经创建好的Container组建(比如Canvas, panel)标签为Module,再或者继承Module的As class。

之后确保“鼠标右键项目”--> Property --> Flex Module  中有这个Module,没有的话点Add --> 选择Module的mxml或as文件 -->Optmize for applicaiton -- > OK

2. 主程序中点击按钮加载模块PictureWindow.

这里我使用了ModuleManager来动态加载需要的Module。这比ModuleLoder要灵活的多。

private function loadModule():void{
      m = ModuleManager.getModule("PictureWindow.swf"); //设置Module地址,地址是编译后swf在bin中的位置
      //设置事件监听
      m.addEventListener(ModuleEvent.READY,loadReady);
      m.addEventListener(ModuleEvent.PROGRESS,loadReady);
      m.addEventListener(ModuleEvent.ERROR,loadError);
      m.load(); //加载Module
}



3. 加载完毕后将模块添加到Box中,并通过接口调用PictureWindow中的方法setSelectIndex()设置显示的图片。

PictureWindow实现了PictureWindowInterface接口,其中暴露了setSelectIndex方法。再次强调不要直接使用Module对象,如果我们不注意写成
var window:PictureWindow = e.module.factory.create() as PictureWindow,那整个Module就前功尽弃了


//Module加载完成
  private function loadReady(e:ModuleEvent):void{
   //将Module对象转换为PictureWindowInterface
   var window:PictureWindowInterface = e.module.factory.create() as PictureWindowInterface
   this.box.addChild(window as DisplayObject);
   window.setSelectIndex(1); //通过Interface调用Module中的方法
}



好了,Module的使用就写这么多,看到这里你应该也可以创建自己的Module了,对于ModuleManager和IModuleInfo 中详细的内容,大家可以查阅Flex帮助。

12:00 了,睡了。






原文:http://www.flextheworld.com/?p=27
[本帖最后由 kevin.luo.sl 于 2009-01-02 21:04:11 编辑]

(您是游客)您没有权限查看附件

kevin.luo.sl的签名

评分

举报 使用道具 TOP

只看该用户 沙发!

Re:Adobe Flex迷你教程 -- 合理使用Module分割项目以及对Module的使用

学习之~~

评分

举报 使用道具 TOP

只看该用户 板凳

Re:Adobe Flex迷你教程 -- 合理使用Module分割项目以及对Module的使用

顶了!

评分

举报 使用道具 TOP

只看该用户 地板

Re:Adobe Flex迷你教程 -- 合理使用Module分割项目以及对Module的使用

顶楼上的
AdobeHitler的签名
Flex Builder 3中文教程:http://molebiology.blog.163.com/

评分

举报 使用道具 TOP

只看该用户 #4

Re:Adobe Flex迷你教程 -- 合理使用Module分割项目以及对Module的使用

实在是不错,我刚接触这个,要的就是这种文档,顶

评分

举报 使用道具 TOP

只看该用户 #5

Re:Adobe Flex迷你教程 -- 合理使用Module分割项目以及对Module的使用

跟着例子作下来,有几个问题,其实还是源于对Flex的不了解

1.PictureWindowInterface.as 里面只有简单的几句话,能不能直接写在PictureWindow.mxml 中?如果程序里有很多Module,那么每个Module都配这么一个as文件,好像感觉很乱

2.是不是说,一个程序的设计,应该是一个Application,然后多个Module,Application像一个主窗体,Module像是很多子窗体,到时候菜单之类的东西放在Application里面,然后再放一个Box,点各个菜单,加载不同的swf放到box里面。同时,用了该文章给出的方法,可以在点击菜单时,才会加载相应的swf,从而使用户等待的时间缩减到最短。

我理解的对不?

评分

举报 使用道具 TOP

只看该用户 #6

Re:Adobe Flex迷你教程 -- 合理使用Module分割项目以及对Module的使用

引用:
以下是会员fishsoft2008-11-20 20:01:29发表的内容
跟着例子作下来,有几个问题,其实还是源于对Flex的不了解

1.PictureWindowInterface.as 里面只有简单的几句话,能不能直接写在PictureWindow.mxml 中?如果程序里有很多Module,那么每个Module都配这么一个as文件,好像感觉很乱

2.是不是说,一个程序的设计,应该是一个Application,然后多个Module,Application像一个主窗体,Module像是很多子窗体,到时候菜单之类的东西放在Application里面,然后再放一个Box,点各个菜单,加载不同的swf放到box里面。同时,用了该文章给出的方法,可以在点击菜单时,才会加载相应的swf,从而使用户等待的时间缩减到最短。

我理解的对不?
1. PictureWindowInterface只有几句话是因为我想用简单的方式来说明对Module的调用,注意这里:var window:PictureWindowInterface = e.module.factory.create() as PictureWindowInterface. 你可以看到我在Module加载成功后将其转化为了PictureWindowInterface,因为我们不能直接将Module转化为PictureWindow,这样会因为引用了Module导致Module失败。 如果我们不用interface,那这里就只能将Module转化为 Object,这样就不知道module中公开的方法,所以PictureWindowInterface 是作为Module对外的接口。每一个Module配一个interface是很必要的,这不是乱,相反是让Module更清晰以及容易使用。项目开发往往会是一个团队协同工作,必须保证每个人的代码的一致性与可读性,如果Module没有对应的interface,那么除了你之外别的程序员可能就不知道怎么使用这个Module。


2. 一个程序是只有一个application没错,不过有多少个Module就要根据实际情况合理的安排。假如你的程序总大小只有400K左右,那么我觉得没有必要用Module,Module+主程序的总大小要稍微大于单个主程序编译。程序是从Application开始的,不过不一定Module就是加载到Application里,也可以是在Application中打开的窗口,或者其他组件中调用,主要还是看你程序的设计。

PS:你可以看到在PictureWindow的标签里我写了Implement="PictureWindowInterface",这就是在PictureWindow中实现接口的方法。

kevin.luo.sl的签名

评分

举报 使用道具 TOP

只看该用户 #7

学习了

评分

举报 使用道具 TOP

只看该用户 #8

我下载了demo程序,debug的时候发现
“ var window:PictureWindowInterface = e.module.factory.create() as PictureWindowInterface”
返回的window为null
我使用的是flex builder 3.0

评分

举报 使用道具 TOP

只看该用户 #9

我下载了demo程序,debug的时候发现
“ var window:PictureWindowInterface = e.module.factory.create() as PictureWindowInterface”
返回的window为null
我使用的是flex builder 3.0
-- by zhangle2006 (2008-12-5 16:34:28)

代码有个地方笔误写错了,


m.addEventListener(ModuleEvent.READY,loadReady);
m.addEventListener(ModuleEvent.PROGRESS,loading);
m.addEventListener(ModuleEvent.ERROR,loadError);


中间那个红色,应该是loading,代码里面写成和第一个一样了
kevin.luo.sl的签名

评分

举报 使用道具 TOP