flex自定义组件

前期准备：
点击File菜单->New->MXMLComponent，然后弹出一个对话框。
在对话框中输入组件名，选择此组件继承的类型，如：Canvas，DataGrid，ComboBox……等。
然后选择组件的大小，点击Finish即可。

关于组件继承的类型，假设BasedonCanvas，那么组件的根元素即为mx:Canvas，此元素的含义为空白面板，那么设计人员可以任意在这个面板容器内放置任何东西，就像开发主程序一样。那么此组件类似一个容器。
如果BasedonComboBox，那么根元素即为mx:ComboBox，此元素的含义为下拉框，那么设计人员可以在下拉框的的内部任意定制内容或代码，那么此组件定制了一个下拉框。
例，登录组件：

制作组件：
首先按照上面的步骤新建一个组件，名为CLogin.mxml，BasedonTitleWindow。TitleWindow元素代表有标题的窗口。
然后切换到Design视图，选择这个TitleWindow窗口，在属性框里编辑标题（Title属性），输入“用户登录”。
此时的代码大体如下：

<?xmlversion="1.0"encoding="utf-8"?>
<mx:TitleWindowxmlns:mx="http://www.adobe.com/2006/mxml"width="286"height="208"layout="absolute"title="用户登录">
</mx:TitleWindow>

然后我们加入Form控件并填入内容（FormItem），然后添加按钮以便提交，此时代码如下：

<mx:TitleWindowxmlns:mx="http://www.adobe.com/2006/mxml"width="286"height="208"layout="absolute"title="用户登录">
<mx:Formwidth="248"height="100"label="Button"x="10"y="10">
<mx:FormItemlabel="用户名"fFONT-SIZE:10pt;COLOR:#990000;FONT-FAMILY:'couriernew'">12">
<mx:TextInputid="username"width="158"height="28"fFONT-SIZE:10pt;COLOR:#990000;FONT-FAMILY:'couriernew'">15"textAlign="left"/>
</mx:FormItem>

<mx:FormItemlabel="密码"fFONT-SIZE:10pt;COLOR:#990000;FONT-FAMILY:'couriernew'">12">
<mx:TextInputid="password"width="159"height="30"fFONT-SIZE:10pt;COLOR:#990000;FONT-FAMILY:'couriernew'">15"textAlign="left"
displayAsPassword="true"/>
</mx:FormItem>
</mx:Form>
<mx:Buttonid="loginbtn"label="登录"textAlign="center"fFONT-SIZE:10pt;COLOR:#990000;FONT-FAMILY:'couriernew'">12"x="190"y="118"/>
</mx:TitleWindow>

上面的登录只是布局，没加入事件处理程序，但是这已经可以算是一个登录组件了（虽然只能看不能用，呵呵）
组件制作完毕，然后就可以使用他了

使用组件：

打开主程序，进入Design视图，查看左下角的组件浏览器。
你会发现在Custom下多出来一个CLogin来，把它拖入设计面板，哈，登录组件就显示在面板上了，就这么简单。
代码可能会如下：
<?xmlversion="1.0"encoding="utf-8"?>
<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"xmlns:ns1="*">
<mx:Script>
<![CDATA[
importmx.controls.Alert;
privatefunctionbtnClick():void{
Alert.show("test","Test");
}
]]>
</mx:Script>
<mx:Buttonid="bb"x="107"y="37"label="Button"click="btnClick()"/>
<ns1:CLoginx="107"y="94"width="204"height="117">
</ns1:CLogin>
</mx:Application>

修改命名空间xmlns:ns1变成你想要的比如xmlns:widget，最后的代码：

示例代码：Hello.mxml：

<?xmlversion="1.0"encoding="utf-8"?>
<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"xmlns:widget="*">
<mx:Script>
<![CDATA[
importmx.controls.Alert;
privatefunctionbtnClick():void{
Alert.show("test","Test");
}
]]>
</mx:Script>
<mx:Buttonid="bb"x="107"y="37"label="Button"click="btnClick()"/>
<widget:CLoginx="107"y="94"width="204"height="117">
</widget:CLogin>
</mx:Application>

好了，一切完成。

自定义组件的属性：

看到这里大家也都应该清楚地知道，大部分Flex控件都有事件属性，比如click，move等，自定义组件会继承他们Basedon的元素的属性和事件，那么我们的CLogin组件（也可以称之为自定义元素）就会继承mx:TitleWindow的全部可以继承的属性（属性、事件、特效、样式等等），那么它的特有属性如何来做呢？下面我们来为其加上其特有属性。

加入自定义属性：

示例代码CLogin.mxml：

