flex初步認識

一切開始的地方

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Panel>
<mx:TextArea text="Say hello to Flex!" />
<mx:Button label="Close" />
</mx:Panel>
</mx:Application>

1 頭兩行包含了版本號、編碼、以及命名空間的信息
2 Flex 應用程序所有的具體內容都被放在<mx:Application>標籤對中
3 在MXML 文件中的每個標籤都有前綴mx，它是Flex 的設計命名空間
4 父標籤對中嵌套子標籤對,標籤是成對出現的

連接數據

Flex 應用程序不直接與數據庫進行連接，使用MXML 和ActionScript 代碼來操作和管理數據

連接數據庫的第一步是生成將在Flex 程序中使用到的數據
步驟：
1. 創建一個數據庫（如MySQL）。
2. 編寫腳本連接MySQL 數據庫並生成XML 格式的數據。

(一)連接外部數據源

對於 所生成的XML 格式數據，你可以使用HTTPService 組件來請求獲取數據
例(php)：

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:HTTPService
id="productsRequest"
url="http://www.somesite.com/products.php" />

HTTPService 組件定義了一個請求ID，你將使用這個ID 來控制提供數據的URL 或者
服務器與數據之間的綁定。

(二)外部數據與數據驅動控制的綁定

通過數據與數據驅動控制（data-driven control）的綁定，你就可以處理HTTPService的結果（XML 數據），
就象這樣：

<mx:DataGrid x="20" y="80" id="productGrid" width="400"
dataProvider="{productRequest.lastResult.products.items}" >
<mx:columns>
<mx:DataGridColumn headerText="Name" dataField="name" />
<mx:DataGridColumn headerText="Price" dataField="price" />
</mx:columns>
</mx:DataGrid>

數據綁定的語法顯示在數據控制的dataProvider 屬性中（在波浪形的括號裏），它包含了HTTPService 請求ID、
lastResult 方法、以及XML 文件的數據結構。在這個例子中，XML數據源的數據結構看起來就象這樣：

<XML>
<products>
<item>
<name>Mobile Phone</name>
<price>$199</price>
</item>
<item>
<name>Car Charger</name>
<price>$34</price>
</item>

</products>
</XML>

通過設置dataField 屬性，項目數據（name 和price）作爲數據柵格中每一列的數據。

(三)在運行時加載數據

你還可以在Flex 程序開始運行時加載數據，就象隨後所示，在 HTTPService 中向某個特定的URL 發送一個請求：

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

當你將creationComplete 方法添加到應用程序標籤裏後，數據會在運行時進行加載並交於數據驅動控制（在這個例子中是數據柵格）。
你還可以將HTTPService 請求添加到一個控制事件上而不是程序裏的標籤中，就象如下所示：

<mx:Button x="50" y="8" label="Get Data" click="productsRequest.send();" />

Flex 提供許多方法去連接、管理、格式化、以及校驗數據。你可以通過使用遠程程序調用、數據服務、或者其它企業級技術來操縱和管理數據。

Flex 應用程序設計界面佈局

1 通過設置組件的屬性值來控制Flex 應用程序的界面佈局，就象如下所示：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Panel layout="absolute" width="80%" height="80%">
<mx:TextArea text="Say hello to Flex!" top="10" bottom="70" left="10"
right="30"/>
<mx:Button label="Close" right="30" bottom="40"/>
</mx:Panel>
</mx:Application>

許多容器組件都允許以絕對座標的方式創建佈局，這就意義着你可以使用精確的x 和y的座標來放置組件。你還可以對應其父容器的相對位置來
放置組件並約束它們，使它們在應用程序的界面放大或縮小時仍然保持其彼此的位置。
2 使用風格和主題增強視覺方面的設計
1)如果樣式/style 的屬性值沒有被指定，將由整個程序中運行的主題/theme 來進行控制。在默認情況下，Flex 應用程序使用Halo 主題
2)創建主題