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

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

設置工程

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

回顧到遠程數據源的訪問

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

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

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

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

在這一節所使用的數據源位于一個安裝了crossdomain.xml文件的域上。所以，Flash播放器可以訪問遠程數據。

插入并且放置組件

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

1 在瀏覽視圖中選擇Lessons工程，創建一個名為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最近發表文章的信息。

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

2 指定要傳遞給網絡服務方法的參數
通過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屬性必須與網絡服務方法名相匹配。

我們為daysBack參數使用一個定值，但是我們將limit參數綁定到cbxNumPosts ComboBox控件所選擇的數目的值。我們希望用戶指明要列出的文章的數目。

下一步就是要使程序調用網絡服務方法。我們決定當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控件來顯示網絡服務所返回的數據。特別的是，我們希望顯示最受歡迎文章的標題以及點擊數。

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 保存文件，在編譯完成后運行。
程序的運行結果如下所示：

創建動態鏈接

我們決定創建一個動態鏈接可以打開瀏覽器查看全部的內容。

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