Flex开发自定义控件(基础篇)

前期准备：

点击File菜单 -> New -> MXML Component，然后弹出一个对话框。

在对话框中输入组件名，选择此组件继承的类型，如：Canvas，DataGrid，ComboBox …… 等。

然后选择组件的大小，点击Finish即可。

 

关于组件继承的类型，假设Based on Canvas，那么组件的根元素即为mx:Canvas，此元素的含义为空白面板，那么设计人员可以任意在这个面板容器内放置任何东西，就像开发主程序一样。那么此组件类似一个容器。

如果Based on ComboBox，那么根元素即为mx:ComboBox，此元素的含义为下拉框，那么设计人员可以在下拉框的的内部任意定制内容或代码，那么此组件定制了一个下拉框。

例，登录组件：

 

            制作组件：

                        首先按照上面的步骤新建一个组件，名为CLogin.mxml，Based on TitleWindow。TitleWindow元素代表有标题的窗口。

                        然后切换到Design视图，选择这个TitleWindow窗口，在属性框里编辑标题（Title属性），输入“用户登录”。

                        此时的代码大体如下：

 

<?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），然后添加按钮以便提交，此时代码如下：

 

<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 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 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：

 

<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="