MXML是一個可以讓你在Adobe Flex中布局用戶界面組件的一種XML語言,你也可以使用MXML聲明來定義程序中的非可視化組件,安裝好FLEX Development 后,你就可以輕松的結合PHP完成一個FLASH曲線圖.

先從PHP入手:

FLEX 和PHP的交互最常用的就是和XML的交互,就是用PHP生成XML,然后用FLEX去讀取并且顯示,我們以XML的形式先寫一個帳目詳單的數據,代碼如下:

1. header("Content-Type: text/xml"); 
2. $arr = array( 
3.      array('day'=>'01','sum'=>'153.1'), 
4.       array('day'=>'02','sum'=>'882.86'), 
5.       array('day'=>'03','sum'=>'456.9'), 
6.       array('day'=>'04','sum'=>'717.7'), 
7.        array('day'=>'05','sum'=>'255.1'), 
8.        array('day'=>'06','sum'=>'533.1') 
9. ); 
10. $xml_return  .= "<bills>"; 
11. foreach ( $arr as $use){ 
12.        $xml_return .="<bill><sum>{$use['sum']}</sum><name>{$use['day']}</name></bill> "; 
13. }//開源代碼Vevb.com 
14. $xml_return.= "</bills>"; 
15. echo $xml_return; 

顯示6個月的消費記錄,$arr也可以是從數據庫讀出來的數據,這里只是作為一個例子,所以直接給一個數組賦值.

1. - <bills> 
2. - <bill> 
3. <sum>153.1</sum> 
4. <name>01</name> 
5. </bill> 
6.  
7. - <bill> 
8. <sum>882.86</sum> 
9. <name>02</name> 
10. </bill> 
11.  
12. - <bill> 
13. <sum>456.9</sum> 
14. <name>03</name> 
15. </bill> 
16.  
17. - <bill> 
18. <sum>717.7</sum> 
19. <name>04</name> 
20. </bill> 
21.  
22. - <bill> 
23. <sum>255.1</sum> 
24. <name>05</name> 
25. </bill> 
26.  
27. - <bill> 
28. <sum>533.1</sum> 
29. <name>06</name> 
30. </bill> 
31.  
32. </bills> 

Php部分就完成了,接下來是寫MXML,實例代碼如下:

1. <?xml version="1.0" encoding="utf-8"?> 
2. <?xml version="1.0" encoding="utf-8"?> 
3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"  creationComplete="getaccount()"> 
4.    <mx:HTTPService id="listRequest" url="" useProxy="false" method="POST"> 
5.    <mx:request xmlns=""> </mx:request> 
6.    </mx:HTTPService> 
7.     
8.    <mx:Script><![CDATA[ 
9.     import mx.rpc.events.ResultEvent;//引用ResultEvent類 
10.     public function getaccount():void{ 
11.   listRequest.url='http://localhost/arr.php'; 
12.      listRequest.send(); 
13. } 
14.   ]]></mx:Script> 
15.    <mx:LineChart showDataTips="true" clipContent="false" x="126" y="10" id="tongjitu"  dataProvider="{listRequest.lastResult.bills.bill}" width="678"> 
16.    <mx:horizontalAxis>       
17.     <mx:CategoryAxis dataProvider="{listRequest.lastResult.bills.bill}"  categoryField="name" title="(日)" /> 
18.    </mx:horizontalAxis>   
19.       <mx:series> 
20.          <mx:LineSeries displayName="每日消費" yField="sum" xField="name"/> 
21.     </mx:series> 
22.    </mx:LineChart> 
23. </mx:Application> 

逐一解釋一下:

1. Application //MXML應用程序開頭 
2. creationComplete="getaccount()" //代表頁面加載完成后 執行 getaccount函數 
3. 〈mx:HTTPService id="listRequest" url="" useProxy="false" method="POST"〉 
4.    〈mx:request xmlns=""〉 〈/mx:request〉 
5.    〈/mx:HTTPService〉 
6. //則是一個HTTP的請求，發送POST到一個PHP文件 去獲取數據 
7. mx:Script //MXML里面的腳本 都用 <mx:Script>包含進去 

下面分析下getaccount函數:

1. public function getaccount():void{ 
2.        listRequest.url='http://localhost/arr.php'; 
3.         listRequest.send(); 
4.     } 
5. //列出了 HTTPService 請求地址是  http://localhost/arr.php 
6. //你同樣也可以寫成相對路徑 比如 listRequest.url='./arr.php'; 
7.  
8. mx:LineChart  //是一個 曲線 組件，我們可以直接拿來使用 
9.  
10. dataProvider ：數據源：listRequest.lastResult.bills.bill 
11. bills.bill 是XML里面的標簽 
12.  
13. mx:LineSeries displayName="每日消費" yField="sum" xField="name"   
14. //則定義了 橫縱坐標的值。     
15. //Sum  name  就是XML里面的數據的標簽