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

商业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标签里，

<object name="clientSearchServiceImpl">
              <source>com.salesportal.business.CustomerFacade</source>
              <type>stateless-class</type>
</object>

至于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";

 function setSearchMode(mode) {
  if (mode==ModelLocator.ADVANCED_SEARCH) {
   panelTitle = "Advanced Selection";
   ModelLocator.currentSearchMode = ModelLocator.ADVANCED_SEARCH;
   searchViewTabs.selectedChild=advancedTab
   searchViewStack.selectedChild=advancedSearchView
  } else if (mode==ModelLocator.QUICK_SEARCH) {
   panelTitle = "Priority Clients";
   ModelLocator.currentSearchMode = ModelLocator.QUICK_SEARCH;
   searchViewTabs.selectedChild=quickTab
   searchViewStack.selectedChild=quickSearchView
  }
 }

  ]]>
  </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);

Caringorm架构中很优秀的用到了不少我们已经非常熟悉的经典设计模式。如Singleton, 工厂，命令，代理，还有桥模式。

 

谢谢。（代码有点乱不好意思，不过都是本人实际大型项目源代码稍微做了一下改编和省略。另外在Cairngorm2。2中，一些东西发生了变化，有时间再详细讨论）

 

Flex技术专栏 --by mervyn_lee