Flex學習總結

Flex SDK Flex框架類庫、Flex編譯環境、調式器、MXML、ActionScript編程語言以及其它工具組成，Flash Builder是其開發環境，

 

Flash Player的工做模型

由兩大部分組成：ActionScrip虛擬機 圖形渲染引擎GR

 

 

Flex實戰

認識Flex

javaScript和ActionScript都是基於ECMAScript標準的實現。

BlazeDS簡介：

LiveCycle是面向大型企業的，還有一個相似的產品：BlazeDS，做爲中間層的服務器組件，它的功能是：使用HTTP和AMF3的實時數據推送。是免費的，

BlazeDS是java社區採用Flex的主要緣由，它容許java開發人員經過把BlazeDS做爲鏈接Flex對象和java對象的橋樑。

Flex的工做原理

Flex的核心是免費的sdk，sdk提供了構建Flex應用程序的框架，

Flex語言，建立Flex應用程序要使用Flash Builder；

Flex由兩種編程語言組成：

基於XML的MXML標籤語言

ActionScript腳本語言

MXML負責應用程序核心內容的主要佈局，ActionScript用於以腳本造成編寫驅動應用程序須要的全部邏輯。

開發生命週期

典型Flex應用程序SDLC:

使用Flash Builder或SDK，在本地開發環境中編寫MXML和ActionScript代碼

測試使用Flash Builder，sdk編譯代碼，輸出.swf

經過瀏覽器啓動此文件，此時須要調用Flash Player插件，開始執行應用程序。

Flex應用程序要與服務器層交互以得到數據

準備發佈應用程序，將.swf及相關文件發佈到web服務器上，用戶經過一個URL調用該應用程序。

 

事件驅動的環境

一切與事件有關，Flex是一個事件驅動的開發框架。

事件驅動的應用程序包含的這兩種機制分別是：

事件觸發器：致使事件發生。

事件處理程序：負責響應事件的處理程序。其實就是邏輯代碼。

Flex的侷限

 

 

 

1. 從零開始

創建編譯環境

1. 下載Flex SDK,
2. 檢查是否安裝了FlashPlayer,如安裝了，刪除它，因SDK中用；
3. 安裝SDK中的FlashPlayer，
4. Flash Player 10 ActiveX.exe 這是針對IE調試播放器
5. Flash Player 10 Plugin.exe 這是針對其餘瀏覽器的調試播放器
6. 在bin文件夾添加到path環境變量中，c:\flex\bin

創建編輯環境

Eclipse下載一個插件：

得到Flash Builder

它有兩個分發方式，一種獨立版，另外一種是插件版

探索Flash Builder

5個類別

Package包，表示當前所在的目錄

Class類，表示這個api參考頁面描述的特定對象

Inheritance繼承，當前對象繼承了哪些父對象

Implements實現，接口，對象會實現接口所要求的屬性和函數方法，

Subclasses子類，當前對象的子對象，

 

Properties屬性，能夠檢索和設置的值

Methods方法，支持函數

Event事件，對象會對此有所反應的操做，當某種操做發生時會觸發特定指令的執行

Style樣式，相似於html中使用的css樣式

effects效果，與事件一塊兒使用，以便指定播放效果。

 

MXML與ActionScript速寫

Flex基於MXML和ActionScript;

MXML的結構：MXML是一種基於標籤的編碼系統，它派生自XML，MXML遵循XML全部規則和約定：

1. XML文件以及MXML文件，要求必須有xml聲明 用以定義版本和字符編碼

   <?xml version="1.0" encoding="utf-8"?>

2. XML文件必須有一個頂層的根元素及尾元素
3. MXML語言區分大小寫
4. 每個標籤必須都有一個開始標籤和結束標籤，
5. 標籤間的嵌套關係必須正確。
6. 特性的值必須加引號
7. 每一個空的字符都算數

MXML與ActionScript的關係

使用ActionScript添加功能、作出判斷，提供交互性及構建業務邏輯。

事件由ActionScript處理

Flex應用程序是由事件驅動的，程序中發生的一切都是由事件引發的結果。

 

 

 

 

 

 

 

 

 

 

BlazeDS

