给你的AIR桌面添加橄榄球赛精彩片段

 本文来自：

http://www.insideria.com/2009/09/bringing-football-highlights-t.html

 

今晚看完本赛季第一场NFL比赛， 我决定将NFL.com的资料集合起来，创建一个范例，让它直接呈现在你的桌面上。这个是最基本的范例，展示了如何使用Flash Builder的数据向导，消化来自公共rss Feed的数据，实现HTTP服务。

首先，我们来查看数据……你可以在http://www.nfl.com/rss/rsslanding为所有的NFL球队或者你最喜欢的球队生成定制的RSS Feeds。数据一目了然，正是你对RSS Feed所期待的（XML构成RSS数据）。在这个范例里，我将尽可能消化这里的标题新闻。我打算创建一个AIR应用程序，而不是Flex应用程序，这样子我就可回避跨域的问题了。

在Flash Builder (来自Adobe Labs的beta版)里，我做的第一件事就是使用数据向导，为HTTP服务生成服务类。进入“Data”菜单，选择"Connect to HTTP..."。向导会要求你定义操作。我添加了操作"getData", 并输入URL。

 

 

 

然后，我们来查看下让它“运作”起来的代码。很奇怪，代码很简单。当应用程序上载时，applicationCompleteHandler函数调用服务的getHighlights()函数，并设置CallResponder实例的令牌（token）。使用CallResponder，你可以轻松地与lastResult属性绑定，并可协助你快捷地与数据连接。对MVC样式的应用程序来说，这可能不太理想，但是可以确定的是，它可以让你“运行”起来，快速消化数据。

这里使用的UI元素是一个列表，与CallResponder的最终结果绑定（注意：它被造型为NFLResult返回类型，因此我可以在IDE中获得代码提示），也是一个HTML代码，用来显示内容。这个范例也使用了Flex 4的状态以根据选定的状态轻松显示/隐藏组件。在缺省状态下，HTML内容是隐藏的，当列表中的某个条目被选定，应用程序的currentState被更改（通过绑定），这样HTML内容就可视了。

列表使用了定制的条目渲染器来显示RSS条目的标题，发布日期，并使用Flex 4状态以高亮显示鼠标转换和选定的状态上的标题颜色。总之，非常的简洁明了……

<?xml version="1.0" encoding="utf-8"?><s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" xmlns:nflservice="services.nflservice.*" applicationComplete="applicationCompleteHandler(event)" title="NFL Highlights" width="1024" height="768" currentState="{ highlights.selectedItem == null ? 'default' : 'detail' }"> <fx:Script> <!--[CDATA[ import services.nflservice.Entry; import services.nflservice.NFLResult; import mx.events.FlexEvent; protected function applicationCompleteHandler(event:FlexEvent):void { responder.token = service.getHighlights(); } protected function highlights_clickHandler(event:MouseEvent):void { html.location = Entry( highlights.selectedItem ).link.href.toString(); } ]]> </fx:Script> <fx:Declarations> <nflservice:NFLService id="service" /> <mx:CallResponder id="responder" /> </fx:Declarations> <s:states> <mx:State name="default" /> <mx:State name="detail" /> </s:states> <s:List id="highlights" dataProvider="{ NFLResult( responder.lastResult ).entry }" width="100%" width.detail="200" height="100%" click="highlights_clickHandler(event)"> <s:itemRenderer> <fx:Component> <s:ItemRenderer height="45" width="100%" buttonMode="true" useHandCursor="true" baseColor.hovered="#999999"> <s:states> <s:State name="normal"/> <s:State name="hovered"/> <s:State name="selected"/> </s:states> <fx:Script> <![CDATA[ import services.nflservice.Entry; ]]--> </fx:Script> <s:SimpleText text="{ Entry( data ).title }" fontWeight="bold" color.hovered="#8888FF" color.selected="#FF0000"/> <s:SimpleText text="{ Entry( data ).dc_date }" /> <s:layout> <s:VerticalLayout paddingBottom="2" paddingLeft="2" paddingTop="2" paddingRight="2"/> </s:layout> </s:ItemRenderer> </fx:Component> </s:itemRenderer> </s:List> <mx:HTML id="html" width="100%" height="100%" visible.default="false" visible.detail="true" includeInLayout.default="false" includeInLayout.detail="true" /> <s:layout> <s:HorizontalLayout /> </s:layout> </s:WindowedApplication>

就是这样了。Flash Builder 和AIR可以让你快捷地与数据连接，开始创建应用程序。

 

一旦你点击了”Finish”，服务类被生成，你差不多就可以消化数据了。在你继续之前，应该在"Data/Serivces"面板里找到新创建的服务，右击，点击"Configure Return Type"。向导会继续生成服务返回值对象。我输入名称"NFLResult", 点击下一个，直到完成。

如果你在浏览来自新服务的生成源，你会注意到，"getData" 函数没有在你进入时调用URL。相反，它正“期待”你传入searchString值，该值在被调用时附加到URL上。在我生成的NFLService类里，增添了一个getHighlights()函数，为简便起见，该函数自动传入"home"值。

 

  public function getHighlights() : AsyncToken
  {
     return super.getData( "home" );
   }

 

在生成的类里，你会注意到你有_Super_NFLService, 还有NFLService类。你不能修改“_Super”类。如果你决定重新生成服务，_Super类的任何改变都会被丢失。然后，后代NELService类的改变会保留下来。因此，要经常给后代类添加定制代码。

现在，我们来看看应用程序。当应用程序上载时，它会自动请求RSS Feed提供最新的数据，并在简单的列表控制中显示。当一个条目在列表中被选定，RSS链接的HTML内容在右边显示。下面是一个屏幕图像捕捉器：