第四章　第九章使用 Web 服务

为了在应用程序中使用数据库，Adobe Flex 提供了若干特定的组件，如web services，
HTTP servers 或remote object services（Java 对象）。这些组件被称为远程过程调用（RPC）
服务组件。
在本节中，你创建了一个简单的报表程序，用来显示最近30 天最热门的贴子，程序还
可以让用户来决定显示贴子的数量。使用名叫WebService 的RPC 服务组件去提交用户的选
择，同时从源数据站点的SOAP-based web service 上获取数据，并将这些数据显示在DataGrid
控件中。
相关 API 资料
MXNA 为开发人员提供一组web services ， 其网站位于
www.adobe.com/go/mxna_developers。在你开始创建自己的应用程序前，应该查看他们Web
服务的相关API 资料，以确保存在你想要的接收信息的方法。相关API 资料位于
www.adobe.com/go/mxna_api。
文档资料描述了一种称为getMostPopularPosts 的方法。该方法将返回近30 天最热门的
贴子。对于每一个返回的贴子，均包含如下信息： postId，clicks，dateTimeAggregated，feedId，
feedName，postTitle，postExcerpt，和postLink。
该方法使用了两个参数：
daysBack 指出你想要返回的天数。
Limit 指出你想要返回的贴子总数，不能超过50。
插入并放置控件
在本节中，你首先创建好报表程序的布局。使用ComboBox 控件来让用户设置贴子列
表的数量，并在DataGrid 中进行显示。
1. 在导航视图选择Lessons 项目，选择File > New > MXML Application 并创建名叫
Services.mxml 的应用程序。
2. 将Services.mxml 设计成编译的默认文件，并在关联菜单中选择Set As Default
Application。
3. 在MXML 编辑器的设计模式下，将组件视图布局分类中的面板容器拖拉到布局中，
并设置相应的属性：
Title: Most Popular Posts
Width: 475
Height: 400
X: 10
Y: 10
4. 在设计模式下，将以下控件从组件视图中拖拉到面板容器里：
ComboBox
DataGrid
LinkButton
5. 使用鼠标将控件布置好，看起来就象这样：

6. 选择ComboBox 控件，将cbxNumPosts 作为它的id 属性值。
ComboBox 控件还没有显示任何项，你需要装载它。
7. 切换到编辑器的源代码模式，在<mx:ComboBox>标签对中输入随后代码：
<mx:Object label="Top 5" data="5"/>
<mx:Object label="Top 10" data="10"/>
<mx:Object label="Top 15" data="15"/>
8. 切换回设计模式，选择DataGrid 组件，为它指定如下属性值：
ID: dgTopPosts
Width: 400
9. 选择LinkButton 控件，将Select an item and click here for full post 作为它的标签属性
值。
整个布局看起来就象这样：

