预览模式: 普通 | 列表

[转载]如何学习Flex Framework

最近由於種種緣故又要開始做點教育訓練的事,先趁現在有空把手邊的資料整理一下。

*Flex 的基礎架構

關於 flex 基本上常被問到的不外乎就是「如何可以學好它?」,要瞭解這個問題的答案基本上只要看懂下面這圖就ok了。



*Actionscript 該學的重點

從最底層看起,最下面的 actionscript 3是一切的基礎,它是 flash/flex 編程使用的唯一程式語言,因此任何人想學好 flex 第一件事絕對是先摸熟 actionscript 這個語言,包含:

1. 它的基本語法與結構(array, hash, loop, if else…)

2. DisplayList (DisplayObject, DisplayObjectContainer)與 Event system(bubbling, propagating…)

3. Sound, Video, NetConnection 與 Graphics class

掌握 as3 的精華後,接下來就可以進入 flex framework。

*Flex framework 的重點

基本上 flex framework 就是用 actionscript 寫成的框架,因此也可以把它看成是 as3的最好示範,看著 framework source 學 actionscript 也是挺不錯的,只是路會變很長。

Flex Framework 整個體系非常博大精深,通常一般人不太可能完整把它學完,只需要針對最常用到的部份熟悉就好,圖中列出的那三塊(component, managers, style/skin)就是我個人認為所有初學者最優先該學會的。

*Component 該學些什麼

Component 是整個 flex framework 的基礎,幾乎80% 的元素都是由 UIComponent 繼承而來,例如最根本的的 它本身就是一個 UIComponent,因此,熟悉 component 就成為學好 flex framework 最根本也最重要的基本功

Flex 內建了 二十幾個 UI controls, 例如 Button, DataGrid, HBox等,以種類來分,這些 components 可以概分為三大類:

-Controls: Button, DateChooser, Slider…
-Containers: Box, DividedBox, Panel…
-List: DataGrid, Tree, TileList…

初學者第一步至少該學會怎麼用這些元件,瞭解每個元件的 properties, events, styles, effects…,知道怎麼在手冊裏查它的 API 文件,以及何時該用何種元件。

進階一點,則是學會怎麼修改這些元件,例如繼承一個 Button 下來加上不同的功能,或是寫不同的 skin border 來改變它的外觀。

再更進階,則是開始研究元件的生命週期,瞭解每個元件是何時初始化,元件內部有那些關鍵指令與它們個別的功用,然後可以試著建立自已的 custom component。

這一關看起來容易但實際上最困難,因為 flex 的 component framework 寫的非常龐大,雖然亂中有序但要在混沌中看出隱藏的架構然後抓住重點整串提起,就非得有人帶著指引正確的途徑才比較可能達成。

查看更多...

Tags: Flex framework

分类:Flash/Flex | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 102

基于PureMVC的一个Flex MP3播放器分析

      做Flex做久了做大了,就会觉得之前写的的Flex代码开始有点乱,哪怕你写的规范了,但总觉得结构松散,维护不方便,相信很多人刚开始做Flex的时候,都是想到什么功能,就写什么功能,或者有些好点的,就先画了个大体的流程图之类的,因为现在Flex普及得还不够,很多人做Flex也是试探阶段,不敢用作商业项目或其它大项目,只会用来试水技术层面的,所以都是做些小应用的多,就会忽略了设计一个比较好的框架来开发。所以Flex的开发框架就应运而生了。目前,好的Flex开发框架还不多,官方有个Cairngorm的框架,可能有些人会说这个框架有点复杂,其实不然,对比起Ruby的Rails,Java的Struts,Spring之类的开发框架,就显得简单得多了。只要清楚了解要MVC的概念,就会对这些框架并不陌生,但是今天的主角不是Cairngorm,而是另一个Flex框架 PureMVC,如果说Cairngorm复杂的话,那么PureMVC就显得简单多了,PureMVC比较轻盈,核心也只有十来个类,是一个轻量级的Flex框架,但PureMVC的通用性还是比较广的,有PHP的,有Java的有Python的。可能直接说框架的使用会比较抽象,那么就由一个实例来开始讲解吧,就用一个PureMVC做的一个MP3播放器。