BlazeDS 爲使用Flex 或者AIR 的客戶端程序提供了高度可擴展的遠程訪問和消息服務。
blazeds :是一門技術，是一門面向AS的先後臺通信框架
在服務器端：提供3種服務，遠程調用（remoting-config.xml中配置），訪問代理（proxy-config.xml中配置）、消息服務（messasing-config.xml中配置）同時容許你添加一些自定義的服務（在service-config.xml中配置）
在客戶端blazeds 提供了RemoteObject、HttpService、WebService、Product、Comsumer等組件來提供訪問服務器端數據的能力，其中RemoteObject、Product、Comsumer是amf協議來交換數據的，而HttpService、WebService是用比較通用的訪問協議能夠用來訪問非blazeds服務器。
關聯客戶端和服務器端：destination、channel、endpoint。首先在服務器端定義須要的destination，根據destination所屬的service類別不一樣，應該在destination定義在不一樣的配置文件裏（remoting-config.xml、messaging-config.xml、proxy-config.xml中），同時爲destination指定channel（若是不指定，會用默認的channel）、
以上全部這些組件都包括在flex SDK和rpc.swc組件庫中
在客戶端的代碼你只要爲你的組件（如remotingObject）指定destination和取得數據後的回調函數就能夠了，剩下的就是編譯器的事情了。Flex爲你隱藏了channel的調用，因此須要寫的代碼不多。

BlazeDS經過使用RemoteObject控件能夠輕鬆實現，而不須要配置他們像SOAP-compliant網絡服務。
BlazeDS能夠訪問各類不一樣的數據持久化方案，好比數據庫、JMS等其餘持久化機制。The message-based framework（基於消息的框架）
BlazeDS在客戶端和服務器端來回的傳送數據，他是一個基於消息的框架，主要運用了兩種交換模式，第一種，請求/響應模式，客戶端發送請求給服務端，服務端處理好以後返回一個包含結果的響應，RPC服務就是使用的這種模式；第二種，發佈/訂閱模式，服務端將數據發佈給訂閱了該消息的客戶端列表，消息服務就是使用這種模式來發布數據給各客戶端的，同時，消息服務也使用請求/響應模式來解決一些發佈消息、數據交換等問題。

 

Flex與服務器端通訊第三種方式，remote object,遠程對象

Adobe：LCDS(LiveCycle Data Service),BlazeDS

 

 

 

 

3、使用ActionScript

註釋：行註釋// one comment; 多行註釋 /* */

變量：

聲明某種類型的變量後，賦值必須是這種類型的變量，如不是這行代碼就是無效的。

var myVar:Number;

myVar = "test";

Flex檢查類型匹配的方法有兩種，即靜態類型檢查和動態類型檢查。

靜態類型檢查在編譯時執行，由編譯器負責維護類型規則。

動態類型檢查，Flash Player負責在應用程序執行期間決定變量類型。

默認狀況下，編譯應用程序時使用的靜態類型檢查。

頂級類

在Flex4中全部基本數據類型都被轉換成類，並放到頂層包中。在頂層包中包含的一些類：array,Boolean,Class,Date,int,Number,Object,String,Uint,Vector,XML,XMLList;

頂層類是不須要導入包的。

var myString:String = "hello";

var myXML:XML=<root><node></node><root>;

var myObj:Object={x:1,y:2,z:3};

特殊的數據類型

*
void
undefined	與void同時使用，void的值是undefined
null
NaN	非數字，由number數據類型使用，

ActionScript變量區分大小寫，

 

循環

1. for(初使值；條件；遞增)

for(var x:int = 1 ; x <= 10;i++)

trace()是把結果輸出到日誌文件中，

1. for(屬性名 in 數組/對象);

var myArray:Array = {"a","b","c"};

for(var myStr:String in myArray)

{ trace(myStr); }

結果：0，1，2

這種循環是按照屬性名迭代，數組的屬性名是數組的索引，取值時須要經過下列形式取值。

trace(myArray(myStr))

 

1. for each(項in數組/對象)

for each … in 循環用於迭代數組和對象，但測試的不是屬性名，需是屬性值。

for each(var i:string in myObject){

    trace(i); 打印出來是值，不是鍵

}

1. while

whiel(x < 5){

    trace(x);

}

1. do while
2. if…else

if()

{..}

else if()

else

{}

1. switch

   switch(){

   case 'happy';

   case 'sad'

   default:

   }

2. 數組

ActionScript支持3種主要數組：

索引數組 以數值做爲每一個值的鍵。

var hArray:Array= new Array();

push() 把項添加到數組末

hArray.push("John Doe");

unshift() 把項添加到開頭

hArray.unshift("Mike");

