瘋狂

• 簡(jiǎn)介 

   Flex是高效、免費(fèi)、開(kāi)源的框架，廣泛用于生成移動(dòng)、web和桌面平臺(tái)的應(yīng)用程序。，它可以使開(kāi)發(fā)人員創(chuàng)建利用 Adobe® Flash® Player 9 作為前臺(tái)的“富客戶端互聯(lián)網(wǎng)應(yīng)用程序/rich Internet applications/RIA”，以滿足用戶更為直觀和極具交互性的在線體驗(yàn)。簡(jiǎn)單的說(shuō)，Flex就是用來(lái)編寫(xiě)flash程序的框架，非常適合軟件開(kāi)發(fā)人員使用。

    開(kāi)發(fā)Flex 應(yīng)用程序的典型步驟如下（通常是這樣）：  

1.  選取一系列預(yù)先定制好的、用于設(shè)計(jì)應(yīng)用程序界面的組件（如表格、按鈕等等）

2.  布置組件以設(shè)計(jì)用戶界面。

3.  使用樣式和主題來(lái)增強(qiáng)視覺(jué)方面的設(shè)計(jì)。

4.  添加動(dòng)態(tài)行為（例如程序部件之間的相互作用）。

5.  定義并連接所需的數(shù)據(jù)庫(kù)服務(wù)。

6.  將源代碼編譯成SWF 文件，然后在Flash Player 中運(yùn)行。

         一個(gè)典型的Flex 應(yīng)用程序包括如下元素：

1. Flex framework

Adobe® Flex 2 framework 包含了創(chuàng)建RIA 所需要的所有組件，它們是：用于應(yīng)用程序布局規(guī)劃的容器；針對(duì)用戶界面和從用戶處獲取數(shù)據(jù)的控制（例如文本框和按鈕）；廣泛支持的數(shù)據(jù)綁定、數(shù)據(jù)格式化、以及有效值驗(yàn)證；事件驅(qū)動(dòng)的開(kāi)發(fā)模式。Flex framework 被包含在公用組件庫(kù)（SWC）文件中。

2. MXML

每個(gè)Flex 應(yīng)用程序至少包含有一個(gè)MXML 文件，它被作為該程序的主文件。MXML是一種標(biāo)記語(yǔ)言，它是基于XML 的一種實(shí)現(xiàn)，用來(lái)創(chuàng)建Flex 應(yīng)用程序。你可以使用它去聲明程序中所使用的標(biāo)簽結(jié)構(gòu)的定義。

3. ActionScript 3.0

你可以使用ActionScript 3.0 為應(yīng)用程序添加動(dòng)態(tài)行為，它是基于ECMAScript 的一種實(shí)現(xiàn)，類似于JavaScript。你可以將ActionScript 作為一個(gè)腳本塊，在MXML 文件中直接進(jìn)行添加；或者創(chuàng)建一個(gè)單獨(dú)的ActionScript 文件，然后將它們導(dǎo)入到MXML 文件中。

4. CSS

你可以通過(guò)設(shè)置組件的屬性（properties）來(lái)改變組件（按鈕、列表框等）的視覺(jué)樣式。例如，按鈕組件有一個(gè)fontFamily 屬性，你可以使用它來(lái)進(jìn)行字體的設(shè)置。樣式的屬性通常有四種方法來(lái)進(jìn)行控制：通過(guò)主題(theme)；在CSS 文件中進(jìn)行定義；在MXML 文件中的樣式塊中進(jìn)行定義；在組件的實(shí)例中進(jìn)行設(shè)置。MXML 樣式的定義和使用遵循了W3C Cascading Style Sheets（CSS）標(biāo)準(zhǔn)。

5.  圖形資源

與很多應(yīng)用程序一樣，Flex 包含了各種各樣的圖形資源，如圖標(biāo)和圖象。

6.  數(shù)據(jù)

一些組件被使用來(lái)進(jìn)行數(shù)據(jù)顯示（combo box 或者data grid）的工作。同時(shí)，你還可以使用各種方式來(lái)將這些組件與數(shù)據(jù)聯(lián)系起來(lái)，如使用數(shù)組、收集對(duì)象、數(shù)據(jù)模型、以及外部XML 數(shù)據(jù)資源，等等。

下圖是一個(gè)MXML的簡(jiǎn)單例子，點(diǎn)擊確定按鈕后會(huì)彈出一個(gè)提示框：

• 基礎(chǔ)語(yǔ)法

