Simple Flex RSS Reader using Cairngorm 研究

显示结构
下图是RssReader的显示结构。可以发现，除了可视化组件（绿色）外，非可视化组件（红色）也用mxml的方式组装到整个Application中。这样做的目的是为了更好的利用Flex中的事件传播机制。


事件流
下面看一下RssReader初始化时的事件流。（其他的事件流可以用同样的方法进行分析）


<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8"> <meta name="GENERATOR" content="StarSuite 8 (Linux)"> <meta name="AUTHOR" content="Seaman Wang"> <meta name="CREATED" content="20071113;19364300"> <meta name="CHANGEDBY" content="Seaman Wang"> <meta name="CHANGED" content="20071114;11552500"> <style type="text/css"> <!-- @page { size: 21cm 29.7cm; margin: 2cm } P { margin-bottom: 0.21cm } --> </style>

1. URI中监听了creationComplete事件。当创建URI完成后，会调用handleCreationComplete方法，设置的URL，然后再调用CairngormEventDispatcher的dispatch方法，发布自定义的GetFeedEvent事件。

   代码如下：

<? xmlversion="1.0"encoding="utf-8" ?>
< mx:HBox xmlns:mx ="http://www.adobe.com/2006/mxml" creationComplete ="handleCreationComplete()" >

< mx:Script >
<![CDATA[
importcom.nagpals.flexrssreader.events.GetFeedEvent;
importcom.adobe.cairngorm.control.CairngormEventDispatcher;
importcom.nagpals.flexrssreader.model.RSSReaderModelLocator;

[Bindable]privatevarmodel:RSSReaderModelLocator=RSSReaderModelLocator.getInstance();

privatefunctiongeturi(selecteduri:String):void{
CairngormEventDispatcher.getInstance().dispatchEvent(newGetFeedEvent(selecteduri));
}

privatefunctionhandleCreationComplete():void{
model.feedURI="http://news.com.com/8300-10784_3-7.xml";
geturi(model.feedURI);
}

]]>
</ mx:Script >
< mx:Label text ="EnterURLforanRSSfeed" fontSize ="12" paddingTop ="4" fontWeight ="bold" />
< mx:TextInput id ="uritext" width ="400" text ="{model.feedURI}" fontSize ="12" />
< mx:Button id ="uributton" label ="GetFeed" click ="geturi(uritext.text)" fontSize ="12" />
</ mx:HBox >

<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8"> <meta name="GENERATOR" content="StarSuite 8 (Linux)"> <meta name="AUTHOR" content="Seaman Wang"> <meta name="CREATED" content="20071113;19364300"> <meta name="CHANGEDBY" content="Seaman Wang"> <meta name="CHANGED" content="20071114;11552500"> <style type="text/css"> <!-- @page { size: 21cm 29.7cm; margin: 2cm } P { margin-bottom: 0.21cm } --></style> 2. RSSReaderController 中注册了 GetFeedEvent 的监听器。会接收到 FlashPlayer 分发的事件，并根据事先的定义调用 GetFeedCommand 进行处理。

packagecom.nagpals.flexrssreader.control ... {
importcom.adobe.cairngorm.control.FrontController;
importcom.nagpals.flexrssreader.commands.*;
importcom.nagpals.flexrssreader.events.*;

publicclassRSSReaderControllerextendsFrontController...{
publicfunctionRSSReaderController()...{
this.initialize();
}

privatefunctioninitialize():void...{
this.addCommand(RSSReaderController.GET_FEED,GetFeedCommand);
this.addCommand(RSSReaderController.SELECT_ITEM,SelectItemCommand);
}

/**//*-------------------------------------------------*/
publicstaticconstGET_FEED:String="getFeed";
publicstaticconstSELECT_ITEM:String="selectItem";

}
}

3.GetFeedCommand调用business.GetFeedDelegate处理逻辑，GetFeedDelegate通过HTTPService获取RSS数据后将结果返回给GetFeedCommand。代码如下：

publicclassGetFeedCommandimplementsICommand,IResponder ... {
privatevardelegate:GetFeedDelegate;
privatevarmodel:RSSReaderModelLocator=RSSReaderModelLocator.getInstance();

publicfunctionGetFeedCommand()...{
delegate=newGetFeedDelegate(this);
}

publicfunctionexecute(event:CairngormEvent):void...{
varfeedEvent:GetFeedEvent=GetFeedEvent(event);
model.feedURI=feedEvent.selecteduri;
delegate.getFeed();
}

publicfunctionresult(event:Object):void...{
model.feedVOList=event.result.rss.channel.itemasArrayCollection;
model.feedTitle=StringUtil.trim(event.result.rss.channel.title);
model.feedTitleLink=StringUtil.trim(event.result.rss.channel.link);
}

publicfunctionfault(event:Object):void...{
mx.controls.Alert.show("Erroringettingfeed:"+event.message);
}

}

4. 如果正常返回结果，GetFeedCommand会更新作为model的 RSSReaderModelLocator中的数据。而 RSSReaderModelLocator声明为[Bindable]，当数据发生变化时会发出“propertyChange”事件。
（关于数据绑定的内容，请参考 flex事件机制1：事件源 ）。
5. FlashPlayer接收到propertyChange事件后，会分发给所有绑定到model的组件，这些组件将自动更新数据。至此，整个初始化的过程就执行完毕。