根據由 劉剛 翻譯的“flex中文幫助”整理而來
為了完成這個項目,執行的步驟如下:
1. 設置項目
2. 檢查要訪問的遠程數據源
出于安全的原因,在客戶端計算機上Flash Player 中運行的應用程序,只有在滿足如下
條件之一的情況下,才能訪問遠程的數據:
a. 應用程序的SWF 文件與遠程數據源位于同一個域中。
b. 使用代理,同時SWF 文件與代理位于同一個服務器中。
c. 在數據源的宿主web 服務器上安裝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閱讀器的步驟與代碼。
新聞熱點
疑難解答