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>
<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进行处理。
3.GetFeedCommand调用business.GetFeedDelegate处理逻辑,GetFeedDelegate通过HTTPService获取RSS数据后将结果返回给GetFeedCommand。代码如下:
4. 如果正常返回结果,GetFeedCommand会更新作为model的RSSReaderModelLocator中的数据。而RSSReaderModelLocator声明为[Bindable],当数据发生变化时会发出“propertyChange”事件。
(关于数据绑定的内容,请参考flex事件机制1:事件源)。
5. FlashPlayer接收到propertyChange事件后,会分发给所有绑定到model的组件,这些组件将自动更新数据。至此,整个初始化的过程就执行完毕。
下图是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>
-
URI中监听了creationComplete事件。当创建URI完成后,会调用handleCreationComplete方法,设置的URL,然后再调用CairngormEventDispatcher的dispatch方法,发布自定义的GetFeedEvent事件。
代码如下:
<?xmlversion="1.0"encoding="utf-8"?>
<mx:HBoxxmlns: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:Labeltext="EnterURLforanRSSfeed"fontSize="12"paddingTop="4"fontWeight="bold"/>
<mx:TextInputid="uritext"width="400"text="{model.feedURI}"fontSize="12"/>
<mx:Buttonid="uributton"label="GetFeed"click="geturi(uritext.text)"fontSize="12"/>
</mx:HBox>
<mx:HBoxxmlns: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:Labeltext="EnterURLforanRSSfeed"fontSize="12"paddingTop="4"fontWeight="bold"/>
<mx:TextInputid="uritext"width="400"text="{model.feedURI}"fontSize="12"/>
<mx:Buttonid="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";
}
}
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);
}
}
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的组件,这些组件将自动更新数据。至此,整个初始化的过程就执行完毕。