<mx:TitleWindowxmlns:mx="http://www.adobe.com/2006/mxml"width="286"height="208"layout="absolute"title="用户登录">
<mx:Script>
<![CDATA[
[Inspectable]
publicvarstatus:String;
]]>
</mx:Script>
<mx:Formwidth="248"height="100"label="Button"x="10"y="10">
<mx:FormItemlabel="用户名"fFONT-SIZE:10pt;COLOR:#990000;FONT-FAMILY:'couriernew'">12">
<mx:TextInputid="username"width="158"height="28"fFONT-SIZE:10pt;COLOR:#990000;FONT-FAMILY:'couriernew'">15"textAlign="left"/>
</mx:FormItem>

<mx:FormItemlabel="密码"fFONT-SIZE:10pt;COLOR:#990000;FONT-FAMILY:'couriernew'">12">
<mx:TextInputid="password"width="159"height="30"fFONT-SIZE:10pt;COLOR:#990000;FONT-FAMILY:'couriernew'">15"textAlign="left"
displayAsPassword="true"/>
</mx:FormItem>
</mx:Form>
<mx:Buttonid="loginbtn"label="登录"textAlign="center"fFONT-SIZE:10pt;COLOR:#990000;FONT-FAMILY:'couriernew'">12"x="190"y="118"/>
</mx:TitleWindow>

首先我们加入一个属性status，修饰这个属性的元数据标签[Inspectable]的意思是，叫编译器和FlexBuilder可以看到这个属性，并自动提示：


加入自定义事件：

首先用元数据标签给CLogin添加自定义事件：

示例代码CLogin.mxml：
<mx:TitleWindowxmlns:mx="http://www.adobe.com/2006/mxml"width="286"height="208"layout="absolute"title="用户登录">
<mx:Metadata>
[Event("btnClicked")]
</mx:Metadata>
<mx:Script>
<![CDATA[
[Inspectable]
publicvarstatus:String;
]]>
</mx:Script>
<mx:Formwidth="248"height="100"label="Button"x="10"y="10">
<mx:FormItemlabel="用户名"fFONT-SIZE:10pt;COLOR:#990000;FONT-FAMILY:'couriernew'">12">
<mx:TextInputid="username"width="158"height="28"fFONT-SIZE:10pt;COLOR:#990000;FONT-FAMILY:'couriernew'">15"textAlign="left"/>
</mx:FormItem>

<mx:FormItemlabel="密码"fFONT-SIZE:10pt;COLOR:#990000;FONT-FAMILY:'couriernew'">12">
<mx:TextInputid="password"width="159"height="30"fFONT-SIZE:10pt;COLOR:#990000;FONT-FAMILY:'couriernew'">15"textAlign="left"
displayAsPassword="true"/>
</mx:FormItem>
</mx:Form>
<mx:Buttonid="loginbtn"label="登录"textAlign="center"fFONT-SIZE:10pt;COLOR:#990000;FONT-FAMILY:'couriernew'">12"x="190"y="118"/>
</mx:TitleWindow>

前面提到，MXML相当于一个类，那么mx:Metadata标签就相当于给这个CLogin类加上元数据标签。
标签为事件标签，内容为[Event("btnClicked")]，意思是自定义事件，名称为btnClicked。

然后我们给CLogin的登录按钮加入click事件：

<mx:TitleWindowxmlns:mx="http://www.adobe.com/2006/mxml"width="286"height="208"layout="absolute"title="用户登录">
<mx:Metadata>
[Event("btnClicked")]
</mx:Metadata>
<mx:Script>
<![CDATA[
[Inspectable]
publicvarstatus:String;
privatefunctionlogin():void{
dispatchEvent(newEvent("btnClicked"));
}
]]>
</mx:Script>
<mx:Formwidth="248"height="100"label="Button"x="10"y="10">
<mx:FormItemlabel="用户名"fFONT-SIZE:10pt;COLOR:#990000;FONT-FAMILY:'couriernew'">12">
<mx:TextInputid="username"width="158"height="28"fFONT-SIZE:10pt;COLOR:#990000;FONT-FAMILY:'couriernew'">15"textAlign="left"/>
</mx:FormItem>

<mx:FormItemlabel="密码"fFONT-SIZE:10pt;COLOR:#990000;FONT-FAMILY:'couriernew'">12">
<mx:TextInputid="password"width="159"height="30"fFONT-SIZE:10pt;COLOR:#990000;FONT-FAMILY:'couriernew'">15"textAlign="left"
displayAsPassword="true"/>
</mx:FormItem>
</mx:Form>
<mx:Buttonid="loginbtn"click="login()"label="登录"textAlign="center"fFONT-SIZE:10pt;COLOR:#990000;FONT-FAMILY:'couriernew'">12"x="190"y="118"/>
</mx:TitleWindow>

