resin 數據庫池配置

一,概述 二,使用MXML組件構建用戶界面 三,數據綁定 四,界面佈局和導航 五,使用CSS格式化組件 六,使用特效豐富用戶體驗 七,使用ActionScript處理事件 八,數據服務器訪問概述 九,HTTPService 十,WebService 十一,Flex Data Services 十二,其它RemoteObject技術 十三, 創建自定義組件 參見

一,概述

 

Flex語言包含了一個豐富的用戶界面組件庫,MXML(一種基於XML的標記語言)和ActionScript?(基於ECMA 262的、強類型面向對象編程語言)。MXML用於排布用戶界面和處理應用中其他方面的問題,而ActionScript?用來處理用戶交互邏輯。由於Flash平臺的普及, Flex使開發者可以開發廣泛的應用程序。開發者可以使用工業標準(如XML,CSS和SVC)和他們所熟悉的模式和範例來創建應用。Flex的分離協作方式和Flex公用組件模型也使得開發者和界面設計者能更好的進行協作,在可靠的、易於維護的架構上生產出在用戶體驗方面有突破性的產品。

 

Flex Builder(FB)之於MXML就如DREAWEAVER之於HTML。FB實現了代碼與界面分開,FLEX的類程序擴展名爲*.as,語法與java/c++很象,FLEX程序文件擴展名爲.mxml,其實就是擁有很多特殊元素的XML文件。

 

二,使用MXML組件構建用戶界面

 

MXML 語言支持兩種用戶界面組件類型: 控件和容器。容器是包含控件和其他容器的屏幕的矩形區域。控件是表單元素, 如按鈕、文本字段和列表框。

 

可以使用Flex Component ExplorerFlex MXML組件瀏覽工具來查看所有控件的代碼和樣例。

 

1,加入常用可視控件: 使用可視控件組織界面,可以定義組件屬性供外部訪問

 

A, 基於文本的控件(Text controls): Label(單行文本顯示)、Text(多行文本顯示)、TextInput?(單行文本顯示與輸入)、 TextArea?(多行行文本顯示與輸入)和 RichTextEditor? (富文本顯示與輸入)控件。用於顯示文本和/或接收來自用戶的文本輸入,都有一個 text 屬性用於設置要顯示的文本。使用 RichTextEditor? 控件可以輸入文本、編輯文本和設置文本格式。用戶通過使用位於 RichTextEditor? 控件底部的子控件, 應用文本格式和 URL 鏈接。

 

B, 基於按鈕的控件組件(Button 系列,Form controls):Button(激活時會發出click和buttonDown事件)、LinkButton?(用於打開URL)、CheckBox?(標籤會被自動裁剪以適合控件邊界。)、RadioButton?(指由 <mx:RadioButtonGroup?> 標籤創建的組) 和 PopupButton? 控件(常用於打開List控件或Menu控件籤。)。

 

2,加入基於列表的控件,並獲取數據

 

基於列表的控件: 是在其繼承層次結構內的某些點上擴展 ListBase? 類的那些控件。它們包括 ComboBox?、List、HorizontalList?、DataGrid?、Tile、Menu 和 Tree 控件。都可從某數據提供程序的數據獲得數據列表。

 

另: 許多標準控件 (包括 ColorPicker? 和 MenuBar? 控件) 也是數據提供程序控件。

 

可以使用兩種方法設置組件的數據提供程序:

 

1),直接在MXML標籤中加入數據,將 Array 或 Collection 定義爲取得數據提供程序的控件的子標籤。該方法具有實施快速的優點, 適合與靜態數據一起使用及用於原型設計。

                <mx:ComboBox id="userRating" width="100%">
                    <!-- An inline data provider -->
                    <mx:Array>
                        <mx:Object data="0" label="Zero" />
                        <mx:Object data="1" label="One" />
                    </mx:Array>
                </mx:ComboBox> 

2),使用數據綁定: 使用[Bindable]元數據標籤(屬性非默認綁定,必須明確的聲明被綁定的屬性),將控件綁定到使用 ActionScript? 定義的現有 Array 或 Collection。

 

    <mx:Script>
        <![CDATA[
            [Bindable]
            private var subscriptions:ArrayCollection = 
                new ArrayCollection 
                (
                    [
                        {data:0, label:"Print"},
                        {data:1, label:"Website"},
                    ]
                ); 
         
        ]]>
    </mx:Script>
            <mx:FormItem label="Subscriptions:" width="100%">
                <mx:List 
                    id="userSubscriptions" rowCount="3"
                    allowMultipleSelection="true" width="100%"
                    dataProvider="{subscriptions}"
                />

 

3, 使用REPEATER: 是非可視控件,類似於編程語言裏的For循環,可在執行期複製其它組件。<mx:Repeater>的卷標要自己輸入,而dataProvider可在<mx:Script>區段之中,以[Bindable]的Metadata定義之數組作連結。REPEATER還可嵌套使用。

 

  <mx:Script>
    <![CDATA[
      [Bindable]
      public var dp:Array=[1,2,3,4];
    ]]>
  </mx:Script>

  <mx:ArrayCollection id="myAC" source="{dp}"/>
    
  <mx:Repeater id="r" dataProvider="{myAC}">
    <mx:Button id="repbutton" label="button {r.currentItem}"/>
  </mx:Repeater>

 

