獲取并顯示數據

為了向我們的程序提供數據，Adobe Flex包含特別為與HTTP服務器，網絡服務或者是遠程對象服務(Java對象)進行交互的而設計的組件。這些組件被稱之為遠程過程調用(RPC)服務組件。
與Adobe ColdFusion,PHP或者是相似的服務器技術創建的程序不同，Flex程序并能直接與一個數據庫進行交互。他們使用服務與數據進行交互。例如，我們可以在Flex文件中插入一個HTTP服務來與ColdFusion文件進行交互，從而從一個MySQL數據取得數據，轉換成為XML，然后發送到我們的Flex程序。
在這一節，我們將會創建一個簡單的獲取最近留言并且允許用戶讀取留言的最前幾條的BlogReader程序。我們可以使用一個名為HTTPService的RPC服務組件從一個RSS獲取數據，然后我們將數據綁定到一個Label,DataGrid,TextArea和LinkButton控件。

設置我們的工程
在我們開始這一節之前，我們完成下面的任務：
如果我們沒有創建工程，創建Lessons工程。
確保打開了自動構建選項。

回顧到遠程數據源的訪問
出于安全的原因，運行在客戶端計算機上的Flash播放中的程序只有在滿足下面的條件時才可以訪問遠程數據源：
1 我們程序所編譯的SWF文件與遠程數據源在同一個域。
2 我們使用代理并且我們的SWF文件與代理在同一個服務器上。
Adobe Flex數據服務為Flex程序提供了一個完整的代理管理系統。我們也可以使用Web腳本語言，例如ColdFusion，JSP,PHP或者ASP創建一個簡單的代理服務。
3 在遠程數據源的服務器上安裝一個crossdomain.xml文件。crossdomain.xml文件允許其他域的SWF文件

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

插入與定位Blog Reader控件
在這一節，我們創建我們的Blog-Reader程序的布局。
1 在瀏覽視圖中選擇Lessons工程，選擇File>New>MXML Application創建一個名為BlogReader.mxml的程序文件。
2 通過在瀏覽視圖中右擊這個文件并從彈了菜單中選擇Set As Default Appliction將設置為默認編譯的程序文件。
3 在MXML編輯器的設計模式中，從內容視圖的布局類中拖放一個面板容器，并且將其設置為如下面的屬性：
Title: Blog Reader
Width: 475
Height: 400
X: 10
Y: 10
4 在設計模式中，通過在組件視圖中拖放添加如下的控件：
DataGrid
TextArea
LinkButton
5 使用鼠標將這些控件布局為垂直，左對齊的列。
6 選擇DataGrid控件設置為如下的屬性：
Id: dgPosts
X: 20
Y: 20
7 選擇TextArea控件設置為如下的屬性：
X: 20
Y: 175
Width: 400
8 選擇LinkButton控件設置如下的屬性：
Label: Read Full Post
X: 20
Y: 225
布局效果如下圖所示：

9 切換到代碼模式。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 id="dgPosts" x="20" y="20" 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:TextArea x="20" y="175" width="400"/>
??????? <mx:LinkButton x="20" y="225" label="Read Full Post"/>
??? </mx:Panel>
</mx:Application>

10 保存文件，待到構建完成時運行程序。
程序運行效果如下圖所示：

下一步就是獲取最近的Blog留言信息。我們可以使用名為HTTPService的RPC服務組件來完成這個任務。

