獲取并顯示數(shù)據(jù)

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

設(shè)置我們的工程
在我們開始這一節(jié)之前，我們完成下面的任務(wù)：
如果我們沒有創(chuàng)建工程，創(chuàng)建Lessons工程。
確保打開了自動構(gòu)建選項。

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

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

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

9 切換到代碼模式。BlogReader.mxml應(yīng)包含下面的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 保存文件，待到構(gòu)建完成時運行程序。
程序運行效果如下圖所示：

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

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

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

我們代碼應(yīng)是如下的樣子：
<?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 保存這個文件，待到構(gòu)建完成后運行這個程序。
這樣就會打開瀏覽器來運行這個程序。Blog的標(biāo)題，Matt Chotin，就會作為Panel控件的標(biāo)題出現(xiàn)，這樣就表這個程序成功的從RSS取得了相應(yīng)的數(shù)據(jù)信息。

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

我們希望在DataGrid控件的第一列顯示留言的標(biāo)題。我們通過指明XML中包含title數(shù)據(jù)的域來做到，并且將這個域作為dataField屬性值。在dataProvider屬性指定的XML節(jié)點中，名為title的子節(jié)點包含我們希望的信息。
3 在第二個<mx:DataGridColumn>標(biāo)簽中，輸入下面的headerText,dataField以及width屬性值：
<mx:DataGridColumn headerText="Date" dataField="pubDate" width="150"/>
我們希望在DataGrid的第二列顯示留言發(fā)表的日期。在這種情況下，包含數(shù)據(jù)的域名為pubDate。
4 刪除第三個<mx:DataGridColumn>標(biāo)簽，因為我們并不需要第三列。
最終的程序看起來應(yīng)是如下的樣子：
<?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標(biāo)題以及日期應(yīng)出現(xiàn)在DataGrid控件中，表明程序成功的從RSS取得了數(shù)據(jù)信息。

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

對于DataGrid組件中的第一個選擇的item,description域的值將會作為htmlText屬性的值。htmlText屬性可以讓我們顯示HTML格式的文本。
2 保存文件，待到程序編譯完成時，運行程序。
點擊DataGrid控件中的條目時，每條留言的最前幾行就會出現(xiàn)在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()方法的參數(shù)，當(dāng)用點擊時就會調(diào)用這個方法。navigateToURL()方法在一個新的瀏覽器窗口中裝入一個文檔。
2 保存文件，待到Flex Builder完成程序編譯時，運行這個程序。
點擊DataGrid控件中的一個條目并且點擊Read Full Post鏈接時，就會打開一個新的瀏覽器窗口并且顯示全部的留言信息。

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