10. 切换到源代码模式。在Services.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="Most Popular Posts">
<mx:ComboBox x="30" y="25" id="cbxNumPosts">
<mx:Object label="Top 5" data="5" />
<mx:Object label="Top 10" data="10" />
<mx:Object label="Top 15" data="15" />
</mx:ComboBox>
<mx:DataGrid x="30" y="75" id="dgTopPosts" 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="30" y="250"
label="Select an item and click here for full post"/>
</mx:Panel>
</mx:Application>
接下来就是在程序中插入并设置RPC 组件，WebService。
插入 WebService 组件
你可以使用Flex WebService 组件去访问使用SOAP 的web 服务器并获取相应的信息。
1. 在源代码模式中，在<mx:Application>标签后输入<mx:WebService>标签：
<mx:WebService id="wsBlogAggr"
wsdl="http://weblogs.macromedia.com/mxna/webservices/mxna2.cfc?wsdl"
useProxy="false">
</mx:WebService>
Wsdl 属性指出了web 服务器WSDL 文件的位置。在本例中，该地址是始终有效的，但
是你依然需要进行检测以确保它是否发生改变。最近的WSDL 文件位于开发者页面
www.adobe.com/go/mxna_developers 。（ 译者注： 如果你愿意， 也可以使用别名
http://www.adobe.com/go/flex_mxna_wsdl。
useProxy 属性表明你不打算在服务器上使用代理。
2. 指定传送参数到web 服务器的方法。
根据 API 文档资料，getMostPopularPosts 方法需要使用了两个参数：
daysBack 指定你想要返回的天数。
Limit 指定你想要返回的总行数。
为了指定这些参数，在<mx:WebService>标签对中输入如下代码：
<mx:operation name="getMostPopularPosts">
<mx:request>
<daysBack>30</daysBack>
<limit>{cbxNumPosts.value}</limit>
</mx:request>
</mx:operation>
<mx:operation>标签的name 属性必须与web 服务器方法的name 相同。
3. 在<mx:ComboBox>标签中，添加随后的change 属性：
<mx:ComboBox x="30" y="25" id="cbxNumPosts"
change="wsBlogAggr.getMostPopularPosts.send()">
当用户在ComboBox 控件中选择某个选项时，wsBlogAggr WebService 组件的
getMostPopularPosts 方法就被调用。方法的参数在WebService 组件的<mx:operation>标签中
进行指定。Limit 参数在程序运行时由用户所作的选项来决定。
应用程序已经准备好调用web service。接下来就是显示从web service 中返回的数据。
装载 DataGrid 组件
你打算使用DataGrid 控件来显示从web service 返回的数据。具体地，你打算显示更热
门贴子的标题，以及它们被浏览点击的次数。
1. 在源代码模式下，在<mx:DataGrid>标签中输入如下代码：
<mx:DataGrid x="30" y="75" id="dgTopPosts" width="400"
dataProvider="{wsBlogAggr.getMostPopularPosts.lastResult}">
你打算在DataGrid 控件中显示web service 的getMostPopularPosts 的操作结果。
2. 在第一个<mx:DataGridColumn>标签中，输入headerText 和dataField 属性值：
<mx:DataGridColumn headerText="Top Posts" dataField="postTitle" />
DataGrid 控件的第一列用来显示贴子的标题。根据从web service 操作所返回的包含title
数据的字段，将该字段名作为dataField 属性的值。根据getMostPopularPosts 方法的API 文
档资料，在名叫postTitle 的字段中包含了你想要的信息。
3. 在第二个<mx:DataGridColumn>标签中，输入headerText， dataField 和width 属性
值：
<mx:DataGridColumn headerText="Clicks" dataField="clicks" width="75" />
DataGrid 控件的第二列用来显示最近30 天每个贴子的浏览点击次数。根据API 文档
资料，包含该数据的字段名叫clicks。
4. 删除第三个<mx:DataGridColumn>标签。因为你不需要第三列。
<mx:DataGrid>标签看起来就象这样：
<mx:DataGrid x="30" y="75" id="dgTopPosts" width="400"
dataProvider="{wsBlogAggr.getMostPopularPosts.lastResult}">
<mx:columns>
<mx:DataGridColumn headerText="Top Posts" dataField="postTitle"/>
<mx:DataGridColumn headerText="Clicks" dataField="clicks" width="75"/>
</mx:columns>
</mx:DataGrid>
5. 保存文件，编译后运行。
但是你会发现出现了一点问题，那就是ComboBox 取值Top 5 但DataGrid 并没有显示
任何信息。出现这样的问题，是因为应用程序并没有调用web service，它只是在ComboBox
发生改变时才进行调用。修正这个问题，使web service 在程序创建时就立即被调用。
6. 在源代码模式中，在<mx:Application>标签中输入creationComplete 属性值：
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
creationComplete="wsBlogAggr.getMostPopularPosts.send()">
7. 保存文件并运行程序。

创建动态链接
web service 并不显示贴子的所有文本。如果用户有兴趣的话，你可以使他们能够阅读到
所有的内容。虽然web service 没有提供这些信息，但是它们可以由贴子各自的URLs 来实
现。根据getMostPopularPosts 方法的API 文档资料，包含了此信息的字段名叫postLink。
你打算创建动态链接，当用户在DataGrid 控件中选定贴子时可以显示它的全部内容。
1. 在源代码模式下，在<mx:LinkButton>标签中输入click 属性：
<mx:LinkButton x="30" y="250" label="Select an item and click here for full post"
click="navigateToURL(new URLRequest(dgTopPosts.selectedItem.postLink));" />
DataGrid 控件中被选项的link 字段的数值 dgTopPosts.selectedItem.postLink ， 在
navigateToURL（）方法里指定，当用户点击LinkButton 控件时进行调用。navigateToURL
（）从指定的URL 中加载一个文档到新的浏览器窗体中。
2. 保存文件，编译后运行。
在本节中，你学习了使用WebService 组件调用和传送方法参数给SOAP-based web
service，然后将web service 返回的数据绑定到DataGrid 和LinkButton 控件上。

加支付宝好友偷能量挖...