flex 部落格閱讀器 實現代碼

根據由 劉剛 翻譯的“flex中文協助”整理而來

為了完成這個項目，執行的步驟如下：
1. 設定項目
2. 檢查要訪問的遠端資料源
出於安全的原因，在用戶端電腦上Flash Player 中啟動並執行應用程式，只有在滿足如下
條件之一的情況下，才能訪問遠端資料：
a. 應用程式的SWF 檔案與遠端資料源位於同一個域中。
b. 使用代理，同時SWF 檔案與代理位於同一個伺服器中。
c. 在資料來源的宿主網頁伺服器上安裝crossdomain.xml（跨域策略）檔案。
本節中例子使用的是第三種方法。
插入並配置 blog 閱讀器
在本小節，你將學習建立一個blog 閱讀器。
1. 在導航視圖中選擇Lessons 項目，選擇File > New > MXML Application 並建立一個
叫BlogReader.mxml 的檔案。
2. 將BlogReader.mxml 設定為被編譯的預設檔案。
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
Width: 400
7. 選擇TextArea 控制項並設定相應屬性：
X: 20
Y: 175
Width: 400
8. 選擇LinkButton 控制項並設定相應屬性：
Label: Read Full Post
X: 20
Y: 225
介面布局看起來就象這樣：

9. 點擊工具條上的Source button 切換成編輯器原始碼模式。在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 x="20" y="20" id="dgPosts" 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="20" y="225" label="Read Full Post"/>
<mx:TextArea x="20" y="175" width="400"/>
</mx:Panel>
</mx:Application>
10. 儲存檔案， 完成編譯後運行。一個瀏覽器視窗將開啟， 如下所示。

到這一步，應用程式還沒有顯示任何blog 資訊。接下來的一步是使用一個稱之為
HTTPService 的RPC 服務元件來擷取blog 的資訊。

插入 HTTPService 組件
對於 blog 閱讀器這個項目，其資料來源來自於http://www.adobe.com/go/mchotinblog。你
使用HTTPService 組件來訪問blog 的XML。該組件發送HTTP GET 或POST 請求，並擷取
反饋回來的資料。
1. 在原始碼模式下，在<mx:Application>標籤中輸入<mx:HTTPService>標籤：
<mx:HTTPService
id="feedRequest"
url="http://weblogs.macromedia.com/mchotin/index.xml"
useProxy="false"/>
url 屬性指明了被請求檔案所在的位置。在本例中，該URL 一直是有效，但是你仍然
需要確定它是否已經發生改變。
useProxy 屬性工作表明你並不打算在伺服器上使用代理。因為Matt's blog 上面有
crossdomain.xml 設定，所以Flash Player 可以訪問該伺服器上的遠端資料。
接下來提示應用程式向指定的URL 發送請求。

2. 在<mx:Application>標籤後，添加creationComplete 屬性（粗體顯示）：
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
creationComplete="feedRequest.send()" >
你的應用程式每次啟動時，HTTPService 組件的send（）方法將被調用。該方法向指定
的URL 發出HTTP GET 或POST 請求，並得到HTTP 回應。在本例中，RSS feed 將返回
XML 資料。
接下來，檢測RSS feed 的擷取是否成功。然後將資料繫結到Label 控制項上，就象這樣：

3. 在<mx:Panel>標籤中，將title 屬性的值用隨後的運算式替換：
title="{feedRequest.lastResult.rss.channel.title}"
當HTTPService 組件返回XML 時，在名叫lastResult 的ActionScript 對象中進行剖析。
lastResult 對象的結構反映了XML 文檔的結構。

XML 的結構通常如下所示：
<rss>
<channel>
<title>
other child nodes of <channel>
<item>
<title>
other child nodes of <item>
</item>
...
HTTPService 組件的lastResult 對象反映了這種結構，你的代碼看起來就象這樣：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
creationComplete="feedRequest.send()" >
<mx:HTTPService
id="feedRequest"
url="http://weblogs.macromedia.com/mchotin/index.xml"
useProxy="false" />
<mx:Panel x="10" y="10" width="475" height="400" layout="absolute"
title="{feedRequest.lastResult.rss.channel.title}">
<mx:DataGrid x="20" y="20" id="dgPosts" 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="20" y="225" label="Read Full Post"/>
<mx:TextArea x="20" y="175" width="400"/>
</mx:Panel>
</mx:Application>
4. 儲存檔案，編譯完運行。

組裝 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 中的字
段，然後輸入這個欄位作為dataField 的屬性值。在dataProvider 屬性（item）中指定的XML
結點，名為title 的子結點中包含了所需的資訊。
3. 在第二個<mx:DataGridColumn>標籤中，輸入如隨後所示的headerText，dataField 和
width 屬性值：
<mx:DataGridColumn headerText="Date" dataField="pubDate" width="150" />
DataGrid 中的第二列用來顯示日期。在本例中，包含資料的欄位被稱之為pubDate。
4. 刪除第三個<mx:DataGridColumn>標籤，因為我們在這裡並不需要第三列。
<mx:DataGrid>標籤看起來就象這樣：
<mx:DataGrid x="20" y="20" id="dgPosts" 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>
5. 儲存檔案，編譯後運行。

顯示所選的項
當使用者在DataGrid 控制項中進行選擇時，你希望應用程式在TextArea 控制項中只顯示貼子
的頭幾行內容。在XML 供給器的項結點中，這個資訊被包含在一個稱之為description 的字
段裡。
1. 在原始碼模式中，在<mx:TextArea>標籤中輸入如隨後所示的htmlText 屬性：
<mx:TextArea x="20" y="175" width="400"
htmlText="{dgPosts.selectedItem.description}" />
對於在DataGrid 組件中所選擇的每個項（名稱為dgPosts），description 欄位的數值被使
用作為htmlText 的屬性，該屬性使你可以顯示HTML 格式的文本。
2. 儲存檔案，編譯後運行。點擊 DataGrid 控制項中的分列，每個貼子的頭幾行內容將出
現在TextArea 控制項中。

建立一個動態串連
RSS 供給器並不提供貼子的完整文本，但是你還是可以使使用者能夠讀到這些貼子，如果
他們有興趣的話。RSS 供給器沒有提供的資訊，可以通過串連到各個貼子的URLs 來實現。
在XML 供給器的item 結點中，這個資訊被包含在一個稱之為link 的欄位中。
你可以建立一個動態串連來顯示在DataGrid 中被選貼子的全部內容。
1. 在原始碼模式裡，在<mx:LinkButton>標籤中輸入如隨後所示的click 屬性：
<mx:LinkButton x="20" y="225" label="Read Full Post"
click="navigateToURL(new URLRequest(dgPosts.selectedItem.link));" />
DataGrid 控制項中被選項的串連欄位的值，dgPosts.selectedItem.link 由navigateToURL（）
方法的參數所指定，每當使用者點擊LinkButton 控制項時被調用。navigateToURL（） 方法在一
個新開啟的瀏覽器視窗中，載入從指定URL 傳來的文檔。
2. 儲存檔案，編譯後運行。

以上就是製作一個bolg閱讀器的步驟與代碼。