FLEX個人學習點滴

FLEX個人學習點滴 http://hi.baidu.com/xuleit/blog/item/a1d001e94336c139b80e2d9a.html
2008-10-7 11:35
---------------addEventListener（參數類型，處理函數）---------------
myMenu.addEventListener(MenuEvent.ITEM_CLICK,menuClickHandler);
上邊表示把myMenu對象的MenuEvent.ITEM_CLICK事件交給menuClickHandler函數來處理




--------------可以直接定義XML，並將它設置爲菜單的內容mx:MenuBar------------
import mx.controls.Alert;        
import mx.events.MenuEvent;
private var mXML:XML =
                <menu label = "系統菜單">
                    <item label="文件">
                        <node label="新建畫板" data="new"/>
                        <node label="清除畫板" data="clear" enabled="false"/>
                        <node type="separator" />
                        <node label="退出系統" data="logout"/>
                    </item>
                    <item label="幫助">
                         <node label="幫助" data="help"/>
                         <node label="關於作者" data="about"/>
                     </item>
                </menu>;
            
internal function initApp():void{
    //爲MenuBar添加數據源
    myMenu.dataProvider = mXML;
    //監聽Menu的點擊實踐
    myMenu.addEventListener(MenuEvent.ITEM_CLICK,menuClickHandler);
}
            
internal function menuClickHandler(evt:MenuEvent):void{
    Alert.show("選擇菜單："+evt.item.@data,"提示信息");
}


<mx:MenuBar labelField="@label" height="30" id="myMenu" width="100%"></mx:MenuBar>


---------------用mx:Model來定義數組，關鍵詞Model、id、item--------------
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="12">
    <mx:Model id="myImages">
      <myImage2>
        <item label="圖片12" data="images/Baby01.gif"/>
        <item label="圖片22" data="images/Baby02.gif"/>
        <item label="圖片32" data="images/Baby03.gif"/>
        <item label="圖片42" data="images/Baby04.gif"/>
      </myImage2>
    </mx:Model>    
    <mx:List dataProvider="{myImages.item}" itemRenderer="ImageItem" x="41" y="52" height="235" width="130">
    </mx:List>
</mx:Application>


---------------文本有三種方式：TextArea、TextInput、htmlText------------------
<mx:TextArea x="51" y="96" text="文本區" editable="false" width="172" height="48"/>
<mx:TextInput x="51" y="171" text="輸入框" displayAsPassword="true"/>


<mx:Text width="253" height="96" x="51" y="226">
    <mx:htmlText>
     <![CDATA[<font color="#0000FF">HTML文本</font> <u>支持html標籤</u><img src="images/Baby01.gif"/>...    ]]>
    </mx:htmlText>
</mx:Text>


---------view:PenControl表示view目錄下的PenControl.mxml文件中定義的鋼筆控制面板：
<mx:Canvas width="100%" height="100%" id="paper">
   <view:PenControl id="control" x="10" y="23" />
   <view:Paper x="203" y="23" id="whitePaper">
   </view:Paper>
</mx:Canvas>




------------------super函數調用EventListener----------------
package bookEvent
{
    import flash.events.Event;


    public class cartEvent extends Event{
        public var isAdd:Boolean;
        public var book:Object;
        function cartEvent(_data:Object,_isAdd:Boolean):void{
            isAdd = _isAdd;
            book = _data;
            
            super("AddBook");
        }
    }
}
super函數將調用預先註冊好的EventListener：
internal function initApp():void{
addEventListener("AddBook",AddHandler);
}


---------------------表格實現三要素:DCD-----------------------------------------
表格實現三要素：DataGrid，columns，DataGridColumn
<mx:DataGrid editable="true" id="book_DG" width="100%" height="156" itemEditEnd="checkInfo(event)" rowCount="5" dataProvider="{books.book}">
    <mx:columns>
       <mx:DataGridColumn dataField="name" headerText="書名"/>
       <mx:DataGridColumn dataField="author" headerText="作者"/>
       <mx:DataGridColumn dataField="date" headerText="出版日期" itemEditor="view.dateCell" />
       <mx:DataGridColumn headerText="購買" itemRenderer="view.cartCell" editable="false"/>
    </mx:columns>
