壹咪陽光

隨筆-124 評論-49 文章-56 trackbacks-0

一切開始的地方

<?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 應(yīng)用程序所有的具體內(nèi)容都被放在<mx:Application>標(biāo)簽對中
3 在MXML 文件中的每個標(biāo)簽都有前綴mx，它是Flex 的設(shè)計命名空間
4 父標(biāo)簽對中嵌套子標(biāo)簽對,標(biāo)簽是成對出現(xiàn)的

連接數(shù)據(jù)

Flex 應(yīng)用程序不直接與數(shù)據(jù)庫進行連接，使用MXML 和ActionScript 代碼來操作和管理數(shù)據(jù)

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

(一)連接外部數(shù)據(jù)源

對于所生成的XML 格式數(shù)據(jù)，你可以使用HTTPService 組件來請求獲取數(shù)據(jù)
例(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 來控制提供數(shù)據(jù)的URL 或者
服務(wù)器與數(shù)據(jù)之間的綁定。

(二)外部數(shù)據(jù)與數(shù)據(jù)驅(qū)動控制的綁定

通過數(shù)據(jù)與數(shù)據(jù)驅(qū)動控制（data-driven control）的綁定，你就可以處理HTTPService的結(jié)果（XML 數(shù)據(jù)），
就象這樣：

<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>

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

<XML>

<item>

<name>Mobile Phone</name>

</item>

<item>

<name>Car Charger</name>

</item>

</products>

</XML>

通過設(shè)置dataField 屬性，項目數(shù)據(jù)（name 和price）作為數(shù)據(jù)柵格中每一列的數(shù)據(jù)。

(三)在運行時加載數(shù)據(jù)

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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"

creationComplete="productsRequest.send()" >

當(dāng)你將creationComplete 方法添加到應(yīng)用程序標(biāo)簽里后，數(shù)據(jù)會在運行時進行加載并交于數(shù)據(jù)驅(qū)動控制（在這個例子中是數(shù)據(jù)柵格）。
你還可以將HTTPService 請求添加到一個控制事件上而不是程序里的標(biāo)簽中，就象如下所示：

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

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

Flex 應(yīng)用程序設(shè)計界面布局

1 通過設(shè)置組件的屬性值來控制Flex 應(yīng)用程序的界面布局，就象如下所示：

<?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>

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

posted on 2009-12-16 11:30 junly 閱讀(274) 評論(0) 編輯收藏所屬分類: other

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發(fā)表評論。




網(wǎng)站導(dǎo)航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關(guān)文章: 開源框架Pushlet入門 dreamweaver cs4 許可證過期的解決辦法相關(guān)blog xp下php環(huán)境配置 flex初步認(rèn)識 log4j基礎(chǔ) junit