在按钮被单击(click)的时候，我们设定执行了login方法，login方法执行命令dispatchEvent(newEvent("btnClicked"))意思是dispatchEvent发送事件通知，通知组件你自定义的btnClicked事件已经触发了。
到这里，我们通过自定义组件CLogin的登录按钮来触发btnClicked事件已经完成。

使用自定义事件：

这样，我们在主程序里就可以利用这个事件了：

示例代码Hello.mxml：

<?xmlversion="1.0"encoding="utf-8"?>
<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"xmlns:widget="*">
<mx:Script>
<![CDATA[
importmx.controls.Alert;
privatefunctionbtnClick():void{
Alert.show("test","Test");
}

privatefunctionbtnClickHandler(event:Event):void{
Alert.show("EventbtnClickedCalled");
}
]]>
</mx:Script>
<mx:Buttonid="bb"x="107"y="37"label="Button"click="btnClick()"/>
<widget:CLoginbtnClicked="btnClickHandler(event)"x="107"y="94"width="204"height="117">
</widget:CLogin>
</mx:Application>

这样，一但CLogin组件里的登录按钮被单击就会触发btnClicked事件，从而执行主程序的btnClickHandler方法，弹出提示框：EventbtnClickedCalled

加入自定义效果：

效果是与事件不可分割的，比如之前的例子，showEffect是控件的显示来出来，也就是说visible变为true会触发showEffect所设定效果。那么自定义效果也是一样，与事件紧密联系在一起，比如btnClicked事件发生的时候要产生某种自定义效果，则在CLogin.mxml中添加效果标签：
<mx:TitleWindowxmlns: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]
publicvarstatus:String;
privatefunctionlogin():void{
dispatchEvent(newEvent("btnClicked"));
}
]]>
</mx:Script>
<mx:Formwidth="248"height="100"label="Button"x="10"y="10">
<mx:FormItemlabel="用户名"fFONT-SIZE:10pt;COLOR:#990000;FONT-FAMILY:'couriernew'">12">
<mx:TextInputid="username"width="158"height="28"fFONT-SIZE:10pt;COLOR:#990000;FONT-FAMILY:'couriernew'">15"textAlign="left"/>
</mx:FormItem>

<mx:FormItemlabel="密码"fFONT-SIZE:10pt;COLOR:#990000;FONT-FAMILY:'couriernew'">12">
<mx:TextInputid="password"width="159"height="30"fFONT-SIZE:10pt;COLOR:#990000;FONT-FAMILY:'couriernew'">15"textAlign="left"
displayAsPassword="true"/>
</mx:FormItem>
</mx:Form>
<mx:Buttonid="loginbtn"click="login()"label="登录"textAlign="center"fFONT-SIZE:10pt;COLOR:#990000;FONT-FAMILY:'couriernew'">12"x="190"y="118"/>
</mx:TitleWindow>

使用自定义效果：

示例代码Hello.mxml：

<?xmlversion="1.0"encoding="utf-8"?>
<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"xmlns:widget="*">
<mx:Script>
<![CDATA[
importmx.controls.Alert;
privatefunctionbtnClick():void{
Alert.show("test","Test");
}

privatefunctionbtnClickHandler(event:Event):void{
Alert.show("EventbtnClickedCalled");
}
]]>
</mx:Script>
<mx:Buttonid="bb"x="107"y="37"label="Button"click="btnClick()"/>
<widget:CLoginbtnClickedEffect="myEffect"btnClicked="btnClickHandler(event)"x="107"y="94"width="204"height="117">
</widget:CLogin>

<mx:Blurid="myEffect"blurXFrom="100"blurYFrom="100"blurXTo="0"blurYTo="0"/>
</mx:Application>

加入自定义样式：

package
{
importmx.core.UIComponent;
[Style(name="borderColor",type="uint",format="Color",inherit="no")]
[Style(name="fillColor",type="uint",format="Color",inherit="no")]
publicclassCustomCircleextendsUIComponent{
publicfunctionCustomCircle(){
super();
}
overrideprotectedfunctionupdateDisplayList(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:Metadatam内写入元数据标记[Style(name="fillColor",type="uint",format="Color",inherit="no")]等。

使用自定义样式：

<?xmlversion="1.0"encoding="utf-8"?>
<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:comps="*"
backgroundColor="#FFFFFF">
<mx:Paneltitle="StyleSample"width="200"height="200"
paddingTop="10"paddingLeft="10"paddingRight="10"paddingBottom="10"layout="horizontal">
<comps:CustomCircleborderColor="#000000"fillColor="#FF0000"/>
</mx:Panel>
</mx:Application>