flex系列文章3：flex能做企业级开发吗？我的答案是当然可以！

最新推荐文章于 2011-09-13 11:51:38 发布

转载最新推荐文章于 2011-09-13 11:51:38 发布 · 1.1k 阅读

收录于

adobe flex

本文介绍如何使用Flex结合Cairngorm架构进行企业级应用开发，包括配置文件示例和服务调用流程，展示了从用户操作到服务器交互的具体实现。

商业RIA的第一个实现是Macromedia Flex1.0在2002年，但终究由于早期FlashPlayer低劣的性能，FlexBuilder的模糊和最弱的debugging功能而夭折。04年1.5的出现虽然依然有很多问题，但真正商业RIA企业级开发的时代已经到来了。那么基于RIA思想的Flex都可以做些什么东西呢？我的答案：结合当前已经成熟的企业级开发方案如J2EE，.NET等，它最适合做中大规模企业级开发。为什么？因为Flex的核心价值在表现层，它有基于组件的表现层快速开发模式，结合比较健壮的一些设计架构如Cairngorm，在表现层实现MVC。Cairngorm最终将Flex客户端请求代理到服务器端的Java RemoteObject（FDS数据传输方式的一种）. 所以目前比较流行的快速Flex企业级开发的工具集为：

1 Flex + Cairngorm + Spring + (Hibernate) + DB

2 Flex + Cairngorm + POJO + (Hibernate) + DB

3 Flex + Cairngorm + （Flex-Ajax Bridge） + DWR + (Struts) + Spring + DB

4 Flex + WebService + .NET....　

比如第一种模式是最简单明了的方式，系统配置也很简单只有3个文件（比如1.5时，Cairngorm Delegater 的 Service.xml, flex-config.xml, web.xml）

Service.xml举例代码如

<?xml version="1.0" encoding="utf-8"?>
<cairngorm:ServiceLocator xmlns:mx="http://www.macromedia.com/2003/mxml" xmlns:cairngorm="http://www.iterationtwo.com/cairngorm">

    <mx:RemoteObject id="preLoadClientSearchService" named="clientSearchServiceImpl"
       protocol="http"
       showBusyCursor="true"
       result="event.call.resultHandler( event );"
       fault="event.call.faultHandler( event );">
    </mx:RemoteObject>

<mx:RemoteObject id="accountPlanRequestService" named="clientSearchServiceImpl"
       protocol="http"
       showBusyCursor="true"
       result="event.call.resultHandler( event );"
       fault="event.call.faultHandler( event );">
    </mx:RemoteObject>

    <mx:RemoteObject id="profileReportURLService" named="clientSearchServiceImpl"
       protocol="http"
       showBusyCursor="true"
       result="event.call.resultHandler( event );"
       fault="event.call.faultHandler( event );">
    </mx:RemoteObject>

<mx:RemoteObject id="acReportURLCurYearService" named="clientSearchServiceImpl"
       protocol="http"
       showBusyCursor="true"
       result="event.call.resultHandler( event );"
       fault="event.call.faultHandler( event );">
    </mx:RemoteObject>

    <mx:RemoteObject id="acctPlanReportURLService" named="clientSearchServiceImpl"
       protocol="http"
       showBusyCursor="true"
       result="event.call.resultHandler( event );"
       fault="event.call.faultHandler( event );">
    </mx:RemoteObject>
    。。。。。。。

</cairngorm:ServiceLocator>

flex-config.xml的关键部分是要注册远程对象，在whitelist标签里，

至于Web.xml的配置则比较固定。配置做好了，下面举例说明一次完整的用户Transaction。flex代码有

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.macromedia.com/2003/mxml" xmlns:view="com.salesportal.view.search.*" headerHeight="23" width="100%" height="616" title="{panelTitle}" horizontalAlign="center" textAlign="left" marginBottom="0" marginLeft="0" marginRight="0"
horizontalGap="0" verticalGap="0" backgroundColor="#92bbd3"
initialize="setSearchMode(ModelLocator.QUICK_SEARCH);
   clientSearchViewHelper.getPreLoadSearchList();
   ">
      <view:ClientSearchViewHelper id="clientSearchViewHelper" />
      <mx:Script>
<![CDATA[

import com.salesportal.model.ModelLocator;

var panelTitle = "Quick Selection";

]]>
</mx:Script>

...............省略部分代码..................