插入HTTPService組件
對于這一節的BlogReader程序，我們將會從Matt Chotion的Bloghttp://www.adobe.com/go/mchotinblog獲取留言信息。Matt是Flex開發團隊的產品經理，并且在他的Blog寫有關Flex的內容。
我們可以使用HTTPService組件來訪問Blog的XML并且獲取最近的留言信息。這個組件可以讓我們發送一個GET或是POST請求，然后獲取響應中的數據。
1 在代碼模式中，在<mx:Application>標簽之后加入下面的<mx:HTTPService>標簽。
<mx:HTTPService
??? id="feedRequest"
??? url=" http://weblogs.macromedia.com/mchotin/index.xml "
??? useProxy="false"/>
url屬性指定了請求文件的位置，在這種情況下是Matt Chotion Blog的RSS 2.0。在編寫本指南時，這個URL是可用的，但是我們應檢測是否發生了改變。我們可以使用在 http://www.adobe.com/go/mchotinblog 列出的最新的RSS2.0的地址。
useProxy指明了我們不希望使用服務器上的代理。Matt的Blog位于一個配置了crossdomain.xml的域，所以Flash播放器可以訪問這個服務器上的遠程數據源，包括RSS。
下一步就是要讓程序向指定的URL發送一個請求。我們決定在程序啟動時自動發送一個請求。如下面所示。
2 在<mx:Application>標簽中添加下面的creationComplete屬性：
<mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml " layout="absolute" creationComplete="feedRequest.send()">
當我們的程序啟動完成時，HTTPService組件的send()方法就會被調用。這個方法向指定的URL發送了一個GET或是POST語法，并且會返回一個HTTP響應。在這種情況下，RSS返回XML數據。
下一步，我們希望檢測程序是否成功的取得了RSS數據。我們可以通過將數據綁定到Label控件來做到，如下所示。
3 在<mx:Panel>標簽中，將title屬性替換為下面的綁定表達式：
title="{feedRequest.lastResult.rss.channel.title}"
這個表達式將title域綁定到Panel控件。這個表達式反映了XML的結構。當XML返回到HTTPService組件時，這個組件將其解析成名為lastResult的ActionScript對象。lastResult的結構是XML文檔結構的鏡像。為了檢測XML的結構，下載RSS的XML文件( http://www.adobe.com/go/flex_blogfeed )并且在瀏覽器中打開。
XML的通常結構如下所示：

<rss>
??? <channel>
??????? <title>
??????? other child nodes of <channel>
??????? <item>
??????????? <title>
??????????? other child nodes of <item>
??????? </item>
??????? ...
一些節點具有包含數據的孩子節節點，包括channel節點的"title"孩子節點。HTTPService組件的lastResult對象反映了這種結構：
feedRequest.lastResult.rss.channel.title

我們代碼應是如下的樣子：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml "
??? creationComplete="feedRequest.send()" layout="absolute">

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

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

??????? <mx:DataGrid id="dgPosts" x="20" y="20" 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:TextArea x="20" y="175" width="400"/>
??????? <mx:LinkButton x="20" y="225" label="Read Full Post"/>
??? </mx:Panel>
???
</mx:Application>

4 保存這個文件，待到構建完成后運行這個程序。
這樣就會打開瀏覽器來運行這個程序。Blog的標題，Matt Chotin，就會作為Panel控件的標題出現，這樣就表這個程序成功的從RSS取得了相應的數據信息。

處理DataGrid控件
在我們的程序中，我們希望DataGrid控件顯示最近留言的標題以及發表日期。
1 在代碼模式中，在<mx:DataGrid>標簽中添加下面的dataProvider屬性：
<mx:DataGrid x="20" y="20" id="dgPosts" width="400" dataProvider="{feedRequest.lastResult.rss.channel.item}">
我們希望名為item的XML節點向DataGrid控件提供數據。這個節點在XML中是重復的，所以在DataGrid也是重復的。
2 在第一個<mx:DataGridColumn>標簽中，添加下面的headerText和dataField屬性值：
<mx:DataGridColumn headerText="Posts" dataField="title"/>

我們希望在DataGrid控件的第一列顯示留言的標題。我們通過指明XML中包含title數據的域來做到，并且將這個域作為dataField屬性值。在dataProvider屬性指定的XML節點中，名為title的子節點包含我們希望的信息。
3 在第二個<mx:DataGridColumn>標簽中，輸入下面的headerText,dataField以及width屬性值：
<mx:DataGridColumn headerText="Date" dataField="pubDate" width="150"/>
我們希望在DataGrid的第二列顯示留言發表的日期。在這種情況下，包含數據的域名為pubDate。
4 刪除第三個<mx:DataGridColumn>標簽，因為我們并不需要第三列。
最終的程序看起來應是如下的樣子：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml "
??? creationComplete="feedRequest.send()" layout="absolute">

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

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

??????? <mx:DataGrid id="dgPosts" x="20" y="20" 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>

??????? <mx:TextArea x="20" y="175" width="400"/>
??????? <mx:LinkButton x="20" y="225" label="Read Full Post"/>
??? </mx:Panel>
???
</mx:Application>
5 保存文件，待到程序編譯完成時，運行這個程序。
程序的運行效果如下：

Blog標題以及日期應出現在DataGrid控件中，表明程序成功的從RSS取得了數據信息。

顯示選擇的列
當用戶在DataGrid控件中選擇了一條留言，我們希望程序在TextArea控件中顯示這條留言的最前幾行。在XML的item節點中，這些信息包含在名為description的域中。
1 在源碼模式下，在<mx:TextArea>標簽中輸入下面的htmlText屬性：
<mx:TextArea x="20" y="175" width="400"
??? htmlText="{dgPosts.selectedItem.description}" />

對于DataGrid組件中的第一個選擇的item,description域的值將會作為htmlText屬性的值。htmlText屬性可以讓我們顯示HTML格式的文本。
2 保存文件，待到程序編譯完成時，運行程序。
點擊DataGrid控件中的條目時，每條留言的最前幾行就會出現在TextArea控件中。

<mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml "
??? creationComplete="feedRequest.send()" layout="absolute">

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

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

??????? <mx:DataGrid id="dgPosts" x="20" y="20" 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>

??????? <mx:LinkButton x="20" y="225" label="Read Full Post" click="navigateToURL(new URLRequest(dgPosts.selectedItem.link));"/>
???
??????? <mx:TextArea x="20" y="175" width="400"/>
???????
??? </mx:Panel>
???
</mx:Application>

DataGrid控件中選定條目的link域的值，dgPosts.selectedItem.link，指定為navigateToURL()方法的參數，當用點擊時就會調用這個方法。navigateToURL()方法在一個新的瀏覽器窗口中裝入一個文檔。
2 保存文件，待到Flex Builder完成程序編譯時，運行這個程序。
點擊DataGrid控件中的一個條目并且點擊Read Full Post鏈接時，就會打開一個新的瀏覽器窗口并且顯示全部的留言信息。

在這一部分，我們使用名為HTTPService的RPC服務組件來從RSS獲取信息，然后我們將這些信息綁定到Labe,DataGrid，TextArea以及LinkButton控件。