Flex中文幫助 第五章

轉載自[url=http://www.airia.cn/]AIRIA.cn[/url]

[size=large][b]第五章 Flex使用行為[/b][/size]

Adobe Flex行為使你可以為應用程式添加動畫和運動，來對使用者和程式設計活動作出反應。行為，是由一個觸發器和一種效果組合而成。觸發器是一種活動，如滑鼠在元件上點選，元件獲得焦點，或元件可見。效果是在目标元件上的可視性或可聽性上的某種變化，以毫秒計算。效果的例子包括淡出，尺寸變化，或者元件發生移動。

本節将教授你如何在 Flex使用者界面中添加行為。具體内容包括如何使用 MXML去建立行為，如何從不同的元件調用一種效果，以及如何組合多種效果以産生合成效果。

[b]建立一個行為[/b]

你打算建立一個行為，當按鈕被使用者點選時變成綠色，維持一秒半以後，離開按鈕時變成淡綠色以表明它已經被點選過。

1. 在導航視圖中選擇 Lessons項目，選擇 File > New > MXML Application并建立名叫 Behaviors.mxml的檔案。

2. 将 Behaviors.mxml設定為被編譯的預設檔案，并在關聯菜單中選擇 Set As Default Application。

3. 在 MXML編輯器源代碼模式中，在 <mx:Application>标簽後定義綠色效果： <mx:Glow id="buttonGlow" color="0x99FF66" alphaFrom="1.0" alphaTo="0.3" duration="1500"/>

綠色效果開始時十分飽滿，然後逐漸變得透明，但不完全透明。最後變成淡綠色以表明按鈕已經被點選過。

4. 在設計模式下，從元件視圖拖拉一個面闆容器到布局上，并設定其相應屬性：

[quote]Width: 200 Height: 300

X: 10

Y: 10[/quote]

5. 從元件視圖中拖拉一個按鈕控件到面闆上，并設定其相應屬性：

[quote]ID: myButton Label: View

X: 40

Y: 60[/quote]

6. 在屬性視圖中，點選工具條中的分類視圖 /Category View檢視屬性，然後找到效果分類/Effects category。

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/49598921.jpg[/img]

按鈕控件相對應的觸發器分類清單。

7. 通過在波浪括号中鍵入效果的 ID來作為觸發器的值，為 mouseUpEffect觸發器賦上綠色漸變效果，就象這樣：

[quote]mouseUpEffect: {buttonGlow}[/quote]

波浪括号（ { }）是必須的，因為效果是使用資料綁定來配置設定給它們的觸發器的。在源代碼模式下， <mx:Button>标簽看起來就象這樣：

<mx:Button x="40" y="60" label="View" id="myButton" mouseUpEffect="{buttonGlow}" />
           

8. 儲存檔案，編譯後運作。結果如下：從不同的元件調用一種效果

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/49598922.jpg[/img]

取代元件觸發器，你還可以使用 Flex事件去調用效果。這樣就可以使同一種效果為不同的元件所調用。舉個例子，你可以使用按鈕控件的點選事件去告知 TextArea控件播放淡入淡出的效果。

當使用者點選應用程式的檢視按鈕時，你希望 Label元件的文本逐漸由模糊到清楚。

1. 在設計模式中，在檢視 /View按鈕下插入一個 Label控件，并設定相應的屬性：

[quote]ID: myLabel Text: 4 8 15 16 23 42

X: 40

Y: 100[/quote]

2. 切換到源代碼模式下，在 <mx:Glow>标簽後的 <mx:Blur>裡定義好綠色漸變效果：

<mx:Blur id="numbersBlur" blurYFrom="10.0" blurYTo="0.0" blurXFrom="10.0" blurXTo="0.0" duration="2000"/>
           

3. 在<mx:Blur>标簽中，将名為 myLabel的控件指定為效果的目标控件：

<mx:Blur id="numbersBlur" target="{myLabel}" blurYFrom="10.0" blurYTo="0.0" blurXFrom="10.0" blurXTo="0.0" duration="2000"/>
           

這樣，myLabel元件便有了設定的效果。

4. 在<mx:Button>标簽中，将 numbersBlur效果指定為點選事件要播放的效果：

<mx:Button id="myButton" x="40" y="60" label="View" mouseUpEffect="{buttonGlow}" click="numbersBlur.play();"/>
           

當使用者點選按鈕控件時，應用程式調用效果的 play（）方法。因為 numbersBlur效果的目标是 myLabel控件，是以應用程式将效果運用到 label而非按鈕上。

5. 在<mx:Label>标簽中将 visible屬性設定為 false，隐藏 Label控件：

<mx:Label id="myLabel" x="40" y="100" text="4 8 15 16 23 42" visible="false" />
           

這些數字不會被顯示，直到使用者點選檢視按鈕。

6. 當使用者點選檢視按鈕時，使用語句将按鈕的 visible屬性設為真，使 Label控件可見：

<mx:Button id="myButton" x="40" y="60" label="View" mouseUpEffect="{buttonGlow}" click="numbersBlur.play(); myLabel.visible=true;"/>
           

當使用者點選按鈕時，綠色漸變效果開始播放， Label控件變得可見。

在 Behaviors.mxml檔案中輸入如下代碼：

7. 儲存檔案，編譯後運作。

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/49598923.jpg[/img]

建立一個組合效果你還可以使 Label元件在獲得焦點的同時向下移動 20個象素。也就是說，你可以将綠色漸變效果與移動效果組合起來。

Flex提供将超過一種的多種效果組合起來的能力。你可以使用 <mx:Parallel>标簽或 <mx:Sequence>标簽來定義一個組合效果，這取決你是想要組合的效果是并行地或順序地進行播放。在例子中，是要綠色漸變的效果與移動的效果同時進行。

1. 在源代碼模式中，在 <mx:Blur>标簽前的 <mx:Parallel>标簽中輸入： <mx:Parallel id="BlurMoveShow"> </mx:Parallel>

并行組合的效果名稱為 BlurMoveShow。

2. 在代碼中選擇整個 <mx:Blur>标簽，然後粘貼到<mx:Parallel>标簽對中，讓它成為 <mx:Parallel>标簽的子标簽。

3. 在<mx:Blur>标簽中選擇 target="{myLabel}"屬性，然後将它移動到 <mx:Parallel>标簽内，讓它成為 <mx:Parallel>标簽的屬性： <mx:Parallel id="BlurMoveShow" target="{myLabel}">

你希望組合效果作用在名叫 myLabel 的元件上。

4. 在<mx:Blur>标簽後的 <mx:Move>标簽中定義移動的效果：

<mx:Move id="numbersMove" yBy="20" duration="2000" />
           

你希望 Label控件在兩秒鐘内向下移動 20個象素。完成的<mx:Parallel>标簽看起來就象這樣：

5. 在<mx:Button>标簽中，用 BlurMoveShow組合效果取代 numbersBlur效果來響應點選事件：

<mx:Button id="myButton" x="40" y="60" label="View" mouseUpEffect="{buttonGlow}" click="BlurMoveShow.play(); myLabel.visible=true;"/>
           

6. 儲存檔案，編譯後運作。

在本節中，你學習了如何建立行為，從不同的元件調用相同的效果，以及如何将多種效果合成來生成組合效果。

[size=medium][b]第七節 使用視圖狀态和變換[/b][/size]

你可以在 Adobe Flex 中使用視圖狀态和變換來建立更為豐富、更為互動性的使用者經曆。舉個例子，你可以使用視圖狀态去建立使用者界面，它可以根據使用者所執行的任務來改變它的外觀。

視圖狀态 /view states是你為一個 MXML程式或元件定義的布局命名。你可以為一個程式或元件定義幾種視圖狀态，并且根據使用者的行為在它們之間進行切換。視圖狀态允許你動态地改變使用者界面，以便來對使用者的活動或增加的内容作出響應。

備注：當然，你還可以使用 ViewStack導航容器來實作同樣的效果。

變換/transition是當一個視圖狀态發生變化時成多點傳播放的幾種效果。變換的目的是使視覺上的變化更為平滑和有趣。

本節将教授你如何使用視圖狀态和變換去建立使用者界面。

[b]設計基礎狀态[/b]

在你使用視圖狀态之前，你必須設計好應用程式或元件的基礎狀态。所謂的基礎狀态，就是指程式或定制元件的預設狀态。

在本節中，你建立好有一個簡單搜尋表格的基礎狀态。

1. 在導航視圖中標明 Lessons項目，選擇 File > New > MXML Application并建立一個名叫 ViewStates.mxml的檔案。

2. 将導航視圖中的 ViewStates.mxml設計成被編譯的預設檔案，并且在關聯菜單中選擇 Set As Default Application。

3. 在 MXML編輯器設計模式中，從元件視圖的布局分類中拖拉出一個面闆容器，将它添中到 ViewStates.mxml檔案裡。

4. 選擇布局中的面闆容器，并進行相應的屬性設定：

[quote]Width: 300 Height: 400

X: 5

Y: 5[/quote]

5. 從元件視圖的控件分類中将随後控件拖拉到面闆中：

[quote]Label TextInput Button LinkButton[/quote]

6. 選擇面闆中的 Label控件，并進行相應的屬性設定：

[quote]Text: Search

X: 20

Y: 70[/quote]

7. 選擇 TextInput控件，并進行相應的屬性設定：

[quote]X: 20

Y: 90[/quote]

8. 選擇按鈕控件，并進行相應的屬性設定：

[quote]Label: Go

X: 185

Y: 90[/quote]

9. 選擇 LinkButton控件，并進行相應的屬性設定：

[quote]Label: Advanced Options

X: 20

Y: 120[/quote]

10. 切換到編輯器的源代碼模式下，在 ViewStates.mxml檔案中輸入如下代碼：

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
           

布局看起來就象這樣：

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/49598924.jpg [/img]

<mx:Panel x="5" y="5" width="300" height="400" layout="absolute"> <mx:Label x="20" y="70" text="Search"/> 
<mx:TextInput x="20" y="90"/> 
<mx:Button x="185" y="90" label="Go"/> 
<mx:LinkButton x="20" y="120" label="Advanced Options"/>
</mx:Panel> 
</mx:Application>
           

11. 儲存檔案，編譯後運作。

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/49598925.jpg[/img]

設計視圖狀态範例程式提供了一個滿足大多使用者需要的，簡單的搜尋機制。然而，一些使用者可能會比較喜歡更多的搜尋選項。你可以使用視圖狀态來提供這些需求。

1. 在設計模式中，在狀态檢視（ Window > States）上點選新狀态 /New State按鈕。

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/49598926.jpg[/img]

新狀态對話框出現。

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/49598927.jpg[/img]

在名稱框中鍵入 Advanced并點選。新狀态出現在狀态檢視中。

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/49598928.jpg[/img]

你可以使用 Flex Builder中的布局工具去修改新狀态的外觀。你可以修改、添加或删除元件，對新狀态變化的描述都被編碼成 MXML代碼。

3. 在設計模式下，在 Advanced Search link下插入一個 VBox容器，為出現的對話框指

定寬度 160高度 80，并設定相應的屬性：

[quote]ID: myVBox

X: 20

Y: 160[/quote]

4. 拖拉三個 CheckBox控件到 VBox容器。 VBox容器會自動地縱向排列控件。

5. 選擇 VBox容器中的第一個 CheckBox控件，将它的标簽屬性值設定為 Regular Expression。

6. 選擇第二個 CheckBox控件，将它的标簽屬性值設定為 Case sensitive。

7. 選擇第三個 CheckBox控件，将它的标簽屬性值設定為 Exact Phrase。 布局看起來就會象這樣：

8. 切換到源代碼模式，并檢測代碼。在<mx:Application>标簽後插入 <mx:states>标簽：

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/49598929.jpg[/img]

9. 儲存檔案，編譯後運作。

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/49598925.jpg[/img]

程式并沒有顯示在新視圖狀态中插入控件。預設地， Flex應用程式隻顯示基礎狀态。你必須定義使用者如何變換視圖狀态，通常是點選某個控件。

[b]定義使用者如何轉換視圖狀态[/b]

你可以設計你的應用程式，使它在使用者點選 Advanced Options link時，布局會變換成附有額外搜尋選項的進階檢視狀态。當使用者再次點選 link，布局又會變換回基本狀态并隐藏那些選項。為了實作這種效果，你需要定義變換狀态的點選事件處理器。

1. 在設計模式中，在狀态視圖中的清單裡選擇基礎狀态。

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/495989211.jpg[/img]

因為你将為 Link控件定義的事件處理器是基礎狀态的一部分，是以你需要将 MXML編輯器的焦點變到基礎狀态上。

當你在這一步選擇基礎狀态時， MXML編輯器并沒有顯示那三個 CheckBox控件，因為它們并不是基礎狀态的一部分。

2. 選擇布局中的 LinkButton控件，在 On Click文本框中輸入如下數值： currentState='Advanced'

點選屬性表明，當使用者點選 LinkButton控件時，應用程式從目前狀态變換成進階檢視狀态，它将顯示額外那三個 check框。

接下來，當使用者第二次點選 LinkButton 控件時，隐藏那三個 check框，并恢複到基礎狀态。

3. 在狀态視圖中，選擇 Advanced state。

4. 在進階檢視狀态的布局中選擇 LinkButton控件，指定點選屬性： currentState=''

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/495989212.jpg[/img]

将 currentState的值指定為空的字元串，是要恢複成基礎狀态。

5. 儲存檔案，編譯後運作。建立一個變換

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/495989213.jpg[/img]

當你在應用程式中改變視圖狀态時， check框立即出現在螢幕上。你可以定義一個 Flex變換，讓它産生揩去和淡化的效果而不是突然變化。

1. 在源代碼模式下，建立一個 Transition對象，在<mx:states>标簽後添加 <mx:transitions>标簽，指定觸發它的變換：

代碼定義了一個名叫 myTransition的變換對象。（你可以在 <mx:transitions>标簽中定義更多的變換）

代碼還确定，當應用程式從任何視圖狀态（ fromState="*"）變換成進階檢視狀态（toState="Advanced"）時，變換就會執行。數值 "*"是一個通配符，用來指定任何視圖狀态。

2. 為變換指定目标元件，以及效果的播放形式，是同時還是順序進行：

變換的目标元件是名叫 myVBox的 VBox容器。

因為你希望在變換期間兩種效果同時發生，是以使用了 <mx:Parallel>标簽。如果你希望

兩種效果順序發生，則需要使用 <mx:Sequence>标簽。

3. 在<mx:Parallel>标簽對中輸入<mx:WipeDown>和<mx:Dissolve>标簽，指定在變換期用播放的效果：

完成後的 <mx:transitions>标簽看起來就象這樣：

<mx:transitions>
<mx:Transition id="myTransition" fromState="*" toState="Advanced">
<mx:Parallel target="{myVBox}">
<mx:WipeDown duration="2000"/>
<mx:Dissolve alphaFrom="0.0" alphaTo="1.0" duration="2000"/>
</mx:Parallel> 
</mx:Transition> 
</mx:transitions>
           

4. 儲存檔案，編譯後運作。

在本節中，你學習了如何使用視圖狀态和變換去建立更加靈活的使用者界面。

[size=medium][b]第八節 建立定制的元件[/b][/size]

建立定制 MXML元件可以簡化構造複雜程式的過程。将程式劃分為便于管理的塊，你可以編寫并測試每個獨立的元件。同時，你還可以在同一程式或其它程式中複用這些元件，以加快開發的速度。

本節将教授你如何構造 MXML元件并将它們插入到應用程式中。

[b]為定制元件建立一個測試檔案[/b]

你打算構造一個定制 MXML元件，一個登入框。在你開始之前，不管怎樣，需要建立一個 MXML應用程式檔案去測試它。

1. 在導航視圖中選擇 Lessons項目，選擇 File > New > MXML Application并建立名為 Main.mxml的應用程式檔案。

2. 将導航視圖中的 Main.mxml設計為被編譯的預設檔案，并在關聯菜單中選擇 Set As Default Application。

3. 在 MXML編輯器設計模式下，将元件視圖中布局分類裡的面闆容器，拖拉到 Main.mxml檔案裡。

4. 選擇 Main.mxml檔案中的面闆容器，進行相應的屬性設定：

[quote]Title: Main Application Window Width: 375 Height: 300

X: 20

Y: 20[/quote]

布局看起來就象這樣：

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/495989214.jpg[/img]

5. 儲存檔案。

現在，你可以構造并測試定制的元件了。

[b]建立定制元件檔案[/b]

構造定制 MXML元件的第一步是建立檔案。大多數進行定制的元件都是利用已經存在的元件。比如你的新登入框元件，是由 MXML面闆元件擴充而來，因為它提供了用于登入表格的基本使用者界面。

在開始之前，建立一個子目錄去儲存定制元件。

1. 在導航視圖中，右擊 Lessons父檔案夾，并從關聯菜單中選擇 New > Folder。新檔案夾對話框出現。

2. 在檔案夾名稱文本框中，輸入 myComponents并點選完成。 Flex Builder建立一個名叫 myComponents的子目錄。

3. 在導航視圖中選擇 myComponents檔案夾，選擇 File > New > MXML Component。

新 MXML元件對話框出現，将 Lessons/myComponents檔案夾設定為定制元件的預設檔案夾。

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/495989215.jpg[/img]

4. 在檔案名文本框中，輸入 LoginBox。

5. 在彈出菜單中，選擇 Panel。你想要擴充面闆 /panel元件。

6. 在布局彈出菜單裡，确定 Absolute被標明（它應該是預設的）。

7. 點選完成。 Flex Builder建立并儲存 LoginBox.mxml檔案到 myComponents 檔案夾中，然後在

MXML編輯器裡打開。如果你切換到設計模式，就會在元件視圖的定制分類中看到它：

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/495989216.jpg[/img]

[b]設計定制元件的布局[/b]

接下來是設計定制元件的界面布局。對于你的 LoginBox元件，你希望在布局中包括使用者名和密碼框，以及一個送出 /submit按鈕。

1. 確定在設計模式中 LoginBox元件是打開的。

2. 選擇面闆并設定相應的屬性： Title: Member Login Width: 275 Height: 150

3. 在面闆中插入兩個 Label控件，并讓它們垂直排列。

4. 在 Label控件右邊插入兩個 TextInput控件，并讓它們垂直排列。

5. 選擇第一個 Label控件，并将它的文本屬性值設為 Username。

6. 選擇第二個 Label控件，并将它的文本屬性值設為 Password。

7. 選擇第一個 TextInput控件，将 txtUID作為它的 id屬性值。

8. 選擇第二個 TextInput控件，将 txtPwd作為它的 id屬性值，并将 Display As Password值設定為 true。

9. 在第二個 TextInput控件下方插入一個按鈕控件，将 Login作為它的标簽屬性值。

10. 放置好這些控件，使布局看起來就象這樣：請輸入随後的代碼（你可以改變其中的坐标值）：

[b]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/495989217.jpg[/b]

11. 儲存檔案。

為定制元件定義事件監聽器有時，你希望定制元件包含可以處理使用者活動的邏輯。比如說你的 LoginBox元件，當使用者點選登入按鈕時，元件對使用者名和密碼進行校驗，然後僅向授權的使用者傳送資料。本節将教授你如何為登入按鈕定義一個簡單的事件監聽器。一個事件監聽器，就是我們常說的事件處理器。首先，插入并修改一個 Label控件以測試事件監聽器是否正确地進行調用。

1. 在設計模式中，在 Login按鈕左邊的空白處插入一個 Label控件，就象這樣：

2. 選擇 Labe控件，将 lblTest作為它的 ID屬性，同時清空文本屬性的值。

3. 選擇按鈕控件，在 On Click文本框中輸入 handleLoginEvent（）。

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/495989218.jpg[/img]

當使用者點選按鈕時，希望程式能夠調用 handleLoginEvent功能函數。接下來，編寫監聽器的程式。

4. 切換到源代碼模式下，将滑鼠移到 <mx:Panel>标簽後使之獲得焦點。

5. 輸入<mx:Script>直到所有标簽在代碼提示中被選擇，按 Enter鍵插入标簽，然後使用

結束方括号來完成标簽。 Flex Builder會生成一個包含 CDATA結構的 <mx:Script>腳本塊。

6. 在 CDATA結構中輸入随後的代碼：

關鍵字 private表明了功能函數的作用範圍。在本例中，其作用範圍僅限于元件内。如果你将它改成 public，則功能函數在整個代碼中均有效。關鍵字 void表明功能函數不傳回任何數值。

元件的代碼看起來就象這樣：

7. 儲存檔案。

使用定制元件接下來的一步就是将定制元件添加到 MXML程式檔案中，然後編譯并運作以測試其效果。

1. 在設計模式中，切換到 Main.mxml檔案。

2. 在元件視圖的定制分類中找到 LoginBox元件。

3. 将 LoginBox元件拖拉到布局中面闆的右邊緣。

4. 在布局中選擇 LoginBox元件，進行相應的屬性設定：

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/495989216.jpg[/img]

[quote]X: 400

Y: 20[/quote]

完成的布局看起來就象這樣：

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/495989220.jpg[/img]

5. 切換到 MXML編輯器源代碼模式下，在檔案中插入如下代碼：

</mx:Application>當你将定制元件拖拉到 MXML檔案中時， Flex Builder會定義一個叫 ns1的命名空間，

然後在<mx:Panel>标簽後插入一個 <ns1:LoginBox>标簽。

6. 儲存檔案，編譯後運作。

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/495989221.jpg[/img]

應用程式會顯示你在主檔案中所插入的 LoginBox元件。你可以在多個 MXML檔案中複用相同的元件。

點選 Login按鈕檢驗事件監聽器是否正确調用，字元串"logging in..."将出現在 Login按鈕的左邊。（譯者注：這隻是一個示範定制元件的簡單程式，在實際工作中，取而代之的是進行相應處理的邏輯。）

在本節中，你建立了一個定制的 MXML元件，并在應用程式中使用它。你設計好元件的布局，并且為控制它而定義好事件監聽器。

[size=medium][b]第九章 使用 Web服務[/b][/size]

為了在應用程式中使用資料庫， Adobe Flex提供了若幹特定的元件，如 web services， HTTP servers或 remote object services（Java對象）。這些元件被稱為遠端過程調用（ RPC）服務元件。

在本節中，你建立了一個簡單的報表程式，用來顯示最近 30天最熱門的貼子，程式還可以讓使用者來決定顯示貼子的數量。使用名叫 WebService的 RPC服務元件去送出使用者的選擇，同時從源資料站點的 SOAP-based web service上擷取資料，并将這些資料顯示在 DataGrid控件中。

[b]相關 API資料 [/b]

MXNA為開發人員提供一組 web services，其網站位于 [url]www.adobe.com/go/mxna_developers[/url]。在你開始建立自己的應用程式前，應該檢視他們 Web服務的相關 API資料，以确儲存在你想要的接收資訊的方法。相關 API資料位于 [url]www.adobe.com/go/mxna_api[/url]。

文檔資料描述了一種稱為 getMostPopularPosts的方法。該方法将傳回近 30天最熱門的貼子。對于每一個傳回的貼子，均包含如下資訊： postId，clicks，dateTimeAggregated，feedId， feedName，postTitle，postExcerpt，和 postLink。

該方法使用了兩個參數：

daysBack指出你想要傳回的天數。 Limit指出你想要傳回的貼子總數，不能超過 50。

插入并放置控件在本節中，你首先建立好報表程式的布局。使用 ComboBox控件來讓使用者設定貼子清單的數量，并在 DataGrid中進行顯示。

1. 在導航視圖選擇 Lessons項目，選擇 File > New > MXML Application并建立名叫 Services.mxml的應用程式。

2. 将 Services.mxml設計成編譯的預設檔案，并在關聯菜單中選擇 Set As Default Application。

3. 在 MXML編輯器的設計模式下，将元件視圖布局分類中的面闆容器拖拉到布局中，并設定相應的屬性：

[quote]Title: Most Popular Posts Width: 475 Height: 400

X: 10

Y: 10[/quote]

4. 在設計模式下，将以下控件從元件視圖中拖拉到面闆容器裡： ComboBox DataGrid LinkButton

5. 使用滑鼠将控件布置好，看起來就象這樣：

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/495989222.jpg[/img]

6. 選擇 ComboBox控件，将 cbxNumPosts作為它的 id屬性值。

ComboBox控件還沒有顯示任何項，你需要裝載它。

7. 切換到編輯器的源代碼模式，在 <mx:ComboBox>标簽對中輸入随後代碼： <mx:Object label="Top 5" data="5"/> <mx:Object label="Top 10" data="10"/> <mx:Object label="Top 15" data="15"/>

8. 切換回設計模式，選擇 DataGrid元件，為它指定如下屬性值： ID: dgTopPosts Width: 400

9. 選擇 LinkButton控件，将 Select an item and click here for full post 作為它的标簽屬性

值。整個布局看起來就象這樣：

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/495989223.jpg[/img]

10. 切換到源代碼模式。在 Services.mxml檔案中包含如下代碼（你可以改變其中的坐标數值）：

接下來就是在程式中插入并設定 RPC元件， WebService。

插入 WebService元件你可以使用 Flex WebService元件去通路使用 SOAP的 web伺服器并擷取相應的資訊。

1. 在源代碼模式中，在 <mx:Application>标簽後輸入 <mx:WebService>标簽：

Wsdl屬性指出了 web伺服器 WSDL檔案的位置。在本例中，該位址是始終有效的，但是你依然需要進行檢測以確定它是否發生改變。最近的 WSDL檔案位于開發者頁面 [url]www.adobe.com/go/mxna_developers[/url]。（譯者注：如果你願意，也可以使用别名 [url]http://www.adobe.com/go/flex_mxna_wsdl[/url]。

useProxy屬性表明你不打算在伺服器上使用代理。

2. 指定傳送參數到 web伺服器的方法。 根據 API文檔資料， getMostPopularPosts方法需要使用了兩個參數： daysBack指定你想要傳回的天數。 Limit指定你想要傳回的總行數。 為了指定這些參數，在 <mx:WebService>标簽對中輸入如下代碼：

<mx:operation>标簽的 name屬性必須與 web伺服器方法的 name相同。

3. 在<mx:ComboBox>标簽中，添加随後的 change屬性：

<mx:ComboBox x="30" y="25" id="cbxNumPosts" change="wsBlogAggr.getMostPopularPosts.send()">
           

當使用者在 ComboBox控件中選擇某個選項時， wsBlogAggr WebService元件的 getMostPopularPosts方法就被調用。方法的參數在 WebService元件的 <mx:operation>标簽中進行指定。 Limit參數在程式運作時由使用者所作的選項來決定。

應用程式已經準備好調用 web service。接下來就是顯示從 web service中傳回的資料。

裝載 DataGrid元件你打算使用 DataGrid控件來顯示從 web service傳回的資料。具體地，你打算顯示更熱門貼子的标題，以及它們被浏覽點選的次數。

1. 在源代碼模式下，在 <mx:DataGrid>标簽中輸入如下代碼： <mx:DataGrid x="30" y="75" id="dgTopPosts" width="400" dataProvider="{wsBlogAggr.getMostPopularPosts.lastResult}">

你打算在 DataGrid控件中顯示 web service的 getMostPopularPosts的操作結果。

2. 在第一個 <mx:DataGridColumn>标簽中，輸入 headerText和 dataField 屬性值： <mx:DataGridColumn headerText="Top Posts" dataField="postTitle" />

DataGrid控件的第一列用來顯示貼子的标題。根據從 web service操作所傳回的包含 title資料的字段，将該字段名作為 dataField屬性的值。根據 getMostPopularPosts 方法的 API文檔資料，在名叫 postTitle的字段中包含了你想要的資訊。

3. 在第二個 <mx:DataGridColumn>标簽中，輸入 headerText， dataField和 width屬性值：

<mx:DataGridColumn headerText="Clicks" dataField="clicks" width="75" /> DataGrid控件的第二列用來顯示最近 30天每個貼子的浏覽點選次數。根據 API文檔資料，包含該資料的字段名叫 clicks。

4. 删除第三個 <mx:DataGridColumn>标簽。因為你不需要第三列。 <mx:DataGrid>标簽看起來就象這樣：

5. 儲存檔案，編譯後運作。

但是你會發現出現了一點問題，那就是 ComboBox取值 Top 5但 DataGrid并沒有顯示任何資訊。出現這樣的問題，是因為應用程式并沒有調用 web service，它隻是在 ComboBox發生改變時才進行調用。修正這個問題，使 web service在程式建立時就立即被調用。

6. 在源代碼模式中，在 <mx:Application>标簽中輸入 creationComplete屬性值：

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

7. 儲存檔案并運作程式。

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/495989224.jpg[/img]

[b]建立動态連結[/b]

web service并不顯示貼子的所有文本。如果使用者有興趣的話，你可以使他們能夠閱讀到所有的内容。雖然 web service沒有提供這些資訊，但是它們可以由貼子各自的 URLs來實作。根據 getMostPopularPosts方法的 API文檔資料，包含了此資訊的字段名叫 postLink。

你打算建立動态連結，當使用者在 DataGrid控件中標明貼子時可以顯示它的全部内容。

1. 在源代碼模式下，在 <mx:LinkButton>标簽中輸入 click屬性：

<mx:LinkButton x="30" y="250" label="Select an item and click here for full post" click="navigateToURL(new URLRequest(dgTopPosts.selectedItem.postLink));" />
           

DataGrid控件中被選項的 link字段的數值 dgTopPosts.selectedItem.postLink，在 navigateToURL（）方法裡指定，當使用者點選 LinkButton控件時進行調用。navigateToURL（）從指定的 URL中加載一個文檔到新的浏覽器窗體中。

2. 儲存檔案，編譯後運作。

在本節中，你學習了使用 WebService元件調用和傳送方法參數給 SOAP-based web service，然後将 web service傳回的資料綁定到 DataGrid和 LinkButton控件上。

轉載自[url=http://www.airia.cn/]AIRIA.cn[/url]