4, 加入數據驗證:數據模型支持自動數據驗證,這就意味着你可以很方便地使用Flex驗證器。as3.0驗證的類包爲mx.Validators.包中有一個基類Validator,其他的類都爲其子類:

 

1),用標籤實現驗證:

//綁定驗證對象:source:表示驗證的對象,property:表示驗證對象的屬性
 <mx:PhoneNumberValidator id="pnV" source="{phoneInput}" property="text"/> 

 <mx:TextInput id="phoneInput"/> 

2),用AS編程實現驗證

<mx:Script> 
 <![CDATA[ 
 import mx.validators.PhoneNumberValidator; 
 // 創建驗證器
 private var v:PhoneNumberValidator = new PhoneNumberValidator(); 
 private function createValidator():void { 
 // 設置驗證器
 v.source = phoneInput; 
 v.property = "text"; 
 } 
 ]]> 
 </mx:Script>  

 <mx:TextInput id="phoneInput" creationComplete="createValidator();"/> 

 

還可以加入按鈕觸發器,並修改默認提示錯誤

//trigger:表示觸發驗證事件的對象
//triggerEvent:表示對象觸發驗證事件的時機(如click,mouseOver等)
//requiredFieldError屬性 表示必填項沒填入數據的時的提示錯誤信息
//wrongLengthError:表示輸入的數據阿拉伯數字長度小於10時提示的錯誤信息
//invalidCharError:表示輸入數據不是阿拉伯數字時提示的錯誤信息 
 <mx:PhoneNumberValidator id="pnV" source="{phoneInput}" property="text" 
 trigger="{btn}" triggerEvent="click" 
 requiredFieldError="此項爲必填" invalidCharError="請輸入阿拉伯數字" wrongLengthError="請至少輸入請輸入10個阿拉伯數字" />  

 <mx:TextInput id="phoneInput"/> 
 <mx:Button label="Button" id="btn"/> 

 

3),高級用法: 使用正則表達式創建自定義驗證器

 

5, 加入資源(圖片,音頻,視頻,程序):運行時外載和編譯時直接內嵌兩種方式,外載方式要多花一段載入時間,但使用簡單;內嵌方式可直接調用資源,但加重了程序的負擔(體積變大,且圖片編輯後需要重新編譯)

 

1),Image(圖畫)控件: 可外載或內嵌多種富媒體資源: JPEG、GIF、PNG位圖、SVG矢量圖(只能內嵌) , SWF動畫(非Flex的SWF應用程序。),SWF庫按鈕(Button),SWF庫動畫(MovieClip?),

//外載一個富媒體,可使用絕對或者相對路徑。
但加入SWF文件時,可用use-network參數指定其使用網絡或者本地文件二者之一。
<mx:Image id="myLogo0" source="assets/logo.png"/>

//簡單地內嵌一個富媒體.png,.jpg,.gif,
.swf(可將嵌入的SWF文件的實例當作 MovieClip.MovieClipAsset 類的實例處理,
不能直接訪問嵌入的SWF文件的屬性或方法。
但可用 LocalConnection以允許SWF之間進行通信。),
.SVG(可將嵌入的SVG文件的實例當作Sprite.SpriteAsset類的實例處理。)
<mx:Image id="myLogo" source="@Embed('assets/logo.png')"/>

//在腳本中定義富媒體對象,然後在MXML中可以多次嵌入
    <mx:Script>
        <![CDATA[
            [Embed(source="assets/logo.png")]
            [Bindable]

            public var Logo:Class;            
        ]]>
    </mx:Script>

    <mx:Image id="myLogo" source="{Logo}"/>
    <mx:Image id="myLogo2" source="{Logo}"/>

//在腳本中定義圖片的scale-9像框縮放功能就可以保持邊框的清晰,
(旋轉嵌入的scale-9 圖像的實例會關閉該圖像的scale-9功能。)。
<mx:Script>
        <![CDATA[
            [Embed(
                source="assets/fancy_border.png", 
                scaleGridTop="55", scaleGridBottom="137", 
                scaleGridLeft="57", scaleGridRight="266"
            )]
            
            [Bindable]
            public var FancyBorderImage:Class;
        ]]>
    </mx:Script>

    <mx:Image source="{FancyBorderImage}" width="146" height="82"/>

//嵌入 SWF 庫資源
  
    <mx:Script>
    <![CDATA[
            [Embed(source="assets/library.swf", symbol="BadApple")]

            [Bindable]
            public var BadApple:Class;
        ]]>
    </mx:Script>

    <mx:Image id="badApple" source="{BadApple}" width="150" 

height="151.8"/>

 

2) 設置翻轉的圖片:使用 CSS爲外觀外載/內嵌翻轉的圖像

 

可以定義一個現有的CSS類型選擇器爲該類型的所有組件設置外觀。還可以進一步創建自定義CSS 類。

 

    <mx:Style>
        Button 
        {
            upSkin: Embed("assets/box_closed.png");
            overSkin: Embed("assets/box.png");
            downSkin: Embed("assets/box_new.png");
        }
    </mx:Style>
  
    <mx:Button/>

 

3), SWFLoader控件: 通常用來加入Flex應用程序(可以使用AS與其通信),當然也能用於加入Image控件所能加入的富媒體資源。

//外載入SWF程序
<mx:SWFLoader id="loader1" source="FlexApp.swf"/>
//內嵌入SWF程序
<mx:SWFLoader id="loader2" source="@Embed(source='flexapp.swf')"/>
//還可以在FDS環境下加入MXML文件,要以buttonicon.mxml.swf形式加入,以提示FDS編譯該文件。
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:SWFLoader source="buttonicon.mxml.swf" scaleContent="false"/> 
</mx:Application>

 

