Flex3學習之簡單教程
本文和大家重點討論一下Flex3 的一些基本知識，首先看一下Flex3的概念，F(xiàn)lex3是Adobe出品的開發(fā)RIA(RichInternetApplications)的工具，希望本文的介紹能讓你有所收獲。
Flex3 學習（簡單教程）
1.什么是Flex3
Flex3是Adobe出品的開發(fā)RIA(RichInternetApplications)的工具，包括：
Flex3SDK（軟件開發(fā)包）
-Compiler(編譯器)
-Framework(Flex類庫)
-Debuggingtools(調(diào)試工具）
FlexBuilder3
-整合和開發(fā)環(huán)境
-基于eclipse
和Flex整合的服務器產(chǎn)品
-LiveCycleDataServices2.51
-ColdFusion8
2.什么是FlexApplication
用FLASH.swf文件格式封裝的發(fā)布在HTML網(wǎng)頁中的應用程序
需要在客戶端安裝FlashPlayer9
開發(fā)者可以完全訪問Flash繪畫API
應用程序使用ActionScript3
兼容FlashCS3和ActionScript3編寫的文檔
3.如何創(chuàng)建Flex3應用程序
步驟如下：
◆選取預定義的可視化組件
◆在用戶界面上添加組件
◆使用styles和skins自定義應用程序界面
◆增加事件處理和腳本處理代碼，控制應用程序行為
◆連接數(shù)據(jù)和通訊服務
◆Build和Run應用程序
4.Flex3的相關資源
http://examples.adobe.com/flex3/componentexplorer/explorer.html
http://www.adobe.com/devnet/flex/
http://flex.org/
5.ActionScript3語言基礎
<mx:script>…</mx:script>
trace（）函數(shù)
<![CDATA[…..]]>
package
import
publicprotectedprivateinternal
static
function定義
const #p#
6.ActionScript3語言基礎
extends
interface
字符串
數(shù)字計算
數(shù)組
類型轉(zhuǎn)換
7.ActionScript3語言基礎
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é)點到子節(jié)點，檢測對象是否注冊了監(jiān)聽器，是則調(diào)用監(jiān)聽函數(shù)）
2).目標階段（調(diào)用目標對象本身注冊的監(jiān)聽程序）
3).冒泡階段（從目標節(jié)點到根節(jié)點，檢測對象是否注冊了監(jiān)聽器，是則調(diào)用監(jiān)聽函數(shù)）
注：事件發(fā)生后，每個節(jié)點可以有2個機會（2選1）響應事件，默認關閉捕獲階段。
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對象的基類，當發(fā)生事件時，Event對象將作為參數(shù)傳遞給事件偵聽器。
MouseEvent
KeyboardEvent
13.如何自定義事件
1).創(chuàng)建自定義事件名稱的Event
dispatchEvent(newEvent(“myEvnet”,true,false);
2).創(chuàng)建自定義事件類
PublicclassMyEventextendsEvent{
….
}
14.Flex3拖曳事件的實現(xiàn)
DragManager(mx.managers)
DragSource
DragEvent
15.什么是數(shù)據(jù)綁定
數(shù)據(jù)綁定：當數(shù)據(jù)源對象的數(shù)據(jù)發(fā)生變化時，目標對象的數(shù)據(jù)會自動更新，而不需要我們再編寫代碼去強制更新
綁定實際也是借助事件機制來完成的，當目標使用了數(shù)據(jù)綁定的時候，目標對象就會監(jiān)聽數(shù)據(jù)源對象的某一固定事件。當數(shù)據(jù)源發(fā)生變化時，數(shù)據(jù)源會派發(fā)改變事件（ChangeEvent），通知目標對象更新數(shù)據(jù)。這個過程由Flex完成，不用我們手動干預。
綁定的前提條件：源對象的數(shù)據(jù)和目標對象的數(shù)據(jù)格式相同。
16.實現(xiàn)Flex3數(shù)據(jù)綁定的方法
1).在對象的屬性標簽中,使用{}把數(shù)據(jù)源直接綁定到對象的某個屬性上。
2).在對象的屬性標簽中,使用{}把某個函數(shù)的返回值作為數(shù)據(jù)源綁定到對象屬性上。
函數(shù)的參數(shù)要使用[Bindable]綁定符號
[Bindable]
[Bindable(event=“eventname”)]
Event表示當數(shù)據(jù)源發(fā)生變化時，數(shù)據(jù)源所在對象派發(fā)的事件類型，它是可選項，默認的事件名是“propertyChange”，一般情況下只需要使用[Bindable]標簽 #p#
17.實現(xiàn)數(shù)據(jù)綁定的方法
使用<mx:Binding>標簽
- 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é)點數(shù)據(jù)默認是Object類型，作數(shù)據(jù)源必須轉(zhuǎn)換成ObjectProxy類型。
19.數(shù)據(jù)綁定的幾點說明
[Bindable]標簽用于函數(shù)時，只能在setter和getter方式定義的函數(shù)前使用。稱為函數(shù)級別綁定。
[Bindable]標簽用于公有類時，這個類的所有公有變量、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支持的樣式設置方式
1).直接使用CSS文件,系統(tǒng)默認使用default.css
<mx:Stylesource=“style.css”/>
2).使用<mx:Style>標簽
3).使用style設計器（->MXML）
4).使用對象的getStyle()和setStyle()
5).使用StyleManager類
22.樣式的類型
樣式屬性分為可以繼承和不可以繼承兩種
上級容器可繼承的屬性，直接作用其包含的組件。
全局樣式：global
VarglobaalStyle:CSSStyleDeclaration=StyleManager.getStyleDeclaration(“global”);
23.使用主題
主題是一套配置完成的樣式風格
Flex提供的幾種主題，文件類型.swc
建議使用.swc文件來封裝主題
給編譯指令添加
-themexxx.css
在Flex-config.xml中通過修改<theme>標簽配置主題
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安全沙箱問題解決方法
- 技術前沿 看Flex客戶端緩存技術如何使用
- 解析Flex全屏模式設置方法
- Flex內(nèi)存泄露解決方法和內(nèi)存釋放優(yōu)化原則
