壹咪陽(yáng)光

隨筆-124 評(píng)論-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 頭兩行包含了版本號(hào)、編碼、以及命名空間的信息
2 Flex 應(yīng)用程序所有的具體內(nèi)容都被放在<mx:Application>標(biāo)簽對(duì)中
3 在MXML 文件中的每個(gè)標(biāo)簽都有前綴mx，它是Flex 的設(shè)計(jì)命名空間
4 父標(biāo)簽對(duì)中嵌套子標(biāo)簽對(duì),標(biāo)簽是成對(duì)出現(xiàn)的

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

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

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

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

對(duì)于所生成的XML 格式數(shù)據(jù)，你可以使用HTTPService 組件來(lái)請(qǐng)求獲取數(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 組件定義了一個(gè)請(qǐng)求ID，你將使用這個(gè)ID 來(lái)控制提供數(shù)據(jù)的URL 或者
服務(wù)器與數(shù)據(jù)之間的綁定。

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

通過(guò)數(shù)據(jù)與數(shù)據(jù)驅(qū)動(dòng)控制（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ù)綁定的語(yǔ)法顯示在數(shù)據(jù)控制的dataProvider 屬性中（在波浪形的括號(hào)里），它包含了HTTPService 請(qǐng)求ID、
lastResult 方法、以及XML 文件的數(shù)據(jù)結(jié)構(gòu)。在這個(gè)例子中，XML數(shù)據(jù)源的數(shù)據(jù)結(jié)構(gòu)看起來(lái)就象這樣：

<XML>

<item>

<name>Mobile Phone</name>

</item>

<item>

<name>Car Charger</name>

</item>

</products>

</XML>

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

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

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

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

creationComplete="productsRequest.send()" >

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

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

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

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

1 通過(guò)設(shè)置組件的屬性值來(lái)控制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>

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

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

新用戶注冊(cè) 刷新評(píng)論列表


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




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