第四章 Flex编程入门 （2小节）

第二节获取并显示数据

为了在应用程序中使用数据 ， Adobe Flex 包括了 与 HTTP servers ， web services 或 remote object services （ Java objects ）进行交互的组件，这些组件被称之为远程过程调用 （ RPC ）服务组件。

与 Adobe ColdFusion ， PHP 或类似的服务器技术不同 ， Flex 应用程序并不直接连接数据库。举个例子，你可以在一 个 Flex 文件中插 入 HTTP service 来实现 与 ColdFusion 文件的交互，以获 取 MySQL 数据库中的数据，转换 成 XML ，然后返馈 给 Flex 应用程序。

在本节中，你将学习创建一个简单 的 blog 阅读器。你使用了被称之 为 HTTPService 的 RPC service 组件 从 RSS 中获取数据，然后将数据绑定 到 Label 、 DataGrid 、 TextArea 和 LinkButton 控件上。

为了完成这个项目，执行的步骤如下：

1. 1 . 设置项目
2. 2 . 检查要访问的远程数据源

出于安全的原因，在客户端计算机 上 Flash Player 中运行的应用程序，只有在满足如下条件之一的情况下，才能访问远程的数据：

a . 应用程序 的 SWF 文件与远程数据源位于同一个域中。

b . 使用代理，同 时 SWF 文件与代理位于同一个服务器中。

c. 在数据源的宿 主 web 服务器上安 装 crossdomain.xml （跨域策略）文件 。 本节中例子使用的是第三种方法 。

插入并配 置 blog 阅读 器 在本小节，你将学习创建一 个 blog 阅读器 。

1.  
   1. 1. 在导航视图中选 择 Lessons 项目，选 择 File > New > MXML Application 并创建一个 叫 BlogReader.mxml 的文件 。
   2. 2 . 将 BlogReader.mxml 设置为被编译的默认文件 。
2. 3. 在 MXML 编辑器的设计模式下，从组件视图中拖拉出一个面板容器，并设置它的相应属性值 ：

Title: Blog Reade r Width: 47 5 Height: 40 0

X: 10

Y: 10

1. 4 . 在设计模式下，从组件视图中拖拉出如下组件到面板容器里 ： DataGri d TextAre a LinkButto n
2. 5 . 使用鼠标将控件布置成垂直排列的、左对齐的列 。
3. 6 . 选 择 DataGrid 控件并设置相应属性 ： Id: dgPost s

X: 20

Y: 2 0 Width: 40 0

7 . 选 择 TextArea 控件并设置相应属性 ：

X: 20

Y: 17 5 Width: 40 0

8 . 选 择 LinkButton 控件并设置相应属性 ： Label: Read Full Pos t

X: 20

Y: 225

界面布局看起来就象这样 ：

9. 点击工具条上 的 Source button 切换成编辑器源代码模式。 在 BlogReader.mxml 文件中输入如 下 MXML 代码 ： <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Panel x="10" y="10" width="475" height="400" layout="absolute " title="Blog Reader" > <mx:DataGrid x="20" y="20" id="dgPosts" width="400" >

<mx:columns> <mx:DataGridColumn headerText="Column 1" dataField="col1"/> <mx:DataGridColumn headerText="Column 2" dataField="col2"/> <mx:DataGridColumn headerText="Column 3" dataField="col3"/>

</mx:columns > </mx:DataGrid > <mx:LinkButton x="20" y="225" label="Read Full Post"/ > <mx:TextArea x="20" y="175" width="400"/ >

</mx:Panel> </mx:Application>

10. 保存文件，完成编译后运行。一个浏览器窗口将打开，如下所示。

到这一步，应用程序还没有显示任 何 blog 信息。接下来的一步是使用一个称之 为 HTTPService 的 RPC 服务组件来获 取 blog 的信息。

插 入 HTTPService 组件

对 于 blog 阅读器这个项目，其数据源来自 于 http://www.adobe.com/go/mchotinblog 。你使 用 HTTPService 组件来访 问 blog 的 XML 。该组件发 送 HTTP GET 或 POST 请求，并获取反馈回来的数据。

1. 在源代码模式下， 在 <mx:Application> 标签中输 入 <mx:HTTPService> 标签 ：

<mx:HTTPService

id="feedRequest"

url="http://weblogs.macromedia.com/mchotin/index.xml"

useProxy="false"/>

url 属性指明了被请求文件所在的位置。在本例中， 该 URL 一直是有效的，但是你仍然