4), 加入MP3音頻: 您可以在 Flex 應用程序中通過使用[Embed]元數據標籤嵌入MP3文件並播放它。注意音頻文件的體積要優化。

 

    <mx:Script>
        <![CDATA[
            import mx.core.SoundAsset;
            import flash.media.*;
            [Embed(source="assets/pie-yan-knee.mp3")]
            [Bindable]
          //MP3 的一個新實例
            public var Song:Class;
          //將該實例創建爲一個 SoundAsset
            public var mySong:SoundAsset = new Song() as SoundAsset;
            public var channel:SoundChannel;
          //使用 SoundAsset 類的 play() 方法來播放 MP3 文件的實例  
            public function playSound():void 
            {
                // 先消音,防止同時多次播放
                stopSound();             
                // 播放該音頻,並存儲返回的SoundChannel對象結束播放。
                channel = mySong.play();
            }
            
            public function stopSound():void 
            {
                // 當音頻播放時,調用SoundChannel對象的 stop() 方法以停止播放
                if ( channel != null ) channel.stop();
            }
        ]]>
    </mx:Script>
        <mx:Button label="play" click="playSound();"/>
        <mx:Button label="stop" click="stopSound();"/>        

 

5), 加入字體: 您希望在 Flex 應用程序中嵌入一種字體並將它用作基於文本的組件的樣式。

 

下面的示例創建引用嵌入的字體的 font-family 名稱的一個類選擇器。 接着它會創建一個 Text 控件並將其樣式設置爲該類選擇器。

 

提示: 您在嵌入字體以節省文件大小時僅可以從字體添加某些字符, 方法是指定您的 @font-face 聲明的 unicode-range 屬性。

 

    <mx:Style>
        @font-face 
        {
            font-family: Copacetix;

            src: url("assets/copacetix.ttf");
            unicode-range:
                U+0020-U+0040, /* Punctuation, Numbers */

                U+0041-U+005A, /* Upper-Case A-Z */
                U+005B-U+0060, /* Punctuation and Symbols */
                U+0061-U+007A, /* Lower-Case a-z */
                U+007B-U+007E; /* Punctuation and Symbols */

        }

        .MyTextStyle 
        { 
            font-family: Copacetix; 
            font-size: 24pt;    
        }

    </mx:Style>

    <mx:Text styleName="MyTextStyle" text="Embedded fonts rock!" width="100%"/>

 

三,數據綁定

 

以MXML標記來描述UI,數據綁定(Data binding)來連接數據,這樣就真正實現了UI和程序邏輯的分離。Data binding可以一綁多或者多綁一。

 

1, 在MXML中使用大括號{}語句: 格式爲:{源對象.屬性}。可直接傳送給目標對象;高級用法是在{}中包含AS表達式、AS函數或者E4X表達式

 

2, 在MXML中使用<mx:Binding>標籤:這是{}語句的替代用法,格式爲:<mx:Binding source="源對象.屬性" destination="目標對象.屬性"/>;高級用法是在標籤中包含AS表達式或者E4X表達式

    //在Model數據中使用{}語句來綁定數據
    <mx:Model id="thing1">
        <data>
            <part>{input1.text}</part>
        </data>
    </mx:Model>
    //用<mx:Binding>標籤來綁定數據
    <mx:Binding source="input2.text" destination="thing1.part"/>

    <mx:TextInput id="input1"/>
    <mx:TextInput id="input2"/>
    
    <mx:TextArea text="{thing1.part}"/>

 

3, 使用AS類來綁定:使用mx.binding.utils.BindingUtils?的bindProperty()或者bindSetter() 方法

 

四,界面佈局和導航

 

容器定義了Flash Player的繪圖表面的一個矩形區域。子容器包括控件和容器。Container 類是所有 Flex 容器類的基本類。擴展 Container 類的容器添加它們自己的功能以進行子組件佈局。Application 容器是的Flex應用程序的唯一根部容器, 代表整個 Flash Player 繪圖表面。

 

1,佈局容器: 使用佈局容器可進行用戶界面佈局。

 

A, 面板(Panel)容器 顯示一個標題欄、一個標題、一個邊框及其子級。默認情況下, Panel 容器會對子組件進行垂直佈局, 並且可以通過將佈局屬性設置爲 "absolute" 或 "horizontal"來覆蓋此設置。

 

B, HDividedBox?容器 對子組件進行水平佈局, 除了在子級之間插入一個可調整的分割線之外, 它與 HBox 容器很相似。 VDividedBox? 容器對子組件進行垂直佈局, 而且也在子級之間插入一個可調整的分割線。

 

C, 平鋪(Tile)容器 以多行或多列的形式排列其子級。

 

D, 表單(Form)容器 以標準的表單格式排列其子級。

 

E, ApplicationControlBar? 容器 容納提供全局導航和應用程序命令的組件, 並可以停靠在 Application 容器的上邊緣。

 

F, ControlBar?容器將控件置於 Panel 或 TitleWindow? 容器的下邊緣。

 

G, 另外可使用Spacer控件來輔助佈局。Spacer控件並非容器,而是基於百分比的可用於擠佔留空以準確定位的一個不可見控件。

 