</mx:DataGrid>


view.cartCell表示view目錄下的cartCell.mxml文件中的內容.


itemEditor定義了當前數據項應該由哪個編輯器來修改它：
<mx:DataGridColumn dataField="date" headerText="出版日期" itemEditor="view.dateCell" />




2008-10-6 16:35
<mx:Move id="myMove" target="{img}" xFrom="50" xTo="350" duration="10000"/>
xFrom、xTo定義了水平移動的起點和終點。


<mx:Style source="style.css" />
mx:Style設置了css文件
Application{
    fontSize:12;
    backgroundGradientColors: #c0c0c0, #c0c0c0
}


模糊效果的blureXFrom和blurXTo定義了模糊效果相對於應用對象的位置。只有當blurXFrom爲0或者blurXTo爲0時，纔有可能看到清晰的文字.
爲0表示沒有水平模糊偏移.
<mx:Blur id="Effect_Blur" effectEnd="endBlur()"
        blurXFrom="0" blurXTo="30" duration="1500"/>


數組和<mx:Blur的應用：
Effect_Blur.targets = [myPanel];                
//var arr:Array = new Array();
//arr.push(myPanel);


三種擦除效果：
<mx:Iris id= "myIris" effectStart="effectStartHandler()" effectEnd="effectEndHandler()" />
<mx:WipeLeft id= "myWipe" />
<mx:WipeRight id= "myWipe2" repeatCount="2" repeatDelay="500"/>


通過一行多個等於符合可以給多個變量賦值：
<mx:Button label="改變圖片" x="37" y="153" click="image.visible = image2.visible= !image.visible"/>






2008-9-25 11:30
ViewStack裏邊可以放多個Canvas。
ViewStack支持selectedChild屬性




2008-9-24 15:37
分析：Tile用來顯示列表內容，其中tileHeight，tileWidth用來定義小方格的高和寬:
<mx:Tile id="holder" x="41" y="45" width="330" height="280" horizontalGap="2"
   direction="horizontal" tileHeight="80" tileWidth="80">




//----------可以根據id來顯示或者隱藏一個控件-------------下邊的win1就是一個id號----
<mx:Script>
    <![CDATA[
        //點擊後出發 close 事件，執行該函數
        import mx.controls.Button;
        
        internal function doClose():void{
            txt.text = "關閉按鈕被點擊了";
            win1.visible = false;
        }
        
        internal function doShow():void{
        win1.visible = true;
        }
    ]]>
</mx:Script>






2008-9-24 13:39
TabNavigator裏邊多放一個Canvas，上邊的標籤處就會多一個tab標籤


優化flex builder的方法：
preferences => general => workspace
去掉Build automatically和 Refresh automatically前邊的勾


<tree:Panel2 x="54" y="24">        
</tree:Panel2>
使用tree可以載入另外一個mxml文件的內容


應用程序放在標籤<mx:Application中






2008-9-24 12:55
表單的相關元素：
放在Panel裏
Form裏邊有FormHeading元素定義表單的頭
一個FormItem定義一個表單的具體元素，裏邊包含TextInput元素輸入填寫內容
按鈕放在ControlBar裏邊，它裏邊再放入Button
輸入驗證包含如下幾個驗證器：
StringValidator
EmailValidator
PhoneNumberValidator
DateValidator






2008-9-23 15:14
flex build去除網上粘貼的代碼的前邊的行號：
[\d]+{1,2}\.
記住一行一行操作，因爲<?xml1.0 這樣的也可以被替換。


2008-9-23 14:23
1 flex發佈：file => export => Release build
2 CSS的使用
<?xml version="1.0" encoding="utf-8"?> 
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> 
           
        <mx:Style> 
            Button {   
               color: #ff0000;   
               borderColor: #cccccc;   
               themeColor: #00ff00;   
               fontFamily: Arial;   
              fontSize: 12;   
              fontWeight: normal;   
           }   
           .mylinkButton {   
              rollOverColor: #00ff00;   
              selectionColor: #00ff00;   
              color: #ffff00;   
           }   
       </mx:Style> 
          
       <mx:Button x="10" y="10" label="Button"/> 
       <mx:LinkButton styleName="mylinkButton" label="LinkButton" x="10" y="40"/> 
          
