Flex 3在MXML中构建自定义组件

创建一个简单的自定义组件

我们可以在一个MXML文件中创建一个MXML组件，这个文件的名字就变成了这个自定义组件的标签名。比如：一个文件名字叫做CountryComboBox.mxml，使用标签<CountryComboBox>就可以定义这个组件。

一个MXML组件的根标签，是一个组件的标签，可以是Flex组件也可以是其他MXML组件。根标签指定http://www.adobe.com/2006/mxml作为命名空间。例如，下边的MXML组件扩展标准的Flex ComboBox控件。可以把自定义组件的文件放在项目的根目录中，也可以放在一个子目录中。Adobe推荐后一种方法作为最佳实践。在这个例子中自定义组件被放置到componects文件夹中。在主程序的MXML文件中，映射componects文件夹到custom命名空间，使用全标签名<custom:CountryComboBox>来应用这个组件。

提示：在现实世界中，你可能看到自定义组件被放置在公司域名倒叙的目录结构中。(比如, xmlns:custom="com.adobe.quickstarts.customcomponents.*")。这个习惯可以避免不同制造商在命名组件名称相同时导致的冲突。例如，两个组件库可能各自包含Map组件，如果一个com.vendorA.*一个在com.vendorB.*那么他们就不会冲突

例子

components/CountryComboBox.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:dataProvider>  

        <mx:String>United States</mx:String>

        <mx:String>United Kingdom</mx:String>

        <!-- Add all other countries. -->
    </mx:dataProvider>

</mx:ComboBox>

主文件

<?xml version="1.0" encoding="utf-8"?>
<mx:Application

    xmlns:mx="http://www.adobe.com/2006/mxml"

    xmlns:custom="components.*"

    width="220" height="115"

>
    <custom:CountryComboBox/>

</mx:Application>

引用一个自定义组件的属性和方法
CountryComboBox.mxml指定ComboBox作为其根标记，那么你可以引用所有ComboBox的属性和方法，在自定义组件的MXML标记中，或者在<mx:Script>标记中的ActionScript中也可以。例如，下边的例子为自定义组件指定了rowCount属性和一个关闭事件的监听器。

提示：在Flex中，MXML文件在编译成SWF文件之前，先编译成ActionScript类文件。当你为自定义的MXML组件指定根标记后，你实际上使你的自定义组件类扩展了根标记的组件类。这就是为什么自定义组件继承了根标记组件的方法和属性。

在下边的例子中，CountryComboBox MXML文件编译为一个class文件。Flex的命名习俗是组件名首字母大些，也对应类名。

例子

components/CountryComboBox.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:dataProvider>  

        <mx:String>United States</mx:String>

        <mx:String>United Kingdom</mx:String>

        <!-- Add all other countries. -->
    </mx:dataProvider>

</mx:ComboBox>

主应用程序的MXML文件

<?xml version="1.0" encoding="utf-8"?>

<mx:Application

    xmlns:mx="http://www.adobe.com/2006/mxml"

    xmlns:custom="components.*"

    width="270" height="170"

>
    <mx:Script>

        <![CDATA[
           import flash.events.Event;
            private function handleCloseEvent(eventObj:Event):void

            {
                status.text = "You selected: /r" + countries.selectedItem as String;

            }  

        ]]>

    </mx:Script>
    <mx:Panel

        title="Custom component inheritance"

        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"
    >

        <custom:CountryComboBox

            id="countries" rowCount="5"

            close="handleCloseEvent(event);"
        />

        <mx:Text id="status" text="Please select a country from the list." width="136"/>

    </mx:Panel>
</mx:Application>

创建一个复合的自定义组件
复合自定义组件中包含多个组件定义。为了创建复合自定义组件，应该指定一个容器，作为根组件，然后添加Flex组件作为其子组件。

下边例子中的AddressForm组件通过将Form容器作为根组件创建了一个地址表单。然后定义了几个Form容器的子组件。这些子组件中包含其他自定义组件—CountryComboBox。

例子
components/AddressForm.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Form
    xmlns:mx="http://www.adobe.com/2006/mxml"

    xmlns:custom="components.*"
>
   <mx:FormItem label="Name">
        <mx:TextInput/>
    </mx:FormItem>

    <mx:FormItem label="Street">
        <mx:TextInput/>
    </mx:FormItem>

    <mx:FormItem label="City">
        <mx:TextInput/>

    </mx:FormItem>

    <mx:FormItem label="State/County">
        <mx:TextInput/>
    </mx:FormItem>

    <mx:FormItem label="Country">
        <custom:CountryComboBox/>

    </mx:FormItem>
</mx:Form>

components/CountryComboBox.mxml
<?xml version="1.0" encoding="utf-8"?>

<mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:dataProvider>   
        <mx:String>United States</mx:String>
        <mx:String>United Kingdom</mx:String>

        <!-- Add all other countries... -->
    </mx:dataProvider>
</mx:ComboBox>

Main application MXML file
<?xml version="1.0" encoding="utf-8"?>

<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:custom="components.*"
    viewSourceURL="src/MxmlComponentComposite/index.html"
    width="400" height="290">
    <mx:Panel
        title="Composite component"
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" >
        <custom:AddressForm />
    </mx:Panel>
