Simple Flex RSS Reader using Cairngorm 研究

显示结构
下图是RssReader的显示结构。可以发现,除了可视化组件(绿色)外,非可视化组件(红色)也用mxml的方式组装到整个Application中。这样做的目的是为了更好的利用Flex中的事件传播机制。
Simple Flex RSS Reader using Cairngorm 研究

事件流
下面看一下RssReader初始化时的事件流。(其他的事件流可以用同样的方法进行分析)
Simple Flex RSS Reader using Cairngorm 研究

<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,然后再调用CairngormEventDispatcherdispatch方法,发布自定义的GetFeedEvent事件。

    代码如下:

Simple Flex RSS Reader using Cairngorm 研究<?xmlversion="1.0"encoding="utf-8"?>
Simple Flex RSS Reader using Cairngorm 研究
<mx:HBoxxmlns:mx="http://www.adobe.com/2006/mxml"creationComplete="handleCreationComplete()">
Simple Flex RSS Reader using Cairngorm 研究
Simple Flex RSS Reader using Cairngorm 研究
<mx:Script>
Simple Flex RSS Reader using Cairngorm 研究
<![CDATA[
Simple Flex RSS Reader using Cairngorm 研究importcom.nagpals.flexrssreader.events.GetFeedEvent;
Simple Flex RSS Reader using Cairngorm 研究importcom.adobe.cairngorm.control.CairngormEventDispatcher;
Simple Flex RSS Reader using Cairngorm 研究importcom.nagpals.flexrssreader.model.RSSReaderModelLocator;
Simple Flex RSS Reader using Cairngorm 研究
Simple Flex RSS Reader using Cairngorm 研究[Bindable]privatevarmodel:RSSReaderModelLocator=RSSReaderModelLocator.getInstance();
Simple Flex RSS Reader using Cairngorm 研究
Simple Flex RSS Reader using Cairngorm 研究privatefunctiongeturi(selecteduri:String):void{
Simple Flex RSS Reader using Cairngorm 研究CairngormEventDispatcher.getInstance().dispatchEvent(newGetFeedEvent(selecteduri));
Simple Flex RSS Reader using Cairngorm 研究}
Simple Flex RSS Reader using Cairngorm 研究
Simple Flex RSS Reader using Cairngorm 研究privatefunctionhandleCreationComplete():void{
Simple Flex RSS Reader using Cairngorm 研究model.feedURI="http://news.com.com/8300-10784_3-7.xml";
Simple Flex RSS Reader using Cairngorm 研究geturi(model.feedURI);
Simple Flex RSS Reader using Cairngorm 研究}
Simple Flex RSS Reader using Cairngorm 研究
Simple Flex RSS Reader using Cairngorm 研究
]]>
Simple Flex RSS Reader using Cairngorm 研究
</mx:Script>
Simple Flex RSS Reader using Cairngorm 研究
<mx:Labeltext="EnterURLforanRSSfeed"fontSize="12"paddingTop="4"fontWeight="bold"/>
Simple Flex RSS Reader using Cairngorm 研究
<mx:TextInputid="uritext"width="400"text="{model.feedURI}"fontSize="12"/>
Simple Flex RSS Reader using Cairngorm 研究
<mx:Buttonid="uributton"label="GetFeed"click="geturi(uritext.text)"fontSize="12"/>
Simple Flex RSS Reader using Cairngorm 研究
</mx:HBox>
Simple Flex RSS Reader using Cairngorm 研究