ActionScript實(shí)現(xiàn)了面向?qū)ο缶幊蹋?/span>OOP）的支持，一個(gè)MXML是一個(gè)對(duì)象，MXML中的一個(gè)標(biāo)簽（比如button、textInput）也是一個(gè)對(duì)象，對(duì)于學(xué)習(xí)過(guò)JAVA、C#等面向?qū)ο笳Z(yǔ)言的程序員上手非常快。

         AS的關(guān)鍵字與JAVA相似，但是方法、變量的定義有所不同，AS的定義方式為：【對(duì)象名:對(duì)象類】【方法名():返回類型】的格式，下面是一個(gè)簡(jiǎn)單的AS類：

 

package demo
{
import mx.core.IButton;
import spark.components.Button;
//定義類Demo，繼承實(shí)現(xiàn)類和接口
public class Demo extends Button implements IButton
{
//構(gòu)造函數(shù)
public function Demo()
{
super();
}
//常量
public  static const NAME:String = "name";
//變量
private var names:String;
//帶參方法
protected function demoMethod(value:int):int{
return value;
}
//無(wú)參方法
public function getButton():Button{
return new Button();
}
}
}

 上面是一個(gè)獨(dú)立的AS類，一個(gè)獨(dú)立的類文件命名為：類名.as。

 在MXML的<script>腳本中可以通過(guò)new Demo()的形式實(shí)例化該對(duì)象。

creationComplete事件：該事件與html中body標(biāo)簽的onload事件類似，在當(dāng)前應(yīng)用程序啟動(dòng)完成后觸發(fā)。

trace(String)方法：在調(diào)試模式，向控制臺(tái)打印消息，類似于JAVA的System.out.print()。

新建一個(gè)mxml文件，在文件中寫(xiě)下如下代碼，使用調(diào)試模式啟動(dòng)當(dāng)前文件，啟動(dòng)應(yīng)用程序后，在控制臺(tái)能夠看到“啟動(dòng)demo.mxml文件”的提示。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
creationComplete="onload()" >
<s:layout>
<!--控件居中對(duì)齊-->
<s:VerticalLayout horizontalAlign="center"  verticalAlign="middle"/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function onload():void
{
//向控制臺(tái)打印消息
trace("啟動(dòng)demo.mxml文件");
}
]]>
</fx:Script>
</s:Application>

• 常用基礎(chǔ)（非基礎(chǔ)）數(shù)據(jù)類型

在AS3中最常用的數(shù)據(jù)類型有以下幾種：

基礎(chǔ)數(shù)據(jù)類型：Boolean、String、int、uint、Number等

復(fù)雜數(shù)據(jù)類型：Object、Array 、ArrayCollection 

Boolean：布爾值，分為true/false兩種

String：字符串，這個(gè)不多說(shuō)了

int：帶符號(hào)的32位整數(shù)，數(shù)值范圍：-2147483648~2147483647

uint：不帶符號(hào)的32位整數(shù)，數(shù)值范圍：0~4294967265

Number：64位浮點(diǎn)數(shù)

Object：AS所有類的基類，等同于JAVA的Object類

          Array：非類型化數(shù)據(jù)，同一個(gè)數(shù)組對(duì)象允許裝不同類型的數(shù)據(jù)

/**
* 數(shù)組(同一數(shù)組的值，flex支持不同數(shù)據(jù)類型)
*/
var d:Array = new Array("a","b",1);
trace("數(shù)組長(zhǎng)度："+d.length+"   數(shù)組內(nèi)容："+d)
//push方法：向數(shù)組中添加新值，并返回?cái)?shù)組長(zhǎng)度
trace("添加新值："+d.push(2,3));
//pop方法：刪除最后一條數(shù)組的值
trace("去最后一條數(shù)組值："+d.pop());
//reverse把數(shù)組的值倒轉(zhuǎn)過(guò)去
trace("數(shù)組反轉(zhuǎn)："+d.reverse());

 ArrayCollection：集合對(duì)象，與JAVA的ArrayList類似，常用來(lái)動(dòng)態(tài)封裝數(shù)據(jù)

**
* List集合
*/
var e:ArrayCollection = new ArrayCollection([{id:1,name:"kaka"},{id:2,name:"soga"}]);
trace("List初始長(zhǎng)度:"+e.length);
//在list末尾添加數(shù)據(jù)
e.addItem({id:3,name:"nani"});
//在指定位置添加數(shù)組
e.addItemAt({id:4,name:"sodesi"},2);
//removeItemAt刪除指定位置的list，removeAll刪除list所有的值
e.removeItemAt(3); e.removeAll();
trace("List最終長(zhǎng)度："+e.length);

 不同數(shù)據(jù)類型的默認(rèn)值有所不同看如下代碼：

