`
Blackbaby
  • 浏览: 183240 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

Flex Component Life Cycle

阅读更多

The lifecycle of component in flex is certainly somewhat similar to the old V2 framework where you create a component holder, craetechildren, set-sizes and dispatch events. Following four methods plays a role for component rendering

  1. commitProperties()
  2. measure()
  3. layoutChrome()
  4. updateDisplayList()

Here is what I found after doing some studies. The most of the following part is taken from Adobe flex help however what I am trying to do here is to elaborate it more by putting up some comments to each step to make it clearer.

The green comments shows the methods and events performed by or on component itself whereas the comments in blue represents the methods and events performed on or by the parent container.

Following steps are demonstrating the Button component life cycle

  • Given if the component is going to be in a container then the parent property of component will be referred to the container(DisplayObjectContainer type)
    //– A property for UIComponent class
  • Get the style settings of the component
  • Dispatches the preinitialize event on the component.

//– The preinitialize event(mx.events.FlexEvent) is triggered when the UIComponent is in a very raw stage and there is no children in existence at that time

  • Calls the component’s createChildren() method.

createChildren is a protected method of UIComponent class which we need to override when we create a subclass of the UIComponent. Also from within an override of the createChildren() method, you call the addChild() method to add each child object.

You do not call this method directly. Flex calls the createChildren() method in response to the call to the addChild() method to add the component to its parent.

  • Calls the invalidateProperties(), invalidateSize(), and invalidateDisplayList() methods to trigger later calls to the commitProperties(), measure(), or updateDisplayList() methods during the next render event.

invalidateProperties() marks a component so that its commitProperties() method gets called during a later screen update.

invalidateSize () Marks a component so that its measure() method gets called during a later screen update.

invalidateDisplayList () Marks a component so that its updateDisplayList() method gets called during a later screen update.

The only exception to this rule is that Flex does not call the measure() method when the user sets the height and width of the component.

  • Dispatches the initialize event on the component. At this time, all of the component’s children are initialized, but the component has not been sized or processed for layout. You can use this event to perform additional processing of the component before it is laid out.

Initizlize event gets dispatched when the component has finished its construction and has all initialization properties set.

After the initialization phase, properties are processed, the component is measured, laid out, and drawn. After which the creationComplete event is dispatched.

  • Dispatches the childAdd event on the parent container.

The childAdd event is dispatched when the addChild() or addChildAt() method is called. At the time when this event is sent, the child object has been initialized, but its width and height have not yet been calculated, and the child has not been drawn on the screen. If you want to be notified when the child has been fully initialized and rendered, then register as a listener for the child’s creationComplete event.

  • Dispatches the initialize event on the parent container.

Dispatched when the component has finished its construction and has all initialization properties set. After the initialization phase, properties are processed, the component is measured, laid out, and drawn, after which the creationComplete event is dispatched.

  • During the next render event, Flex performs the following actions:
    • Calls the component’s commitProperties() method.
      commitProperties() processes the properties set on the component. You do not call this method directly. Flex calls the commitProperties() method when you use the addChild() method to add a component to a container, or when you call the invalidateProperties() method of the component. Calls to the commitProperties() method occur before calls to the measure() method. This lets you set property values that might be used by the measure() method.
    • Calls the component’s measure() method.
      Measure() calculates the default size, and optionally the default minimum size, of the component. This is an advanced method that you might override when creating a subclass of UIComponent
      .
      The default implementation of measure() sets measuredWidth, measuredHeight, measuredMinWidth, and measuredMinHeight to 0.
    • Calls the component’s (Adobe help mention this method is in UIComponent where as it is in container class) container’s layoutChrome() method.
      The
      Container class, and some subclasses of the Container class, use the layoutChrome() method to define the border area around the container.
    • Calls the component’s updateDisplayList() method.
      The updateDisplayList() method sizes and positions the children of your component based on all previous property and style settings, and draws any skins or graphic elements that the component uses. The parent container for the component determines the size of the component itself.
    • Dispatches the updateComplete event on the component.
      Dispatched when an object has had its commitProperties(), measure(), and updateDisplayList() methods called (if needed).
      This is the last opportunity to alter the component before it is displayed. All properties have been committed and the component has been measured and layed out.
  • Flex dispatches additional render events if the commitProperties(), measure(), or updateDisplayList() methods call the invalidateProperties(), invalidateSize(), or invalidateDisplayList() methods.
  • After the last render event occurs, Flex performs the following actions:
    • Makes the component visible by setting the visible property to true.
    • Dispatches the creationComplete event on the component. The component is sized and processed for layout. This event is only dispatched once when the component is created.
    • Dispatches the updateComplete event on the component. Flex dispatches additional updateComplete events whenever the layout, position, size, or other visual characteristic of the component changes and the component is updated for display.

原文链接:http://flexcomps.wordpress.com/2008/05/09/flex-component-life-cycle/

 

相关文章:http://danorlando.com/?p=122

  • 大小: 92.4 KB
分享到:
评论

相关推荐

    Flex4 Life cycle

    标题中的“Flex4 Life Cycle”指的是Adobe Flex框架的第四代版本中的组件生命周期。Flex是一种用于构建富互联网应用程序(RIA)的开源框架,基于ActionScript和Flash Player或Adobe AIR运行时。在Flex4中,组件生命...

    Flex4.0中文API.rar

    9. **Flex Component Life Cycle**:理解组件生命周期对于编写高效且无内存泄漏的代码至关重要。Flex 4.0组件生命周期包括初始化、测量、布置、绘制和更新等阶段。 10. **事件系统**:Flex 4.0的事件系统支持事件...

    flex 自定义加载进度框

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

    flex文档中文的pdf文档

    3. Flex Component Life Cycle:组件生命周期包括创建、初始化、显示、隐藏和销毁等阶段,理解这些阶段对于优化性能和处理用户交互至关重要。 4. Data Binding:数据绑定是Flex的一大特性,允许UI组件的状态自动反映...

    A Flex 4 Component’s life cycle

    ### Flex 4 组件的生命周期 #### 一、引言 在深入了解 Flex 4 组件的生命周期之前,我们首先需要了解什么是组件的生命周期以及为什么 Flex 组件需要一个生命周期。Flex 是一个用于构建高性能且功能丰富的 Web 应用...

    Adobe.Flex.4.Training.from.the.Source.Volume.1

    在Flex 4中,Flex Component Life Cycle也得到了改进,这将帮助开发者更好地理解和控制组件的状态变化,从而编写出更加健壮的应用。书中会详细介绍每个阶段,如creationComplete、initialize、render等,以及如何在...

    Flex component

    标题中的“Flex Component”指的是Adobe Flex中的组件,它是一个开源框架,主要用于构建富互联网应用程序(RIA)。Flex组件库包括了一系列预定义的用户界面元素,如按钮、文本输入字段、列表等,开发者可以使用这些...

    Flex Component Kit for Flash CS3

    Flex Component Kit for Flash CS3 是一个专门为Adobe Flash CS3设计的插件,它极大地扩展了Flash开发工具的功能,使得开发者可以更加便捷地在Flex项目中重用和集成由Flash创建的组件。Flex是一种开放源代码的框架,...

    Adobe Flex 3 Component Explore

    Adobe Flex 3 Component Explore 是一个专门针对Flex 3框架的学习和参考工具,它为开发者提供了一个直观的平台来探索和理解Flex组件的使用和功能。Flex 3是Adobe开发的一个开源框架,主要用于构建富互联网应用程序...

    flex_component_kit_042307

    Flex Component Kit,简称FCK,是Adobe开发的一个工具集,用于增强Flash CS3与Flex之间的协同工作能力。这个工具包的主要功能是将Flash中的MovieClip转换为UIMovieClip,以便在Flex应用程序中无缝集成和使用。在本文...

    Adobe+Flex+Component+Explore

    Adobe+Flex+Component+Explore

    Adobe Flex 3 Component Explore pare1

    Flex 3 Component Explorer 不用多解释吧~~学习Flex 3控件的好手册,分了三个压缩卷,这是第一卷,请下齐三个卷

    flex 的基础入门书+flex组建大全(component explorer)

    flex 的基础入门书+flex组建大全(component explorer),帮你尽快走进flex

    flex_component.zip_flex

    本资料“flex_component.zip_flex”提供的“flex各组件对应的样式属性整理.doc”文档详细汇总了在Flex布局中各个组件所对应的样式属性,旨在帮助开发者更高效地理解和运用这些属性。 1. **Flex容器属性**: - `...

    amcharts flex component

    "amCharts Flex Component" 是一款专门用于Adobe Flex的图表组件,它为开发者提供了一套强大且灵活的工具,用于在Flex应用程序中创建交互式、视觉吸引力强的数据可视化效果。amCharts以其丰富的图表类型、高度定制性...

    flex 3 component

    flex 3 component.pdfflex 3 componentflex 3 component.pdfflex 3 component.pdf

    Flex3_Explorer本地文件Flex3 component Explorer

    Flex3 component Explorer的核心是它的组件浏览器功能。这个特性允许用户直观地浏览和尝试各种Flex组件的属性、样式和事件。通过拖拽、调整大小、改变颜色等方式,开发者可以快速预览组件的不同状态,理解它们的行为...

Global site tag (gtag.js) - Google Analytics