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

最新推荐文章于 2020-12-14 11:03:25 发布

原创最新推荐文章于 2020-12-14 11:03:25 发布 · 140 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#框架 #Flex #Flash #MVC #领域模型

FLASH 专栏收录该内容

35 篇文章

订阅专栏

本文对比了Cairongorm和pureMvc两个Flex框架，并指出其不足。作者建议采用自定义MVC方式，分离视图与数据处理逻辑，提高调试便利性和代码维护性。同时，提倡根据具体需求构建定制化的框架。

时下，国人都热衷于开源框架，其实很多开源框架并不实用，开源框架成千上万，好用的还是少数，有时候，真得还要靠自己去造一些轮子。在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:

<?xml version="1.0" encoding="utf-8"?>
<MinizableTitleWindow
xmlns="com.xdfsoft.controls.*"
xmlns:mx="http://www.adobe.com/2006/mxml" width="500" height="400"
showMinimizeButton="false" title="资源选择">
<mx:Script>
<![CDATA[
import com.xdfsoft.right.model.ListResSelectModel;
[Bindable]
public var model:ListResSelectModel;
]]>
</mx:Script>
<mx:VBox width="100%" height="100%" verticalGap="0">
<mx:Canvas width="100%" height="100%">
<mx:DataGrid height="100%" width="100%" dataProvider="{this.model.resObjList}">
<mx:columns>
<mx:DataGridColumn headerText="选择" width="100" >
<mx:itemRenderer>
<mx:Component>
<mx:VBox horizontalAlign="center" verticalAlign="middle">
<mx:CheckBox click="{data.selected=!data.selected}" selected="{data.selected}" />
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="资源编号" width="200" dataField="resourceObjectCode"/>
<mx:DataGridColumn headerText="资源名称" width="400" dataField="resourceObjectName"/>
</mx:columns>
</mx:DataGrid>
</mx:Canvas>
<mx:Canvas width="100%" height="12%">
<mx:Button x="283" y="7" label="确定" click="{this.model.doSelectOk(this);}"/>
<mx:Button x="358" y="7" label="取消" click="{this.model.doSelectCancel(this);}"/>
<mx:LinkButton x="18" y="10" color="blue" fontWeight="normal" textDecoration="underline" label="全选" click="{this.model.doSelectAll(1);}"/>
<mx:LinkButton x="70" y="10" color="blue" fontWeight="normal" textDecoration="underline" label="反向选择" click="{this.model.doSelectAll(2);}" />
<mx:LinkButton x="146" y="10" color="blue" fontWeight="normal" textDecoration="underline" label="清除选择" click="{this.model.doSelectAll(0);}"/>
</mx:Canvas>
</mx:VBox>
</MinizableTitleWindow>

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

Code:

package com.xdfsoft.right.model
{
import com.xdfsoft.controls.MessageBox;
import flash.events.Event;
import flash.events.EventDispatcher;
import mx.collections.ArrayCollection;
import mx.core.IFlexDisplayObject;
import mx.managers.PopUpManager;
public class ListResSelectModel extends EventDispatcher
{
private var _resObjList:ArrayCollection=null;
private var _onSelectOk:Function;
private var _onSelectCancel:Function;
private var _otherArgs:Array;
public function ListResSelectModel(resObjList:ArrayCollection,onSelectOk:Function,onSelectCancel:Function=null,otherArgs:Array=null)
{
this.resObjList=resObjList;
this._onSelectOk=onSelectOk;
this._onSelectCancel=onSelectCancel;
this._otherArgs=otherArgs;
}
[Bindable(event="resObjListChange")]
public function get resObjList():ArrayCollection
{
return this._resObjList;
}
public function set resObjList(resObjList:ArrayCollection):void
{
if (this._resObjList==resObjList) return;
this._resObjList=resObjList;
dispatchEvent(new Event("resObjListChange"));
}
public function doSelectOk(window:IFlexDisplayObject):void
{
if (this._onSelectOk==null) return;
var selResObjs:Array=this.getSelectResObjs();
if (selResObjs.length==0)
{
MessageBox.note("请选择一个或者多个资源再执行此操作");
return;
}
var args:Array=this._otherArgs.concat();
args.splice(0,0,selResObjs);
this._onSelectOk.apply(this,args);
PopUpManager.removePopUp(window);
}
public function doSelectCancel(window:IFlexDisplayObject):void
{
if (this._onSelectCancel!=null)
{
this._onSelectCancel.apply(this);
}
PopUpManager.removePopUp(window);
}
private function getSelectResObjs():Array
{
var result:Array=new Array();
if (this.resObjList==null) return result;
for each(var resObj:ResourceObjVo in this.resObjList)
{
if (resObj.selected)
{
result.push(resObj);
}
}
return result;
}
public function doSelectAll(flag:int):void
{
for each(var resObj:ResourceObjVo in this.resObjList)
{
switch(flag)
{
case 0:
resObj.selected=false;
break;
case 1:
resObj.selected=true;
break;
case 2:
resObj.selected=!resObj.selected;
break;
}
}
}
}
}

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