- 浏览: 183244 次
- 性别:
- 来自: 成都
文章分类
最新评论
-
donggongai:
Blackbaby 写道mazhi4562qq 写道moist ...
openfire集成现有系统的用户表 -
Blackbaby:
mazhi4562qq 写道moistrot 写道哥们,你集成 ...
openfire集成现有系统的用户表 -
mazhi4562qq:
moistrot 写道哥们,你集成成功了吗?我这样集成之后,登 ...
openfire集成现有系统的用户表 -
dxcsingle:
哥们 我如今也遇到这个问题 能讲哈怎么处理么?
openfire集成现有系统的用户表 -
hooktoo:
该例子有很严重的问题,java没释放内存
JNative dll回调函数使用实例
I’ve been refining my custom Flex component development for a while but I still smile when I come across someone’s definition of the basics that makes what I’ve already learned even more understandable. I came across Mike Nimer’s post about slides from the Flex Camp in Chicago and after reading through them I figured I’d post a summary of the contents on my own blog just to have a reference post for my own use.
Understanding the Component Lifecycle
The component lifcycle is a series of methods called by the Flex Framework that every component experiences. These methods include:
- The component’s constructor
- The
commitProperties()
method - The
createChildren()
method - The
measure()
method - The
updateDisplayList()
method
Breaking it all down:
Constructor
Inside the component’s constructor you will setup the initial properties and do tasks which need to be done regardless if the component is ever shown on the screen. You will NOT do things like creating child components or positioning items because at this stage you do not have enough information to do this. The constructor is called whenever the component is created but the other lifecycle methods do not occur until a component is added to a container:
var blah:Button = new Button(); // invokes the constructor container.addChild(blah); // adds the component to a container, // triggering the other lifecycle methods
createChildren()
This method creates any visual children of the component. It only creates them but does NOT size or position them because at this point your component does not know how much screen space it has. You cannot tell your children how big they can be when you do not know how much space you have to work with. The same logic applies to positioning them.
measure()
To determine how much screen space a component requires, it calls its measure()
method. (NOTE: The measure() method is not called on components that you explicitly set the width or height on; this makes sense because if you explicitly set the size of the component, you obviously do not care what that component thinks its size should be; you are making the decision for that component so its measure() method results are irrelevant; thanks to Maulik for pointing this out). The measure method is responsible for setting four properties of the component:
measuredMinWidth
measuredMinHeight
measuredWidth
measuredHeight
These values form the basis of a ‘suggestion’ provided by the component to its parent about how big it would like to be. This is where the updateDisplayList()
method comes in.
The measure method also involves the layout manager. The layout manager is responsible for, among other things, ensuring that the process of sizing your component is started. The layout manager always starts on the outer most component. To know how much space a component needs, you need to know how much space its children need.
updateDisplayList()
When updateDisplayList()
is called on a given component, it is passed an unscaledWidth
parameter and an unscaledHeight
parameter. Basically, it is told ‘Regardless of what you requested, here is what you get’. While Flex containers never choose to size one of their children smaller than the minimum size, you can do whatever you want. You are free to ignore a component’s suggestion and make it any size you would like and when a Flex container realizes it cannot fit all of the components into the allotted space, it will add scrollbars. updateDisplayList()
is also responsible for positioning its children. The method in which the Flex containers and components position their children is implicit in their type (ie. VBox-vertical, HBox-horizontal, DateField-Horizontal). For a custom component, the method in which it arranges its children can be based on an equation that is most suitable.
commitProperties()
The commitProperties()
method is responsible for coordinating property modifications. Why would you want to coordinate properties? Because there are times when you need to wait to act until more than one property upon which you are dependent is set/ready. There are also times when you do not want to do something complex every single time a change occurs. Finally, commitProperties()
method allows you to defer some of these things until the screen needs to be redrawn because commitProperties()
(just like updateDisplayList()
) is ‘scheduled’ and called by the Flex framework when needed.
How do you tell the framework that they are needed? By calling the invalidate methods:
invalidateDisplayList()
invalidateProperties()
invalidateSize()
These methods tell the framework to ensure the method is called at the next appropriate time. Notice that there is no invalidateChildren()
. This is because you only create children once and you do not recreate them for every property change.
So where does this leave us? Well, basically you have to remember these point:
-
Constructor()
– set things up but do not create children or position things -
createChildren()
– create the children but do not position or size them -
measure()
– determines the required screen space; here you set measuredMinWidth, measuredMinHeight, measuredWidth, measuredHeight (these suggest how big the component should be) -
invalidateSize()
– tells Flex to re-measure things -
updateDisplayList()
– receives unscaledWidth and unscaledHeight, you can use or ignore this, and also position children -
invalidateDisplayList()
– tells Flex to callupdateDisplayList()
-
commitProperties()
– allows you to coordinate property modifications -
invalidateProperties()
– tells Flex to callinvalidateProperties()
To show an example of how this all fits together, I’ll take a look at the Carousel example that was mentioned in the slide show.
The component’s lifecycle is as follows:
1. The user changes the selectedIndex
/selectedChild
property and we in turn set some internal values and ask for a commitProperties
call.
[Bindable("change")] public function get selectedIndex():int { return _selectedIndex; } public function set selectedIndex( value:int ):void { if ( _selectedIndex == value ) { return; } _selectedIndex = value; selectedIndexChanged = true; dispatchEvent( new Event( 'change' ) ); this.invalidateProperties(); }
2. When commitProperties()
is called we determine the difference between the newly selected item is and where it needs to be and we animate through the values from the currentPosition to the selectedIndex:
/** commitProperties starts the majority of the heavy lifting here. It is called by use when the selectedIndex or selectedChild * changes. We create a new animation effect that moves us from the current selected index to the newly selectedIndex. * Sometimes it is easier to move around the circle to the right, and sometimes to the left, to acheive this result. The * commitProperties makes this determination and sets up the proper values and starts the effect playing. * selectedChild changes **/ override protected function commitProperties():void { super.commitProperties(); if ( selectedIndexChanged ) { selectedIndexChanged = false; if ( !animateProperty ) { animateProperty = new AnimateProperty( this ); } if ( !animateProperty.isPlaying ) { //Current position can get bigger and bigger, let's ensure we stay real and realize that it is just a factor //of the number of children currentPosition %= numChildren; if ( currentPosition < 0 ) { currentPosition = numChildren + currentPosition; } } //Determine if it is easier to move right or left around the circle to get to our new position var newPosition:Number; var moveVector:Number = selectedIndex-currentPosition; var moveScalar:Number = Math.abs( moveVector ); if ( moveScalar > ( numChildren/2 ) ) { if ( moveVector < 0 ) { newPosition = numChildren + selectedIndex; } else { newPosition = ( selectedIndex - numChildren ); } } else { newPosition = selectedIndex; } animateProperty.property = "currentPosition"; animateProperty.fromValue = currentPosition; animateProperty.toValue = newPosition; /*The duration of this effect is based on how far we must move. This way a one position move is not painfully slow*/ animateProperty.duration = 700 * Math.abs( currentPosition-newPosition ); animateProperty.easingFunction = Quadratic.easeInOut; animateProperty.suspendBackgroundProcessing = true; animateProperty.play(); } }
3. A the setting of the currentPosition
property triggers an invalidateDisplayList()
call:
/** When animating the change of position, current position contains the location (in radians) of the current position. This will likely be * a numeric number between the integer selectedIndex values. So, when animating between selectedIndex 1 and 2, the currentPosition will * move in tenths of a radian between those two values over a fixed amount of time. **/ [Bindable("currentPositionChanged")] public function get currentPosition():Number { return _currentPosition; } public function set currentPosition(value:Number):void { _currentPosition = value; dispatchEvent( new Event( 'currentPositionChanged' ) ); invalidateDisplayList(); if ( currentPosition == selectedIndex ) { dispatchEvent( new Event( 'animationComplete' ) ); } }
4. Finally, the updateDisplayList()
method uses the currentPosition
property to determine where each image should be moved and how it should be scaled:
/** updateDisplayList does the animation time heavy lifting. It determines the size of the circle that can be drawn. * The padding between each child around the circle and then calls method to size, determine the position, scale and * blur of each of the children. Those values are then applied. Note, updateDisplay list uses our orderedChildren * array to ensure the original order of the children is preserved despite our manipulations of their order. **/ override protected function updateDisplayList( unscaledWidth:Number, unscaledHeight:Number ):void { super.updateDisplayList( unscaledWidth, unscaledHeight ); var centerOfCircle:Point = new Point( unscaledWidth/2, unscaledHeight/2 ); //We resize the shadowContainer to the same size as our component. //This ensures that the x and y positions of the components moving around the carousel //track with the x and y of the shadows moving on this container shadowContainer.setActualSize( unscaledWidth, unscaledHeight ); var maxChildWidth:Number = 0; var child:UIComponent; for ( var i:int=0; i<orderedchildren.length;> { child = orderedChildren[ i ] as UIComponent; child.setActualSize( child.getExplicitOrMeasuredWidth(), child.getExplicitOrMeasuredHeight() ); maxChildWidth = Math.max( maxChildWidth, child.width ); } radius = ( unscaledWidth /2 ) - ( maxChildWidth / 2 ) ; /** In a circle, we have a total of 2pi radians. So, in this case, we take the number of children present * and divide up those sizes that everything spaces evenly **/ var childPaddingInRadians:Number; var childDistanceInRadians:Number; childPaddingInRadians = (2*Math.PI)/(numChildren); for ( var j:int=0; j<orderedchildren.length;> { child = orderedChildren[ j ] as UIComponent; childDistanceInRadians = (j*childPaddingInRadians) + radianOffset - ( currentPosition * childPaddingInRadians ) ; var newPoint:Point = getPointOnCircle( centerOfCircle, radius, childDistanceInRadians ); //Set the appropriate scale of the children as the move backward in 3d space. var scale:Number = getScale( centerOfCircle, radius, newPoint.y ); child.scaleX = scale; child.scaleY = scale; //Reapply the blur to the child. The base amount is determined by a style var blur:Number = getBlur( centerOfCircle, radius, newPoint.y ); ( blurEffectDictionary[ child ] as BlurFilter ).blurX = blur; ( blurEffectDictionary[ child ] as BlurFilter ).blurY = blur; ( blurEffectDictionary[ child ] as BlurFilter ).quality = 1; child.filters = [ blurEffectDictionary[ child ] ]; childCenterMove( child, newPoint ); //Position the hanging shadow below the child. The base distance is determined by a style //This only works as the shadowContainer is mapped to the same size as this component so the //x and y positions correspond 1 to 1 var shadow:HangingShadow; shadow = ( shadowDictionary[ child ] as HangingShadow ); shadow.setActualSize( child.width, getStyle("baseShadowHeight") ); shadow.move( child.x, child.y + child.height + getShadowDistance( centerOfCircle, radius, newPoint.y ) ); shadow.scaleY = scale; } }
原文链接:http://www.billdwhite.com/wordpress/?p=21
另:http://help.adobe.com/en_US/flex/using/WS460ee381960520ad-2811830c121e9107ecb-7ff9.html
发表评论
-
Flash应用的本地缓存以及AS3单例模式
2011-03-01 14:47 2850package { import flash.net.Sh ... -
Flash Socket通信的安全策略问题
2011-02-22 16:45 1223今天测试flash socket连接java socket,遇 ... -
Flex4中[Bindable]做了什么?
2011-02-17 22:49 1717Flex里面[Bindable]相 ... -
使用 Flex Ant Tasks 构建 Flex 项目
2011-02-11 18:08 15521. 安装ant,然后复制FLEX_H ... -
AlertBox With No Buttons! (HACK)
2011-01-21 17:06 780Browsing around EE today, I fou ... -
HTML Text in a Flex Alert box
2011-01-21 14:26 940A quick and easy way to render ... -
Flex 国际化参考
2010-11-29 16:59 859做一个记录和mx.utils.StringUtil.subst ... -
Learn how to create a simple virtual layout in Flex 4
2010-11-13 14:30 1119This post goes over the basics ... -
深入理解Flash Player重绘
2010-10-12 22:00 843Flash Player 会以SWF内容的帧频速度 ... -
AlivePDF本地生成PDF
2010-09-29 10:07 2855直接上例子吧,本来想用html布局生成pdf的,没成功。。。 ... -
Flex 备忘
2010-09-10 11:15 11321. 读取从swf传进来的参数 var first_na ... -
Flex Component Life Cycle
2010-09-02 22:39 806The lifecycle of component in f ...
相关推荐
《Understanding SCA (Service Component Architecture)》是一本由Jim Marino与Michael Rowley共同撰写的书籍,旨在帮助读者深入理解服务组件架构(Service Component Architecture,简称SCA)。本书于2009年7月出版...
#### Understanding the Integration: Eclipse and Flex Builder The transition from Flex Builder to Eclipse as the primary development environment is a common one, particularly in teams with a strong ...
This new edition of Understanding Oracle APEX 5 Application Development shows APEX developers how to build practical, non-trivial web applications. The book introduces the world of APEX properties, ...
在AngularJS中,模型(Model)是MVC(模型-视图-控制器)架构中的核心组成部分,它负责存储应用程序的数据。理解模型组件对于掌握AngularJS的工作原理至关重要。本文将深入探讨AngularJS模型的概念、创建方法以及其...
Marco takes you through the workings of the example step by step, and then presents some expert's tips, which will take your understanding further, and give you unique insights into Flex development....
GDC 2019 Understanding Data-Oriented Design for Entity Component Systems PPT
It is the technology upon which the GNOME and XFCE desktop environments are based, and its crucial to have clear understanding of its complexities to build even a simple Linux desktop application. ...
Numerous books have been written about C. They usually offer a broad ...That higher level of understanding for C can only be achieved with a solid understanding of pointers and the management of memory.
A hands-on, example-driven guide to developing Drupal websites that covers everything from site building, theme development, creating custom modules, as well as the development environment Who This ...
You will finish this book with a deep understanding of the test-driven development methodology and the confidence to apply it to application programming with Java. What You Will Learn Explore the ...
根据提供的文件信息,可以得知“Understanding Understanding”是由Heinz von Foerster所著的一本书籍,该书以“Essays on Cybernetics and Cognition”为副标题,涉及的领域是认知理论与人工智能。书名中的...
Learning the behaviours and roles each component must have in order to make a videogame. Learn about videogame development Creating a videogame without the need of learning any programming language ...
阅读`flex_4_lifecycle.pdf`、`understanding_the_flex_3_lifecycle_v1.0.pdf`和`flex-4-component-lifecycle.pdf`这些文档,则能提供理论知识和最佳实践,帮助开发者更好地掌握Flex4组件的生命周期管理。
针对Java语言,结合实例介绍测试驱动...You will finish this book with a deep understanding of the test-driven development methodology and the confidence to apply it to application programming with Java.