需要确定它是否已经发生改变 。 useProxy 属性表明你并不打算在服务器上使用代理。因 为 Matt's blog 上面 有 crossdomain.xml 设置，所 以 Flash Player 可以访问该服务器上的远程数据。接下来提示应用程序向指定 的 URL 发送请求 。

2. 在 <mx:Application> 标签后，添 加 creationComplete 属性（粗体显示） ： <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"

creationComplete="feedRequest.send() " >

你的应用程序每次启动时 ， HTTPService 组件 的 send （）方法将被调用。该方法向指定 的 URL 发 出 HTTP GET 或 POST 请求，并得 到 HTTP 回应。在本例中 ， RSS feed 将返 回 XML 数据。

接下来，检 测 RSS feed 的获取是否成功。然后将数据绑定 到 Label 控件上，就象这样 ：

3. 在 <mx:Panel> 标签中， 将 title 属性的值用随后的表达式替换 ：

title="{feedRequest.lastResult.rss.channel.title}"

当 HTTPService 组件返 回 XML 时，在名 叫 lastResult 的 ActionScript 对象中进行剖析 。 lastResult 对象的结构反映 了 XML 文档的结构 。

XML 的结构通常如下所示 ： <rss>

<channel > <title > other child nodes of <channel > <item >

<title>

other child nodes of <item > </item > .. .

HTTPService 组件 的 lastResult 对象反映了这种结构，你的代码看起来就象这样 ： <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

layout="absolute " creationComplete="feedRequest.send()" >

<mx:HTTPServic e id="feedRequest " url="http://weblogs.macromedia.com/mchotin/index.xml " useProxy="false" / >

<mx:Panel x="10" y="10" width="475" height="400" layout="absolute " title="{feedRequest.lastResult.rss.channel.title}" >

<mx:DataGrid x="20" y="20" id="dgPosts" width="400">

<mx:columns> <mx:DataGridColumn headerText="Column 1" dataField="col1"/> <mx:DataGridColumn headerText="Column 2" dataField="col2"/> <mx:DataGridColumn headerText="Column 3" dataField="col3"/>

</mx:columns > </mx:DataGrid >

<mx:LinkButton x="20" y="225" label="Read Full Post"/ > <mx:TextArea x="20" y="175" width="400"/ > </mx:Panel >

</mx:Application>

4. 保存文件，编译完运行。

组 装 DataGrid 控 件 在应用程序中，使 用 DataGrid 控件显示新近贴子的标题 。

1.  
   1. 1. 在源代码模式下， 在 <mx:DataGrid> 标签中输入随后 的 dataProvider 属性 ： <mx:DataGrid x="20" y="20" id="dgPosts" width="400" dataProvider="{feedRequest.lastResult.rss.channel.item} " >
   2. 名称 为 item 的 XML 结点 为 DataGrid 控件提供数据。 在 XML 中这个结点是重复的，所以它 在 DataGrid 中也是重复的 。
2. 2. 在第一 个 <mx:DataGridColumn> 标签里，键入如随后所示 的 headerText 和 dataField 属性值 ：

<mx:DataGridColumn headerText=" Posts " dataField=" title " />

DataGrid 控件的第一列用来显示标题。实现它是通过确定包含标题数据 的 XML 中的字段，然后输入这个字段作 为 dataField 的属性值。 在 dataProvider 属性 （ item ）中指定 的 XML 结点，名 为 title 的子结点中包含了所需的信息 。

1.  
   1. 3. 在第二 个 <mx:DataGridColumn> 标签中，输入如随后所示 的 headerText ， dataField 和 width 属性值 ： <mx:DataGridColumn headerText=" Date " dataField=" pubDate " width="150" />
   2. DataGrid 中的第二列用来显示日期。在本例中，包含数据的字段被称之 为 pubDate 。
2. 4. 删除第三 个 <mx:DataGridColumn> 标签，因为我们在这里并不需要第三列 。 <mx:DataGrid> 标签看起来就象这样 ： <mx:DataGrid x="20" y="20" id="dgPosts" width="400"

dataProvider="{feedRequest.lastResult.rss.channel.item}">

<mx:columns> <mx:DataGridColumn headerText="Posts" dataField="title" /> <mx:DataGridColumn headerText="Date" dataField="pubDate" width="150" />

</mx:columns> </mx:DataGrid>

5. 保存文件，编译后运行。

显示所选的项

当用户 在 DataGrid 控件中进行选择时，你希望应用程序 在 TextArea 控件中只显示贴子的头几行内容。 在 XML 供给器的项结点中，这个信息被包含在一个称之 为 description 的字段里 。

1. 在源代码模式中， 在 <mx:TextArea> font-size: 10.5pt; color: #000000;