為了向我們的程序提供數(shù)據(jù)，Adobe Flex包含特別為與網絡服務，HTTP服務器，或者是遠程對象服務(Java對象)進行交互而設計的組件。這些組件被稱之為遠程過程調用(RPC)服務組件。

在這一節(jié)，我們將會為一個Blog創(chuàng)建一個簡單程序，這個程序會列出過去30天內最受歡迎的文章。我們可以決定要列出的文章的數(shù)目。我們使用一個名為WebService的RPC服務組件來發(fā)送用戶的選擇，并且由Blog網站所提供的基于SOAP的網絡服務獲取數(shù)據(jù)，然后我們在一個DataGrid控件中來是顯示這些數(shù)據(jù)。

設置工程

在我們開始這一節(jié)之前，我們需要完成下面的任務：
創(chuàng)建Lessons工程
確保打開了自動編譯選項

回顧到遠程數(shù)據(jù)源的訪問

為了安全的原因，在客戶機上的Flash播放器地的程序只有在滿足下面的條件之一時才可以訪問遠程數(shù)據(jù)源：

我們的程序所編譯的SWF文件與遠程數(shù)據(jù)源在同一個域。

我們使用代理，并且我們的SWF文件與代理在同一個服務器上。
Adobe Flex數(shù)據(jù)服務為Flex程序提供了一個完整的代理管理系統(tǒng)。我們可以使用網絡腳本語言，例如ColdFusion，JSP,PHP，或者是ASP創(chuàng)建一個簡單的代理服務。

在數(shù)據(jù)源的主機安裝了一個crossdomain.xml文件。
crossdomain.xml文件允許其他域的SWF文件也可以訪問數(shù)據(jù)源。

在這一節(jié)所使用的數(shù)據(jù)源位于一個安裝了crossdomain.xml文件的域上。所以，F(xiàn)lash播放器可以訪問遠程數(shù)據(jù)。

插入并且放置組件

在這一部分，我們創(chuàng)建報告程序的布局。我們決定使用一個ComboBox控件來允許用戶選擇要列出的文章的數(shù)目，一個DataGrid控件來顯示數(shù)據(jù)。

1 在瀏覽視圖中選擇Lessons工程，創(chuàng)建一個名為Services.mxml的程序文件。

2 將Services.mxml文件設置為默認編譯的程序文件。

3 在MXML編輯器的設計模式中添加一個Panel容器，并且設置如下的屬性：
Title: Most Popular Posts
Width: 475
Height: 400
X: 10
Y: 10

4 在設計模式中，向Panel容器中添加下面的控件：
ComboBox
DataGrid
LinkButton

5 布局控件，效果如下圖所示：

6 選擇ComboBox控件，將其id屬性設置為cbxNumPosts。

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控件，并且將其label屬性設計為Select and item and click here for full post。
布局效果如下圖所示：

10 切換到代碼模式，程序代碼如下所示：
<?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組件

我們使用Flex的WebService組件來訪問一個基于SOAP的網絡服務并且獲取Blog最近發(fā)表文章的信息。

1 在代碼模式下，在<mx:Application>標簽之后輸入<mx:WebService>標簽。
<mx:WebService id="wsBlogAggr"
wsdl=" http://weblogs.macromedia.com/mxna/webservices/mxna2.cfc?wsdl "
useProxy="false">
</mx:WebService>

2 指定要傳遞給網絡服務方法的參數(shù)
通過API文檔，我們知道getMostPopularPosts方法需要下面的參數(shù)：
daysBack指明我們需要查看的過去的天數(shù)
limit指明我們要返回的總行數(shù)

在指定這些參數(shù)，在<mx:WebService>標簽中輸入下面的標簽：
<mx:operation name="getMostPopularPosts">
<mx:request>
<daysBack>30</daysBack>
<limit>{cbxNumPosts.value}</limit>
</mx:request>
</mx:operation>

<mx:operation>標簽的name屬性必須與網絡服務方法名相匹配。

我們?yōu)閐aysBack參數(shù)使用一個定值，但是我們將limit參數(shù)綁定到cbxNumPosts ComboBox控件所選擇的數(shù)目的值。我們希望用戶指明要列出的文章的數(shù)目。

下一步就是要使程序調用網絡服務方法。我們決定當ComboBox響應用戶的選擇改變時調用這個方法。

3 在<mx:ComboBox>標簽中添加下面的change屬性：
<mx:ComboBox x="30" y="25" id="cbxNumPosts"
change="wsBlogAggr.getMostPopularPosts.send()">

最終的程序代碼如下所示：
<mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml " layout="absolute">
<mx:WebService id="wsBlogAggr"
wsdl=" http://weblogs.macromedia.com/mxna/webservices/mxna2.cfc?wsdl "
useProxy="false">
<mx:operation name="getMostPopularPosts">
<mx:request>
<daysBack>30</daysBack>
<limit>{cbxNumPosts.value}</limit>
</mx:request>
</mx:operation>
</mx:WebService>
<mx:Panel x="10" y="10" width="475" height="400" layout="absolute"
title="Most Popular Posts">

<mx:ComboBox x="30" y="25" id="cbxNumPosts" change="wsBlogAggr.getMostPopularPosts.send()">
<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>

組裝DataGrid組件

我們希望使用DataGrid控件來顯示網絡服務所返回的數(shù)據(jù)。特別的是，我們希望顯示最受歡迎文章的標題以及點擊數(shù)。

1 在代碼模式下，在<mx:DataGrid>標簽中添加下面的dataProvider屬性：
<mx:DataGrid x="30" y="75" id="dgTopPosts" width="400" dataProvider="{wsBlogAggr.getMostPopularPosts.lastResult}">

2 在第一個<mx:DataGridColumn>標簽中，添加下面的headerText與dataField屬性值：
<mx:DataGridColumn headerText="Top Posts" dataField="postTitle" />

3 在第二個<mx:DataGridColumn>標簽中，添加下面的headerText，dataField以及width屬性：
<mx:DataGridColumn headerText="Clicks" dataField="clicks" width="75" />

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 保存文件，待編譯完成后運行程序。

6 在代碼模式下，輸入下面的creationComplete屬性：
<mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml " layout="absolute" creationComplete="wsBlogAggr.getMostPopularPosts.send()">

最終的程序代碼如下所示：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml "
layout="absolute"
creationComplete="wsBlogAggr.getMostPopularPosts.send()">
<mx:WebService id="wsBlogAggr"
wsdl=" http://weblogs.macromedia.com/mxna/webservices/mxna2.cfc?wsdl "
useProxy="false">
<mx:operation name="getMostPopularPosts">
<mx:request>
<daysBack>30</daysBack>
<limit>{cbxNumPosts.value}</limit>
</mx:request>
</mx:operation>
</mx:WebService>
<mx:Panel x="10" y="10" width="475" height="400" layout="absolute"
title="Most Popular Posts">

<mx:ComboBox x="30" y="25" id="cbxNumPosts" change="wsBlogAggr.getMostPopularPosts.send()">
<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" 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>

<mx:LinkButton x="30" y="250"
label="Select an item and click here for full post"/>
</mx:Panel>

</mx:Application>

7 保存文件，在編譯完成后運行。
程序的運行結果如下所示：

創(chuàng)建動態(tài)鏈接

我們決定創(chuàng)建一個動態(tài)鏈接可以打開瀏覽器查看全部的內容。

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));"/>

2 保存文件，在編譯完成后運行。