2, 導航容器: 使用導航容器可以控制其他容器的多個子級之間的用戶移動或導航。導航器容器不能直接嵌套控件,只能嵌套容器。

 

A,手風琴(Accordion)容器 定義一個子面板序列, 但一次僅顯示一個面板。 若要導航容器, 用戶會單擊與他們需要訪問的子面板相對應的導航按鈕。 使用 Accordion 容器, 用戶可以按任何順序訪問子面板以在表單中前後移動。

 

B, TabNavigator?容器 創建和管理一組選項卡, 使用它們可在其子級中間導航。 TabNavigator? 容器的子級是其他容器。 TabNavigator? 容器爲每個子級創建一個選項卡。 當用戶選中某個選項卡時, TabNavigator? 容器會顯示相關聯的子級。

 

C, ViewStack?容器 由彼此堆疊在一起的子容器的一個集合組成, 一次只有一個容器是可見的或活動的。 ViewStack? 容器不爲用戶定義切換當前活動容器的內置機制;您必須使用 LinkBar?、TabBar?、ButtonBar? 或 ToggleButtonBar? 控件或自己在 ActionScript? 中構建邏輯讓用戶來更改當前活動的子級。

 

3, 使用容器Containers進行定位佈局

 

定位方式有三種:

 

A, 自動定位:多數Flex容器使用默認預定義的規則來自動定位你在其中定義的所有的子組件。

 

B, 使用絕對定位: 用於使控件重疊

 

C, 使用基於約束的佈局: 可以錨定容器的邊緣或者中心點,然後控件就會隨着容器的伸縮而伸縮

 

Canvas容器,和layout屬性爲absolute的Application或Panel容器才能進行絕對定位,或約束佈局。

 

4,使用視圖狀態(或ViewStack?導航容器)進行用戶界面切換導航

 

可以爲一個Flex程序或組件定義幾種視圖狀態,然後通過改變(切換)視圖狀態而改變用戶界面。(ViewStack?導航容器可實現同樣效果)

 

1),設計基礎狀態(Base state,Start,currentState=''):就是在默認狀態下設計用戶界面。

 

2),設計視圖狀態(currentState='SomeState?'):在設計模式中,在狀態查看(Window > States)上點擊新狀態/New? State 按鈕。然後在此狀態下編輯的界面即爲該視圖的對應界面。

 

3),創建用戶行爲切換控件: 定義用戶變換狀態的點擊事件處理器。一般是使用一個LinkButtun?,激活currentState='SomeState?'以切換到某界面,激活currentState=''以回到默認界面。

 

五,使用CSS格式化組件

 

1. 文字橫豎排列Aligning Text Vertically & Horizontally

 

樣式對於定義Flex應用程序的外觀和感覺 (外觀) 很有用。您可以使用它們來更改單一組件的外觀, 或在所有組件上應用它們。

 

在 Flex 中應用樣式有許多方法。 某些樣式提供更多粒度控制並能以編程方式被執行。其他樣式不像那麼靈活, 但可能需要較少的計算。在 Flex 中, 可以使用以下幾種方法將樣式應用到控件:

 

1, 使用本地樣式定義

 

2, 使用外部樣式表

 

3, 使用線上樣式

 

4, 使用 setStyle() 方法

 

六,使用特效豐富用戶體驗

 

1, 添加效果

 

1), 效果是在較短時間上發生的對組件的更改。 效果的例子有: 淡化組件、調整組件大小和移動組件。 一種效果與一個觸發器相結合才能形成一個行爲, 如組件上的鼠標單擊、組件獲得焦點或組件變成可見的。 在 MXML 中, 您將效果應用爲控件或容器的屬性。 Adobe® Flex™ 提供具有默認屬性的一組內置效果。

 

作爲對某些用戶或編程操作的響應, 行爲使您可以將動畫、動作和聲音添加到應用程序中。 例如, 您可使用行爲在獲得焦點時彈出對話框, 或是在用戶輸入無效的值時發出聲音。

 

Flex 觸發器屬性是作爲層疊樣式表 (CSS) 樣式被實施的。 在 Adobe Flex 2 語言參考中, 觸發器被列出在標題“效果”的下面。

 

若要創建行爲, 您定義一個具有唯一 ID 的特定效果並將它綁定到觸發器。 例如, 下面的代碼創建兩個縮放效果: 一個用於輕微縮小組件, 一個用於將組件還原至其原始大小。 這些效果通過使用它們的唯一 ID 被分配到“按鈕”組件上的 mouseDownEffect? 和 mouseUpEffect? 觸發器上。

 

注意如何將 Panel 容器的 autoLayout 屬性設置爲 "false"。這樣是爲了阻止在按鈕改變大小時面板改變大小。

 

2),使用效果方法和事件

 

您可以調用效果上的方法來改變它們播放的方式。 例如, 可以通過調用效果的 pause() 方法來暫停效果, 並通過使用其 resume() 方法來繼續該效果。可以通過調用效果的 end() 方法來結束該效果。

 

當效果開始和效果結束時, 它也會發出 startEffect 和 endEffect 事件。 您可以監聽這些事件並響應您的事件狀態中的更改。

 

下面的示例使用“移動”效果的方法和事件來創建一個簡單的遊戲。 該遊戲的目標是使直升飛機儘可能接近靶而又不撞到它。 靠得越近, 贏得的點數越多。

 

3, 使用過渡增加用戶界面切換效果

 