<mx:Button id="searchEnter" label="Show Client Heatmap" width="134" height="22" textAlign="center" click="clientSearchViewHelper.submitHandler(SelectedFilters,quickSearchTile1,quickSearchTile2,quickSearchTile3,quickSearchTile4,IndustrySearchList,CompanySearchList,ProductSearchList)" mouseDownEffect="Dissolve" styleName="navbutton" mouseOverEffect="Dissolve" mouseUpEffect="Dissolve"/>

这个submitHandler相应单击事件click，在ClientSearchViewHelper.as文件里源代码为

public function submitHandler(dataSource:Object, quickSearchGrid1:Object, quickSearchGrid2:Object,quickSearchGrid3:Object,quickSearchGrid4:Object,indusId:Object, compId:Object, prodId:Object): Void
   {
       // reset multiview current page and all pages properties;
       ClientHeatMapViewHelper.lineStart = 1;
       ClientHeatMapViewHelper.currentPage = 1;
       ClientHeatMapViewHelper.allPages = 1;
       var submitObj : Array = [];
if(ModelLocator.currentSearchMode!=ModelLocator.QUICK_SEARCH)
{
//trace("2");
submitObj = transferArrayObject(dataSource);
var dataValidator:Boolean = preFormatParam(submitObj);
var paramFlag:Number = paramFlagSelector(submitObj);

if(paramFlag==1)
{
   //copy all the industries into filterdList and reset the corresponding dataProvider;
   submitObj=appendAdditionalObjs1(dataSource,indusId);
}else if(paramFlag == 2)
{
   //copy all the product list into filterdList and reset the corresponding dataProviders;
   submitObj=appendAdditionalObjs2(dataSource,prodId);
}else if(paramFlag == 3)
{
   //copy all the product and industries into filterdList,and reset the corresponding dataProvider;
   submitObj=appendAdditionalObjs3(dataSource,indusId,prodId);
}
        EventBroadcaster.getInstance().broadcastEvent( SalesPortalController.EVENT_CLIENT_SEARCH_SUBMIT, submitObj);
}else
{
submitObj = quickTransferArrToObj(quickSearchGrid1,quickSearchGrid2,quickSearchGrid3,quickSearchGrid4,ModelLocator.preloadSearchResults);
        EventBroadcaster.getInstance().broadcastEvent( SalesPortalController.EVENT_CLIENT_SEARCH_SUBMIT, submitObj);
}
   }

注意红色字体部分，它是Cairngorm0.99架构中，命令模式的应用。EventBroadcaster广播SalesPortalController.EVENT_CLIENT_SEARCH_SUBMIT事件到Cairngorm的命令分发中心类FrontController

import org.nevis.cairngorm.control.FrontController;
import com.salesportal.commands.*;

class com.salesportal.control.SalesPortalController extends FrontController
{
    public function SalesPortalController()
    {
        initialiseCommands();
}

public function initialiseCommands()
{
   addCommand( SalesPortalController.EVENT_PRE_CLIENT_SEARCH, new PreLoadClientSearchCommand() );
   //addCommand( SalesPortalController.EVENT_CLIENT_SEARCH_SUBMIT, new ClientSearchSubmitCommand() );
   addCommand( SalesPortalController.EVENT_SEARCH_MULTI_SUBMIT,new SearchMultiSubmitCommand() );
   addCommand( SalesPortalController.EVENT_SEARCH_SINGLE_SUBMIT,new SearchSingleSubmitCommand() );
   addCommand( SalesPortalController.EVENT_CLIENT_SEARCH_SUBMIT,new GeneralSubmitCommand() );
   addCommand( SalesPortalController.EVENT_INIT_CALL_REPORT,new CallReportInitCommand() );
   addCommand( SalesPortalController.EVENT_UPDATE_CALL_REPORT,new UpdateCallReportCommand() );
   addCommand( SalesPortalController.EVENT_INSERT_CALL_REPORT,new InsertCallReportCommand() );
   addCommand( SalesPortalController.EVENT_UPDATE_ACTION_PLAN,new UpdateActionPlanCommand() );
   addCommand( SalesPortalController.EVENT_INSERT_ACTION_PLAN,new InsertActionPlanCommand() );
   addCommand( SalesPortalController.EVENT_PROFILE_REPORT_URL,new ProfileReportURLCommand

}

。。。。。。。
public static var EVENT_CLIENT_SEARCH_SUBMIT = "clientSearchSubmit";
public static var EVENT_INIT_CALL_REPORT = "callReportInit";
public static var EVENT_UPDATE_CALL_REPORT = "updateCallReport";
public static var EVENT_INSERT_CALL_REPORT = "insertCallReport";
public static var EVENT_UPDATE_ACTION_PLAN = "updateActionPlan";
public static var EVENT_INSERT_ACTION_PLAN = "insertActionPlan";
public static var EVENT_PROFILE_REPORT_URL = "profileReportURL";
public static var EVENT_ACCOUNT_PLAN_REQUEST = "accountPlanRequest";
public static var EVENT_AC_REPORT_URL_CURYEAR = "acReportUrlCurYear";

}

于是命令类GeneralSubmitCommand来响应事件EVENT_CLIENT_SEARCH_SUBMIT。GeneralSubmitCommand 的逻辑较复杂不便列出源代码，最后GeneralSubmitCommand将事件处理代理到命令类SearchSingleSubmitCommand 里。
class com.salesportal.commands.SearchSingleSubmitCommand implements Command, Responder
{

