Flex調整物件重疊順序

Flex中的元件重疊問題很少被提到
因為Flex的運作方式是後來增加的物件會被排列在已有物件的上層
所以要調整物件重疊的先後順序就必須調整物件的加入順序
範例：
private function mouseOverHandler(event:MouseEvent):void{
  this.setChildIndex(event.currentTarget as UIComponent,this.numChildren-1);
}

這個function對讓所點擊的物件的加入順序做改變

Flex使用addChild加入flash.display類別元件

在Flex中使用addChild來加入Sprite、MovieClip等flash.display類別物件須經過處理
直接使用時會回傳強制轉換型別失敗
這是因為Application的 addChild() 並非完全繼承自DisplayObjectContainer

Application→LayoutContainer→Container→UIComponent→FlexSprite→Sprite
 →DisplayObjectContainer

而 addChild() 在Container那裡被覆寫了︰
public override function addChild(child:DisplayObject):DisplayObject

雖然參數child的類型是DisplayObject
但它必須實作IUIComponent介面後才能加入，就如同其他所有Flex元件都必須實作這個介面
如果要在Application裡添加Sprite，可以先把它裝進UIComponent裡
或者用UIMOVIECLIP，然後再添加這個UIComponent︰

import mx.core.UIComponent;

private function init():void {   
  var sp:Sprite = new Sprite();
  var uc:UIComponent = new UIComponent();   
  uc.addChild(sp);   
  addChild(uc);
}

AcionScript 3 筆記(2)

這篇還是以會用到的ActionScript作介紹
提到的有
1.結合陣列和函式
2.function接受不定數量參數寫法
3.使用getChildByName()函式取得元件
4.動態設定元件屬性

1.結合陣列和函式

ActionScript 3 可以將陣列與函式搭配使用

範例程式碼：
var name:Array = ["Joe", "Jon", "Jay"];
name.foreach(showName);

function showName(element:*, index:int, array:Array){
  trace("第" + index + "號的名字是" + element);
}

上述程式的element是表示元素的值，index就是...index嘛，最後的Array是傳進來的array
使用這種寫法就會自動的將參數以上面的方式輸入函式裡
另外以下的使用方法也可以參考：
....//與上述程式碼相同

function showName(element:*, index:int, array:Array){
  //add ", " after elements 
  array[index] = element + ", ";
}
trace("名單有"+name + "以及其他人");

輸出結果會是經過改變的陣列內容

類似的處理還有map、filter、every、some方法

map範例：

var score:Array = [1, 2, 3];
var message:Array = score.map(addString);


function addString(element:*, index:int, array:Array){
 return element + "分";

}
trace("score 是" + score);
trace("message 是" +message);

map與foreach方法的差別在於它具有回傳值

filter範例：
var num:Array = {1,2,3,4,5,6};
var evenList:Array = num.filter(isEven);

function isEven(element:*, index:int, array:Array):Boolean{
   return element%2 == 0;
}
trace("偶數有" + evenList);

filter回傳的會是在判斷式裡是true的值，也就是  "偶數有2,4,6"
every、some的寫法類似filter，但這兩個回傳Boolean值
分別是對整體Array或部分Array作判斷
例如num.every(isEven); //回傳false，因為數列並不全為偶數

2.function接受不定數量參數寫法

這個部分在Java裡有類似的寫法，處理方式也差不多
範例：
function getDishes(plate:String, ...dishList:Array){
  var  dishes:String = dishList.join("、");
  trace(plate + "有" + dishes);
}

getDishes("盒子裡有", "香腸", "空心菜", "炒麵");
不定量參數一定要放在最後面，並且只能用Array形別

3.使用getChildByName()函式取得元件

看到這個名稱就很容易想到 javascript 取得元件的寫法
在Flex裡整個mxml檔案內的元件配置也是呈現DOM階層式
mxml裡的Application標籤宣告即是一個節點
每個節點在執行期都等同於instance實體物件
實際上Flex還會再另外建立一個stage節點於Application上
stage位於整個結構的頂點，可以控制整個Application版面的配置
而這個getChildByName()函式使用方法如下：
 this.getChildByName('a');

它會在整個階層架構中尋找名為a的元件
並將其以DisplayObject的型態回傳

4.動態設定元件屬性 

程式範例：
            public function setAttributeByName(uiIns:UIComponent,aName:String):void {
                // 將物件Class-類別宣告轉成XML資料格式
                 var classInfo:XML = describeType(uiIns);
                // 走訪XML中描述物件中所有的屬性
                for each (var attr:XML in classInfo..accessor) {
                    //過濾如果屬性型態不是writeonly，也就是篩選出可讀寫的屬性
                    if (attr.@access != 'writeonly') {
                        if (attr.@name==aName) {
                            //以Associative array key的方式設定Instance的屬性
                            uiIns[attr.@name]=100;
                        }   
                    }
                }
            }

程式會走訪XML中所有accessor節點並放入attr變數中
假使內容如同傳進來的aName變數
這個function會將指定的屬性設定成100