先来看看PureMVC的结构图:



      在图中,Facade,Model,View,Controller都是PureMVC的四个核心类,都是单例模式的,用户无需操作那Model,View,Controller类,而用户只需要操作Facade就够了,Facade类用来管理其它的三个单例类,顾名思义,那三个类都是分别对应 MVC 模式的那三个元素,Facade也是个单例,它负责创建,激活,调用其它的三个类,管理MVC各屋的生命周期。
      而我们看看Model类,又细分了一个Proxy类出来,我们称其为代理吧,就是对数据模型的一个代理,负责访问我们的数据对象(Data Object)也就是Cairngorm中的ValueObject,其实都是同一个概念。而类结构上,对数据操作的代理Proxy类就只有一个,但可以从我们的应用上又分为Local Proxy,Remote Proxy,其实都只是Proxy ,只是根据用户的应用的不同,在Proxy里面实现不同的功能而已,比如如果你操作本地数据(内存中的数据,并非本地操作系统的文件),你可以写一些VO的getter/setter直接操作数据,而如果是Remote的数据的话,你可以在Proxy类里定义一些HttpService,URLLoader,WebService等等的访问远程数据的API,之后将获取到的远程数据放在VO中。
      在Controller类里分出一个叫Command的类来,直接翻译的话,就是“命令”类,通常这些类都是用来处理一些业务流程,某些算法操作等等的操作。比如现在用户单击了“获取数据”的按钮,程序将从Proxy类里访问服务器,服务器返回数据之后,那些都是程序看得懂的数据,比如是XML,而如果数据结构比较复杂,你不可能直接将数据显示给用户看吧?那就将解析这些数据的工作交给Command来做,比如写一个ParseCommand的类,将获得的XML数据传递给该Command,在Command里进行数据的过滤,排列,整理等等的功能。再将组积好后数据交给Mediator来进行显示,而Mediator,就是下面我们要说的。
      在View类里分出一个Mediator的类,该类是用来对ViewComponent操作的,我们暂且叫它“中介类”吧,为什么叫“中介”呢?其实就是用户界面(UI)与程序结构逻辑之间的中介,因为用户在界面上的操作,比如Button的Click事件不是直接反映到Command或者Proxy类上的,而是反映给Mediator类,在Mediator里作一些简单处理,比如验证合法性,触发其它ViewComponent的状态等,在这里也会将用户的数据封装在VO里面,再交由Command或Proxy来进一步处理。基本上Mediator只对用户的操作或用户提交的数据进行封装并简单预处理,而业务逻辑,存储服务的就应交给Command和Proxy来做,这样MVC分工好,使得程序结构比较严紧,可读性强,实现松耦合。当你改变了UI时,只需要对Mediator进行相应的改变就行了,而你改变了业务的逻辑与算法之类的话,也相应的改变Command就可以了,对其它模块的影响不大。
      在上面这个图中,没有列出来的一个很重的类,就是 Notification 类,这个类为什么十分重要,可以说也是PureMVC的润滑剂,因为他是连接MVC各大部分的一个消息机制,就像是Cairngome里面的CairngomeEvent与FrontController,为了实现更好的松耦合,就是靠这个消息机制,因为各大部分中,很少直接的引用调用,而是以“发消息”(或者说是通知吧)来相互数据交流与通讯,这里是很好的使用了“观察者模式”,因此,在某一部分改变的处理逻辑的话,只是它所发送的消息没有改变,或者所侦听的消息没有改变,那么就不会影响到其它部分。
      另外要注意几点,Command类是短生命周期的,也就是说,当有消息通知需要用到该Command进行处理时,Facade就会创建这个Command类,并将数据传入Command里面进行处理,当处理完成后,其生命周期就会结束,所以不要将一些长生命周期的数据存放在Command里,比如不要将一些状态数据信息存放在Command里面。还有就是Proxy类只会发送“消息”(通知),而不会接收任何消息,而Mediator与Command则可以发送与接收,所以你不能直接发消息通知Proxy去加载数据,而是通过引用Proxy的实例调用相关的函数。理论就说了一大堆了,我们来看看那个MP3播放器实例吧!

