`

flex as自定义组件

    博客分类:
  • flex
 
阅读更多

Flex 3入门教程: 在ActionScript 中构建自定义组件

 

可以使用ActionScript创建可重用的组件,并且在你的Flex程序中可以作为标签引用这个组件。在ActionScript中创建的组件能够包含图像元素,自定义业务逻辑,或者扩展已经存在的Flex组件。

在ActionScript中,Flex组件实现了类层次结构。每一个组件,都是Action类的实例。下图展示了这种层次结构的一部分。

 

所有Flex可视组件都是源自于UIComponent类。要创建自己的组件,你可以创建一个继承UIComponent的类,或者继承UIComponent子类的类。

使用类作为自定义组件的超类,取决于你要实现的功能。例如,你或许需要一个自定义的按钮控件。你可以创建一个UIComponent类的子类,然后重写Flex Button 类的所有功能。更好更快创建自定义按钮组建的方法是创建一个Flex Button组件的子类,然后在自定义类中进行修改。


创建一个简单的ActionScript组件

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

为自定义组件应用样式

创建一个高级的ActionScript组件

创建一个复合ActionScript组件


链接:你可以在MXML中创建自定义组件。更多的信息,参看Building components in MXML Quick Start.


创建一个简单的ActionScript组件


当你要在ActionScript 中定义一个组件时,不要创建一个组件,而是修改一个已经存在的组件的行为。在下边的例子中,创建一个ComboBox类的子类,来创建一个自定义的ComboBox,命名为CountryComboBox——重新组装的国家列表。


注意:在MXML中实例化你的组件,要使用类名作为标签名。


你可以放置自定义组件在项目的根目录或者子目录中。Adobe推荐后者。在这个例子中,自定义被放置在叫做components的子文件夹中,在ActionScript相当于components包。在主应用程序的MXML文件中,映射这个文件夹的命名空间为custom,并且使用完全合格的标签名<custom:CountryComboBox>来引用这个组件。


注意:在真实世界的应用程序中,你可能会看到自定义组件被放置在倒置的域名结构的包结构中(例如:xmlns:custom=”com.adobe.quickstarts.customcomponents.*”)。这种习惯可以避免命名空间冲突,当不同的制造商,使用相同的名字。例如,在你的应用程序中,2个组件库也许都含有Map组件,如果一个在com.vendorA包中另一个在com.vendorB包中,那么他们就不会起冲突


例子

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="220" height="115">
    <custom:CountryComboBox />
</mx:Application>

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


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>

 

创建复合 ActionScript 组件

 

例子
components/NumericDisplay.as

package components
{
    import mx.containers.VBox;
    import mx.containers.Tile;
    import mx.controls.TextInput;
    import mx.controls.Button;
    import mx.events.FlexEvent;
    import Flash.events.Event;
    import Flash.events.MouseEvent;

    public class NumericDisplay extends VBox
    {
        private var display:TextInput;
        private var buttonsTile:Tile;

        // Expose the _numButtons property to the
        // visual design view in Flex Builder 3.
        [Inspectable(defaultValue=10)]
        private var _numButtons:uint = 10;

        public function NumericDisplay()
        {
            addEventListener(FlexEvent.INITIALIZE, initializeHandler);
        }
        
        // numButtons is a public property that determines the
        // number of buttons that is displayed
        [Bindable(event="numButtonsChange")]
        public function get numButtons():uint
        {
            return _numButtons;
        }

        public function set numButtons(value:uint):void
        {
            _numButtons = value;
            dispatchEvent(new Event("numButtonsChange"));
        }

        
        // Gets called when the component has been initialized
        private function initializeHandler(event:FlexEvent):void
        {
            // Display the component
            paint();
        }

        // Add the label of the clicked button to the display
        private function buttonClickHandler(event:MouseEvent):void
        {
            display.text += (event.target as Button).label;
        }
        
        // Display the component
        private function paint():void
        {
            // Create the number display
            display = new TextInput();
            display.width=185;
            addChild(display);

            // Create a Tile container to
            // hold the buttons.
            buttonsTile = new Tile();
            addChild (buttonsTile);
            
            // Create the buttons and add them to
            // the Tile container.
            for (var i:uint = 0; i < _numButtons; i++)
            {
                var currentButton:Button = new Button();
                currentButton.label = i.toString();
                currentButton.addEventListener(MouseEvent.CLICK, buttonClickHandler);
                buttonsTile.addChild (currentButton);
            }
        }
    }
}

 

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.*"
    viewSourceURL="src/ASComponentComposite/index.html"
    width="300" height="225">
    <custom:PaddedPanel
        title="Composite component">
        <custom:NumericDisplay numButtons="10"/>        
    </custom:PaddedPanel>
</mx:Application>

分享到:
评论

相关推荐

    Flex4自定义组件开发.pdf

    ### Flex4自定义组件开发详解 #### 一、Flex4自定义组件概述 Flex4(也称为Spark)是Adobe Flex框架的一个重要版本,它引入了许多新的特性,包括改进的组件库、性能优化以及更好的可定制性。在Flex4中,自定义组件...

    flex4自定义组件皮肤

    在Flex4中,自定义组件皮肤是提升应用视觉效果和用户体验的重要手段。下面将详细介绍如何在Flex4中自定义组件皮肤。 1. **组件皮肤的基本概念** - 组件皮肤是Flex中改变组件外观的一种方式,通过定义不同的皮肤,...

    flex 自定义组件

    Flex自定义组件是Adobe Flex框架中的一个重要特性,它允许开发者创建具有特定功能和外观的UI元素,以满足项目中独特的用户界面需求。Flex是一个开源的、基于MXML和ActionScript的开发框架,主要用于构建富互联网应用...

    Flex4 自定义组件皮肤小结

    在Flex4中,自定义组件皮肤是提升应用界面美观度和用户体验的重要手段。Flex4引入了全新的皮肤架构,使得开发者可以更加灵活地控制组件的外观和交互效果。本篇文章将围绕Flex4自定义组件皮肤进行深入讲解,并结合...

    flex/flash自定义组件(搜索栏)

    本文主要探讨如何在Flex中自定义组件,特别是针对一个搜索栏的实现。在提供的压缩包中,我们有`searchField.fla`、`searchField.swf`以及`documentClasses`这三个文件,它们分别代表了不同阶段的开发过程。 1. **...

    第五章 自定义组件开发 第一节 自定义Flex组件

    在自定义组件时,开发者可以继承Flex提供的基类,如UIComponent或Canvas,然后添加自己的属性、方法和样式。 创建自定义Flex组件的步骤通常包括以下几点: 1. **定义组件类**:首先,你需要创建一个新的AS3类,并...

    Flex4 自定义通用ImageButton

    在Flex4中,自定义组件是一项重要的技能,它允许开发者根据特定需求创建具有独特功能和外观的用户界面元素。本话题聚焦于自定义一个通用的`ImageButton`组件,该组件结合了图像和按钮的功能,提供了更丰富的交互体验...

    ActionScript的自定义组件及自定义事件例子

    自定义组件和事件在Flex应用程序中发挥着关键作用,使开发者能够构建高度定制的用户界面和交互逻辑。 总的来说,掌握ActionScript的自定义组件和自定义事件是提升Flash和Flex开发技能的重要一步。通过实践和研究...

    flex可自定义圆形加载进度条例子代码下载

    1. **组件自定义**:Flex允许开发者通过继承现有的UIComponent类来自定义组件。在这个例子中,开发者可能已经创建了一个新的组件类,扩展了Spark或 Halo的ProgressIndicator类,以实现圆形显示。 2. **图形绘制**:...

    Flex自定义加载条(小起)

    - `.mxml`或`.as`文件:这是自定义加载条的源代码,展示了如何创建和定制加载条组件。 - `.css`文件:可能包含自定义的样式定义,用于改变加载条的外观。 - `.swf`或`.air`文件:编译后的应用程序,可以直接运行查看...

    FLEX自定义的日历组件,带有日志记录功能

    总的来说,FLEX自定义的日历组件带有日志记录功能,为开发者提供了一种强大且灵活的方式来处理日期选择,并能有效地监控应用的运行状态。通过深入理解这些组件和日志机制,开发者可以创建出更加用户友好且健壮的RIA...

    Flex4自定义右键菜单源码.rar

    标题中的“Flex4自定义右键菜单源码”意味着这个压缩包包含了实现自定义右键菜单功能的源代码。这对于初学者来说是一份宝贵的学习资源,他们可以通过阅读和理解代码来学习如何在Flex4项目中创建和管理自定义的右键...

    通过自定义组件实现可拖动改变位置和大小的Label

    本主题聚焦于如何通过自定义组件实现一个可以被拖动改变位置和大小的Label,这在各种桌面和Web应用中都有广泛的应用,特别是在富客户端(Rich Client)或Flex/AIR项目中。 首先,我们需要理解基本的组件构建过程。...

    Flex自定义的温度计实现

    在Flex编程领域,自定义组件是提升应用独特性和用户体验的关键技术。标题提到的"Flex自定义的温度计实现"是一个具体实例,展示了如何利用ActionScript(AS)在Flex环境中创建一个温度计图形用户界面(GUI)组件。...

    Flex自定义DateField选择时分秒

    1. **创建自定义组件**:首先,我们需要创建一个新的ActionScript类,继承自DateField。在AS3代码中,你可以这样写: ```actionscript public class CustomDateField extends DateField { // 自定义代码将放在...

    Flex4视频教程_02-03用AS自定义事件.rar

    2. **派发自定义事件**:在事件源对象(通常是UIComponent或其他自定义组件)上,使用dispatchEvent方法来派发自定义事件。派发时需要实例化自定义事件,并传入相关参数: ```actionscript var customEvent:...

    flex as3 air ria 遮罩的使用例子

    遮罩可以用于创建复杂的交互式用户界面元素,如弹出窗口、动画效果和自定义组件。在这个“flex as3 air ria 遮罩的使用例子”中,我们将探讨如何在ActionScript 3.0中实现遮罩功能,以及其在富互联网应用(RIA)和...

    flex 自定义加载进度框

    4. **Flex Component Life Cycle**:了解Flex组件的生命周期,知道何时在哪个阶段插入自定义预加载器。 5. **动画和图形设计**:在Flash中创建和编辑动画,可以使用ActionScript控制动画的播放。 6. **集成到Flex...

    flex as3虚线

    在Flex AS3中实现虚线有几种方法,但最常见的是通过自定义Graphics类的方法来实现。我们可以创建一个自定义的AS3类,比如`MyDashLine.as`,并在其中覆盖`drawLine()`方法来绘制虚线。以下是一个基本的实现步骤: 1....

    flex和as3之间互相调用的方法

    在Flex项目中,用户界面通常由MXML组件定义,而业务逻辑和数据处理则通过AS3代码实现。本文将深入探讨如何在Flex和AS3之间进行互相调用,以实现更高效的应用程序设计。 首先,我们了解Flex组件和AS3脚本的基本关系...

Global site tag (gtag.js) - Google Analytics