pop() 刪除數組末尾的項

hArray.pop();

shift()刪除數組開頭的項

hArray.shift()

splice()從某個位置刪除項，而後根據須要插入新項

第一個參數：指定從數組中的哪一個索引位置開始操做，

第二個參數：指定想要刪除的數量，

第三個參數：從第一個參數指定的索引開始插入新的項。

hArray.splice(1,0,"hello");

hArray.splice(1,1);

hArray.splice(3,2,"Ryan","matt","Jeff");

數組的初始化：

var Arrayhouse:Array = new ["a","b","c"];

 

關聯數組 以任何形式的鍵與值創建關聯。

它與索引數據的區別在於，與值對應的鍵面不是索引，關聯數組中的項是以無序方式保存的，

var carM:Array = new Array();

carM["ax"] = "s";

carM["ab"]="c";

在檢索時，經過鍵就能夠訪問。

trace(carM["ax"]);

關聯數組支持使用點表示

carM.ax;

 

多維數組 數組的數組。

 

ActionScript特點語法

花括號

邏輯操做符和快捷方式

++；--；

基本比較符

==；！=；<;<=;!求反

數學操做符：

*,/,%,+,-

函數、類、包

建立函數

public function checkout(input:String):void{}

CDATA在這裏是告訴Flex編譯器方括號中的內容原樣不動，不做爲XML處理；

將ActionScript代碼保存在單獨的文件中

文件名保存爲myFunction.as;;

<fx:Script source="myFunction.as" />

<fx:Script>

<![CDATA[

import mx.controls.Alert;

]]>

</fx: script>

注意：必須在使用函數的文件中導入包；

簡單的數據綁定

ActionScript支持一種功能，可以讓一個項目監聽另外一個項目的值，這個功能就是綁定。

不使用綁定：

<s:Button label="Copy:" click="myinput2.text = myinput1.text"/>

添加綁定：

<s:TextInput id="myinput2" text = "{myinput1.text}" />

還可使用雙向綁定，

<s:TextInput id="myinput1" text = "{myinput2.text}" />

<s:TextInput id="myinput2" text = "{myinput1.text}" />

在花括號內能夠放置任意表達式；

綁定標籤

使用<fx:Binding>標籤在外部鏈接組件，

<fx:Binding source="myinput1.text" destination="myinput2.text" twoWay="true" />

<s:TextInput id="myinput1"/>

<s:TextInput id="myinput2"/>

使用ActionScript變量可被綁定

要爲ActionScript變量添加綁定，須要使用元關鍵字[Bindable],在mxml中的元關鍵字用於描述變量，組件，類的額外屬性，

4、佈局和容器

1.Spark與Halo/mx

Spark容器容許改變佈局算法，需Halo組件則內置佈局算法。

佈局經過佈局管理器處理，經過3個階段肯定每一個視覺組件的位置和大小：

1. 提交過程，查看全部組件的屬性設置，將執行每一個組件的commitProperties()方法，
2. 測量過程，計算全部組件的默認大小。首先查看最深層的組件，而後由內而外查看其餘組件。佈局管理器運行每一個對象的measureSizes()方法來肯定默認/指定的大小。
3. 佈局過程，這個過程是從最外層開始，逐步深刻到嵌套層次最深的組件。這個過程調用每一個組件的updateDisplayList()方法，使組件刷新顯示的內容。

每一個Spark窗口都支持將其佈局改成下面任意一種佈局：

BasicLayout絕對佈局，使用x,y座標

HorizontalLayout

VerticalLayout

TileLayout網格形式顯示組件，建立儘量多的行和列

 

xmlns:fx和xmlns:s 爲Spark組件添加前綴

xmlns:mx 爲Halo/MX組件添加前綴

 

2.絕對佈局(BasicLayout)

Application窗口默認使用的絕對佈局；

3.基於約束的佈局

它是相對於容器的4個邊或容器中心點定位組件。

這個容器的優勢是在調整窗口大小的時，仍然能夠保持組件與容器的相對位置關係不變。

基本約束，組件離窗口的右下角的距離，

組件的top,bottom,left,right屬性用於控制與相關邊的距離

horizontalCenter,verticalCenter屬性控制在相應方向與中心的距離，

baseline屬性用於設置組件的上邊與其父容器的距離。

加強的約束，這個容許開發人員在水平和垂直方向上任意建立隱藏的輔助線，而後對照輔助線定位組件。這些輔助線中約束行和約束列。

