2008-01-17

Lesson02 取得 WebService 資料並且 Show 出來

又再次興奮的打開 Flex Builder 2 ,來建立我第二個應用程式!

網路上的就學馬上就來到了取得 WebService 資料,並且把他 Show 在 DataGrid 上,真的是太興奮了。馬上就能切入到主題,這我最喜歡了!在 File \ New \ Flex Project 下選擇 Basic 會看到下面的是窗,在 Project Name 中我輸入 Lesson02 按下 Finish。我想現在因該不用再貼圖了!

先在 Design Mode 上拖抑一個 Panel 來當作容器,設定他的 Title = "Blog Reader"。 在拖抑一個 DataGrid 在 Panel 內的上方,設定他的 Id = "dgPosts"。 在拖抑一個 TextArea 在 Panel 內、DataGrid 的下面,設定他的 Id = "txtDesc"。 這個時候會放不下對不對?自己把 Panel 拉大一點摟! 在拖抑一個 LinkButton 在 Panel 內、TextArea 的下面,設定他的 Label= "Read Full Post"。 結果大概就像下圖摟。






接下來這一段要在程式中加入 HTTPService 元件,這一段要做的是透過 HTTPService 元件向一段網址取得 WebService 回傳的一段 XML 文件。在依據已知的 XML 文件結構中的資訊分別放在 Panel 的 Title 以及 DataGrid 中。現在先在 Source Mode 中的 下一行輸入宣告 HTTPService 元件的程式碼,我把他想像成 Delphi 中的非視覺化元件。如下 Code:

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


這段程式法很單純的定義一個 HTTPService 元件叫做 feedRequest ,並且向 url 這段網址取得 XML 文件。那現在誰來呼叫觸發這個元件動起來呢?在 內的末段加入 creationComplete,之後 長的如下:

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

這一小段的意思是當這一個Flex程式建立完成以後,並且呼叫這個指令。也就是:feedRequest.send()。

現在 HTTPService 已取得了 XML 文件,由 Panel 取得文件中的 Title 段的內容。修改 Panel 這一段的程式碼將取得的 XML Title 內容 Show 在 Panel.Title,程式法如下:

<mx:Panel x="10" y="10" width="350" height="324" layout="absolute" title="{feedRequest.lastResult.rss.channel.title}">

lastResult 是 HTTPService 的一個屬性,用來取得 XML 文件。rss 這一個我就不清楚是什麼意思了!我也是初學者。channel 與 title 很簡單是 XML 文件內的路徑。這樣就將 Panel.Title 就變成動態的文字了,隨 XML 文件而變動。

現在是要設定 DataGrid 的資料來源,設定在內的後斷加入一段會像這樣:

<mx:DataGrid x="10" y="10" id="dgPosts" dataProvider="{feedRequest.lastResult.rss.channel.item}">

這一段設定了 DataGrid 內的資料提供來源是 XML 文件路徑 channel\item。再將原本的三行 Column 設定改為如下程式碼:

<mx:DataGridColumn headerText="Posts" dataField="title" width="150" />
<mx:DataGridColumn headerText="Date" dataField="pubDate" width="150" />


這邊可以看到來為的抬頭是設定在 headerText ,欄位的內容是擷取文件 channel\item\title 與 channel\item\pubDate。這部分我是對照網站所回傳的 XML 檔案比對下學習的,參考參考。

現在希望將我所選的 DataGrid 內容所指向的文章簡介 Show 在下面的 TextArea。在內加入 htmlText ,如下程式碼:

<mx:TextArea x="10" y="180" width="302" htmlText="{dgPosts.selectedItem.description}" />

這樣就完成了將 XML 文件內的 channel\item\description Show 在 TextArea 內了,selectedItem 直接就取代了 XML 路徑節點,太帥了!

現在要完成 LinkButton 的工作了,他的工作就是開啟 DataGrid 所指定的那一篇 Blog 的網址。在內的後段加入 click 程式碼,如下:

<mx:LinkButton x="213" y="250" label="Read Full Post" click="navigateToURL(new URLRequest(dgPosts.selectedItem.link));" />

在這裡我發現了 Flex 是不可以打錯大小寫的,大小寫必須相同。navigateToURL 開啟新的 IE 指向 selectedItem.link,也就是文件路徑 channel\item\link 的網址。太神了!現在就可以按下存檔,並且執行他來看看摟!


Flex.

沒有留言: