麻球开发者平台,麻球开发者大赛

只看楼主 楼主

艾睿会员有特权,登陆后广告自动屏障。
现在就花5秒钟免费注册!更有好礼相送!

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

只看该用户 #10

菜菜地问一句,在这个例子中,每次点击那个按钮都会增加一个MODULE,应该怎样写判断是否已经有该MODULE存在,如果存在不进行第二次加载呢
lszf520的签名

评分

举报 使用道具 TOP

只看该用户 #11

菜菜地问一句,在这个例子中,每次点击那个按钮都会增加一个MODULE,应该怎样写判断是否已经有该MODULE存在,如果存在不进行第二次加载呢
-- by lszf520 (2008-12-9 9:03:01)

判断那个全局的moduleInfo变量,如果它不为null说明已经获得过module了,直接用它。
kevin.luo.sl的签名

评分

举报 使用道具 TOP

只看该用户 #12

是在LoadModule方法里面进行判断吧?
我在 m = ModuleManager.getModule之前判断了,但是报错了
lszf520的签名

评分

举报 使用道具 TOP

只看该用户 #13

问题解决了,3Q
lszf520的签名

评分

举报 使用道具 TOP

只看该用户 #14

还有一个问题请教一下kevin,要是同时有两个几个MODULE,怎样用moduleManage来控制加载不同的,有这样的例子吗?
lszf520的签名

评分

举报 使用道具 TOP

只看该用户 #15

可能加载多个模块的时候需要定义多个全局变量moduleInfo吗
lszf520的签名

评分

举报 使用道具 TOP

只看该用户 #16

正在找Module方面的文章  Kevin大哥就发了,谢谢啊。U‘re the One
收了

评分

举报 使用道具 TOP

只看该用户 #17

多谢分享,学习中。。。
[本帖最后由 clouds 于 2008-12-10 23:40:51 编辑]

评分

举报 使用道具 TOP

只看该用户 #18

受益了,谢谢分享

评分

举报 使用道具 TOP

只看该用户 #19

版主真好,经常找一些好的东西让大家学习.值得赞扬.

评分

举报 使用道具 TOP

只看该用户 #20

请问版主:
首先能不能详细解释一下ModuleManager与ModuleLoader的差别?
你说过,前者比后者灵活,可两者都是通过一个url引用目标,并load之,灵活处都是如何体现的呢?

其次利用Module的时候,无论是ModuleManager还是ModuleLoader,如何进行调用者与被调用者之间的数据传递比较好呢?
由于Module的特征,显然传递的参数是要声明在调用者一方的。
我想了解一下,是否传递方法不止一种,各自都有什么优缺点?
比如,通过静态Object属性是否好?
谢谢版主

评分

举报 使用道具 TOP

只看该用户 #21

1. 引用一段话

When you’re working with Flex Modules, most of the time the ModuleLoader component will be enough to get you up and running. It will quickly and easily let you load your Modules and add them to the display list, it’ll even dispatch an event to let you know when the Module is ready. Lovely stuff. It’s very similar to the SWFLoader component with some added Module-related goodness thrown in.

However, there may be times when the ModuleLoader component may not be appropriate for your needs, and you’ll have to get your hands dirty and get involved with the lower-level ModuleManager class. Some examples of when ModuleLoader might not be suitable include:

  *Your Module is entirely non-visual, and therefore shouldn’t be added to the display list

   * Performance is really important to your application, and the extra overhead of the ModuleLoader container is something you need to remove to try and speed things up. (ModuleLoader essentially wraps your Module’s content in an extra container, incurring a slight performance hit).

   * You need greater control over how and when your modules are loaded and unloaded.


2. 我在教程中也说到了这个问题,最简单的方法就是把load进来的module转换为Object对象,这样你可以调用Module中的属性,方法而flex不会出错,也不会导致 Module被编译到主文件中。但这样的坏处是Module暴露不够清晰,除了module的开发者其他人不知道怎样用, 所以做好用接口暴露module公开的属性和方法。 调用者用这个接口对象代表Module
kevin.luo.sl的签名

评分

举报 使用道具 TOP

只看该用户 #22

如果要是将主程序的一个Object传递给Module呢?
Module中还要将返回的结果写入这个Object
是否比爆了整个Module给主程序更稳妥一些呢?
比较只是传递一个参数,把整个Module都暴露出来是不是小题大做了呢?

评分

举报 使用道具 TOP

只看该用户 #23

根据实际情况写你的接口就好了,只是说用接口连接module和外部调用者
kevin.luo.sl的签名

评分

举报 使用道具 TOP

只看该用户 #24

顶了````
alizem的签名
茫然

评分

举报 使用道具 TOP

只看该用户 #25

学习了  貌似很实用

评分

举报 使用道具 TOP

只看该用户 #26

学习了。谢谢!

评分

举报 使用道具 TOP

只看该用户 #27

谢谢楼主

评分

举报 使用道具 TOP

只看该用户 #28

谢谢楼主.楼主辛苦了

评分

举报 使用道具 TOP

只看该用户 #29

评分

举报 使用道具 TOP

只看该用户 #30

感谢了。
最近正在弄这个module

评分

举报 使用道具 TOP

只看该用户 #31

我必须说说我的看法:

谢谢楼主分享!正需要这方面的资料

评分

举报 使用道具 TOP

只看该用户 #32

相见恨晚……网上关于Module中说的最好的一篇。

评分

举报 使用道具 TOP

只看该用户 #33

我看帖,我回帖,我美德!

谢谢分享~

评分

举报 使用道具 TOP

只看该用户 #34

评分

举报 使用道具 TOP
艾睿会员有特权,登陆后广告自动屏障。现在就花5秒钟免费注册!更有好礼相送!