`
ttong547785026
  • 浏览: 6092 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

flex组件重写

    博客分类:
  • flex
 
阅读更多
1.在类声明前插入[Style]元数据标签,语法如下:

[Style(name="style_name"[,property="value",...])]

2.定义一个静态初始器,为样式属性设置默认值。

3.覆写styleChanged()方法,检测样式属性是否改变。

4.覆写updateDisplayList() 方法,在显示组件时加入样式。

一般情况下,我们会使用一个状态变量来标识样式是否改变。在updateDisplayList方法中,首先 检测该标识,再基于新样式设定更新组件外观。注意:updateDisplayList方法只更新因为该样式改变而需要重绘或重新计算的部分外观,而不是 整个组件的外观。

如果要创建一个自定义组件,你需要重写UIComponent类的某些方法,最少需要重写如下方法:构造函数, createChildren(), commitProperties(), measure(), layoutChrome(), updateDisplayList() 。
基础语句结构如下:
package myComponents
{
public class MyComponent extends UIComponent
{    .... }
}
注意包名与你的磁盘目录结构一致。接下来一一讲解每个方法的重写。
构造函数
示例如下:
public function 类名() {
super();
}
注意,AS3中构造函数不支持重载。
createChildren()
此方法的作用是在此自定义组件中创建子组件。
此方法不用你去调用,Flex在你将此自定义组件使用addChild方法加入到父组件时自动调用。示例如下:
// Declare two variables for the component children.
private var text_mc:TextArea;
private var mode_mc:Button;
override protected function createChildren():void {
    // Call the createChildren() method of the superclass.
    super.createChildren();
    // Test for the existence of the children before creating them.
    // This is optional, but do this so a subclass can create a different
    // child.
    if (!text_mc)     {
        text_mc = new TextArea();
        text_mc.explicitWidth = 80;
        text_mc.editable = false;
        text_mc.addEventListener("change", handleChangeEvent);
        // Add the child component to the custom component.
        addChild(text_mc);
    }
    // Test for the existence of the children before creating them.
    if (!mode_mc)     {   
        mode_mc = new Button();
        mode_mc.label = "Toggle Editing";
        mode_mc.addEventListener("click", handleClickEvent);
        // Add the child component to the custom component.
        addChild(mode_mc);
    }
}
上例使用createChildren()在此自定义组件中加入了一个Label和一个Button。
commitProperties()
此方法是在修改组件属性时使用。
此方法不用你去调用。当你调用invalidateProperties()(刷新属性)、addChild()(增加子组件)方法时,Flex会自动调用此方法。这样组件在下次显示时,就能以新的属性来显示。
此方法还有一个作用是为measure()方法提供最新的属性信息。
measure()
此方法的作用是设置组件的默认尺寸。
此方法不用你去调用。当你调用invalidateSize ()(刷新尺寸)、addChild()(增加子组件)方法时,Flex会自动调用此方法。这样组件在下次显示时,就能以默认尺寸来显示。
如果你显式的设置了组件的尺寸,如<mx:Button height="10" width="10"/>,Flex就不用调用此方法了。要注意,measure()方法只是设置组件的默认尺寸,在updateDisplayList()方法中,组件具备的实际尺寸(actual size)与默认尺寸可能不同。
Flex中的每个组件都是有默认尺寸的。如这样写:<mx:Button />,Flex就会自动给一个尺寸。如果你想重写默认尺寸,可以重新设置measuredHeight 、measuredWidth、measuredMinHeight、measuredMinWidth。如下例:
package myComponents
{
    // asAdvanced/myComponents/DeleteTextArea.as
    import mx.controls.Button;
    public class BlueButton extends Button {
        public function BlueButton() {
            super();
        }
       override protected function measure():void {
            super.measure();
            measuredWidth=100;
            measuredMinWidth=50;
            measuredHeight=50;
            measuredMinHeight=25;
        }
    }
}
然后在MXML中使用:
<?xml version="1.0"?>
<!-- asAdvanced/ASAdvancedMainBlueButton.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:MyComp="myComponents.*" >
    <mx:VBox>
        <MyComp:BlueButton/>
        <mx:Button/>
    </mx:VBox>
</mx:Application>
此中的BlueButton就会以默认值100宽,50高来显示。
layoutChrome()
一些容器类(Container)或其子类采用此方法设置组件的border Area(边框区域)。
此方法不用你去调用。当你调用invalidateDisplayList ()(刷新显示)方法时,Flex会自动调用此方法。这样组件在下次显示时,就能以新的边框来显示。
典型的用法是你可以重写RectangularBorder类。
一个将组件的边框区域(border Area)和内容区域(content area)分开处理的原因是当Container.autoLayout=false时。
总括的来讲,layoutChrome()是用来处理边框区域的刷新显示,而updateDisplayList()用来处理内容区域的刷新显示。
updateDisplayList()
此方法不用你去调用。当你调用invalidateDisplayList ()(刷新显示)、addChild()(增加子组件)方法时,Flex会自动调用此方法。这样组件在下次显示时,就能以新的样子来显示。其实类似VC++中的PAINT消息处理。
此方法的主要作用为:
A.更改组件的尺寸和位置。要改变尺寸,在此方法中使用setActualSize()方法,而不是使用width和height属性来完成。要改变位置,在此方法中使用move()方法,而不是使用x和y属性来完成。
B.绘制可视元素,如皮肤、样式、边框。你可以使用Flash Drawing API来完成。
函数的原型为:
protected function updateDisplayList(unscaledWidth:Number,
    unscaledHeight:Number):void
两个参数分别为此自定义组件的宽度和高度。当然如果设置父容器设置scaleY=2,你设置unscaledHeight=100,那么最终呈现的是200高度的组件。
第一个功能示例:
package myComponents
{
    // asAdvanced/myComponents/BottomUpVBox.as
    import mx.containers.VBox;
    import mx.core.EdgeMetrics;
    import mx.core.UIComponent;
    public class BottomUpVBox extends VBox
    {
        public function BottomUpVBox() {
            super();
        }
        override protected function updateDisplayList(unscaledWidth:Number,
            unscaledHeight:Number):void {
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            // Get information about the container border area.
            // The usable area of the container for its children is the
            // container size, minus any border areas.
            var vm:EdgeMetrics = viewMetricsAndPadding;
            // Get the setting for the vertical gap between children.
            var gap:Number = getStyle("verticalGap");
            // Determine the y coordinate of the bottom of the usable area
            // of the VBox.
            var yOfComp:Number = unscaledHeight-vm.bottom;
            // Temp variable for a container child.
            var obj:UIComponent;
            for (var i:int = 0; i < numChildren; i++)
            {
                // Get the first container child.
                obj = UIComponent(getChildAt(i));
                // Determine the y coordinate of the child.
               yOfComp = yOfComp - obj.height;
                // Set the x and y coordinate of the child.
                // Note that you do not change the x coordinate.
                obj.move(obj.x, yOfComp);
                // Save the y coordinate of the child,
                // plus the vertical gap between children.
                // This is used to calculate the coordinate
                // of the next child.
                yOfComp = yOfComp - gap;
            }
         }
    }
}
第二个功能示例:
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
    super.updateDisplayList(unscaledWidth, unscaledHeight);
    // Draw a simple border around the child components.
    graphics.lineStyle(1, 0x000000, 1.0);
    graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);            
}
分享到:
评论

相关推荐

    flex中的组件重写例子

    本文将深入探讨Flex组件重写的原因、注意事项、重写过程以及组件的内部执行流程,并通过示例进行详细说明。 首先,我们来看一下为何需要重写Flex组件。Flex提供了丰富的预定义组件库,如Button、Label、List等,但...

    flex 重写组件

    #### 一、为何需要重写Flex组件? 在Flex开发过程中,经常遇到已有的组件无法完全满足项目需求的情况。这些需求可能包括但不限于改变组件的外观、增加新的功能特性或者实现更复杂的交互逻辑。在这种背景下,重写...

    Flex组建重写

    ### Flex组件重写详解 #### 一、为什么需要重写Flex组件 Flex作为一种强大的富互联网应用框架,提供了丰富的内置组件供开发者使用。然而,在实际项目中,这些现成的组件往往不能完全满足特定的需求,例如可能需要...

    【完美翻译】Flex组件的生命周期

    Flex组件的生命周期是Adobe Flex框架中一个至关重要的概念,它涉及到UIComponent类及其子类(如Button、Canvas等)在创建、初始化、显示和销毁过程中的各个阶段。深入理解组件生命周期有助于开发者更有效地管理组件...

    flex 高级自定义组件

    Flex中的高级自定义组件开发是构建复杂用户界面的关键技术,它允许开发者超越基本组件的限制,以满足特定的业务需求和视觉设计。在创建高级组件时,了解并掌握一些核心方法的重写至关重要,这些方法涉及到组件的生命...

    Flex重写搜索框

    在Flex开发中,为了提升用户界面的美观度和交互体验,开发者经常需要对标准的UI...通过这样的实践,开发者不仅可以提升应用的视觉效果,还能学习到Flex组件扩展和优化的技巧,为创建更复杂、更具吸引力的应用奠定基础。

    Flex4自定义组件开发.pdf

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

    flex做拓扑图的组件

    4. **自定义组件**:拓扑图组件通常需要定制,可以创建一个继承自`UIComponent`的类,并重写`draw()`方法以实现自定义的绘制逻辑。此外,你可能还需要覆盖`measure()`和`updateDisplayList()`方法来确保组件的尺寸和...

    flex3组件和框架的生命周期

    - **Flex组件开发的最佳实践** - 使用构造函数 - 实时与构造函数 - 使用初始化 - 重写初始化方法 - 失效-生效周期和方法 - 分离生命周期阶段 - 使用标识变量 - 实现验证方法 - 使用和访问样式 - **结论** ...

    Flex自定义组件和事件

    - **绘制组件**:在自定义组件中,通常需要重写`drawRect()`或`updateDisplayList()`方法来绘制组件的外观。 - **添加属性和方法**:根据需求添加新的属性和方法,以实现特定的功能。 - **布局管理**:如果组件...

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

    1. **Flex组件基础**: Flex是一套基于ActionScript 3.0和MXML的框架,用于构建交互式的、基于Web的应用程序。它提供了丰富的组件库,如Button、TextInput等,但有时我们需要根据项目需求自定义组件来满足特定的...

    Flex3组件和框架的生命周期

    通过重写`initialize()`方法来进行组件的深度初始化。这种方法允许在组件添加到显示列表后执行更精细的控制。 **使用标识变量** 标识变量可以帮助追踪组件的生命周期状态。这对于处理特定生命周期阶段的逻辑非常...

    (十八)Flex4_自定义ActionScript组件

    在Flex4中,开发者可以使用ActionScript,一种面向对象的编程语言,来扩展Flex组件库,定制符合特定需求的用户界面元素。 Flex4引入了全新的图形渲染引擎——Gumbo,允许开发者更加灵活地控制UI组件的外观和行为。...

    SimPager Flex分页组件

    重写的Flex分页组件,改进了一些BUG,原版的源码丢了,又重写了一个,所以没有版本之分 recordCount//记录总数,程序对该属性赋值生成分页 currentPageIndex//当前页 pageSize//每页记录数 buttonConut//显示的...

    flex自定义组件

    这是一个flex4的项目,可以下载下来单独运行,其中重写了组件createChildren、commitProperties、measure和updateDisplayList方法,基本描述了他们在组件生命周期中所起的作用,并且在项目中实现了属性的事件绑定,...

    flex皮肤flex皮肤

    Flex皮肤是Flex组件的外观表示,它可以改变组件的颜色、形状、大小等视觉元素。通过更换皮肤,开发者可以创建独特且一致的用户界面,符合品牌风格或者提高用户体验。 2. **Flex皮肤的类型** - **内置皮肤**:Flex...

    关于Flex 初始化的research

    原因在于Flex组件的生命周期,尤其是初始化阶段的事件顺序。 Flex组件的生命周期包含多个关键阶段,这些阶段按照一定的顺序执行,确保组件的正确初始化和显示。主要阶段包括: 1. **PREINITIALIZE**:这是组件生命...

    FLEX简单的入门快速总结

    Flex是Adobe公司开发的一种用于构建富...同时,熟悉MXML和ActionScript的结合使用,以及Flex组件库的运用,也是成为Flex开发者的必备技能。通过不断实践和学习,你将能够利用Flex构建功能强大、交互丰富的RIA应用。

Global site tag (gtag.js) - Google Analytics