var b:Boolean;
var s:String;
var i:int;
var n:Number;
var o:Object;
var a;
trace("Boolean默認(rèn)值："+b);
trace("String默認(rèn)值："+s);
trace("int默認(rèn)值："+i);
trace("Number默認(rèn)值："+n);
trace("a默認(rèn)值："+a);
trace("Object默認(rèn)值："+o);

 

運(yùn)行結(jié)果如下：

Boolean默認(rèn)值：false

String默認(rèn)值：null

int默認(rèn)值：0

Number默認(rèn)值：NaN

a默認(rèn)值：undefined

Object默認(rèn)值：null

 

【注意】

浮點(diǎn)數(shù)比整數(shù)消耗的硬件資源要多，所以盡量使用int、uint來(lái)表示整數(shù)。

Number與JAVA中的double同樣存在精度問(wèn)題，數(shù)值相差過(guò)大的浮點(diǎn)數(shù)相加的結(jié)果可能有偏差。

         AS3方法傳遞，對(duì)非基礎(chǔ)數(shù)據(jù)類型是傳引用（即對(duì)象在方法內(nèi)的值被改變，外面的值也會(huì)改變），對(duì)基礎(chǔ)數(shù)據(jù)類型是傳值（即對(duì)象在方法內(nèi)的值改變，外面的值也不受影響）。

• 運(yùn)算符和表達(dá)式

運(yùn)算符：AS3的運(yùn)算符與JAVA、C#等非常相似，加(+)減(-)乘(*)除(/)、賦值(=)、自增(++)自減(--)、關(guān)系運(yùn)算符(>,<,>=,<=)、邏輯運(yùn)算符(&&,||,!)等等。

關(guān)鍵字is用語(yǔ)判斷當(dāng)前對(duì)象屬于什么類型：

var b:int = 2;
b as Number;
trace("b變量是int類型?"+(b is int));
trace("b變量是number類型?"+(b is Number));

 表達(dá)式：AS也擁有豐富的表達(dá)式，如常用的if、while、switch、for循環(huán)，實(shí)例代碼如下：

 

/**
* 條件控制語(yǔ)句，as中switch語(yǔ)句很給力，允許比較字符串等
*/
var f:String = "asd";
switch(f){
case "asd":
trace("switch:asd");
break;
default:
trace("switch:default");
break;
}
//三目運(yùn)算...
f=="asd"?trace("f==asd"):trace("f!=asd");
/**
* 循環(huán)語(yǔ)句
*/
for(var i:int=1;i<=3;i++){
trace("for循環(huán):"+i);
}
//for in循環(huán)
var g:Array = new Array("a1","b2","c3");
for(var j:String in g){
//注意：j是獲得索引值
trace("for in:"+g[j]);
}
//for each循環(huán)
for each (var item:String in g) {
trace("for each循環(huán)"+item);
}

【

for…in和for each…in用于枚舉一個(gè)集合的數(shù)據(jù)，for…in枚舉出的是集合的下標(biāo)位置，for each…in枚舉出集合的值。for each…in類似于JAVA的for(xx in oo)和C#的foreach(xx in oo)。

注意】

• 事件處理機(jī)制

Flex標(biāo)簽元素與html元素相似，都有自己的事件觸發(fā)機(jī)制，并且創(chuàng)建方式也相似，通常Flex標(biāo)簽創(chuàng)建事件有兩種方式：一種是在標(biāo)簽中定義事件觸發(fā)屬性，另一種是在ActionScript中調(diào)用事件觸發(fā)方法，下面看代碼：

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
creationComplete="init(event)">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
protected function sure_clickHandler(event:MouseEvent):void
{
sure.label = "鼠標(biāo)點(diǎn)擊事件！";
}
protected function init(event:FlexEvent):void
{
this.sure.addEventListener(MouseEvent.MOUSE_OVER,function sure_mouseover(event:MouseEvent):void{
sure.label = "鼠標(biāo)移上事件！";
});
}
]]>
</fx:Script>
<s:Button x="82" y="52" label="確定" id="sure" click="sure_clickHandler(event)" />
</s:Application>

 Java-Flex對(duì)象對(duì)應(yīng)表