過渡(transition,變換)是定義在視圖狀態切換之間播放的一種或多種視覺效果。過渡不會替換效果;即, 您仍可以將單一效果應用到一個組件, 並通過使用一個效果觸發器或者 playEffect()方法來調用該效果。創建過渡樣例如下:

<mx:transitions>
//fromState 屬性指定當應用該過渡時您要更改的視圖狀態
//toState 屬性指定您要更改爲的視圖狀態
//effect 屬性是對要播放的 Effect 對象的引用
<mx:Transition id="myTransition" fromState="*" toState="Advanced">

//<mx:Parallel> 和 <mx:Sequence> 標籤分別引發並行或按順序播放的效果
<mx:Parallel target="{myVBox}">

//效果標籤
<mx:WipeDown duration="2000"/>
<mx:Dissolve alphaFrom="0.0" alphaTo="1.0" duration="2000"/>
</mx:Parallel>
</mx:Transition>
</mx:transitions>

 

4, 爲用戶提供工具提示

 

Adobe Flex ToolTip? 使您能夠爲您的用戶提供有幫助的信息。當用戶在圖形組件上移動鼠標指針時, 會彈出包含文本信息的工具提示。您可以使用工具提示來指導用戶完成使用應用程序或自定義它們來提供其他功能。

 

擴展 UIComponent 類 (該類實現 IToolTipManagerClient? 界面) 的每個可視 Flex 組件都支持 toolTip 屬性。您將 toolTip 屬性的值設置爲一個文本字符串, 並且, 當鼠標指針懸停在該組件上時, 會顯示該文本字符串。

 

儘管長消息很難讀取, 但對工具提示文本的大小不存在任何限制。當工具提示文本達到工具提示框的寬度時, 文本會自動換至下一行。可以在工具提示文本中添加換行符。在 ActionScript? 中, 您使用 /n 轉義的新行字符。在 MXML 標籤中, 您使用 XML 實體。

 

可以通過使用層疊樣式表 (CSS) 語法或 mx.styles.StyleManager? 類更改工具提示文本和工具提示框的外觀。對工具提示樣式的更改適用於當前應用程序中的所有工具提示。

 

5, 控制光標

 

使用Flex光標管理器可以控制 Flex 應用程序中的光標圖像。 例如, 如果應用程序執行的處理需要用戶等待, 直到處理完成爲止, 則可以將光標更改爲某個自定義的光標圖像, 比如沙漏, 以使它反映該等待期。

 

您還可以更改光標以向用戶提供反饋, 指示用戶可以執行的操作。 例如, 您可以使用一個光標圖像來指示用戶輸入被啓用, 而使用另一個光標圖像來指示輸入被禁用。

 

CursorManager? 類控制一個光標優先順序列表, 在其中具有最高優先級的光標當前是可見的。 如果光標列表包含具有相同優先級的多個光標, 則光標管理器會顯示最近創建的光標。

 

1), 使用默認的忙光標

 

Flex 定義了一個默認的忙光標, 可用來指示應用程序正在處理, 且在應用程序對用戶輸入作出響應之前, 用戶應等待, 直到處理完成。 默認的忙光標是一個動畫時鐘。

 

可以使用以下幾種方式來控制忙光標:

 

    • 可以使用 CursorManager? 方法來設置和刪除忙光標。
    • 可以使用 SWFLoader、WebService?、HttpService? 和 RemoteObject? 類的 showBusyCursor? 屬性自動顯示忙光標。

 

下面的示例使用 CursorManager? 類的靜態 setBusyCursor?() 和 removeBusyCursor?() 方法, 根據切換按鈕的狀態顯示和隱藏默認的 Flex 忙光標。

 

2), 使用自定義光標

 

可以使用 JPEG、GIF、PNG 或 SVG 圖像, Sprite 對象或 SWF 文件作爲光標圖像。

 

若要使用光標管理器, 您將 mx.managers.CursorManager? 類導入到應用程序中, 然後引用其屬性和方法。

 

下面的示例嵌入一個在 Adobe Flash 中創建的沙漏的 SWF 動畫, 並將它用作一個自定義光標。 在該示例中, 創建自定義光標的方法是, 調用 CursorManager? 類的 setCursor() 靜態方法, 然後將它傳送給對您希望用作自定義光標的嵌入資源的類的引用。 可以通過調用 CursorManager? 類的 removeCursor() 靜態方法並將它傳送給 CursorManager? 類的 currentCursorID? 靜態屬性來刪除活動的自定義光標。

 

七,使用ActionScript處理事件

 

1, 事件模型與機制

 

Flex的事件模型基於DOM3事件模型。通過創建註冊事件監聽器(事件處理程序,事件處理器,是函數方法用於響應指定的事件),可以在組件的實例發出某個事件(如用戶何時與界面組件交互, 以及在組件的外觀或生命週期中何時發生重要的變化, 如組件的創建或破壞或調整其大小等)時, 對象事件自動派發此事件到所有註冊過的監聽器。

 

1),事件流:當一個事件被派發出來時, 事件對象從根節點開始自上而下開始掃描display list(如), 一直到目標對象, 檢查每個節點是否有相應的監聽器。目標對象指的是display list中產生事件的對象. 比如:<mx:Panel><mx:HBox><mx:VBox><mx:Button /></mx:VBox></mx:HBox></mx:Panel>。如果此時 resize了VBox, 則會從根(Application)開始, 下來檢查Panel, HBox, 直到目標對象-產生resize事件的VBox爲止.

 