約束線有3種方法放到容器中：

固定約束 位置由絕對數字來指定

相對約束 位置由相對容器大小的百分比來肯定

內容大小約束 相對於內容而言是肯定的。

1.兩列固定分割 經過<mx:ConstraintColumn>標籤能夠在容器中建立兩個列

<mx:Canvas width="100%" height="100%" borderColor="0x996969">

        <mx:constraintColumns>

            <s:ConstraintColumn id="col1" width="200"/>

            <s:ConstraintColumn id="col2" width="50"/>

        </mx:constraintColumns>

        <s:Button left="col1:50" label="button 1"/>

        <s:Button left="col2:0" label="button 2"/>

    </mx:Canvas>

2.帶左右約束的兩列固定分割

<s:Button left="col1:50" label="button 1" right="col1:0"/>

<s:Button left="col2:0" label="button 2" right="col2:0"/>

3.帶上下約束的兩行固定分割

4.有偏移的兩行加兩列分割

5.基於內容大小的約束

它是在不指定約束的heigth和width屬性的值時自動啓用的。

4.自動佈局

1.使用佈局類

對Spark容器可使用4種佈局類，用於絕對佈局(BasicLayout類)，

HorizontalLayout,VerticalLayout,TileLayout,則提供了自動佈局選項。

<s:layout>

    <s:TileLayout columnWidth="200" orientation="columns" requestedColumnCount="2"/>

</s:layout>

    <s:Button label="button 1" />

    <s:Button label="button 2" />

    <s:Button label="button 2" />

2.須要空間

<mx:Spacer/> 至關於<td width="50"></td>

<s:Button label="button 1" /> <s:Spacer width="50%" />

    <s:Button label="button 2" />

5.可變大小和固定大小

就是使用數值或是百分比來進行控制。

6.容器

容器是組件的集合，用於爲應用程序提供一種視覺結構。

Flex新添加的一些Spark容器：

Application 一個應用程序只能有一個Application容器，是程序的根窗口。

Group用於分組項目的一個基本容器，默認用BasicLayout絕對佈局。它的子容器是

Hgroup,Vgroup

SkinnableContainer 相似於Group,但支持換膚功能。

Panel基於SkinnableContainer,添加一個標題欄和一個框架

DataGroup用於分組數據，

SkinnableDataContainer相似於DataGroup，可換膚。

Application容器

這是Flex應用程序的主程序，屬性：preloader,這是啓動Flex應用程序時看到的進度條。

xmlns:local="*"

 

Canvas容器

基於Group的容器和SkinnableContainer

<s:Group>

<s:Hgroup/>

<s:Vgroup/>

 

建立皮膚文件，有兩條基本規則：

1.必須支持組件可能具備的全部狀態。

2.必須在名爲contentGroup的皮膚內定義一個額外的容器。

建立皮膚類：CoolSkin.mxml；

<s:SparkSkin xmlns:fx……..>

</s:SparkSkin>

引用：

<s:SkinnableContainer skinClass="CoolSkin">

        <s:layout>

            <s:HorizontalLayout/>

        </s:layout>

        <s:Button label="button 1"/>

        <s:Button label="button 2" />

    </s:SkinnableContainer>

Panel容器

默認使用BasicLayout類，

<s:Panel title="MY Title">

        <s:HGroup top="5" bottom="5" left="5" right="20">

            <s:Button label="button1" />

            <s:Button label="button2" />

        </s:HGroup>

    </s:Panel>

 

ApplicationControlBar容器

在應用程序中建立了一個與多數桌面應用程序的File菜單以進行編輯，設置等相似的區域，

    <mx:ApplicationControlBar width="100%" >

        <s:Button label="Back" />

        <s:Button label="Forward" />

        <s:TextInput width="60" />

        <s:Button label="Search" />

    </mx:ApplicationControlBar>

 

DataGroup和SkinnableDataContainer

 

dataGroup或SkinnableDataContainer可使用下面這兩個項渲染器，

spark.skins.default.DefaultItemRenderer將數據顯示爲簡單文本

spark.skins.default.DefaultComplexItemRenderer將數據顯示爲Group容器內的組件。

 

 

 

DividedBox、HDividedBox、VDividedBox容器

 

 

From容器

 

 

 

Grid容器

 

 

 

5、顯示錶單與捕獲用戶輸入

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

6、驗證用戶輸入