Flex 3入门教程: 用 HTTPService 加载外部数据

Flex RSS阅读

最新推荐文章于 2017-05-29 13:04:10 发布

最新推荐文章于 2017-05-29 13:04:10 发布 · 109 阅读

在Flex中使用<mx:HTTPService>标签装载外部数据是非常简单的。使用<mx:HTTPService>标签发送POST和GET请求外部数据。(也可以执行PUT和DELETE操作重置这个服务)。使用<mx:HTTPService>标签发起的HTTP调用不支持自定义的方法（比如，WebDAV中的PROPFIND等等），也不可能添加额外的相应头，但是你可以从失败的一个中区分成功的调用。

注意：虽然你可以从一个域加载数据到你的应用程序中，那个域必须实现一个开放的crossdomain.xml文件，或者将你下载的SWF文件的域添加在crossdomain.xml文件中。更多的关于crossdomain.xml的信息请查看Building and Deploying Flex 3 Applications.

在入门指南中的这个例子展示了如何用HTTPService读入RSS feed

用HTTPService读入RSS feed

Flex基于E4X的高级的XML处理能力使得处理XML格式的数据非常简单，比如RSS feed。RSS feed被blog或其他网站发布。在下边的例子中，接受被提交到Flickr的最新的图片的 Flickr RSSfeed 。

要加载RSS，就要使用<mx:HTTPService>标签，并且设置id属性为photoService和他的url属性为Flickr RSS feed的URL。要用xml方式处理加载的数据，设置HTTPService 的resultFormat为e4x。

定义result和fault事件处理器。他们在HTTPService调用成功或失败时被调用。在下边的例子中，resultHandler()方法在调用成功返回时被调用，faultHandler()在调用失败时被调用。

用户界面组件绑定到photoFeed属性，并且当数据更新时界面自动更新。要搞清绑定数据的意思查看Flickr RSS feed的结构。E4X给了对象风格的存取XML结构的方法。

大多数绑定是自我解释的。你需要执行的处理只是在结果上的feed条目的content属性抽出图片的URL。使用正则表达式实现这个功能。

提示：当处理XML时，确定你打开了需要使用的命名空间。Flickr RSS feed 的命名空间是 http://www.w3.org/2005/Atom。你必须定义一个命名空间，然后设置他的唯一URL，然后将用户语句包含到命名空间中。否则你不能存取加载进来的XML文档的内容。

例子

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:aral="*"
creationComplete="photoService.send();"
viewSourceURL="src/HTTPServiceConsumingFlickrRSSFeed/index.html"
>




<mx:HTTPService
id="photoService"
url="http://api.flickr.com/services/feeds/photos_public.gne"
resultFormat="e4x"
result="photoResultHandler(event);"
fault="photoFaultHandler(event);"
/>


<mx:Script>
<![CDATA[
import Flash.net.navigateToURL;
import mx.controls.Alert;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;

[Bindable]

private var photoFeed:XML;

// Define and use atom namespace.
private namespace atom = "http://www.w3.org/2005/Atom";
use namespace atom;

// The image URL is in the HTML content
// so we have to parse it out.
private function parseImageUrl(fromHtml:XMLList):String
{

var pattern:RegExp = /img src="(.+?)" /;
var results:Array = pattern.exec(fromHtml);
var imageURL:String = results[1]; // backreference 1 from pattern

return imageURL;
}

// Result handler - gets called after RSS is loaded.
private function photoResultHandler(event:ResultEvent):void
{
photoFeed = event.result as XML;
}

// Fault handler - displays the error.
private function photoFaultHandler(event:FaultEvent):void
{
Alert.show(event.fault.message, "Could not load photo feed");
}

// Opens author's HTML page in external window.
private function openAuthorPage(event:MouseEvent):void
{
var dataIndex:uint = Number(event.target.instanceIndices.toString());
var urlRequest:URLRequest = new URLRequest(photoFeed.entry[dataIndex].author.uri)

navigateToURL(urlRequest, "_blank");
}
]]>
</mx:Script>





<mx:Fade id="fadeIn" duration="3000" alphaFrom="0" alphaTo="1"/>
<mx:Fade id="fadeOut" duration="3000" alphaFrom="1" alphaTo="0"/>


<mx:Panel title="Public photos" width="100%" height="100%">

<mx:Tile width="100%" height="100%">
<mx:Repeater id="photos" dataProvider="{photoFeed.entry}">
<mx:VBox
xmlns:mx=http://www.adobe.com/2006/mxml
horizontalAlign="center"
>

<mx:Image
id="myImage"
source="{parseImageUrl(photos.currentItem.content)}"
completeEffect="{fadeIn}"
/>

<mx:Text text="{photos.currentItem.title}"/>
<mx:LinkButton
label="{photos.currentItem.author.name}"
click="openAuthorPage(event);"
/>

</mx:VBox>

</mx:Repeater>

</mx:Tile>

<mx:ControlBar horizontalAlign="center">
<mx:Button label="Update" click="photoService.send();"/>

</mx:ControlBar>

</mx:Panel>

</mx:Application>