查看更多...

Tags: Flex PureMVC

分类:Flash/Flex | 固定链接 | 评论: 3 | 引用: 0 | 查看次数: 373

做了一个基于PureMVC框架的MP3播放器!

      近来在学习PureMVC框架,感觉挺不错的一个Flex开发框架,其实不只是Flex,PureMVC还应用在很多平台上,比如Flash,Java,Perl,Python,Ruby,PHP等都有PureMVC的身影,看了下它的文档,就自已学着那个结构,做了一个Flex的MP3播放器,就放在了博客的右侧栏,天气预报的下面。先给看看:)过两天再给出源码与解说教程,主要是说说PureMVC的程序结构。MP3播放器就算是小菜一碟了!

顺带一提,播放器里的MP3文件是放在我的博客空间的,我心痛我的空间流量,所以只放了几首歌曲用于测试,朋友们不要有事没事就清了缓存狂加载我的MP3哈,上个月就因为空间流量超标被关停了。:(

查看更多...

Tags: PureMVC Flex mp3播放器

分类:Flash/Flex | 固定链接 | 评论: 1 | 引用: 0 | 查看次数: 319

Flex中的皮肤(二)完

      在上一篇文章中,为大家介绍了Flex中皮肤的简单且基本也是最常用的用法,就是先在外部程序中做好皮肤样式,之后再在Flex中加载这些皮肤资源,比如是PNG图片,或者是SWF文件等,这些方法都是比较直接且方便简单的。不过灵活性还是不太好,而现在这篇文章中要讲的,就是从程序里AS编写的皮肤,你可以更灵活自由地控制皮肤的样式与表达方式等,而不用依赖于外部的图片或SWF资源,不过这样还是有些缺点的,就是扩展或是改变时就比较不灵活,像图片资源的皮肤的话,可以很轻易的改变不同的图片的路径资源等就可以修改了不同的皮肤模式,而用AS Graphics写的皮肤的话,要修改一下那些代码,当然,你也可以在AS代码里写上动态加载其它图片资源又或者作一些更高级的效果等等。

      先在这里解析一下,要以代码方式自定义一个皮肤的话,需要自已编写一个皮肤子类,继承ProgrammaticSkin这个类,这个是所有编写自定义皮肤的基类,该类也派生了另外两个类:RectangularBorder 与 Border 类,都是差不多的,如果你是写Icon之类的小皮肤的话,比如CheckBox或者RadioButton这类皮肤不需要太复杂的画图逻辑,而且大小固定,就像是一个小Icon吧,只是有几个状态而已,这类小皮肤的话,继承ProgrammaticSkin就可以了,而写一些复合的控件,背景大小可以调节之类的皮肤(其实就是大部分皮肤)就用Border或者RectangularBorder类。但都有一个相同点,就是继承了那些类之后,都必需覆盖 updateDisplayList 这个方法,这个方法是由程序自动调用,当需要用到控件时,需要控件的皮肤进行表现时,就会调用那个方法,所以你必需覆盖它,并将你的画图逻辑代码写在那个方法里面。还有要注意的是,这个皮肤类会与你应用这皮肤的控件的Style设置共享,也就是说你可以在编写这个皮肤类代码里面,使用getStyle()等等方法获得设置在目标控件中的风格属性,比如说是<mx:Panel backgroundColor="0xffffff" borderSkin="MySkin"> 那么你可以在MySkin代码里获取这个颜色值来进行画出该颜色的图片或其它操作,而直接将颜色值写死在代码里是不规范的,就如我下面贴出来的的代码,不过出于自已懒,快速代个示例代码,所以犯这个错了。说多了,下面看看代码先。

好了,我们先看看看代码,这份代码是写了一个Panel的皮肤:
程序代码 程序代码

package com.jiangzone
{
    import mx.skins.Border
    import mx.core.EdgeMetrics;
    import mx.core.Container;
    import mx.graphics.RectangularDropShadow;
    
    public class MyPanelBorderSkin extends Border {
        
        public function MyPanelBorderSkin():void {
        }
        
        /**
         * 该方法必需要覆盖,如果你要自定义自已的皮肤的话,
         * 该方法当在控件更新外观时将会被自动调用
         * 会传入两个参数数,第一个是Width,第二个是Height,即是该控件的宽与高
         * */
        override protected function updateDisplayList(w:Number,h:Number):void {
            super.updateDisplayList(w,h);
            
            var ba:uint = 1;                //backgroundAlpha    背景透明度
            var bg:uint = 0xffffff;            //backgroundColor    背景颜色
            graphics.clear();                //graphics这个属性是父类里已经提供了的
            var p:Container = parent as Container;        //获取该皮肤所应用在的父容器,这里为Panel
            
            //这里需要注意,一定要判断父容器是否已被设置,在文章里作解释
            if(p){
                //获取容器定义的区域边界信息对象            
                var vm:EdgeMetrics = p.viewMetrics;        
                //设置四个角的圆度
                var radiusContent:Object = {tl:vm.top,tr:0,bl:0,br:vm.top};    
                //标题栏圆度    
                var radiusTitle:Object = {tl:vm.top,tr:0,bl:0,br:0};        
                //画一个圆角矩形,整个背景
                this.drawRoundRect(0,0,w,h,radiusContent,bg,ba);
                //画一个圆角矩形,标题栏    
                this.drawRoundRect(0,0,w,vm.top,radiusTitle,0xff0000,.7);
                //画一个圆角矩形,标题栏的那个高光水晶条
                this.drawRoundRect(0,0,w,vm.top / 2,radiusTitle,0xffffff,.3);
                
                //下面是画阴影的。
                var dropShadow:RectangularDropShadow = new RectangularDropShadow();
                dropShadow.distance = 8;
                dropShadow.angle = 60;
                dropShadow.color = 0x000000;
                dropShadow.alpha = 0.4;
        
                dropShadow.tlRadius = radiusContent.tl;
                dropShadow.trRadius = radiusContent.tr;
                dropShadow.blRadius = radiusContent.bl;
                dropShadow.brRadius = radiusContent.br;
        
                dropShadow.drawShadow(graphics, 0, 0, w, h);
            }
        }
    }
}

查看更多...

Tags: Flex

分类:Flash/Flex | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 470

Flex中的皮肤(一)

      好久没有写文章了,一直用“忙”来为自已找籍口,其实是懒,不过这个月发生了这么大的事情 5.12 让我们每个人都永记心中,看到中国人的团结,看见解放军们志愿者们这么努力地为灾区奉献,我也不能再为自已找借口了,虽然我远在广东,不能到现场去参与救缓,钱也捐过了,但想想,我还有事情可以做的,就是用我自已的知识,写点技术文章,虽则不能直接的帮助到灾区,但也为国民提高Flex技术知识出分力,做好本职工作。在这里哆嗦点也得说句:为灾区遇难者祈祷,为灾区救缓不懈努力的军民给与崇高的敬意!
.....................................................(三分钟后)

      好了,我们转入正题,之前我也写过Flex的动画与变换的文章,不知道大家有没有看过。现在我要写的就是Flex中的皮肤样式方面的,我技术不太好,算是自已学习Flex过程中的理解体会吧。
      这里是第一篇,将讲述一下Flex中如何应用UI的皮肤,其实应用UI皮肤不难,你们在使用Flex的过程中是否觉得Flex中自带的皮肤样式不太好看?或者是想自已做个比较有特色的?下面就我们来说说皮肤吧,先来个简单的,你们在做网页时,做导航按钮什么的很多人都是用一个图片来作为一个按钮吧?之后做几个不同的颜色,之后就在CSS或者JS里设置一下当鼠标Over和Down和Out等等动作时,就切换不同颜色的图片,这样实现动态效果。在Flex里也可以如此简单的做皮肤。你可以先画好一个UI的皮肤,之就就将该图片应用到Flex里面。
先来看看效果:
Flash动画

查看更多...

Tags: Flex

分类:Flash/Flex | 固定链接 | 评论: 1 | 引用: 0 | 查看次数: 569

冠军永远跑在掌声之前!

      有很多人一生追逐成功,渴望辉煌。不是说辞让天下了,连一个小位置,甚至一个小小的兼职机会都不肯放弃。因为我们耐不住寂寞,我们需要这种外在的辉煌,来证明我们自己的能力。

  有这样一句话:在真正的比赛中,冠军永远跑在掌声之前。

  这句话很耐人寻味。大家想一想,一个跑步比赛,不管是一百米还是马拉松,冠军跑到终点之前,听众席上是没有掌声的;只有当冠军冲过了线,掌声才会响起。所以,落后的运动员听到的掌声比冠军要多。

  冠军是在寂寞中第一个冲到终点的人,而这种寂寞,最终会打开掌声的辉煌。所以,冠军永远跑在掌声之前。

  其实这句话对我们每一个人都是一种启发。

  古人的散淡,古人的...

查看更多...

Tags: 庄子 人生哲学

分类:人性感悟 | 固定链接 | 评论: 1 | 引用: 0 | 查看次数: 410

iGoogle? Web3.0? 值得研究!

      今天打开FireFox,我的主页是设置了Google为主页,当我打开FF时,就出现了iGoogle的页面,那页面里提示我是否将JiangZone添加到Google,我还不知怎么回事,怎么Google主页找到我的博客了?“添加到Google”又是什么回事?就试着添加进去了,后来跳转到 iGoogle 的页面,我现在才知道,原来Google推出了新产品iGoogle了,那里有很多小工具可以自行自定义定制,有日历,有翻译等什么的,以后当你打开主页时,就出现那些你定制的东西,但我好像没有登录啊,应该是存在Cookie里的吧!这莫非就是李开复大叔所说的Web3.0应用?不过我用了一会儿,感觉还是挺好的,挺方便,而且开放了平台的,即意味着,可以自由让开发人员去扩展更多的小工具,用Google JavaScript的库。不过如果我换了另一台机器访问的话,应该那些小工具就没有了吧?又或者我清空了本机的Cookie,那些定制设置也清空了吧?如果是基于Cookie的话,不过我未试过,有空得研究一下这是什么回事,也觉得这种应用方向还是有将来的,就我个人感觉而言。点击进入他的开发人员页面,介绍得还挻全的,有空得研究一下自已也做些小应用出来试试!大家有兴趣的话,也可以去试下!添加RSS收取点也可以在iGoogle页面里面显示出该站的一些更新内容!即是内置了一个RSS阅读器的小工具吧!
下面是iGoogle的页面:iGoogle

查看更多...

Tags: google web3.0

分类:一切随心 | 固定链接 | 评论: 2 | 引用: 0 | 查看次数: 466

写了一个Flash效果!

      好久没有发表文章了,这天写了一个Flash的一个动画菜单的效果,在之前看到一个站的一个菜单效果挺不错,就试着自已也用纯AS3写一个出来试试。看了一下研究了一个算法,自已也写了个出来,写得比较粗糙,所以运行时可能还会有点小问题,有空要再优化一下算法才行。
先看效果:
Flash动画


有点像 Apple 的菜单效果。原本是计划用图片的,不过后右为简单起见,就只用Sprite画的一个小方格代替了,供大家学习学习,也希望高手指点一下算法!

查看更多...

Tags: Flash 效果

分类:Flash/Flex | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 616