<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进行处理。
Simple Flex RSS Reader using Cairngorm 研究Simple Flex RSS Reader using Cairngorm 研究packagecom.nagpals.flexrssreader.control...{
Simple Flex RSS Reader using Cairngorm 研究importcom.adobe.cairngorm.control.FrontController;
Simple Flex RSS Reader using Cairngorm 研究importcom.nagpals.flexrssreader.commands.
*;
Simple Flex RSS Reader using Cairngorm 研究importcom.nagpals.flexrssreader.events.
*;
Simple Flex RSS Reader using Cairngorm 研究
Simple Flex RSS Reader using Cairngorm 研究Simple Flex RSS Reader using Cairngorm 研究
publicclassRSSReaderControllerextendsFrontController...{
Simple Flex RSS Reader using Cairngorm 研究Simple Flex RSS Reader using Cairngorm 研究
publicfunctionRSSReaderController()...{
Simple Flex RSS Reader using Cairngorm 研究
this.initialize();
Simple Flex RSS Reader using Cairngorm 研究}

Simple Flex RSS Reader using Cairngorm 研究
Simple Flex RSS Reader using Cairngorm 研究Simple Flex RSS Reader using Cairngorm 研究
privatefunctioninitialize():void...{
Simple Flex RSS Reader using Cairngorm 研究
this.addCommand(RSSReaderController.GET_FEED,GetFeedCommand);
Simple Flex RSS Reader using Cairngorm 研究
this.addCommand(RSSReaderController.SELECT_ITEM,SelectItemCommand);
Simple Flex RSS Reader using Cairngorm 研究}

Simple Flex RSS Reader using Cairngorm 研究
Simple Flex RSS Reader using Cairngorm 研究Simple Flex RSS Reader using Cairngorm 研究
/**//*-------------------------------------------------*/
Simple Flex RSS Reader using Cairngorm 研究
publicstaticconstGET_FEED:String="getFeed";
Simple Flex RSS Reader using Cairngorm 研究
publicstaticconstSELECT_ITEM:String="selectItem";
Simple Flex RSS Reader using Cairngorm 研究
Simple Flex RSS Reader using Cairngorm 研究}

Simple Flex RSS Reader using Cairngorm 研究}

3.GetFeedCommand调用business.GetFeedDelegate处理逻辑,GetFeedDelegate通过HTTPService获取RSS数据后将结果返回给GetFeedCommand。代码如下:
Simple Flex RSS Reader using Cairngorm 研究Simple Flex RSS Reader using Cairngorm 研究publicclassGetFeedCommandimplementsICommand,IResponder...{
Simple Flex RSS Reader using Cairngorm 研究private
vardelegate:GetFeedDelegate;
Simple Flex RSS Reader using Cairngorm 研究private
varmodel:RSSReaderModelLocator=RSSReaderModelLocator.getInstance();
Simple Flex RSS Reader using Cairngorm 研究
Simple Flex RSS Reader using Cairngorm 研究Simple Flex RSS Reader using Cairngorm 研究public
functionGetFeedCommand()...{
Simple Flex RSS Reader using Cairngorm 研究delegate
=newGetFeedDelegate(this);
Simple Flex RSS Reader using Cairngorm 研究}

Simple Flex RSS Reader using Cairngorm 研究
Simple Flex RSS Reader using Cairngorm 研究Simple Flex RSS Reader using Cairngorm 研究public
functionexecute(event:CairngormEvent):void...{
Simple Flex RSS Reader using Cairngorm 研究
varfeedEvent:GetFeedEvent=GetFeedEvent(event);
Simple Flex RSS Reader using Cairngorm 研究model.feedURI
=feedEvent.selecteduri;
Simple Flex RSS Reader using Cairngorm 研究delegate.getFeed();
Simple Flex RSS Reader using Cairngorm 研究}

Simple Flex RSS Reader using Cairngorm 研究
Simple Flex RSS Reader using Cairngorm 研究Simple Flex RSS Reader using Cairngorm 研究public
functionresult(event:Object):void...{
Simple Flex RSS Reader using Cairngorm 研究model.feedVOList
=event.result.rss.channel.itemasArrayCollection;
Simple Flex RSS Reader using Cairngorm 研究model.feedTitle
=StringUtil.trim(event.result.rss.channel.title);
Simple Flex RSS Reader using Cairngorm 研究model.feedTitleLink
=StringUtil.trim(event.result.rss.channel.link);
Simple Flex RSS Reader using Cairngorm 研究}

Simple Flex RSS Reader using Cairngorm 研究
Simple Flex RSS Reader using Cairngorm 研究Simple Flex RSS Reader using Cairngorm 研究public
functionfault(event:Object):void...{
Simple Flex RSS Reader using Cairngorm 研究mx.controls.Alert.show(
"Erroringettingfeed:"+event.message);
Simple Flex RSS Reader using Cairngorm 研究}

Simple Flex RSS Reader using Cairngorm 研究
Simple Flex RSS Reader using Cairngorm 研究}

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