另外將accessor改換成method，則可以走訪物件資料中的method資料
程式範例：
        public function callMethodByName(uiIns:UIComponent,mName:String):void {
             //用陣列設定傳遞給方法中參數的值，請參考setVisible方法的參數格式
             var args:Array=[false,false];
              var classInfo:XML = describeType(uiIns);
             // 走訪XML中描述物件中所有的方法
             for each (var meth:XML in classInfo..method){
                 if (meth.@name==mName){
                     //以Associative array key的機制動態取得Instance的方法
                     //運用apply方法動態invoke被指定方法與傳遞參數
                     uiIns[mName].apply(uiIns, args);
                    }   
                }
            }

這個範例可以做到動態呼叫元件的函式

AcionScript 3 筆記(1)

AcionScript的語言還在摸索中
目前會以Flex會用到的部分來寫
這回提到的是基礎部分
1.變數宣告
2.資料型別判斷
3.型別轉換
4.陣列使用方式
5.for迴圈與for each迴圈寫法
6.AS3的特殊操作符號

1.變數宣告

ActionScipt的變數宣告並不算太嚴謹
它的宣告方式是 var  variable : type
例如： var name : String;

但如果不指定資料型別的話也可以，例如 var  variable;
它的語法會等同於 var variable : *;
*類別與其他資料型別不一樣，它表示暫時不確定之後會寫入什麼型別
當然缺點就是處理*型別會比較花時間囉

2.資料型別判斷

ActionScript 3 的基底資料型別共有 int、Number、String、uint、Boolean
複雜資料型別則包含了 Array、Date、Error、Function、RegExp等
不同於Java的地方是，AS3的所有資料型別都是物件
var sth:int = 1;    會與  var sth:int = new int(1);  相同

AS3用關鍵字 is 來判斷變數的類別，並返回 boolean值表示結果
值得一提的是 AS3 提供了另一個關鍵字 as
在物件符合類別時會回傳物件本身，不符合時則回傳 null
trace(n1 as Number)    //n1為Number型別時回傳n1，否則回傳null

3.型別轉換 

ActionScript作型別轉換的函式就跟他類別的名稱一樣
三種型別:int, Number, uint 對應的轉換式分別為 int(), Number(), uint()
另外將字串轉換為數值還可以用parseint(), parseFloat()
若是無法轉換成數字的值，在int或是uint裡會回傳0，Number值則會回傳NaN

轉換成字串的方法為String(想轉換成字串的值)
轉換成Boolean則用Boolean()，0的值換轉成false，其餘則為true

4.陣列使用方式

使用array的方法為
var arr : Array = ["a", "b", "c"];
要得知陣列長度則可以使用  陣列名稱.length
例如：var num : int = arr.length;

它的Array比較像是java裡面的ArrayList
也可以像下面的方式使用
var nameList : Array = new Array();
nameList.push("John");
nameList.push("Allen");

push()是在陣列結尾加入元素，另外有一個ubshift()則是在陣列開頭加入元素
刪除元素的方法則有pop()和shift()
pop()刪除陣列最後面的元素，shift()刪除陣列最前面的元素
而陣列的index也會因為以上方式而跟著變動

陣列裡面也有sort()方法，他會依照unicode的大小來進行升冪排列
var arr : Array = ["22", "15", "a"];
arr.sort();
trace(arr);
排列結果會是15,22,a

此外也有一些常數可以調整排列順序
Array.DESCENDING會改使用降冪排列
Array.NUMERIC 會將元素視為數值
Array.CASEINSENSITIVE 沒有大小寫差異
Array.UNIQUESORT 陣列內有重複元素時，會停止排序並回傳0
Array.RETURNINDEXEDARRAY不替原本陣列排序，而傳回指定順序的新陣列
使用方式為 arr.sort(Array.DESCENDING);
有多重排序規則需求的話則使用 | 來區隔規則
例如 arr.sort(Array.DESCENDING | Array.NUMERIC);

sortOn方法則是可以依屬性值排列
例如可以依照現有物件的y軸位置來做排列
 arr.sortOn("y ", Array.NUMERIC);

需要反轉陣列的時候則用reverse()函式，如：arr.reverse();
要確認陣列裡面是否已經存在要加入的值可以使用indexOf()和lastIndexOf()
使用方法為 arr.indexOf(要查詢的值);
indexOf會從陣列開頭開始找起，lastIndexOf則從陣列結尾開始找
找到之後會回傳該值的index值
若要將所有的元素結合成字串可以使用join()函式，以下範例：
var numList : Array = [10, 8, 5];
var message :String = numList.join("分和");
trace("結果是" + message + "。");

結果：結果是10分和8分和5

5.for迴圈與for each迴圈寫法

for迴圈使用範例：
var testArray:Array = ["1", "2", "3"];
for(var i:String in testArray){
  trace(testArray[i]);
}

for each迴圈使用範例：
var testArray:Array = ["1", "2", "3"];
for(var num in testArray){
  trace(num);
}

6.AS3的特殊操作符號

[] - 初始化陣列              {x:y} - 初始化對象          x.y or x[y] -訪問屬性
:: - 標識屬性、方法或 XML 屬性或特性的命名空間    @ - 標識 XML 或 XMLList 對象的屬性
.. - 定位到 XML 或 XMLList 對象的後代元素，或（結合使用 @ 運算符）查找匹配的後代屬性
* - 指定屬性是無類型的(特殊運用)