`
shlei
  • 浏览: 287965 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

Flex高级自定义组件(转载)

阅读更多
    关于自定义组件,简单的做法是继承一个现有组件,根据需要在该组件里添加需要的其他组件,比如按纽、文本框之类的,加上业务逻辑,通过修改皮肤或者样式来改变组件的外观,这样就构成了一个组件。但是这种做法满足不了更复杂的需求,比如在运行时添加子组件,自定义样式、事件等,这种做法很难实现。

研究 一下API,关于高级自定义组件,通常会做下面的一些事情:

1.改变组件的外观特征。

2.创建一个复杂组件,这个组件由许多其他组件组成。

3.创建一个组件,这个组件是UIComponent的子类。


自定义高级组件时需要重写的几个方法。

    flex中所有的可视化组件都是UIComponent的子类,因此,他继承了UIComponent的方法与属性,下面简要介绍一下几个经常重写的方法。


1.commitProperties()


    提交任何变化给组件的属性,确保所有变化在同一时间发生或者按一定顺序发生,你可以重写该方法来控制组件外观的显示。当你显示调用invalidateProperties()方法时,就会触发对commitProperties()的调用,这个调用是在下一次渲染期间发生的。当你使用addChild()添加一个组件到容器中时,flex会自动调用invalidateProperties()。commitProperties()执行于measure()方法之前,因此可以在该方法设置一些影响界面大小的属性。


2.createChildren()


    创建该组件的子组件。你不用直接调用它来创建组件,flex会在调用addChild()到父容器时执行该方法,因为该方法没有invalidation 方法,所以该方法只执行一次。通常使用该方法来创建组件的内容,使用updateDisplayList()来定位子组件的位置。


3.layoutChrome()


    定义容器的边框范围。当你显示调用invalidateDisplayList()方法时,就会触发对layoutChrome()的调用,这个调用也是在下一次渲染期间发生的。当你使用addChild()添加一个组件到容器中时,flex会自动调用invalidateDisplayList()。通常,你会使用 RectangularBorder来定义容器的边框,然后在createChildren()里把他加入显示列表,在layoutChrome()里设置边框的样式与大小并对其定位。


4.measure()


    设置组件的默认尺寸和最小尺寸。当显示调用invalidateSize()方法时,就会触发对measure()的调用,这个调用也是在下一次渲染期间发生的。跟其他几个方法一样,当你使用addChild()添加一个组件到容器中时,flex会自动调用invalidateSize()。当你明确指定一个组件的高度或者宽度时,flex不会调用measure(),即使你显示调用了invalidateSize(),flex只会在explicitWidth和explicitHeight为NAN时才调用。


5.updateDisplayList()


    根据现有的属性确定子组件的大小和位置,可以在这里绘制组件的皮肤或者一些图形元素。 一个组件只有在调用updateDisplayList()方法后才会显示在屏幕上,这个方法是在调用invalidateDisplayList()时触发的,当你设置组件的宽度或高度事也会触发对该方法的调用。


6.styleChanged()


    当设置组件的样式时,就会调用这个方法。如果你自定义了一个样式,你可以重写该方法来对样式做一些处理。
http://blog.sina.com.cn/turnertang
分享到:
评论

相关推荐

    flex 高级自定义组件

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

    Flex4自定义组件开发.pdf

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

    flex自定义组件介绍

    标题中的“flex自定义组件介绍”指的是在Adobe Flex框架中创建和使用自定义组件的过程。Flex是一个基于ActionScript和MXML的开源框架,用于构建富互联网应用程序(RIA)。自定义组件允许开发者根据特定需求扩展Flex...

    各种Flex自定义组件

    在标题“各种Flex自定义组件”中,我们可以推断这是一个包含多种定制Flex组件的资源集合。这些组件可能包括时间选择器、数据网格(datagrid)、树形视图(tree)和下拉组合框(combox)。每个组件都有其特定的用途和...

    Flex3自定义组件类似于Fieldset

    Flex3自定义组件类似于Fieldset

    flex4自定义组件皮肤

    - Flex组件有多种状态,如`normal`, `disabled`, `hovered`等。在皮肤中,为每个状态定义不同的图形元素或属性,可以使组件在不同状态下呈现不同的外观。 - 使用`<s:states>`标签来声明和定义组件的状态。 5. **...

    flex 自定义组件

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

    Flex 自定义组件ImageViewer

    组件生命周期是每个Flex组件从创建到销毁所经历的一系列阶段。理解组件生命周期至关重要,因为它涉及到组件何时初始化、何时准备显示、何时接收用户输入以及何时被销毁。以下是一些关键的生命周期方法: 1. **...

    flex自定义组件事件DEMO

    在Flex编程中,自定义组件是提升应用可扩展性和复用性的重要...通过这个DEMO,开发者可以学习到如何有效地扩展Flex组件库,构建具有交互性和复杂性的用户界面。记得动手实践,不断探索和优化,才能真正掌握这一技能。

    Flex4 自定义组件皮肤小结

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

    Flex 分页组件,flex自定义组件

    在Flex中,分页组件通常是自定义组件,因为Flex的标准库并未提供内置的分页解决方案。开发者通常需要根据实际需求来设计和实现这样的组件。以下是对Flex分页组件的详细解释: 1. **分页机制**:分页的核心是将大...

    Flex自定义组件和事件

    在Flex中,自定义组件和事件的使用对于创建功能丰富的用户界面至关重要。下面我们将详细探讨这两个主题。 ### 一、Flex自定义组件 #### 1. 创建自定义组件的原因 在Flex应用中,有时标准组件库提供的组件无法满足...

    flex3自定义组件之间的拖拽事件处理

    因为工作原因和个人兴趣原因,刚接触flex,遇到不少问题,这次花了一个早上的时间专门研究了一下组件件的拖拽,呵呵,还是很有成就感的。

    flex4自定义事件用法

    在Flex应用中,事件处理是核心功能之一,它使得组件之间能够有效地通信。自定义事件是Flex开发中的一个重要概念,允许开发者扩展内置事件系统,以满足特定项目的需要。下面将详细介绍Flex4自定义事件的用法,以及...

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

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

    Flex各自定义组件事件通讯例子

    事件通讯是Flex组件间交互的主要方式,它允许组件发送通知并响应其他组件的行为。在用户登录场景中,当用户点击“登录”按钮时,可能会触发一个事件。 1. 事件定义:创建自定义事件类,继承自flash.events.Event,...

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

    在本节中,我们将深入探讨Flex组件开发,这是...在阅读《Flex组件自定义.docx》这份文档时,你将更详细地了解这个过程,并获取具体的示例代码。这将有助于你更好地掌握Flex组件开发技术,从而在项目中游刃有余地运用。

    Flex Mobile自定义实现的弹出对话框

    在Flex中,我们可以通过继承UIComponent或者Canvas等基础组件来创建自定义组件。在组件中,我们可以设计对话框的布局、样式和功能。 2. **设计界面**:对话框通常包含标题、内容区域和按钮。在Flex中,我们可以使用...

    flex3自定义DownloadProgressBar

    本文将围绕“flex3自定义DownloadProgressBar”这一主题展开,讲解如何在Flex3中创建一个定制化的下载进度条组件,并探讨相关的编程技术和实践。 一、自定义组件基础 在Flex中,自定义组件是通过继承已有的...

    flex图片放大镜组件,自定义组件

    本案例中提到的"flex图片放大镜组件"就是这样一个自定义组件,它专为图片展示站点设计,提供了一个便捷的方式来实现图片的放大效果,从而提升用户体验。 首先,我们来理解一下“flex”这个词。在前端布局中,...

Global site tag (gtag.js) - Google Analytics