Flex3學(xué)習(xí)之簡單教程
本文和大家重點(diǎn)討論一下Flex3 的一些基本知識，首先看一下Flex3的概念，F(xiàn)lex3是Adobe出品的開發(fā)RIA(RichInternetApplications)的工具，希望本文的介紹能讓你有所收獲。
Flex3 學(xué)習(xí)（簡單教程）
1.什么是Flex3
Flex3是Adobe出品的開發(fā)RIA(RichInternetApplications)的工具，包括：
Flex3SDK（軟件開發(fā)包）
-Compiler(編譯器)
-Framework(Flex類庫)
-Debuggingtools(調(diào)試工具）
FlexBuilder3
-整合和開發(fā)環(huán)境
-基于eclipse
和Flex整合的服務(wù)器產(chǎn)品
-LiveCycleDataServices2.51
-ColdFusion8
2.什么是FlexApplication
用FLASH.swf文件格式封裝的發(fā)布在HTML網(wǎng)頁中的應(yīng)用程序
需要在客戶端安裝FlashPlayer9
開發(fā)者可以完全訪問Flash繪畫API
應(yīng)用程序使用ActionScript3
兼容FlashCS3和ActionScript3編寫的文檔
3.如何創(chuàng)建Flex3應(yīng)用程序
步驟如下：
◆選取預(yù)定義的可視化組件
◆在用戶界面上添加組件
◆使用styles和skins自定義應(yīng)用程序界面
◆增加事件處理和腳本處理代碼，控制應(yīng)用程序行為
◆連接數(shù)據(jù)和通訊服務(wù)
◆Build和Run應(yīng)用程序
4.Flex3的相關(guān)資源
http://examples.adobe.com/flex3/componentexplorer/explorer.html
http://www.adobe.com/devnet/flex/
http://flex.org/
5.ActionScript3語言基礎(chǔ)
<mx:script>…</mx:script>
trace（）函數(shù)
<![CDATA[…..]]>
package
import
publicprotectedprivateinternal
static
function定義
const #p#
6.ActionScript3語言基礎(chǔ)
extends
interface
字符串
數(shù)字計算
數(shù)組
類型轉(zhuǎn)換
7.ActionScript3語言基礎(chǔ)
if
switch
for
for..in
foreach…in
while
do…while
beakcontinue
8.觀察者模式(Observer)
什么是觀察者模式？
生活中的觀察者模式（好萊塢原則、訂閱報紙、房產(chǎn)中介…）
AS3中事件例子:
button.addEventListener(“click”,onClick);
internalfunctiononClick(evt:MouseEvent):void{
txt.text=“clickabutton!”;
}
9.Flex3事件流
1).捕獲事件（從根節(jié)點(diǎn)到子節(jié)點(diǎn)，檢測對象是否注冊了監(jiān)聽器，是則調(diào)用監(jiān)聽函數(shù)）
2).目標(biāo)階段（調(diào)用目標(biāo)對象本身注冊的監(jiān)聽程序）
3).冒泡階段（從目標(biāo)節(jié)點(diǎn)到根節(jié)點(diǎn)，檢測對象是否注冊了監(jiān)聽器，是則調(diào)用監(jiān)聽函數(shù)）
注：事件發(fā)生后，每個節(jié)點(diǎn)可以有2個機(jī)會（2選1）響應(yīng)事件，默認(rèn)關(guān)閉捕獲階段。
10.IEventDispatcher接口
addEventListener()注冊事件監(jiān)聽器
removeEventListener()移除事件監(jiān)聽器
dispatchEvent()派發(fā)事件
EventDispatcher類
11.addEventListener
addEvnetListener(type:String,listener:Function,useCapture:Boolean=false,priority:int=0,useWeakReference:Boolean=false)
removeEventListener(type:String,listener:Function,useCapture:Boolean=false)#p#
12.Event對象
Event類作為創(chuàng)建Event對象的基類，當(dāng)發(fā)生事件時，Event對象將作為參數(shù)傳遞給事件偵聽器。
MouseEvent
KeyboardEvent
13.如何自定義事件
1).創(chuàng)建自定義事件名稱的Event
dispatchEvent(newEvent(“myEvnet”,true,false);
2).創(chuàng)建自定義事件類
PublicclassMyEventextendsEvent{
….
}
14.Flex3拖曳事件的實(shí)現(xiàn)
DragManager(mx.managers)
DragSource
DragEvent
15.什么是數(shù)據(jù)綁定
數(shù)據(jù)綁定：當(dāng)數(shù)據(jù)源對象的數(shù)據(jù)發(fā)生變化時，目標(biāo)對象的數(shù)據(jù)會自動更新，而不需要我們再編寫代碼去強(qiáng)制更新
綁定實(shí)際也是借助事件機(jī)制來完成的，當(dāng)目標(biāo)使用了數(shù)據(jù)綁定的時候，目標(biāo)對象就會監(jiān)聽數(shù)據(jù)源對象的某一固定事件。當(dāng)數(shù)據(jù)源發(fā)生變化時，數(shù)據(jù)源會派發(fā)改變事件（ChangeEvent），通知目標(biāo)對象更新數(shù)據(jù)。這個過程由Flex完成，不用我們手動干預(yù)。
綁定的前提條件：源對象的數(shù)據(jù)和目標(biāo)對象的數(shù)據(jù)格式相同。
16.實(shí)現(xiàn)Flex3數(shù)據(jù)綁定的方法
1).在對象的屬性標(biāo)簽中,使用{}把數(shù)據(jù)源直接綁定到對象的某個屬性上。
2).在對象的屬性標(biāo)簽中,使用{}把某個函數(shù)的返回值作為數(shù)據(jù)源綁定到對象屬性上。
函數(shù)的參數(shù)要使用[Bindable]綁定符號
[Bindable]
[Bindable(event=“eventname”)]
Event表示當(dāng)數(shù)據(jù)源發(fā)生變化時，數(shù)據(jù)源所在對象派發(fā)的事件類型，它是可選項，默認(rèn)的事件名是“propertyChange”，一般情況下只需要使用[Bindable]標(biāo)簽 #p#
17.實(shí)現(xiàn)數(shù)據(jù)綁定的方法
使用<mx:Binding>標(biāo)簽
- source=“…”destination=“…”
- <mx:Modelidmx:Modelid=“books”>
- <books>
- <book>
- <name>FLEX教程</name>
- <author>張三</name>
- </book>
- <book>
- <name>JAVA高級編程</name>
- <author>李四</name>
- </book>
- </books>
- </mx:Model>
18.Object對象和動態(tài)對象
Object對象是一個動態(tài)對象
varo:Object=newObject();
o.name=“Jack”;
o.age=20;
o.address=“北京海淀100號”;
Model中的節(jié)點(diǎn)數(shù)據(jù)默認(rèn)是Object類型，作數(shù)據(jù)源必須轉(zhuǎn)換成ObjectProxy類型。
19.數(shù)據(jù)綁定的幾點(diǎn)說明
[Bindable]標(biāo)簽用于函數(shù)時，只能在setter和getter方式定義的函數(shù)前使用。稱為函數(shù)級別綁定。
[Bindable]標(biāo)簽用于公有類時，這個類的所有公有變量、setter和getter方式定義的函數(shù)都可以用于綁定。成為對象級別綁定。
20.BindingUtils和動態(tài)綁定
Mx.binding.utils
BindingUtils提供了兩個靜態(tài)方法處理動態(tài)綁定
bindProperty(site:Object,prop:String,host:Object,chain:Object,commitOnly:Boolean=false)
bindSetter(setter:Function,host:Object,chain:Object,commitOnly:Boolean=false)#p#
21.Flex3支持的樣式設(shè)置方式
1).直接使用CSS文件,系統(tǒng)默認(rèn)使用default.css
<mx:Stylesource=“style.css”/>
2).使用<mx:Style>標(biāo)簽
3).使用style設(shè)計器（->MXML）
4).使用對象的getStyle()和setStyle()
5).使用StyleManager類
22.樣式的類型
樣式屬性分為可以繼承和不可以繼承兩種
上級容器可繼承的屬性，直接作用其包含的組件。
全局樣式：global
VarglobaalStyle:CSSStyleDeclaration=StyleManager.getStyleDeclaration(“global”);
23.使用主題
主題是一套配置完成的樣式風(fēng)格
Flex提供的幾種主題，文件類型.swc
建議使用.swc文件來封裝主題
給編譯指令添加
-themexxx.css
在Flex-config.xml中通過修改<theme>標(biāo)簽配置主題
24.創(chuàng)建Flex3自己的主題
1).通過修改以后的主題文件創(chuàng)建自己的主題內(nèi)容
2).使用compc編譯主題，生成swc文件（見幫助)
-include-filenamepath
-ooutput.swc
-include-classes
3).通過配置文件編譯主題
compc-load-configmyconfig.xml
【編輯推薦】
- Flex樣式的添加和卸載
- Flex安全沙箱問題解決方法
- 技術(shù)前沿 看Flex客戶端緩存技術(shù)如何使用
- 解析Flex全屏模式設(shè)置方法
- Flex內(nèi)存泄露解決方法和內(nèi)存釋放優(yōu)化原則