2), 事件的派發 Flex中可以通過dispatchEvent()方法手工派發事件, 所有UIComponent的子類都可以調用此方法. 語法:

//參數event_type是Event對象的type屬性
//函數的返回值總是True.
objectInstance.dispatchEvent(new Event("event_type"):Boolean

 

可以使用此方法派發任意事件, 而不僅僅是用戶自定義事件, 比如: 可以派發一個Button的Click事件. var result:Boolean = buttonInstance.dispatchEvent(new Event(MouseEvent?.CLICK));

 

在Flex應用中不是必須對新派發的事件進行處理, 如果觸發了一個事件, 而沒有對應的Listener時,Flex忽略此事件.

 

如果想給Event對象添加新屬性, 就必須繼承Event類,然後定義新屬性

 

3), 事件的傳播

 

事件觸發後, Flex有3個檢測事件監聽器的階段, 3個階段的發生的順序如下:

 

A. 捕獲階段:在捕獲階段,Flex在顯示列表中檢查事件的祖先是否註冊了事件的監聽器. Flex從根節點開始順序而下. 大多數情況中, 根節點是Application對象. 同時, Flex改變事件的currentTarget值. 缺省情況下, 在此階段,沒有容器監聽事件. use_capture參數的值是False,在此階段添加監聽的唯一方法是在調用add_listener時,傳入一個爲True值的use_capture參數, 比如:

myAccordion.addEventListener(MouseEvent.MOUSE_DOWN, customLogEvent, true);

如果是在Mxml中添加監聽, Flex設置此參數爲False, 沒有辦法進行修改. 如果設置了use_capture爲True, 那麼事件將不會上浮. 如果既想捕獲又想上浮就必須調用 addEventListener?兩次. 一次use_capture參數爲true, 一次爲false; 捕獲很少使用, 上浮的使用更爲普遍.

 

B. 目標階段: 在目標階段, Flex激發事件的監聽程序, 不檢查其他的節點.

 

C. 上浮階段:事件只在bubbles屬性爲True時才進行上浮. 可以上浮的事件包括: change, click, doubleClick, keyDown, keyUp, mouseDown, mouseUp. 在上浮階段, Flex改變事件的currentTarget屬性, 而target屬性是初始派發事件的對象.

 

在任意一個階段, 節點們都有機會操作事件. 比如: 用戶點擊了一個在VBox中的Button,在捕獲階段, Flex檢查Application對象(根節點)和VBox是否有監聽器處理此事件. Flex然後在目標階段觸發按鈕的監聽器.在上浮階段, VBox和應用以與捕獲階段相反的順序再次獲得機會處理事件.

 

在Actionscript3.0中,你可以在任意目標節點上註冊事件監聽器. 但是部分事件會被直接傳給目標節點,比如Socket類. 捕獲階段的節點順序是從父節點到子節點的, 而上浮階段剛好相反.

 

捕獲事件缺省是關閉的,也就是說如果要捕獲事件, 必須顯式指定在捕獲階段進行處理.

 

每一個Event都有target和currentTarget屬性, 幫助跟蹤事件傳播的過程.

 

4), 查詢事件階段

 

使用事件的eventPhase可以獲得事件當前的階段,

 

1): CAPTURE_PHASE

 

2): AT_TARGET

 

3): BUBBLING_PHASE

 

示例: private function determineState(event:MouseEvent?):Void { Debug.trace(event.eventPhase + ":" + event.currentTarget.id); }

 

5), 停止傳播

 

使用下面兩個函數停止事件的傳播:

 

stopPropagation()

 

stopImmediatePropagation?()

 

2, 創建監聽器

 

組件有Flex提供的內建事件. 也可以使用派發-監聽模型定義自己的事件監聽器, 並指定監聽器監聽何種事件.

 

有三種方式:

 

1), 內部MXML中的AS函數法: 在MXML的<mx:Script></mx:Script>聲明中註冊監聽器: 這是第一個和使用最廣泛的方法,在 MXML 中定義事件發生時會調用的事件處理程序。

 

2), 外部AS文件中的AS函數法:通過ActionScript?定義註冊事件處理程序: 可以通過使用ActionScript? 中的 addEventHandler?() 等方法來註冊事件處理程序。 可將 addEventHandler?() 方法置於 Application 容器的 creationComplete 事件(在 Application 表單及其子級被初始化之後, 在啓動應用程序時發生)的事件處理程序中。 詳見Action Script教程

 

3), 代碼混寫法: 在MXML的控件標籤中直接完全嵌入監聽器(這也稱爲使用線上事件處理程序): 這樣比較直接,代碼也較少,但會導致代碼很難閱讀、維護和縮放。如果監聽器是多個AS語句甚至更復雜的邏輯,不推薦此方法。

 

六,數據服務器訪問概述

 

Flex 被設計爲可以與許多類型的服務器打交道,從而提供對本地和遠端邏輯的訪問。提供數據訪問的MXML 組件被稱之爲數據服務器組件(data service components)。MXML 包含了如下幾種類型的數據服務器組件:

 

1. HTTPService 提供對返回數據的HTTP URLs 的訪問。通過 Http get/post 來傳遞純文字資料。好處是非常普及於所有的後臺,但缺點則是複雜的數據類型要經過複雜的序列化與解序列化程序才能在client/server間交換。

 

