Flex自定义组件

使用MXML标签定义

主文件Main1.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:MyComp="*" layout="vertical">
  <mx:Style>
    Application{fontSize:14px;}
  </mx:Style>
  <MyComp:MyComp1/>
</mx:Application>

注:xmlns:MyComp="*"自定义命名空间其实很类似于包的概念用来管理组件的。实际当中最好把自己的组件文件分文件夹管理。

组件定义MyComp1.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
  <mx:Script>
    <![CDATA[
      import mx.controls.ComboBox;
      import mx.controls.Alert;
      import mx.events.DropdownEvent;
      private function closeHandler(event:DropdownEvent):void
      {
        //Alert.show((event.currentTarget as ComboBox).selectedLabel);
        Alert.show((event.currentTarget as ComboBox).selectedItem.toString());
      }
    ]]>
  </mx:Script>
  <mx:Label text="城市:" />
        <mx:ComboBox close="closeHandler(event);">
                <mx:dataProvider>        
                        <mx:String>济南</mx:String>
                        <mx:String>威海</mx:String>
                        <mx:String>烟台</mx:String>
                </mx:dataProvider>
        </mx:ComboBox>  
</mx:HBox>

注:组件的文件名就对应着将来使用时的mxml标签名，根标签就是你用来扩展的父类，这里是HBox。在里面this引用的是你的组件类。

使用AS3定义

组件定义MyComp2.as

package mycomp
{
  import flash.events.KeyboardEvent;
  
  import mx.controls.TextArea;

  public class MyComp2 extends TextArea
  {
    public function MyComp2()
    {
      super();
      addEventListener(KeyboardEvent.KEY_DOWN,handleKeyDown);
    }
    private function handleKeyDown(evt:KeyboardEvent):void
    {
      if(evt.ctrlKey && evt.keyCode==90)
      text="";
    }
    
  }
}

注意类名和文件名同，同时包结构也要和目录结构一致。

扩展了TextArea添加了一个事件处理，用户按Ctrl+Z时会清空文本框。

主文件Main2.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:MyComp="mycomp.*" layout="vertical">
  <mx:Style>
    MyComp2{fontSize:14px;}
  </mx:Style>
  <MyComp:MyComp2 id="myTxt" color="#008800" text="这是一段测试用的文本..." />
</mx:Application>

注意名字空间mycomp.*这里很像import mycomp.*;呵呵。

 

注:
我们也可以不改变名字，人采用原来的，如下TextArea.as:

package mycomp { import mx.controls.TextArea; import flash.events.KeyboardEvent; public class TextArea extends mx.controls.TextArea { public function TextArea() { super(); addEventListener(KeyboardEvent.KEY_DOWN,handleKeyDown); } private function handleKeyDown(evt:KeyboardEvent):void { if(evt.ctrlKey && evt.keyCode==90) text=""; } } }

主文件:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:MyComp="mycomp.*" layout="vertical">
  <mx:Style>
    TextArea{fontSize:14px;}
  </mx:Style>
  <MyComp:TextArea id="myTxt" color="#008800" text="这是一段测试用的文本..." />
  <mx:TextArea text="这是系统默认的文本框" />
</mx:Application>