Flex 三快速入门（20）: 构建自定义组件 在ActionScript 中构建组件

Flex 3快速入门（20）: 构建自定义组件 在ActionScript 中构建组件

 

 

引用自定义组件的属性和方法

CountryComboBox类继承了ComboBox类，所以能够在初始化自定义组件的MXML标签中或者在<mx:Script>标签 中的ActionScript中，引用所有属性和方法。下边的例子指定了rowCount属性，并且为自定义组件的close事件指定了监听器。

例子

components/CountryComboBox.as

package components

{

    import mx.controls.ComboBox;

 

    public class CountryComboBox extends ComboBox

    {

        public function CountryComboBox ()

        {

            dataProvider = [ "United States", "United Kingdom" ];

        }

    }

}

应用程序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 above." width="136"/>      

    </mx:Panel>

</mx:Application>

  为自定义组件应用样式

Style 属性定义了一个组件的感观，从字体大小到背景颜色。自定义的ActionScript组件继承了超类的所有样式，所以你也可以使用同样的方式来设置样式。

要在自定义组件中改变样式属性，可以在组件构造器中使用setStyle()方法。这样会应用相同的样式到所有的组件的实例中，但是组件的用户可以在MXML标记中覆盖setStyle()方法设置的样式。所有在组件类文件中为设置的样式均从超类继承。

在下边的例子中，创建了一个PaddedPanel自定义组件，它扩展了Panel组件，并且在组件四周一律使用10像素的边白。使用这个自定义组件，比 每次使用Panel组件都要设置4个样式属性(paddingLeft, paddingRight, paddingTop, and paddingBottom)更简单，也就是说，结果是更少的编码，没有重复劳动。

例子

components/PaddedPanel.as

package components

{

    import mx.containers.Panel;

    public class PaddedPanel extends Panel

    {

        public function PaddedPanel()

        {

            // Call the constructor of the superclass.

            super();

 

            // Give the panel a uniform 10-pixel

            // padding on all four sides.

            setStyle("paddingLeft", 10);

            setStyle("paddingRight", 10);

            setStyle("paddingTop", 10);

            setStyle("paddingBottom", 10);

        }

    }

}

应用程序MXML文件

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

<mx:Application

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

    xmlns:custom="components.*"

    width="300" height="130"

>

    <custom:PaddedPanel title="Custom component styles">

        <mx:Text text="This is a padded panel component."/>

    </custom:PaddedPanel>  

</mx:Application>

  创建一个高级的ActionScript组件

当使用ActionScript组件的普遍目的是创建可配置和可重用的组件。例如，创建一个ActionScript组件，它带有属性，分发时间，定义了新的样式，具有自定义的皮肤，或其他的个性化的设置。

当创建一个自定的ActionScript组件时，一个设计上要考虑的事情是可重用性。也就是说，你希望创建一个紧紧的绑定带你的应用程序的组件，还是能够在多个应用中可重用的组件？

编写与特定应用程序紧耦合的组件，经常是组件依赖于应用程序的结构，变量名或其他细节。如果你改变了应用程序，你可能需要修改紧耦合的组件来反映这种变化。一个紧耦合的组件，在没有重写的情况下很难应用到其他应用程序中。

设计一个松耦合的组件用于重用。松耦合的组件需要有清晰可辨的接口来指定如何向组件传递信息，如何将将结果传回应用程序。

典型的松耦合组件是使用属性来向组件传递信息。这些属性通过默认存取器（setter和getter方法）来定义，指定参数的类型。在下边的例子 中，CountryComboBox自定义组件定义了公共的userShortNames属性，此属性通过使用get userShortNames()和set useShortNames()存取器方法暴露_ userShortNames私有属性。

私有属性_userShortNames的Inspectable 元数据标签定义了一个特性，这个特性出现在Adobe? Flex? Builder?中的属性提示和标签内省器中。也可以使用这个元数据标签限制允许的属性值。

注意： 所有公共属性出现在MXML的代码提示和属性检查器中。如果你有关于属性的额外的信息，这些信息能够帮助代码提示或属性检查器（像枚举型的值，或这个字符串实际是文件路径），那么也把额外的信息添加到[Inspectable]元数据中。

MXML代码提示和属性检查器来于相同的数据，所以，如果在一个中显示出来那么在另一个中也应该一直显示出来。

在另一方面，ActionScript代码提示，不需要元数据也可以正常工作，所以你在ActionScript中依据所在的上下文一直都可以看待适当的 代码提示。Flex Builder使用public/protected/private/static等等修饰符加当前所在范围计算出ActionScript代码提示。

定义组件向主应用程序返回信息的最佳实践是设计组件分发事件，事件中包含要返回的数据。那样，主函数能够定义时间监听器来处理时间，并且采取适当的行动。 也可以使用数据绑定在事件中。在下边的例子中，使用Bindable元数据标签是userShortName编程一个被绑定的属性。隐含的 userShortName属性的setter发送改变事件，这个过程使用了的Flex 框架的内部的机制，来使数据绑定正常工作。

连接：有些文章比这个引导性的快速指南更多的描述关于在 ActionScript中创建高级组件的应用。全面描述这一主题，可以查看” Creating Advanced Visual Components in ActionScript”在Creating and Extending Adobe Flex 3 Components.

例子

components/CountryComboBox.as

package components

{

    import mx.controls.ComboBox;

    import flash.events.Event;

 

    public class CountryComboBox extends ComboBox

    {

        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 3.

        [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;

        }               

    }

}

应用程序 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>