2. WebService? 提供對使用SOAP 的web 服務器的訪問。WebService? 也是很常見的選擇,好處是規則共通,方便不同技術平臺交換資料,缺點則同樣是某些複雜數據結構無法輕易的交換,在編碼與譯碼的過程中往往會出現意外,例如 Date 的表現方式。以 .NET 來說,使用 web service 應該是再方便不過的選擇,只要把 asmx 檔案准備好再從 flex client 呼叫即可。

 

3. RemoteObject?(Flash Remoting) 技術:官方支持的平臺有三種,分別是 Java Coldfusion(但實際上Coldfusion應該只算是java的subset,它是一種 scripting tag library)與.NET。Flex Data Services 或Macromedia ColdFusion? MX 7.0.2通過使用AMF協議提供對Java 對象(Java Beans、EJBs、POJOs)的訪問。

 

4,其它非官方RemoteObject?技術: 由於AMF格式已被非官方反編譯,所以有許多開源的remoting替代方案:

 

A,AMFPHP: 這是php版的remoting

 

B,OPENAMF: java版的remoting

 

C,Flap: Perl 與Python版的remoting

 

S,FlashORB: 商業版的remoting替代方案,目前支持java與.net

 

七,HTTPService

 

使用plaine text format的傳輸方式,通過xml, loadVars, loadVariables 等方式

 

外部XML讀取 Actionscript 3.0 的賣點之一,就是加強XML讀取的方便性,讀取外部XML是常用的前後端整合手段,而XML節點的操作,比之前AS2用DOM更直觀,可以直接運用標籤與屬性名稱訪問節點。

 

主要參考章節: Reading external XML documents Traversing XML structures

 

Lesson 6: RETRIEVING XML DATA (37 min) 1. Setting Up an XML Data Project & Setting HTTP Service 2. Setting Up a DataGrid? to Display XML Data 3. Adding a Label Control to a DataGrid? 4. Using an ArrayCollection? 5. Examining a Data Structure in Debugging Mode 6. Utilizing Data Returned in an Event Object 7. Using the HTTP Service Class to Catch Faults 8. Creating a Cross Domain Security File

 

Lesson 13: MANIPULATING XML (34 min) 1. Manipulating Client Side Data Using E4X Syntax 2. Creating a Tree Control to Display the XML Data 3. Adding a Change Event to Display Data from the Tree 4. Populating the Shopping Cart with Raw XML Content 5. Working with an XML List Collection 6. Using Conditional Logic to Compare & Update Values

 

八,WebService

 

Lesson 14: USING WEB SERVICES (25 min) 1. Accessing Web Services 2. Invoking Web Services Methods & Results 3. Using a FaultHandler? 4. Call Multiple Methods from One Web Service Object 5. Passing Parameters to Web Services

 

九,Flex Data Services

 

FDS (Data Service, Messaging)

 

Flex Data Service 是 Flex 2 裏新出現的技術,主要目地是希望提供更自動的方法來讓 client 與 server 交換資料,它的核心實際上仍然是 AMF 與 RTMP (對,就是 Flash Media Server 用的那種),部份功能也與 FMS 重疊,但它着重在 Data Sharing 與 Exchange 這部份。

 

目前 FDS 只有 Java 的版本,也就是 server 端要用 java 寫,但 Adobe 宣稱將來會有 FDS for .NET 版。不過好消息是,有一家叫 theMidnightCoders? 的公司搶先推出了 FDS 兼容版本,不但同時支持 AMF0 與 AMF3,更支持部份 FDS 的功能(主要是資料同步的部份,與server端的衝突處理與資料儲存)。

 

以 .NET 來說,付費的選擇中 weborb 算是目前最優的選擇,價錢只有官方版的一半,但功能更完整;而免錢的選擇則當非 Fluorine 莫屬。

 

功能描述:如果你有Flex Data services,你可以發佈一組MXML和AS文件,Flex Data Services可以在收到Http請求前,把你的MXML和AS文件編譯成Swf文件。

 

Flex執行以下步驟:

 

1. 編譯MXML併產生一個SWF文件

 

2. 貯藏已編譯的MXML文件

 

3. 向安戶端返回SWF文件

 

發佈你的程序方法一:發佈一個SWF文件

 

訪問方法:http://hostname/path/filename.swf

 

方法二:發佈MXML和AS文件

 

訪問方法:http://hostname/path/filename.mxml

 

FDS在你的Java服務器上或者Java容器內運行。以保證在以下幾個特徵領域的廣泛性

 

1>多個客戶端的數據共享

 

1. 支持C2C的數據通訊

 

2. 服務器端數據增加

 

3. 安戶端訪問服務器資源的證明

 

4. 數據服務日誌

 

2>提高RPC的廣泛性

 

十,其它RemoteObject技術

 

現有許多非官方的開源RemoteObject?(Flash Remoting)技術,流行的服務端(Java、Php、.Net、Perl/Python?、Ruby)技術Flex都已打通,您可以直接在Flex/Flash?中通過RemoteObject?直接調用 A,AMFPHP: Flash和PHP的整合 AMFPHP

 

B,AMF.NET: Flex調用不同參數類型的.Net WebMethod

 

C,AMF::Perl

 

D,RubyAmf

 

E,與JAVA:

 

F,和ASP的整合:Flash2ASP是能自動生成ASP和AS代碼的工具。雖然Flash2ASP作後臺速度不如AMFphp,但由於國內ASP資源豐富,而且Flash2ASP教程文檔詳細,也可作爲一個選擇。

 