   public function execute( event:Event ) : Void
   {
      var delegate: SearchSubmitSingleDelegate = new SearchSubmitSingleDelegate( this );
      delegate.submitFilteredList(event.data);
   }

//-------------------------------------------------------------------------

   public function onResult( event : Object ) : Void
   {
      //ModelLocator.workflowState = ModelLocator.VIEWING_CLIENT_HEATMAP_SCREEN;
      //ModelLocator.subworkflowState = ModelLocator.VIEWING_CLIENT_SINGLE_HEATMAP_SCREEN;
      ModelLocator.singleReturnedArray = event.result;
   ModelLocator.singleGPName = (ModelLocator.singleReturnedArray[0]).gpName;
      //trace("ModelLocator.singleReturnedArray = event.result==========" + event.result);
   }

//-------------------------------------------------------------------------

   public function onFault( event : Object ) : Void
   {
      ModelLocator.statusMessage = event.fault.faultstring;
      ModelLocator.workflowState = ModelLocator.VIEWING_CLIENT_SEARCH_SCREEN;
      mx.core.Application.alert(ModelLocator.statusMessage+"");
   }
}

红色字体为Cairngorm架构中真正处理用户请求地Delegater以及CallBack回调函数部分。那么到了SearchSubmitSingleDelegate里面的时候，我们可以看出具体的Service Call 了。

import org.nevis.cairngorm.business.Responder;
import org.nevis.cairngorm.business.ServiceLocator;
import mx.utils.Delegate;

class com.salesportal.business.SearchSubmitSingleDelegate
{
   public function SearchSubmitSingleDelegate( responder : Responder )
   {
      this.service = ServiceLocator.getInstance().getService( "searchSubmitSingleService" );
      this.responder = responder;
   }

//----------------------------------------------------------------------------

   public function submitFilteredList(listObj : Object) : Void
   {
      var call = service.query4SingleClientView(listObj);
      //trace("Iwasinvocked:====service.query4SingleClientView========IwasInvocked");
      //trace("====================================");

      call.resultHandler = Delegate.create( responder, responder.onResult );
      call.faultHandler = Delegate.create( responder, responder.onFault );
   }

//----------------------------------------------------------------------------

private var responder : Responder;
private var service : Object;
}

红色粗体部分就为对应的java remote object中具体的方法以及回调函数处理器。相应的java代码略。

总结：

j2ee的开发模式很多人都很熟悉，我在此主要总结一下Cairgorm的客户端请求应答方式。

1 首先，客户端广播注册一个自定义事件到frontController（可以随便定义）.

EventBroadcaster.getInstance().broadcastEvent( SalesPortalController.EVENT_CLIENT_SEARCH_SUBMIT, submitObj);

2 FrontController命令类然后把相应的事件分发到相应Command中。

addCommand( SalesPortalController.EVENT_CLIENT_SEARCH_SUBMIT,new GeneralSubmitCommand() );

3。Command然后把具体的业务逻辑代理到不同的Delegater中

var delegate: SearchSubmitSingleDelegate = new SearchSubmitSingleDelegate( this );

4。Delegater最后做Remote Service Call.

var call = service.query4SingleClientView(listObj);