如何使用本書 - 碁峰資訊epaper.gotop.com.tw/pdfsample/acl028000.pdf · 第14...
TRANSCRIPT
導讀
v
導讀
如何使用本書
建議您可以用以下三種方式使用本書：
1 教學與自學範本
本書在『導引篇』、『網站建置篇』、『程式開發基礎篇』以循序漸進的編排方式，
逐步引導您瞭解開發 Flex RIA應用系統，所需具備的基礎知識與技術。接下來的章節，以圖解方式剖析『RIA介面開發篇』、『跨平台資料整合篇』、『網站經典服務開發篇』中所展示的實務範例程式與語法。故本書可以當做您學習 Flex RIA相關技術時的學習範本。
書中所介紹的範例程式與開發工具，全部都收錄在光碟中。建議您閱讀範例程
式前，可以先安裝好 Flex Builder 3，並將光碟中的範例程式 Import 到 Flex Builder 3的開發環境中，依照書中的介紹觀看執行結果，並清楚每個範例程式的學習目標後，再閱讀範例程式碼。
若範例程式碼中有不清楚的語法，請您先做筆記，而後再透過程式碼結構圖，
先對範例程式的結構有所掌握。最後再以程式結構圖為基礎，透過表格化的整理，
瞭解範例程式中相關的關鍵語法。
如果覺得書中的解釋，您還有所疑問的話，筆者相當鼓勵您，運用 Flex Builder 3所提供的 Debug 工具，對範例程式碼做追蹤，觀察範例程式中變數、屬性、物件⋯內部值的變化，同時也能對程式運作的流程有更進一步的瞭解。
2 Flex範例程式與語法參考辭典
在目錄後有整理書中所有範例程式清單，您可以依照清單上的整理，快速瀏覽
所有範例程式，並清楚每一個範例程式所會探討的技術議題與相關應用。您可以依
工作或專題所需，挑選自己需要的範例程式出來研讀，瞭解範例程式中所運用的相
關技術與程式語法。
3 範例程式套用
您在瞭解工作與專題需求後，可以運用範例索引清單，快速瀏覽範例程式，找
出最符合您需求的範例程式，從光碟將範例程式 Import 到您的 Flex Builder 3的開發環境中，並以範例程式中的框架為基礎，修改範例程式至符合您的需求。
FlexFlex透視！ 範例事典
vi
本書適合誰讀
本書基本上適合兩種類型的讀者群：
1 想快速學習 Flex技術平台的讀者
本書從 RIA觀念技術，到 Flex Builder開發環境安裝與操作都有詳細的說明。並透過圖解方式搭配範例程式，詳細剖析 MXML與 ActionScript 3程式語法的運 用。而後也透過涵蓋各種層面的實務範例程式，搭配程式結構圖針對程式中所運用
到的語法做詳細解說。故本書相當適合想學習 Flex平台技術的讀者做為入門學習 手冊。
2 想運用 Flex平台技術於實際專案中的讀者
本書所有範例程式在設計與挑選時，除了有教學用途外，這些範例也是從中大
型專案中萃取出來的實務範例。故您可以依照工作與專案上的需求，從中挑選出適
合的範例程式，依照需求進行修改，節省您重新打造程式碼框架的時間。
本書內容綱要
本書有 6大篇包含 20個章節，對 Flex各種技術廣泛且深入的探討。以下為內容綱要介紹：
Part I 導引篇
第 1章：Flex 與 Web RIA
本章介紹 RIA技術的由來，並以豐富的圖例讓您清楚跟 RIA技術相關的技術平台，包含 AVM與資料庫運作的剖析。除了讓您對 RIA技術的應用有正確認知外，也進一步讓您可以從本章節中的觀念導引，對 RIA日後相關技術的學習能擬定屬於個人的學習地圖。
第 2章：Flex Builder 初體驗
透過 Step by Step的方式，向您介紹如何安裝 Flex Builder 3與使用 Flex Builder 3開發環境最常用的功能，並且帶您從無至有建立第一個 Flex的應用程式。可以快速累積對 Flex Builder 3開發環境的相關操作基礎能力。
導讀
vii
第 3章：Flex Builder開發環境簡介
針對 Flex Builder 開發環境最常用的工具做清楚明確的介紹，看完本章，您將會對 Flex Builder的開發環境有更全面的認識。
第 4章：運用 Gumbo SDK開發 3D介面
介紹如何下載最新的 Flex SDK 4-Gumbo，並將它安裝至 Flex Builder 3中，並以實際的範例程式向您介紹，如何運用最新的 Flex SDK 打造又酷又炫的 3D介面。學習到如何在 Flex Builder 3中切換到不同的 SDK 版本，並且對運用最新的 Flex MXML語法有初步的認識。
Part II 網站建置篇
第 5章：建構 Java Web Server環境
帶您從無至有建構 Java 平台的 Tomcat Web ＆ WebService Application Server，包括跟資料庫連結與處理 XML資料 Dom4j函式庫的安裝佈署，都有詳細的介紹。透過本章的導引，您日後將可以實際親身體驗 Flex與 Java平台接軌的優勢，學習到如何建立一個專屬 Java Web＆WebService Application Server的程式執行平台，並透過此平台執行本書所附的範例程式。
第 6章：建構 .Net Web Application Server環境
帶您從無至有建構 .Net平台的Web ＆WebService Application Server。透過本章的導引，您日後將可以實際親身體驗 Flex與 .Net平台接軌的優勢，學習到如何建立一個專屬 .Net Web&WebService Application Server的程式執行平台，並透過此平台執行本書所附的範例程式。
第 7章：建構 PHP Web Application Server環境
帶您從無至有建構 PHP平台的 Web Application Server，包括跟資料庫連結的安裝佈署，都有詳細的介紹。透過本章的導引，您日後將可以實際親身體驗
Flex與 PHP平台接軌的優勢，學習到如何建立一個專屬 PHP Web&WebService Application Server的程式執行平台，並透過此平台執行本書所附的範例程式。
FlexFlex透視！ 範例事典
viii
Part III Flex程式基礎篇
第 8章：Flex 應用程式三大元素概述
對開發 Flex應用程式的三大元素，有清楚明確的介紹。
第 9章：MXML 標籤語言
透過實際範例程式剖析 MXML標籤語法，奠定您紮實的 MXML語法應用的 基礎。
第 10章：ActionSctipt 語言
透過圖解配合日常生活情境，剖析 ActionScript 3程式語法在記憶體模型中的物件與變數的配置為何？同時也透過實際案例讓您瞭解，如何運用 AS3控制 MXML所宣告的節點。
整理初學者在學習 AS3最常碰到的問題，包含 Java與 AS3之間的差異、AS2如何移植至 AS3、如何避免寫出 Memory Leak的 AS3程式、如何在 Flex平台中處理大量資料、如何用 AS3的 Reflection取代 eval()函式的呼叫⋯等議題。每個議題都搭配實際範例程式來解說，如何解決在 Flex技術平台開發應用程式時，所遭遇到的問題，奠定在 Flex與 Flash平台中，運用 ActionScript 3語言紮實的程式設計 基礎。
第 11章：Event 事件
以圖解配合實際範例程式，向您剖析 Flex平台中事件模型的運作流程。並透過各種實際範例程式，向您解說各種事件處理技巧的應用，包含 MXML與AcrionAcript 3對事件的宣告與處理，奠定紮實的事件處理技能，大幅提昇您日後開發各類型介面與應用系統的實力。
Part IV RIA介面開發篇
第 12章：特效範例實作
透過實際範例程式配合圖解，展示與剖析 Flex平台中所提供的各種特效元件，學習到如何應用各種特效元件在介面中，讓您日後所開發的介面能更吸引使用者的
目光。
導讀
ix
第 13章：介面範例實作
透過實際範例程式配合圖解，展示與剖析 Flex平台中所提供最常用的介面元件，學習到如何在 Flex Builder 3的開發環境中，快速打造更具有親和力的Web RIA介面，本章也會介紹如何讓介面與第 12章節的特效元件接軌。讓您的Web介面除了更具親和力之外，也能在第一時間吸引使用者的目光。
第 14章：進階事件應用範例實作
透過實際範例程式配合圖解，展示與剖析 Flex平台中進階的事件處理技巧與機制，讓您知道如何運用事件做跨 MXML文件資料傳遞，學習到如何運用事件，來開發中大型的 Flex應用程式與系統。
第 15章：介面狀態管理範例實作
透過實際範例程式配合圖解，展示與剖析 Flex平台中所提供的狀態元件與相關語法。讓您知道如何運用狀態機制，來設計更具介面彈性與更酷更炫的人機介面，
學習到如何運用狀態元件所提供的語法，並如何讓介面在狀態轉換過程中與特效元
件搭配，在呈現上可以更吸引使用者注視。
Part V 跨平台資料整合篇
第 16章：Flex特殊資料型態範例實作
透過實際範例程式配合圖解，展示與剖析 Flex平台中許多功能強大的資料型態，如 Array、XML、ArrayCollection、XMLListCollection⋯等。並進一步介紹如何將 Array與 XML資料，轉換成 Flex更先進的資料型態，如 ArrayCollection、XMLListCollection等，透過這些更先進的資料型態輔助，您將能輕易偵測使用者對這些資料所做的異動，再搭配事件處理函式做處理，知道如何運用這些資料型態來
處理從 Server端所接受的大量資料，並能依照所需將資料轉換至最適合得資料型態來進行相關處理與呈現。
第 17章：雲端運算範例實作
透過實際範例程式配合圖解，展示與剖析 Flex平台中如何運用 HttpService與WebService兩個元件與 Internet上的各種服務平台接軌，包括 Java、.Net、PHP三大開發平台。除了提供 Flex的範例程式之外，也提供在 Server端執行的完整範例程式。
FlexFlex透視！ 範例事典
x
只要您參照 Part II 網站環境建置篇，建置所需技術平台的執行環境，您就可以將書中所附的範例程式，佈署在您所建立的平台，讓您可以透過範例程式，瞭解
Flex跟各平台接軌的核心機制與語法，學習到如何運用 Flex平台所提供的機制，與其他 Server端技術平台接軌，並清楚瞭解到在 Flex中要如何接收與處理 Server端所傳送的資料。也能清楚 Server端的程式要如何撰寫，才能接收 Flex所傳送的參數，並將運算結果資料，轉換成讓 Flex能接收並做進一步處理的格式。讀完本章，您將具備讓 Flex與 Server端溝通的雙向能力。
第 18章：資料庫整合範例實作
透過實際範例程式配合圖解，展示與剖析 Flex平台中如何運用 HttpService與WebService兩個元件，搭配 Server端連結資料庫的機制與資料庫溝通，學習到更進階 Flex處理資料庫回傳資料的處理技巧。讓您日後對 Flex與資料庫的接軌制與資料庫溝通，更加得心應手。
Part VI 網站經典服務開發篇
第 19章：線上購物服務範例實作
萃取中大型專案中的範例程式配合圖解，展示與剖析 Flex平台中所提供的各種機制，實作出可以應用於線上購物網站的服務介面，學習到在開發中大型網站的程
式設計技巧，奠定日後運用 Flex開發中大型應用程式的基礎與實力。
第 20章：整合 Google、Yahoo API範例實作
展示與剖析如何整合 Google、Yahoo所提供的 API函式庫到 Flex平台中。並透過實際的範例程式配合圖解，讓您瞭解到實際整合這些 API服務到 Flex平台中，程式相關的撰寫技巧。透過實際的程式範例學習，整合 Google、Yahoo API到 Flex平台中後，可以打造出多麼令人驚豔的網站服務，大幅提昇您網站服務的滿意度。
CHAPTER16Flex特殊資料型態
範例實作
FlexFlex透視！ 範例事典
16-2
Array一向是許多程式設計師慣用的資料型態之一，而 Flex對 Array資料型態的支援也非常完整。舉凡，陣列元素的排序、搜尋、篩選⋯等等，Array類別都有提供對映的函式可以呼叫。
故在這邊我們透過實際的程式範例，讓您可以知道如何將 Server中以 XML資料格式描述資料集合的檔案，運用 Flex的 HttpService元件讀取到 Flash後，再將這些資料轉成 Array的資料型態。
在您知道如何將資料轉成 Array型態後，您就可以充分運用 Array類別所提供的函式，因應需求做相關的處理。而本章節後面也有範例，介紹如何將 Array中的資料再轉成 XML資料型態，讓這些被處理過後的資料可以傳送到 Server端來解譯處理。
以下就讓我們透過實際範例向您展示，如何將以 XML描述公司資料的資料格是，轉換成 Flex中 Array的資料型態。
範例 1 將公司資料放到 Array中
執行結果
圖 16-1-1 將 Server 描述公司資料的 XML檔案轉換成 Array資料型態讀取出來
CHAPTER 16 ● Flex特殊資料型態範例實作
16-3
運用 HttpService元件讀取 XML檔案格式
如何 ArrayCollection資料型態接收 HttpService元件回傳的資料格式
如何運用 ArrayCollection的 toArray()函式將資料轉成 Array
如何運用 for each走訪陣列中的每一筆公司資料
【arrayApplyApp】程式碼列表如下：
01 <?xml version="1.0" encoding="utf-8"?>
02 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
03 creationComplete="startApp();" >
04 <mx:HTTPService id="bookDataService" url="xmlData/companyList.xml"
05 result="bookDataResultHandler(event)"/>
06 <mx:Script>
07 <
FlexFlex透視！ 範例事典
16-4
22 compAry=compArrayC.toArray();
23 for each (var comp:Object in compAry)
24 {
25 trace(' :'+comp.company_name);
26 trace(' :'+comp.sup_no);
27 trace(' :'+comp.boss_name);
28 }
29 }
30 ]]>
31 </mx:Script>
32 </mx:Application>
【companyList.xml】程式碼列表如下：
01 <?xml version="1.0" encoding="UTF-8"?>
02 <xmlDoc>
03 <webDataSet>
04 <companyList>
05 <company>
06 <sup_no>1001</sup_no>
07 <company_name>FlexGood</company_name>
08 <boss_name>deco</boss_name>
09 <phone_no>02-22034811</phone_no>
10 <fax_no>02-22022668</fax_no>
11 <e_mail>[email protected]</e_mail>
12 </company>
13 <company>
14 <sup_no>1002</sup_no>
15 <company_name>CanBe</company_name>
16 <boss_name> </boss_name>
17 <phone_no>04-23013113</phone_no>
18 <fax_no>04-23012085</fax_no>
19 <e_mail>[email protected]</e_mail>
20 </company>
21 <company>
CHAPTER 16 ● Flex特殊資料型態範例實作
16-5
22 <sup_no>1004</sup_no>
23 <company_name>tryDon</company_name>
24 <boss_name> </boss_name>
25 <phone_no>04-24758345</phone_no>
26 <fax_no>04-24752277</fax_no>
27 <e_mail>[email protected]</e_mail>
28 </company>
29 <company>
30 <sup_no>1005</sup_no>
31 <company_name>LabelFlex</company_name>
32 <boss_name> </boss_name>
33 <phone_no>04-25356788</phone_no>
34 <fax_no>04-25356788</fax_no>
35 <e_mail>[email protected]</e_mail>
36 </company>
37 <company>
38 <sup_no>1010</sup_no>
39 <company_name>New NetWork</company_name>
40 <boss_name> </boss_name>
41 <phone_no>02-27751038</phone_no>
42 <fax_no>02-27752040</fax_no>
43 <e_mail>[email protected]</e_mail>
44 </company>
45 <company>
46 <sup_no>1011</sup_no>
47 <company_name>Dragon Ball</company_name>
48 <boss_name> </boss_name>
49 <phone_no>04-23508233</phone_no>
50 <fax_no>04-23508232</fax_no>
51 <e_mail>[email protected]</e_mail>
52 </company>
53 <company>
54 <sup_no>1012</sup_no>
55 <company_name>LUOS</company_name>
56 <boss_name>deco</boss_name>
FlexFlex透視！ 範例事典
16-6
57 <phone_no>04-3598688</phone_no>
58 <fax_no>04-3598857</fax_no>
59 <e_mail>[email protected]</e_mail>
60 </company>
61 <company>
62 <sup_no>1013</sup_no>
63 <company_name>SendAny</company_name>
64 <boss_name> </boss_name>
65 <phone_no>04-27082233</phone_no>
66 <fax_no>04-27033003</fax_no>
67 <e_mail>[email protected]</e_mail>
68 </company>
69 <company>
70 <sup_no>1016</sup_no>
71 <company_name>SOSO</company_name>
72 <boss_name> </boss_name>
73 <phone_no>04-23119798</phone_no>
74 <fax_no>04-23115695</fax_no>
75 <e_mail>[email protected]</e_mail>
76 </company>
77 <company>
78 <sup_no>1017</sup_no>
79 <company_name>TenBe</company_name>
80 <boss_name> </boss_name>
81 <phone_no>02-25076611</phone_no>
82 <fax_no>02-25067114</fax_no>
83 <e_mail>[email protected]</e_mail>
84 </company>
85 </companyList>
86 </webDataSet>
87 </xmlDoc>
CHAPTER 16 ● Flex特殊資料型態範例實作
16-7
從圖 16-1-2我們可以很清楚看到，在範例程式中，節點之間的從屬關係。如<mx:Application>為根節點，<mx:HTTPService>、<mx:Script>這兩個節點都是附屬在 <mx:Application>節點下。
以下為關鍵程式碼說明：
標示 對映行數 說明
04-05 程 式 碼 04-05 行 以 MXML 標 籤 語 法 宣 告 建 立 一 個HTTPService元件，並以 id="bookDataService"屬性設定在本範例程式中能以 bookDataService來存取本元件，請參考程式碼 15行語法。
url="xmlData/companyList.xml"屬性設定代表，透過 url屬性指定載入 xmlData Folder 中的 companyList.xml檔案。
result="bookDataResultHandler(event)" 屬 性 代 表， 透 過result屬性設定當 HTTPService元件載入 companyList.xml檔案完畢後，對映的處理函式為 bookDataResultHandler，並會將載入的 xml資料，存放至 event-事件實體物件中。
█
█
█
11-12 宣告 compArrayC的屬性，其資料型態為 ArrayCollection。此屬性用途為，存放 HTTPService載入的 xml資料，請參考程式碼 21行語法。
█
圖 16-1-2 [arrayApplyApp]範例程式碼結構圖
1
2
FlexFlex透視！ 範例事典
16-8
標示 對映行數 說明
11-12 宣告 compAry的屬性，其資料型態為 Array。此屬性用途為存放從 ArrayCollection資料型態轉成 Array的資料，請參考程式碼 22行語法。
█
13-16 程式碼 13行，宣告 startApp()函式，此函式為對映 Application元件中產生的 creationComplete事件，請參考程式碼 03行語法。
程 式 碼 15 行，bookDataService.send(); 語 法 代 表
呼 叫 HTTPService 中 的 send 函 式， 表 示 開 始 依 據
bookDataService元件中屬性的設定載入指定的 xml檔案。
█
█
18-29 程 式 碼 18 行， 宣 告 bookDataResultHandler(event:ResultEvent)函式，此函式對映 bookDataService元件中所產生的 result事件，請參考程式碼 05行語法，result="bookDataResultHandler(event)"。
程 式 碼 21 行，compArrayC = event.result.xmlDoc.webDataSet.companyList.company;代表意義為，將載入的xml 資料，透過 E4X語法擷取其每一個 company節點內的資料，並將每一筆 company節點的 XML資料，自動轉換成ArrayColleciton的資料型態。
而 event.result其中 result屬性為 ResultEvent事件類別的屬性，表示 bookDataService載入的 XML資料，會存放在 result屬性。
xmlDoc.webDataSet.companyList.company 為 companyList.xml 檔 案 中，XML 資 料 結 構 格 式，xmlDoc 為 根 節 點，webDataSet 附 屬 在 xmlDoc 節 點 下，companyList 附 屬在 webDataSet節點下，而每一個 company節點又附屬在companyList節點下。請參考 companyList.xml檔案的描述。
程 式 碼 22 行 compAry=compArrayC.toArray(); 代 表 將
compArrayC中的每一筆 company資料轉成 Array的資料型態，並將這些資料指定給 compAry屬性。
程式碼 23行 for each (var comp:Object in compAry)代表透過for each語法走訪在 compAry陣列中的每一筆 company的資料，並將每一筆 company資料轉成 Object資料型態，存放在comp變數中。
█
█
█
█
█
█
3
4
2
CHAPTER 16 ● Flex特殊資料型態範例實作
16-9
標示 對映行數 說明
18-29 程式碼 25行 trace('名稱 :'+comp.company_name);，代表透過物件存取屬性的語法讀取 comp中的 company_name屬性。程式碼 26、27語法意義同上所述。
█
以下我們條列出本範例程式中，比較有機會重複運用到的語法：
event.result.xmlDoc.webDataSet.companyList.company; 語 法 是 讀 取
HTTPService元件回傳資料的基礎語法，請您務必留意此語法的應用。
for each (var comp:Object in compAry) 語 法， 可 以 用 來 讀 取 各 種 資料 型 態 中 的 資 料 元 素， 如 Array、ArrayCollection、XML、XMLList、XMLListCollection⋯等，請您留意語法的應用。
XML資料型態應用是非常廣泛的，不管在 Flex中可以讓 XML資料跟許多元件做結合。更重要的是，XML資料可以做為跟外界 Server資料的整合。
如在 Flex讀取到使用者輸入的資料後，不管中間過程是用什麼資料型態，如Array、ArrayCollection⋯來處理，到最後要將使用者資料傳到 Server中做處理，基本上轉成 XML資料格式，傳送到 Server端去，是最常見的資料處理處理模式之一。
所以將其它資料型態轉換成 XML的資料型態是一般開發中大型 Flex應用系統常用的技巧之一。以下我們將透過實際範例程式，向您展示如何將 Array的資料集合，轉換成 XML資料格式，讓您 Flex的程式可以具備跟外界溝通的能力。
●
●
舉一反三
範例 2 將 Array資料轉成 XML資料格式
4
FlexFlex透視！ 範例事典
16-10
以 AS3 E4X語法宣告 XML資料節點
以 AS3 E4X語法存取 XML節點中的資料
以 for each語法配合 E4X XPath語法走訪指定路徑的每一個 XML節點
【arrayToXMLApp】程式碼列表如下：
01 <?xml version="1.0" encoding="utf-8"?>
02 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
03 creationComplete="startApp();" >
04 <mx:HTTPService id="bookDataService" url="xmlData/companyList.xml"
●
●
●
執行結果
圖 16-2-1 讀取從 Array資料型態轉換成 XML資料輸出的結果
學習目標
原理講解
CHAPTER 16 ● Flex特殊資料型態範例實作
16-11
05 result="bookDataResultHandler(event)"/>
06 <mx:Script>
07 <
FlexFlex透視！ 範例事典
16-12
37 compRecord.comp_name=compAryEle.
company_name;
38 compRecord.comp_boss=compAryEle.
boss_name;
39 compRecord.comp_status='active';
40 compXML.companyList.
appendChild(compRecord);
41 }
42
43 for each (var comp:XML in compXML.companyList.
company)
44 {
45 trace(' :'+comp.comp_name);
46 trace(' :'+comp.comp_no);
47 trace(' :'+comp.comp_boss);
48 trace(' :'+comp.comp_status);
49 }
50 }
51 ]]>
52 </mx:Script>
53 </mx:Application>
圖 16-2-2 [arrayToXMLApp]範例程式碼結構圖
CHAPTER 16 ● Flex特殊資料型態範例實作
16-13
從圖 16-2-2我們可以很清楚看到，在範例程式中，節點之間的從屬關係。如<mx:Application>為根節點，<mx:HTTPService>、<mx:Script>這兩個節點都是附屬在 <mx:Application>節點下。
以下為關鍵程式碼說明：
標示 對映行數 說明
13 宣告 compXML屬性且資料型態為 XML型態，並直接透過E4X語法宣告兩個節點，為 xmlDoc與 companyList，其中companyList節點附屬在 xmlDoc節點中，且 xmlDoc為根節點。
█
20-49 程 式 碼 20 行， 宣 告 bookDataResultHandler(event:ResultEvent)函式，此函式對映 bookDataService元件中所產生的 result事件，請參考程式碼 05行語法，result="bookDataResultHandler(event)"。
程式碼 27-41 的目的為，透過 for each 語法走訪 compAry中的每一筆資料元素，將每一筆資料元素讀出來後，透過
compRecord.comp_no=compAryEle.sup_no; 語法，將 Array中的資料一個個欄位對映到 compRecord變數所中存放的XML資料格式。其中 compRecord變數，請您參考程式碼28-33的宣告。compAryEle變數，請您參考程式碼 27行的宣告。
程 式 碼 40 行，compXML.companyList.appendChild (compRecord);語法，是透過 XML類別中的 appendChild的函式，將 compRecord中所存放的整筆 XML資料，加入至compXML屬性中的 companyList節點下，其中 compXML屬性，請參考程式碼 13行宣告。
程 式 碼 43 行，for each (var comp:XML in compXML.companyList.company)代表意義為，透過 for each語法配合E4X中 XPath的語法，走訪 compXML屬性中 companyList節點下中的每一個 company節點，並把每一個 company節點指定給 comp變數。
程式碼 45 行，trace(' 名稱 :'+comp.comp_name); 代表透過E4X語法讀取 comp中的 company_name節點中的值。46、47行語法同上所述。
█
█
█
█
█
1
2
FlexFlex透視！ 範例事典
16-14
以下我們條列出本範例程式中，比較有機會重複運用到的語法：
for each (var comp:XML in compXML.companyList.company)是擷取所需XML資料相當常見的語法應用，請您務必留意此語法的運用。
compXML:XML=<xmlDoc><companyList></companyList></xmlDoc>;XML變數與 XML資料的描述，也是日後存取 XML資料常用的語法之一。
雖然 XML資料格式已經可以滿足大部分資料處理的需求，但若牽涉到與介面元件之間的勾稽整合，如當使用者在 DataGrid中元件新增、刪除、更新資料等活動，自動偵測資料被異動時的機制，就非 XML類別所支援的範圍。
所以，為了簡化程式設計師處理使用者在介面中所做的資料異動，Flex有提供以 XML為基礎的 XMLListCollection的資料型態，只要將 XML資料轉換成此型態，並透過 dataProvider設定給介面元件，如 DataGrid、List⋯等元件後，使用者一旦在元件中做任何異動資料動作，就可以透過監聽 XMLListCollection資料型態所發出的事件，來得知使用者透過介面對資料做了哪些異動。
所以學會如何將 XML資料轉換成 XMLListCollection資料型態，在 Flex中算是蠻重要的技巧，而且轉換方法也非常簡易，在這邊先讓我們賣個小小關子。以下就
讓我們透過實際範例程式，向您展示如何將 XML資料轉換成 XMLListCollection資料型態。
●
●
舉一反三
範例 3 將 XML資料轉為 XMLListCollection