<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    隨筆-159  評論-114  文章-7  trackbacks-0

    前期準備:

          點擊 File 菜單 -> New -> MXML Component ,然后彈出一個對話框。

    在對話框中輸入組件名,選擇此組件繼承的類型,如: CanvasDataGridComboBox …… 等。

    然后選擇組件的大小,點擊 Finish 即可。

          關于組件繼承的類型,假設 Based on Canvas ,那么組件的根元素即為 mx:Canvas ,此元素的含義為空白面板,那么設計人員可以任意在這個面板容器內放置任何東西,就像開發主程序一樣。那么此組件類似一個容器。

          如果 Based on ComboBox ,那么根元素即為 mx:ComboBox ,此元素的含義為下拉框,那么設計人員可以在下拉框的的內部任意定制內容或代碼,那么此組件定制了一個下拉框。

    例,登錄組件:

    制作組件:

        首先按照上面的步驟新建一個組件,名為 CLogin.mxmlBased on TitleWindowTitleWindow 元素代表有標題的窗口。

         然后切換到 Design 視圖,選擇這個 TitleWindow 窗口,在屬性框里編輯標題( Title 屬性),輸入“用戶登錄”。

    此時的代碼大體如下:

    Xml代碼 復制代碼
    1. <?xml version="1.0" encoding="utf-8"?>  
    2.       <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"    
    3.               width="286" height="208" layout="absolute" title="用戶登錄">  
    4. </mx:TitleWindow>  
    <?xml version="1.0" encoding="utf-8"?>
    <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
    width="286" height="208" layout="absolute" title="用戶登錄">
    </mx:TitleWindow>
     

    然后我們加入 Form 控件并填入內容( FormItem ),然后添加按鈕以便提交,此時代碼如下:

    Xml代碼 復制代碼
    1. <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="286" height="208" layout="absolute" title="用戶登錄">  
    2.   
    3.         <mx:Form width="248" height="100" label="Button" x="10" y="10">  
    4.   
    5.                 <mx:FormItem label="用戶名" fontSize="12">  
    6.                         <mx:TextInput id="username" width="158" height="28" fontSize="15"    
    7.                                 textAlign="left"/>  
    8.                 </mx:FormItem>  
    9.   
    10.                 <mx:FormItem label="密碼" fontSize="12">  
    11.                         <mx:TextInput id="password" width="159" height="30" fontSize="15"    
    12.                                 textAlign="left" displayAsPassword="true"/>  
    13.                 </mx:FormItem>  
    14.   
    15.          </mx:Form>  
    16.   
    17.          <mx:Button id="loginbtn" label="登錄" textAlign="center" fontSize="12" x="190" y="118"/>  
    18.   
    19. </mx:TitleWindow>  
    <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="286" height="208" layout="absolute" title="用戶登錄">
    <mx:Form width="248" height="100" label="Button" x="10" y="10">
    <mx:FormItem label="用戶名" fontSize="12">
    <mx:TextInput id="username" width="158" height="28" fontSize="15"
    textAlign="left"/>
    </mx:FormItem>
    <mx:FormItem label="密碼" fontSize="12">
    <mx:TextInput id="password" width="159" height="30" fontSize="15"
    textAlign="left" displayAsPassword="true"/>
    </mx:FormItem>
    </mx:Form>
    <mx:Button id="loginbtn" label="登錄" textAlign="center" fontSize="12" x="190" y="118"/>
    </mx:TitleWindow>
     

    上面的登錄只是布局,沒加入事件處理程序,但是這已經可以算是一個登錄組件了(雖然只能看不能用,呵呵)

    組件制作完畢,然后就可以使用他了

    使用組件:

    打開主程序,進入 Design 視圖,查看左下角的組件瀏覽器。

    你會發現在 Custom 下多出來一個 CLogin 來,把它拖入設計面板,哈,登錄組件就顯示在面板上了,就這么簡單。

    代碼可能會如下:

    Xml代碼 復制代碼
    1. <?xml version="1.0" encoding="utf-8"?>  
    2.   
    3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*">  
    4.   
    5.     <mx:Script>  
    6.   
    7.           <![CDATA[  
    8.  
    9.                 import mx.controls.Alert;  
    10.  
    11.                 private function btnClick() : void {  
    12.  
    13.                       Alert.show("test","Test");  
    14.  
    15.                 }  
    16.  
    17.           ]]>  
    18.   
    19.     </mx:Script>  
    20.   
    21.     <mx:Button id="bb" x="107" y="37" label="Button" click="btnClick()"/>  
    22.   
    23.     <ns1:CLogin x="107" y="94" width="204" height="117">  
    24.   
    25.     </ns1:CLogin>  
    26.   
    27. </mx:Application>  
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*">
    <mx:Script>
    <![CDATA[
    import mx.controls.Alert;
    private function btnClick() : void {
    Alert.show("test","Test");
    }
    ]]>
    </mx:Script>
    <mx:Button id="bb" x="107" y="37" label="Button" click="btnClick()"/>
    <ns1:CLogin x="107" y="94" width="204" height="117">
    </ns1:CLogin>
    </mx:Application>
     

    修改命名空間 xmlns:ns1 變成你想要的比如 xmlns:widget ,最后的代碼:

    示例代碼:Hello.mxml

    Xml代碼 復制代碼
    1. <?xml version="1.0" encoding="utf-8"?>  
    2.   
    3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:widget="*">  
    4.   
    5.     <mx:Script>  
    6.   
    7.           <![CDATA[  
    8.  
    9.                 import mx.controls.Alert;  
    10.  
    11.                 private function btnClick() : void {  
    12.  
    13.                       Alert.show("test","Test");  
    14.  
    15.                 }  
    16.  
    17.           ]]>  
    18.   
    19.     </mx:Script>  
    20.   
    21.     <mx:Button id="bb" x="107" y="37" label="Button" click="btnClick()"/>  
    22.   
    23.     <widget:CLogin x="107" y="94" width="204" height="117">  
    24.   
    25.     </widget:CLogin>  
    26.   
    27. </mx:Application>  
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:widget="*">
    <mx:Script>
    <![CDATA[
    import mx.controls.Alert;
    private function btnClick() : void {
    Alert.show("test","Test");
    }
    ]]>
    </mx:Script>
    <mx:Button id="bb" x="107" y="37" label="Button" click="btnClick()"/>
    <widget:CLogin x="107" y="94" width="204" height="117">
    </widget:CLogin>
    </mx:Application>
     

    好了,一切完成。

    自定義組件的屬性:

          看到這里大家也都應該清楚地知道,大部分 Flex 控件都有事件屬性,比如 click、 move 等,自定義組件會繼承他們 Based on 的元素的屬性和事件 ,那么我們的 CLogin 組件(也 可以稱之為自定義元素)就會繼承 mx:TitleWindow 的全部可以繼承的屬性(屬性、事件、 特效、樣式等等),那么它的特有屬性如何來做呢?下面我們來為其加上其特有屬性。

    加入自定義屬性:

    示例代碼 CLogin.mxml

    Xml代碼 復制代碼
    1. <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="286" height="208" layout="absolute" title="用戶登錄">  
    2.   
    3.         <mx:Script>  
    4.                 <![CDATA[  
    5.  
    6.                                     [Inspectable]  
    7.  
    8.                                     public var status : String;  
    9.  
    10.                 ]]>  
    11.         </mx:Script>  
    12.   
    13.         <mx:Form width="248" height="100" label="Button" x="10" y="10">  
    14.   
    15.                 <mx:FormItem label="用戶名" fontSize="12">  
    16.                         <mx:TextInput id="username" width="158" height="28" fontSize="15" textAlign="left"/>  
    17.                 </mx:FormItem>  
    18.   
    19.                 <mx:FormItem label="密碼" fontSize="12">  
    20.                         <mx:TextInput id="password" width="159" height="30" fontSize="15" textAlign="left"  
    21.                                 displayAsPassword="true"/>  
    22.                 </mx:FormItem>  
    23.   
    24.         </mx:Form>  
    25.   
    26.         <mx:Button id="loginbtn" label="登錄" textAlign="center" fontSize="12" x="190" y="118"/>  
    27.   
    28. </mx:TitleWindow>  
    <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="286" height="208" layout="absolute" title="用戶登錄">
    <mx:Script>
    <![CDATA[
    [Inspectable]
    public var status : String;
    ]]>
    </mx:Script>
    <mx:Form width="248" height="100" label="Button" x="10" y="10">
    <mx:FormItem label="用戶名" fontSize="12">
    <mx:TextInput id="username" width="158" height="28" fontSize="15" textAlign="left"/>
    </mx:FormItem>
    <mx:FormItem label="密碼" fontSize="12">
    <mx:TextInput id="password" width="159" height="30" fontSize="15" textAlign="left"
    displayAsPassword="true"/>
    </mx:FormItem>
    </mx:Form>
    <mx:Button id="loginbtn" label="登錄" textAlign="center" fontSize="12" x="190" y="118"/>
    </mx:TitleWindow>
     

    首先我們加入一個屬性 status ,修飾這個屬性的元數據標簽 [ Inspectable ] 的意思是,叫編譯器和 Flex Builder 可以看到這個屬性,并自動提示:

    加入自定義事件:

     

    首先用元數據標簽給 CLogin 添加自定義事件:

    示例代碼 CLogin.mxml

    Xml代碼 復制代碼
    1. <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="286" height="208" layout="absolute" title="用戶登錄">  
    2.   
    3.         <mx:Metadata>  
    4.   
    5.                 [Event("btnClicked")]   
    6.   
    7.         </mx:Metadata>  
    8.   
    9.          <mx:Script>  
    10.   
    11.                  <![CDATA[  
    12.  
    13.                        [Inspectable]  
    14.  
    15.                        public var status : String;  
    16.  
    17.                  ]]>  
    18.          </mx:Script>  
    19.   
    20.          <mx:Form width="248" height="100" label="Button" x="10" y="10">  
    21.   
    22.                  <mx:FormItem label="用戶名" fontSize="12">  
    23.                          <mx:TextInput id="username" width="158" height="28" fontSize="15" textAlign="left"/>  
    24.                  </mx:FormItem>  
    25.   
    26.                  <mx:FormItem label="密碼" fontSize="12">  
    27.                          <mx:TextInput id="password" width="159" height="30" fontSize="15" textAlign="left"  
    28.                                  displayAsPassword="true"/>  
    29.                  </mx:FormItem>  
    30.   
    31.           </mx:Form>  
    32.   
    33.           <mx:Button id="loginbtn" label="登錄" textAlign="center" fontSize="12" x="190" y="118"/>  
    34.   
    35. </mx:TitleWindow>  
    <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="286" height="208" layout="absolute" title="用戶登錄">
    <mx:Metadata>
    [Event("btnClicked")]
    </mx:Metadata>
    <mx:Script>
    <![CDATA[
    [Inspectable]
    public var status : String;
    ]]>
    </mx:Script>
    <mx:Form width="248" height="100" label="Button" x="10" y="10">
    <mx:FormItem label="用戶名" fontSize="12">
    <mx:TextInput id="username" width="158" height="28" fontSize="15" textAlign="left"/>
    </mx:FormItem>
    <mx:FormItem label="密碼" fontSize="12">
    <mx:TextInput id="password" width="159" height="30" fontSize="15" textAlign="left"
    displayAsPassword="true"/>
    </mx:FormItem>
    </mx:Form>
    <mx:Button id="loginbtn" label="登錄" textAlign="center" fontSize="12" x="190" y="118"/>
    </mx:TitleWindow>

          前面提到, MXML 相當于一個類,那么 mx:Metadata 標簽就相當于給這個 CLogin 類加上元數據標簽。

    標簽為事件標簽,內容為 [ Event ( "btnClicked" )] ,意思是自定義事件,名稱為 btnClicked

    然后我們給 CLogin 的登錄按鈕加入 click 事件:

    Xml代碼 復制代碼
    1. <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="286" height="208" layout="absolute" title="用戶登錄">  
    2.   
    3.         <mx:Metadata>  
    4.   
    5.                 [Event("btnClicked")]   
    6.   
    7.         </mx:Metadata>  
    8.   
    9.         <mx:Script>  
    10.                 <![CDATA[  
    11.  
    12.                        [Inspectable]  
    13.  
    14.                        public var status : String;  
    15.  
    16.                        private function login (): void {  
    17.  
    18.                              dispatchEvent(new Event("btnClicked"));  
    19.  
    20.                         }  
    21.  
    22.                  ]]>  
    23.         </mx:Script>  
    24.   
    25.         <mx:Form width="248" height="100" label="Button" x="10" y="10">  
    26.   
    27.                 <mx:FormItem label="用戶名" fontSize="12">  
    28.                         <mx:TextInput id="username" width="158" height="28" fontSize="15" textAlign="left"/>  
    29.                 </mx:FormItem>  
    30.   
    31.                 <mx:FormItem label="密碼" fontSize="12">  
    32.                         <mx:TextInput id="password" width="159" height="30" fontSize="15" textAlign="left"  
    33.                                 displayAsPassword="true"/>  
    34.                 </mx:FormItem>  
    35.   
    36.          </mx:Form>  
    37.   
    38.          <mx:Button id="loginbtn" click="login()" label="登錄" textAlign="center" fontSize="12" x="190" y="118"/>  
    39.   
    40. </mx:TitleWindow>  
    <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="286" height="208" layout="absolute" title="用戶登錄">
    <mx:Metadata>
    [Event("btnClicked")]
    </mx:Metadata>
    <mx:Script>
    <![CDATA[
    [Inspectable]
    public var status : String;
    private function login (): void {
    dispatchEvent(new Event("btnClicked"));
    }
    ]]>
    </mx:Script>
    <mx:Form width="248" height="100" label="Button" x="10" y="10">
    <mx:FormItem label="用戶名" fontSize="12">
    <mx:TextInput id="username" width="158" height="28" fontSize="15" textAlign="left"/>
    </mx:FormItem>
    <mx:FormItem label="密碼" fontSize="12">
    <mx:TextInput id="password" width="159" height="30" fontSize="15" textAlign="left"
    displayAsPassword="true"/>
    </mx:FormItem>
    </mx:Form>
    <mx:Button id="loginbtn" click="login()" label="登錄" textAlign="center" fontSize="12" x="190" y="118"/>
    </mx:TitleWindow>

          在按鈕被單擊 (click) 的時候,我們設定執行了 login 方法, login 方法執行命令 dispatchEvent( new Event( "btnClicked" )) 意思是 dispatchEvent 發送事 件通知,通知組件你自定義的 btnClicked 事件已經觸發了。

    到這里,我們通過自定義組件 CLogin 的登錄按鈕來觸發 btnClicked 事件已經完成。

    使用自定義事件:

    這樣,我們在主程序里就可以利用這個事件了:

    示例代碼 Hello.mxml

    Xml代碼 復制代碼
    1. <?xml version="1.0" encoding="utf-8"?>  
    2.   
    3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:widget="*">  
    4.   
    5.     <mx:Script>  
    6.   
    7.           <![CDATA[  
    8.  
    9.                 import mx.controls.Alert;  
    10.  
    11.                 private function btnClick() : void {  
    12.  
    13.                       Alert.show("test","Test");  
    14.  
    15.                 }  
    16.  
    17.   
    18.  
    19.                 private function btnClickHandler(event: Event) : void {  
    20.  
    21.                       Alert.show("Event btnClicked Called");  
    22.  
    23.                 }  
    24.  
    25.           ]]>  
    26.   
    27.     </mx:Script>  
    28.   
    29.     <mx:Button id="bb" x="107" y="37" label="Button" click="btnClick()"/>  
    30.   
    31.     <widget:CLogin btnClicked="btnClickHandler(event)" x="107" y="94" width="204" height="117">  
    32.   
    33.     </widget:CLogin>  
    34.   
    35. </mx:Application>  
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:widget="*">
    <mx:Script>
    <![CDATA[
    import mx.controls.Alert;
    private function btnClick() : void {
    Alert.show("test","Test");
    }
    private function btnClickHandler(event: Event) : void {
    Alert.show("Event btnClicked Called");
    }
    ]]>
    </mx:Script>
    <mx:Button id="bb" x="107" y="37" label="Button" click="btnClick()"/>
    <widget:CLogin btnClicked="btnClickHandler(event)" x="107" y="94" width="204" height="117">
    </widget:CLogin>
    </mx:Application>

          這樣,一但 CLogin 組件里的登錄按鈕被單擊就會觸發 btnClicked 事件,從而執行主程序 的 btnClickHandler 方法,彈出提示框:Event btnClicked Called

    加入自定義效果:

         效果是與事件不可分割的,比如之前的例子, showEffect 是控件的顯示來出來,也就是說 visible 變為 true 會觸發 showEffect 所設定效果。那么自定義效果也是一樣,與事件緊密聯系在一起,比如 btnClicked 事件發生的時候要產生某種自定義效果,則在 CLogin.mxml 中添加效果標簽:

    Xml代碼 復制代碼
    1. <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="286" height="208" layout="absolute" title="用戶登錄">  
    2.   
    3.         <mx:Metadata>  
    4.   
    5.                 [Event("btnClicked")]   
    6.   
    7.                 [Effect(name="btnClickedEffect", event="btnClicked")]   
    8.   
    9.         </mx:Metadata>  
    10.   
    11.         <mx:Script>  
    12.                 <![CDATA[  
    13.  
    14.                         [Inspectable]  
    15.  
    16.                         public var status : String;  
    17.  
    18.                         private function login (): void {  
    19.  
    20.                               dispatchEvent(new Event("btnClicked"));  
    21.  
    22.                         }  
    23.  
    24.                   ]]>  
    25.         </mx:Script>  
    26.   
    27.         <mx:Form width="248" height="100" label="Button" x="10" y="10">  
    28.   
    29.                 <mx:FormItem label="用戶名" fontSize="12">  
    30.                         <mx:TextInput id="username" width="158" height="28" fontSize="15" textAlign="left"/>  
    31.                 </mx:FormItem>  
    32.   
    33.                 <mx:FormItem label="密碼" fontSize="12">  
    34.                         <mx:TextInput id="password" width="159" height="30" fontSize="15" textAlign="left"  
    35.                                 displayAsPassword="true"/>  
    36.                 </mx:FormItem>  
    37.   
    38.         </mx:Form>  
    39.   
    40.         <mx:Button id="loginbtn" click="login()" label="登錄" textAlign="center" fontSize="12" x="190" y="118"/>  
    41.   
    42. </mx:TitleWindow>  
    <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="286" height="208" layout="absolute" title="用戶登錄">
    <mx:Metadata>
    [Event("btnClicked")]
    [Effect(name="btnClickedEffect", event="btnClicked")]
    </mx:Metadata>
    <mx:Script>
    <![CDATA[
    [Inspectable]
    public var status : String;
    private function login (): void {
    dispatchEvent(new Event("btnClicked"));
    }
    ]]>
    </mx:Script>
    <mx:Form width="248" height="100" label="Button" x="10" y="10">
    <mx:FormItem label="用戶名" fontSize="12">
    <mx:TextInput id="username" width="158" height="28" fontSize="15" textAlign="left"/>
    </mx:FormItem>
    <mx:FormItem label="密碼" fontSize="12">
    <mx:TextInput id="password" width="159" height="30" fontSize="15" textAlign="left"
    displayAsPassword="true"/>
    </mx:FormItem>
    </mx:Form>
    <mx:Button id="loginbtn" click="login()" label="登錄" textAlign="center" fontSize="12" x="190" y="118"/>
    </mx:TitleWindow>

    使用自定義效果:

                           

    示例代碼 Hello.mxml

    Xml代碼 復制代碼
    1. <?xml version="1.0" encoding="utf-8"?>  
    2.   
    3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:widget="*">  
    4.   
    5.     <mx:Script>  
    6.   
    7.           <![CDATA[  
    8.  
    9.                 import mx.controls.Alert;  
    10.  
    11.                 private function btnClick() : void {  
    12.  
    13.                       Alert.show("test","Test");  
    14.  
    15.                 }  
    16.  
    17.   
    18.  
    19.                 private function btnClickHandler(event: Event) : void {  
    20.  
    21.                       Alert.show("Event btnClicked Called");  
    22.  
    23.                 }  
    24.  
    25.           ]]>  
    26.   
    27.     </mx:Script>  
    28.   
    29.     <mx:Button id="bb" x="107" y="37" label="Button" click="btnClick()"/>  
    30.   
    31.     <widget:CLogin btnClickedEffect="myEffect" btnClicked="btnClickHandler(event)" x="107" y="94" width="204" height="117">  
    32.   
    33.     </widget:CLogin>  
    34.   
    35.     
    36.   
    37.     <mx:Blur id="myEffect" blurXFrom="100" blurYFrom="100" blurXTo="0" blurYTo="0"/>  
    38.   
    39. </mx:Application>  
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:widget="*">
    <mx:Script>
    <![CDATA[
    import mx.controls.Alert;
    private function btnClick() : void {
    Alert.show("test","Test");
    }
    private function btnClickHandler(event: Event) : void {
    Alert.show("Event btnClicked Called");
    }
    ]]>
    </mx:Script>
    <mx:Button id="bb" x="107" y="37" label="Button" click="btnClick()"/>
    <widget:CLogin btnClickedEffect="myEffect" btnClicked="btnClickHandler(event)" x="107" y="94" width="204" height="117">
    </widget:CLogin>
    <mx:Blur id="myEffect" blurXFrom="100" blurYFrom="100" blurXTo="0" blurYTo="0"/>
    </mx:Application>
     

    加入自定義樣式:

    As3代碼 復制代碼
    1. package   
    2. {   
    3.     import mx.core.UIComponent;   
    4.        
    5.     [Style(name="borderColor",type="uint",format="Color",inherit="no")]   
    6.        
    7.     [Style(name="fillColor",type="uint",format="Color",inherit="no")]   
    8.        
    9.     public class CustomCircle extends UIComponent    
    10.     {   
    11.         public function CustomCircle()   
    12.         {   
    13.             super();   
    14.         }   
    15.            
    16.         override protected function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void    
    17.         {   
    18.             super.updateDisplayList(unscaledWidth, unscaledHeight);   
    19.                
    20.             graphics.lineStyle(1, getStyle("borderColor"), 1.0);   
    21.                
    22.             graphics.beginFill(getStyle("fillColor"),1.0);   
    23.                
    24.             graphics.drawEllipse(0,0,100,100);   
    25.         }   
    26.     }   
    27. }  
    package
    {
    import mx.core.UIComponent;
    [Style(name="borderColor",type="uint",format="Color",inherit="no")]
    [Style(name="fillColor",type="uint",format="Color",inherit="no")]
    public class CustomCircle extends UIComponent
    {
    public function CustomCircle()
    {
    super();
    }
    override protected function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void
    {
    super.updateDisplayList(unscaledWidth, unscaledHeight);
    graphics.lineStyle(1, getStyle("borderColor"), 1.0);
    graphics.beginFill(getStyle("fillColor"),1.0);
    graphics.drawEllipse(0,0,100,100);
    }
    }
    }

    之前舉的例子都是 MXML 的,那么這次就換為 AS 的例子,事實上都是相等的,如果是 MXML 的話則在 mx:Metadata m 內寫入元數據標記 [ Style (name="fillColor",type="uint",format="Color",inherit="no")] 等。

    使用自定義樣式:

    Xml代碼 復制代碼
    1. <?xml version="1.0" encoding="utf-8"?>  
    2.   
    3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  
    4.   
    5. xmlns:comps="*"  
    6.   
    7. backgroundColor="#FFFFFF">  
    8.   
    9.     <mx:Panel title="Style Sample" width="200" height="200"  
    10.        
    11.         paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom=" 10" layout="horizontal">  
    12.        
    13.         <comps:CustomCircle borderColor="#000000" fillColor="#FF0000" />  
    14.        
    15.     </mx:Panel>  
    16.   
    17. </mx:Application>  
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:comps="*"
    backgroundColor="#FFFFFF">
    <mx:Panel title="Style Sample" width="200" height="200"
    paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom=" 10" layout="horizontal">
    <comps:CustomCircle borderColor="#000000" fillColor="#FF0000" />
    </mx:Panel>
    </mx:Application>
     

    posted on 2009-12-24 16:06 北國狼人的BloG 閱讀(456) 評論(0)  編輯  收藏

    只有注冊用戶登錄后才能發表評論。


    網站導航:
     
    主站蜘蛛池模板: 2015日韩永久免费视频播放| 中文字幕无线码免费人妻| 亚洲免费二区三区| 亚洲欧洲免费视频| 2015日韩永久免费视频播放| 亚洲成年人免费网站| 毛片免费全部免费观看| 亚洲AV香蕉一区区二区三区| 日本不卡高清中文字幕免费| 粉色视频成年免费人15次| 亚洲精品天堂成人片?V在线播放| 日本特黄特色AAA大片免费| 国产精品亚洲二区在线观看| 久久精品免费大片国产大片| 久久91亚洲精品中文字幕| 中文字幕免费在线观看| 亚洲一区精彩视频| 国产yw855.c免费视频| 一二三区免费视频| 亚洲国产精品成人精品无码区在线| 国产综合亚洲专区在线| 大地资源在线资源免费观看| 亚洲天天在线日亚洲洲精| 30岁的女人韩剧免费观看| 亚洲国产模特在线播放| 性xxxx视频播放免费| 免费的黄色的网站| 亚洲欧洲日产国码久在线观看| 无码中文在线二区免费| 搜日本一区二区三区免费高清视频| 亚洲国产成人片在线观看 | 4338×亚洲全国最大色成网站| 中国一级毛片视频免费看| 亚洲黄色网址在线观看| 成全影视免费观看大全二| 一级做性色a爰片久久毛片免费| 亚洲黄色在线观看视频| 免费久久精品国产片香蕉| 999久久久免费精品播放| 国产亚洲成在线播放va| 亚洲成人中文字幕|