</mx:Application> 




2008-9-18 14:22
1 constraintColumns和constraintColumn定義了<mx:Canvas>的列和列的數量，一個Canvas只能定義一個constraintColumns
<mx:constraintColumns>
<mx:ConstraintColumn
跟html表格不同的是，Canvas的列寬ConstraintColumn可以隨意指定，只需要定義好列裏邊的元素的 width就可以了！


2 constraintRows定義了<mx:Canvas>的列和列的數量，一個Canvas只能定義一個ConstraintRows
<mx:constraintRows>
<mx:ConstraintRow 


3 left和top屬性裏邊可以訪問其他別的id裏邊的位置，例如left="column1:0",表示，左邊距爲id爲column1的元素的0像素的位置。
<mx:Button label="Row 2 Col 1" width="100" left="column1:0" top="row2:0"/>


4 DividedBox定義了分割的區域，相互之間還可以拖動。<mx:Panel定義了其中的一塊區域。用起來真是相當棒！！！！
<mx:DividedBox direction="horizontal" width="100%" height="100%">
<mx:Panel title="Panel 1" width="25%" height="100%" backgroundColor="0xCCCCCC">


5 表單用Form、FormHeading、FormItem、TextInput，注意FormItem和TextInput必須成對出現，表示一個輸入項。
<mx:Form width="100%" height="100%">
<mx:FormHeading label="Enter values into the form."/>
<mx:FormItem label="First name">
<mx:TextInput id="fname" width="200"/>


6 HBox是水平方向的佈局框，H2O就是水的化學分子式嘛.
<mx:ComboBox/>是下拉列表框,下拉列表框的內容用
<mx:Array>
<mx:Object label="請選擇性別"/>    
來顯示




2008-9-16 13:46
1 用VedioDispaly這個組件加上button來實現視頻和mp3的播放
2 RemoteObject是最快速的（相比WebService,httpservice這些數據方式)
3 RO走的是AMF協議


4 trace("My name is " + userName + ".");
這樣就可以在flex builder的console視圖顯示出變量username的值了。


5 監控按下的字符代碼：
private function onKeyDown(event:KeyboardEvent):void {
trace("key down: " + event.charCode);
}


6 關閉強類型檢測：
trace(5 == 6); // : false
trace(6 == 6); // : true
trace(6 == "6"); // : true
trace(5 == "6"); // : false
默認的工程項目，在運行上面的代碼會出錯。因爲編譯器被設置爲強類型編譯檢測。關掉強類
型檢測，會把數字型轉換爲字符型，然後再進行比較。一般不推薦關閉強類型檢測,這樣可能會
引發一些隱蔽的錯誤不利於程序穩定。


7 HTTPService組件讀取XML產生亂碼問題。（Skey）
我是用HTTPService組件讀取XML 而我的XML是gb2312的編碼 
事後才發現 加一句flash.system.System.useCodePage=true 可以解決亂碼問題


8 由於AMF採用二進制編碼，這種方式可以高度壓縮數據，因此非常適合用來傳遞大量的資料。數據量越大，Flash Remoting的傳輸效能就越高，遠遠超過Web Service


9 定義數組用<mx:Array，定義XML用<mx:XML，定義列表用<mx:List，定義樹形菜單用<mx:Tree，相當棒！


10 <mx:Tree的labelField="@label" dataProvider="{myData}"，其中dataProvider定義了數據顯示來源，labelField利用@來訪問每個node的對應屬性值,"@label"


11 Accordion是手風琴的意思，菜單會像手風琴那樣滑動。


12 tab_menu.selectedIndex = 1;
其中tab_menu是id名，selectedIndex表示當前顯示那個菜單。如果值爲1，表示顯示第二個菜單。id都可以直接訪問


13 Canvas是畫布的意思，在畫布裏邊的任何組件均可以被放置在任意位置，例如：<mx:ColorPicker，<mx:Label，均可以被放置在畫布的任意位置。


14 <mx:VBox是豎向排列的佈局組件，<mx:Text text="這裏插入內容"用來顯示文字內容。 <mx:ComboBox>實現下拉列表框，下拉列表框裏邊的元素是<mx:Array>。


