`
sooxin
  • 浏览: 257146 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

Flex框架选择的一点个人之见

阅读更多

时下,国人都热衷于开源框架,其实很多开源框架并不实用,开源框架成千上万,好用的还是少数,有时候,真得还要靠自己去造一些轮子。在Flex开发领域,较有名气的框架有两个,Cairongorm和pureMvc,在2007年的时候我曾在博客上分享了这两个框架的一些资料。

但经过一段时间的实践,我认为这些框架均不实用。

cairongorm过于死板,完成一个工作需要N多类,做很多事情都是在舍近求远。

pureMvc虽然比较灵活,考虑了视图的复用。但是工程大而视图复用很少的时候,使用这个框架非常不合适。当实在需要视图复用时,可以考虑使用pureMvc框架。另外,使用pureMvc要注意在你的窗口关闭时要及时清除已经注册的资源,否则会导致内存泄露。

以上还都是小问题,大问题在于,不论cairongorm和pureMvc,都是基于事件(消息),一个事件(消息)发出后,就很难知道那些组件对这些事件和消息感兴趣,也很难知道那个组件对这个消息或者事件进行了监听和处理。造成程序的调试和维护相当困难。很多隐藏的BUg都是因此而产生的。

所以建议不要使用这两个框架。我们在项目中因使用pureMvc吃了很多苦头,希望后来者重视。

我建议开发者按照如下思路进行Flex开发,也是按照MVC思路设计的。

  • 1.写一个mxml文件和一个as文件,二者名称相同但是扩展名不同。
  • 2.mxml文件作为视图和视图控制控制器(视图跳转、弹出的逻辑放在MXML文件中,因为子视图的弹出往往需要主视图作为参数),as文件作为model。model上定义视图所需要的数据和数据的处理逻辑(比如,获取远程的数据等)。mxml上的控件绑定model上的数据。model无需知道mxml,mxml在创建时需要引用model。
  • 3.当用户操作界面发生请求需要处理数据时,mxml上的响应控件事件的处理函数调用model上的方法,改变数据,改变后的数据通过绑定功能自动地刷新界面(mxml所生成的swf)。

这样做的最大好处就是便于调试,其次是把视图部分和数据以及数据处理部分分离,当视图上的控件发生变化不会影响数据处理的业务。

具体的例子如下:

这是一个视图的MXML,用来实现通用“资源”选择。包括全选、反选,按下确定按钮就会返回已被选择的资源数据。这里的<MinizableTitleWindow>是一个自定义组件,可以帮它当做panel。

Code:
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <MinizableTitleWindow  
  3.     xmlns="com.xdfsoft.controls.*"  
  4.     xmlns:mx="http://www.adobe.com/2006/mxml" width="500" height="400"  
  5.     showMinimizeButton="false" title="资源选择">  
  6.     <mx:Script>  
  7.         <![CDATA[  
  8.         import com.xdfsoft.right.model.ListResSelectModel;  
  9.         [Bindable]  
  10.         public var model:ListResSelectModel;  
  11.           
  12.         ]]>  
  13.     </mx:Script>  
  14.     <mx:VBox width="100%" height="100%" verticalGap="0">  
  15.         <mx:Canvas width="100%" height="100%">  
  16.             <mx:DataGrid  height="100%" width="100%"  dataProvider="{this.model.resObjList}">  
  17.                 <mx:columns>  
  18.                     <mx:DataGridColumn headerText="选择" width="100" >  
  19.                         <mx:itemRenderer>  
  20.                             <mx:Component>  
  21.                                 <mx:VBox  horizontalAlign="center" verticalAlign="middle">  
  22.                                     <mx:CheckBox click="{data.selected=!data.selected}" selected="{data.selected}" />  
  23.                                 </mx:VBox>  
  24.                             </mx:Component>  
  25.                         </mx:itemRenderer>  
  26.                     </mx:DataGridColumn>  
  27.                     <mx:DataGridColumn headerText="资源编号" width="200" dataField="resourceObjectCode"/>  
  28.                     <mx:DataGridColumn headerText="资源名称" width="400" dataField="resourceObjectName"/>  
  29.                 </mx:columns>  
  30.             </mx:DataGrid>  
  31.         </mx:Canvas>  
  32.         <mx:Canvas width="100%" height="12%">  
  33.             <mx:Button x="283" y="7" label="确定"  click="{this.model.doSelectOk(this);}"/>  
  34.             <mx:Button x="358" y="7" label="取消" click="{this.model.doSelectCancel(this);}"/>  
  35.             <mx:LinkButton x="18" y="10" color="blue" fontWeight="normal" textDecoration="underline" label="全选" click="{this.model.doSelectAll(1);}"/>  
  36.             <mx:LinkButton x="70" y="10" color="blue" fontWeight="normal" textDecoration="underline" label="反向选择" click="{this.model.doSelectAll(2);}" />  
  37.             <mx:LinkButton x="146" y="10" color="blue" fontWeight="normal" textDecoration="underline"  label="清除选择" click="{this.model.doSelectAll(0);}"/>  
  38.         </mx:Canvas>  
  39.     </mx:VBox>  
  40. </MinizableTitleWindow>  

上面视图MXML对应的AS类模型如下:

Code:
  1. package com.xdfsoft.right.model   
  2.             {   
  3.                 import com.xdfsoft.controls.MessageBox;   
  4.                 import flash.events.Event;   
  5.                 import flash.events.EventDispatcher;   
  6.                 import mx.collections.ArrayCollection;   
  7.                 import mx.core.IFlexDisplayObject;   
  8.                 import mx.managers.PopUpManager;   
  9.                 public class ListResSelectModel  extends  EventDispatcher   
  10.                 {   
  11.                     private var _resObjList:ArrayCollection=null;   
  12.                     private var _onSelectOk:Function;   
  13.                     private var _onSelectCancel:Function;   
  14.                     private var _otherArgs:Array;   
  15.                     public function ListResSelectModel(resObjList:ArrayCollection,onSelectOk:Function,onSelectCancel:Function=null,otherArgs:Array=null)   
  16.                     {   
  17.                         this.resObjList=resObjList;   
  18.                         this._onSelectOk=onSelectOk;   
  19.                         this._onSelectCancel=onSelectCancel;   
  20.                         this._otherArgs=otherArgs;   
  21.                     }   
  22.                     [Bindable(event="resObjListChange")]   
  23.                     public function get resObjList():ArrayCollection   
  24.                     {   
  25.                         return this._resObjList;   
  26.                     }   
  27.                        
  28.                     public function set resObjList(resObjList:ArrayCollection):void  
  29.                     {   
  30.                         if (this._resObjList==resObjList) return;   
  31.                         this._resObjList=resObjList;   
  32.                         dispatchEvent(new Event("resObjListChange"));   
  33.                            
  34.                     }   
  35.                     public function doSelectOk(window:IFlexDisplayObject):void  
  36.                     {   
  37.                         if (this._onSelectOk==nullreturn;   
  38.                         var selResObjs:Array=this.getSelectResObjs();   
  39.                         if (selResObjs.length==0)   
  40.                         {   
  41.                             MessageBox.note("请选择一个或者多个资源再执行此操作");   
  42.                             return;   
  43.                         }   
  44.                         var args:Array=this._otherArgs.concat();   
  45.                         args.splice(0,0,selResObjs);   
  46.                         this._onSelectOk.apply(this,args);   
  47.                         PopUpManager.removePopUp(window);   
  48.                     }   
  49.                     public function doSelectCancel(window:IFlexDisplayObject):void  
  50.                     {   
  51.                         if (this._onSelectCancel!=null)   
  52.                         {   
  53.                             this._onSelectCancel.apply(this);   
  54.                         }   
  55.                         PopUpManager.removePopUp(window);   
  56.                     }   
  57.                     private function getSelectResObjs():Array  
  58.                     {   
  59.                         var result:Array=new Array();   
  60.                         if (this.resObjList==nullreturn result;   
  61.                         for each(var resObj:ResourceObjVo in this.resObjList)   
  62.                         {   
  63.                             if (resObj.selected)   
  64.                             {   
  65.                                 result.push(resObj);   
  66.                             }   
  67.                         }   
  68.                         return result;   
  69.                     }   
  70.                     public function doSelectAll(flag:int):void  
  71.                     {   
  72.                         for each(var resObj:ResourceObjVo in this.resObjList)   
  73.                         {   
  74.                             switch(flag)   
  75.                             {   
  76.                                 case 0:   
  77.                                     resObj.selected=false;   
  78.                                     break;   
  79.                                 case 1:   
  80.                                     resObj.selected=true;   
  81.                                     break;   
  82.                                 case 2:   
  83.                                     resObj.selected=!resObj.selected;   
  84.                                     break;   
  85.                             }   
  86.                         }   
  87.                     }   
  88.                 }   
  89.             }  

除了这些之外,我觉得为了化简Flex的开发,大家可以自己动手造一些框架,比如说仿照Java Colleciton框架造AS下的Collection框架。造一个类库对远程调用进行封装,以简化远程调用。造一些常用窗口的MXML模板库,简化常用的维护、查询窗口的开发,.......通过构建这些针对应用开发中特定领域的框架对应用开发带来的简化远比用类似Cairongorm,pureMvc这些万能丹要好的多。我们需要的是开阔思路,不要被外国的轮子迷了眼,其实这些轮子代码不复杂,功能也不强大。

分享到:
评论

相关推荐

    flex框架之Cairngorm框架(一)

    flex框架之Cairngorm框架,包括Cairngorm框架

    flex框架 JAVA-FLEX

    Flex框架是一种基于Adobe Flash Player和Adobe AIR运行时的开源应用程序框架,主要应用于创建富互联网应用程序(Rich Internet Applications,简称RIA)。在Java-FLEX的结合中,Flex提供了前端用户界面的构建能力,...

    Flex+Java登录实例完整框架 基于Flex框架

    Flex+Java登录实例完整框架是将 Adobe Flex 与 Java 技术结合,构建的一个功能完善的登录系统。这个框架主要用于创建富互联网应用程序(Rich Internet Applications,RIA),提供丰富的用户体验和强大的后端数据处理...

    SpringFlex框架搭建

    SpringFlex框架搭建是一个将Spring框架与Adobe Flex技术结合使用的实践过程。这个框架允许开发者利用Spring的强大功能来构建后端服务,同时使用Flex作为前端展示层,提供富互联网应用程序(RIA)的用户体验。在本篇...

    基于Flex框架的ArcGISServer开发

    ArcGIS Server FOR FLEX API开发 框架结构 Flex Builder Project设置 Widget开发部署 Sample Flex Viewer核心编程 Flex Viewer 和Widget 部署 应用案例

    flex开发框架

    Flex开发框架是一个基于Adobe Flex技术的开发工具集,主要用于构建富互联网应用程序(Rich Internet Applications,简称RIA)。在本文中,我们将深入探讨Flex的核心概念、主要特点、开发环境以及如何使用Flex进行...

    Flex开发框架

    Flex开发框架是一个基于Adobe Flex技术的开发环境,用于构建富互联网应用程序(Rich Internet Applications, RIA)。Flex提供了强大的用户界面组件库,使得开发者能够创建出交互性极强、视觉效果丰富的Web应用。在这...

    Flex+Java完美整合框架

    Flex+Java完美整合框架是一种高效的应用开发解决方案,它结合了Adobe Flex的富互联网应用程序(RIA)开发能力与Java的强大后端服务支持。Flex是用于构建交互式、图形丰富的Web应用的开源框架,而Java则提供了稳定的...

    flex企业开发前端框架FLEX_FEAF.rar

    FeaF,中文名是【飞帆】,是flex enterprise application frame的意思。 ______________________________________________ | | FeaF——飞帆 | 直达web2.0的海岸 | 后web2.0时代全面学习【Flex】技术的飞帆 ...

    Flex3+ssh框架

    Flex3+SSH框架是一种用于构建富互联网应用程序(RIA)的技术组合,它结合了Adobe Flex 3作为前端开发工具,以及Spring、Struts和Hibernate这三种Java后端框架。这种组合允许开发者创建高度交互且功能丰富的Web应用,...

    Flex Mate框架swc包及Mate用法

    Flex Mate框架是一个强大的ActionScript 3.0框架,主要用于构建Adobe Flex和Flash Builder应用程序。它提供了灵活的依赖注入(DI)和控制反转(IOC)功能,使得开发人员能够更高效地组织代码,提高代码的可重用性...

    Ext框架与Flex框架的整合实例

    环境:Window XP Sp3, IE 7.0, Tomcat 6.0, MyEclipse 5.5, Flex Builder 3, Ext 3.2。 使用步骤: ...阅读对象:熟悉Flex框架、Ext框架技术的人员,并且希望使用它们开发出更丰富多彩的B/S架构的应用。

    flex_4框架类_关系图

    标题:"flex_4框架类_关系图" 描述:"flex_4框架类_关系图,官方文档,参考资料",这份文档提供了Adobe Flex 4框架中各类组件之间的关系图表,旨在帮助开发者更好地理解Flex 4框架的架构与设计模式,以及各组件间的...

    flex 样式选择器

    Flex样式选择器是Adobe Flex框架中的一个重要组成部分,用于在Flex应用程序中定义和管理用户界面元素的外观。这个选择器允许开发者以声明式的方式定制控件的样式,从而实现丰富的视觉效果和交互体验。Flex框架是基于...

    基于Flex框架的应用实例

    Flex框架是一种强大的开发工具,主要用于构建富互联网应用程序(RIA,Rich Internet Applications)。...通过深入研究“基于Flex框架的应用实例”,我们可以更全面地理解Flex的强大功能,并将其应用于实际工作之中。

    Flex框架的基本原理.docx

    Flex框架是Adobe开发的一种用于构建富互联网应用程序(RIA)的框架,主要应用于Flash平台上。它允许开发者使用ActionScript(AS)编程语言和MXML标记语言来创建交互式的、基于浏览器的应用程序。Flex框架的核心在于...

    Flex框架Cairngorm经典案例源码

    Flex框架是Adobe公司推出的一种基于ActionScript和Flash Player运行时的开发框架,主要用于构建富互联网应用程序(Rich Internet Applications,简称RIA)。Cairngorm是Flex社区中流行的一种轻量级MVC(Model-View-...

    pomer flex 框架

    Pomer是一个开源的企业信息管理系统基础框架 Pomer主要采用spring和hibernate做为后台框架,通过blazeds(LCDS)RemoteObject与java后台通信,前台采用Cairngorm MVC框架, Pomer框架主要作用就是简化blazeds(LCDS)...

    flex框架之Cairngorm框架(二)

    在“flex框架之Cairngorm框架(二)”这个主题中,我们可能深入探讨如何使用Cairngorm与后台进行通信。这通常涉及以下步骤: 1. **创建Command**:首先,为与后台的通信创建一个命令类,例如`...

    一款轻量级的FLEX MVC开发框架

    “一款轻量级的FLEX MVC开发框架”指的是该资源提供了一个针对Adobe Flex应用的轻量级模型-视图-控制器(MVC)架构的开发框架。Flex是基于ActionScript 3的开放源代码SDK,用于构建富互联网应用程序(RIA)。MVC模式...

Global site tag (gtag.js) - Google Analytics