</mx:Application>

如果自定义组件文件中的根标记包含子组件时，当你在其他MXML文件中引用这个自定义组件标签时，这个标签不能包含子标签。如果你在MXML文件中定义了一个空容器，当你使用这个组件标签时，这个标签就可以包含子标签。

例如，下边的AddressForm的用法是不正确的，不能被编译。

<!-- Incorrect -->

<custom:AddressForm>
    <mx:FormItem label="Post code">
        <mx:TextInput/>
    </mx:FormItem>
</custom:AddressForm>

如果你必须扩展复合标签的功能，可以创建一个以符合组件作为根标记的自定义组件。
注意：这个关于子组件的限制只是在子组件是可视组件的时候起作用。可是组件都是UIComponent组件的子类。你永远都可以向不可视组件中插入标记，比如，ActionScript块，style,effect,fomatters,validator，和其他类型的不可视组件。不管你如何定义的自定义组件。

创建可重用的MXML组件

创建自定义组件的一个公共目标是创建可配置的、可重用的组件。例如，你想要创建一个自定义组件，带有属性、分发事件、定义新的样式属性、有自定义皮肤，或者其他自定义功能。创建自定义组件的一个预期回报是可重用。也就是说，你希望自定义组件紧紧的关联在你的程序中那？还是可以用在多个程序中？

为特定应用程序所编写的紧耦合的组件，经常使它依赖应用程序的结构，变量名，或其他细节。如果你改变应用程序，你可能需要修改紧耦合的组件来反应这种变化。紧耦合的组件如果不重写很难应用到其他应用程序中。

设计一个松耦合的组件来重用，它需要定义明确的接口来指定如何给组件传递信息，和组件如何向应用程序传回结构。

典型的，通过定义松耦合组件的属性，来向它传送信息。属性是通过定义固有的存取器（setter和getter方法）和指定参数的数据类型来实现的。在下边的例子中，CountryComboBox自定义组件定义了useShortName公共属性。这个属性通过get useShortName和set useShortName存取器方法使_useShortName变量暴露。

_useShortNames私有属性前的Inspectable元数据标签，定义了一个属性，这个属性出现在Adobe Flex Builder中的属性提示，和标签内省中。也可以使用这个元数据标签来限制对属性值的访问。

提示：所有公共属性会暴露在MXML的代码提示和属性检查器中。如果你有关于这个属性的额外的信息，能够帮助代码提示或属性检查器（比如枚举值，或只字符串是一个路径），那么也把这些而外信息添加到[Inspectable]元数据中。

MXML代码提示和属性检查器的数据来源是一样的。所以这两个的显示应该是一样的。

另一方面，ActionScript的代码提示是不需要元数据的，所以根据坐在的范围，你一直可以看到适当的代码提示。

Flex Builder 使用标识符（比如public private protected static）加上正确的上下文从而决定ActionScope的代码提示。

定义返回信息到主程序的组件的最佳实践是设计组件为发送包含返回值的事件。那样，主程序就能够定义事件处理器，来处理时间并进行适当的动作。也可以在数据绑定中使用事件。下边的例子中，使用Bindable元数据标签，使userShortName作为一个绑定的属性。useShortNames属性的seter方法发送改变事件，通过Flex Framework来实现数据绑定起作用。

例子
components/CountryComboBox.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            private var countryArrayShort:Array = ["US", "UK"];
            private var countryArrayLong:Array = ["United States", "United Kingdom"];
       
            // Determines display state. The inspectable metadata tag

            // is used by Flex Builder 2
            [Inspectable(defaultValue=true)]
            private var _useShortNames:Boolean = true;
       
            // Implicit setter

            public function set useShortNames (state:Boolean):void
            {

                // Call method to set the dataProvider based on the name length.
                _useShortNames = state;
       
                if (state)
                {
                    this.dataProvider = countryArrayShort;
                }

                else
                {
                    this.dataProvider = countryArrayLong;
                }
               
                // Dispatch an event when the value changes
                // (used in data binding.)

                dispatchEvent(new Event("changeUseShortNames"));
            }
           
            // Allow other components to bind to this property
            [Bindable(event="changeUseShortNames")]

            public function get useShortNames():Boolean
            {
                return _useShortNames;
            }               
         ]]>

    </mx:Script>
</mx:ComboBox>

应用程序MXML文件

<?xml version="1.0" encoding="utf-8"?>

<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:custom="components.*"
    viewSourceURL="src/MxmlComponentAdvanced/index.html"
    width="260" height="200"

>
    <mx:Panel
        title="Advanced custom components"
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"

    >
        <!-- Set a custom property on a custom component -->
        <custom:CountryComboBox
            id="countries"
            useShortNames="false"

        />
       
        <!--
            Use data binding to display the latest state
            of the property.
        -->
        <mx:Label text="useShortNames = {countries.useShortNames}"/>   
       
        <mx:ControlBar horizontalAlign="right">

            <mx:Button
                label="Toggle Display"
                click="countries.useShortNames = !countries.useShortNames;"
            />

        </mx:ControlBar>
    </mx:Panel>
</mx:Application>