15 數組使用實例：
<mx:Array>
      <mx:Object label="請選擇性別"/>                    
      <mx:Object label="女"/>
      <mx:Object label="男"/>
</mx:Array>


16 Panel也是佈局組件，翻譯爲面板。
<mx:Panel title="內嵌的Panel" label="Item 3" width="90%" height="90%">


17 畫布、VBox、Panel均可以直接放在Accordion裏邊，實現一個手風琴的按鈕。






-----------------MovieClip有play,stop,和gotoAndStop方法----------------------------
下面的代碼指示名爲 shortFilm 的 MovieClip 開始播放：
shortFilm.play();
下面的代碼行使名爲 shortFilm 的 MovieClip 停止播放（播放頭停在原地，就像暫停播放
視頻一樣）：
shortFilm.stop();
下面的代碼使名爲 shortFilm 的 MovieClip 將其播放頭移到第 1 幀，然後停止播放（就像
後退視頻一樣）：
shortFilm.gotoAndStop(1);




-----------------數字應該調用toString()方法來顯示在文本字段中：----------------------------
var numericData:Number = 9;
var textData:String = numericData.toString();
例如，如果希望在屏幕上的文本字段中顯示 Number 變量的值，應使用 toString() 方法。
TextField 類的 text 屬性（表示實際在屏幕上顯示的文本內容）被定義爲 String，所以它
只能包含文本值。下面的一行代碼將變量 numericData 中的數值轉換爲文本，然後使這些文
本顯示在屏幕上名爲 calculatorDisplay 的 TextField 對象中：
calculatorDisplay.text = numericData.toString();




----------------先定義響應函數，再用addEventListener綁定響應函數---------------------------
function eventResponse(eventObject:EventType):void
{
// 此處是爲響應事件而執行的動作。
}
eventSource.addEventListener(EventType.EVENT_NAME, eventResponse);
此代碼執行兩個操作。首先，定義一個函數，這是指定爲響應事件而要執行的動作的方法。接
下來，調用源對象的 addEventListener() 方法，實際上就是爲指定事件“訂閱”該函數，




程序員實際編寫的代碼如下所示：
function eventResponse(event:MouseEvent):void
{
// 此處是爲響應事件而執行的動作。
}
myButton.addEventListener(MouseEvent.CLICK, eventResponse);




2008-10-14
------------腳本標識---------------
<mx:Script>


-----------導入相關包--------------
import mx.rpc.events.ResultEvent; //WEB請求結果處理包
import mx.rpc.events.FaultEvent; //WEB請求失敗後的處理包
import mx.controls.Alert;         //彈出信息框


--------函數的返回類型也用冒號-----
public function handleXML(event:ResultEvent):void
這裏():void表示該函數不返回任何變量


--聲明變量直接用var，用:來指定類型--
private var shippingInfo:XMLList;


-------------文本輸入框------------
<mx:TextInput 


---------------按鈕----------------
<mx:Button


---------------表格----------------
<mx:DataGrid


-------------表格的列--------------
<mx:columns>


------------表格的列頭-------------
<mx:DataGridColumn headerText="Service" 


-------------文本標籤--------------
<mx:Label


-----x表示離最左邊有多遠，y表示離最頂端有多遠-----
<mx:Label x="400" y="32" 
x表示水平左邊距，y表示垂直上邊距


-----------HTTPService描述web請求-----------------
<mx:HTTPService result="handleXML(event);" fault="handleFault(event);" id="xmlRPC" resultFormat="e4x"
        url="http://examples.adobe.com/flex3app/flex3samples/exchangingdata/xml/xmlHttpService.jsp" useProxy="false">
result設置結果處理函數，fault設置錯誤處理函數，resultFormat="e4x"設置返回的xml格式，url定義訪問地址
注意：函數聲明時需要指定形參的類型，但是函數調用的時候不用指定


-----------request描述web請求的參數和參數值-------
<mx:request xmlns="">
<zipcode>{zipcode.text}</zipcode>


----------類型轉換用as----------------------------
hippingInfo = event.result.option as XMLList;
這裏as表示類型轉換