在線版

 

說明圖

 

55分鐘詳細使用方法以及留言簿範例視頻教程

 

本地運行版下載(exe)

 

詳細情況

 

 

 

十一, 創建自定義組件

 

1, Flex是由as類結構實現的。類結構包含了組件類,管理類,數據服務類,和其他用來實現flex功能的類。下圖展示的是類結構中flex可視化組件的一部分,關於控制和容器的部分:

 

 

所有的可視化組件繼承自UIComponent as類。Flex中非可視化組件也是依靠as類結構來實現的。大部分的非可視化組件都是Validator,Formatter,或者是Effect 類。

 

通過使用mxml和as語言擴展Flex類結構來創建自定義的組件。組件都繼承了父類的屬性,方法,行爲,風格和效果。

 

通過as創建一個flex組件時,必須繼承自一個flex類。類的名稱必須和類文件的名稱相同。子類繼承了父類的所有屬性的和方法。在mxml中使用這個組件時,通過使用類名稱的標籤來引用。例如,類名稱是myASButton,文件名則爲myASButton.as,在mxml中使用< myASButton>標籤來使用組件。

 

在通過mxml創建一個組建時,flex編譯器將自動的生成一個as類。mxml文件的名稱必須和as類名稱相同。同樣,在mxml中使用這個名稱標籤來使用這個組件。

 

下圖展示了分別通過as和mxml創建的Flex Button組件的自定義組件:

Button.as

MyASButton.as

package
{
  public class MyASButton extends Button
  {

    //Override inherited methods and properties.
    //Define new methods and properties.
    //Define custom logic in ActionScript.

  }
}

<mx:Button>
  
  <ms:Script>
    //Override inherited methods and properties.
    //Define new methods and properties.
    //Define custom logic in ActionScript.
  </mx:Script>

<!-- Add MXML code. -->
</mx:Button>

 

上面的兩種實現方法都生成了一個Button類的子類。同樣的繼承了所有的屬性,方法和button類的所有元素。都可以重寫類的屬性,方法和邏輯。

 

注意:父類中的變量是不能被覆蓋,但是可以覆蓋通過setter和getter方法實現的屬性。你可以重新設置這些變量的值。

 

另外,如果使用mxml創建組建,flex編譯器完成了創建一個組件的子類的大部分工作,因此使用mxml創建組件比用as創建組件更加容易。

 

 

2, 決定是使用mxml還是as創建組件

 

在創建組件之前需要做的一個首要決定是,使用as還是mxml。由你需要開發應用程序來決定你需要使用什麼樣的組件。

 

下面是一些基本的指導方針:

 

mxml和as組件都定義了新的as類。基本上所有能用as完成的自定義組件都可以通過mxml來實現。一般來說,對於簡單的自定義組建,例如修改已有組建的一些屬性和方法,使用mxml要比使用as方便得多。當你在新的組件中使用了別的組建,而且需要使用flex layout容器來進行多個組件的佈局設置,那麼需要使用mxml來定義。如果你想修改某一個組件的行爲,例如一個容器中子元素的佈局方式,則使用as。如果你想通過創建UIComponent的子類來創建一個全新的可視化組件,則使用as。如果你想創建一個全新的非可視化組件,例如formatter,validator,或者effect,則使用as。注意:Flash Professional 8是不能開發AS3.0的組件的,如果要使用AS3.0開發Flex2組件,應該使用Flex Builder IDE。

 

 

3, 組件部署

 

在部署你的mxml或as文件的自定義組件時,一般將這些文件放置在你的應用程序的子目錄內,或者一個定義好的as類路徑下。

 

爲了保密,你可能不希望使用源碼的形式來部署你的源文件。因此你可以使用swc文件或者共享資源庫(RSL)作爲用來部署的文件。

 

Swc文件是Flex組件的一種集合格式。使用swc文件可以方便的在開發人員之間進行交流,這樣你使用使用一個文件,而不是很多mxml,as文件,或者圖片和其他資源。更重要的是,swc文件中的swf已經被編譯了,這意味着你不用看着繁雜的代碼。

 

Swc文件可以包含多個組件,使用PKZip打包格式將其打包在一起。你可以使用winzip,jar或者任何打包工具來打開這個文件。但是,一般來說不要直接在swc外部運行打包在swc裏面的swf文件。

 

創建swc文件,需要使用compc工具,該工具在flex安裝目錄下的bin目錄內。compc工具可以將mxml文件,或as文件,或兩種文件一起,打包成swc文件。

 

要縮小你的swf格式的應用程序的大小,有一種方式是將共享資源打包到文件外部,由client下載並保存在緩存中。這些外部職員可以在程序運行的時候多次被使用,但是隻需要從服務器傳輸到client端一次。這些文件就是共享資源庫(RSL)。

 

參見

 

Flex之Repeater、XML筆記

 

flash 高級編程指南

 

Flex Remote Object中直接使用HttpSession的方法

 

Flash Remoting 教學 1 - 下載、安裝與hello world

 

在Flex Data Services 2中使用RPC服務(簡體)

 

Adobe Flex 快速入門

 

Flex 2 Essential Training

 

Flex 2 Beyond the Basics

 

Flex 2 Advanced: Using Data Services

 

創建Flex2組件

 

設計松耦合的Flex組件

 

Flex中的事件機制

 

關於Flex Data Services

 

Flex 答客問2:Flex 2 and .NET, a nice pair ?

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章