Welcome, Guest. Please login or register.
Did you miss your activation email?
05/22/12, 07:52
Home Help Search Login Register
News: Parsley Flex framework review featuring quiz application, in our Flex frameworks series
Flex SDK 4.5 mobile roadmap: begin with your mobile development
Swiz Flex framework review featuring quiz application
New homepage we release our new Homepage, take a look ...

+  Flash-db
|-+  General
| |-+  Flex, Air, FlashBuilder, Catalyst (Moderators: ..:: Mazhar Hasan ::.., kofi addaquay)
| | |-+  Event resize fails in Flex?
0 Members and 1 Guest are viewing this topic. « previous next »
Pages: [1] Print
Author Topic: Event resize fails in Flex?  (Read 1968 times)
Jorge Solis
Administrator
Systems Administrator
*****
Posts: 14600


View Profile
« on: 02/05/10, 06:17 »

This kind of things like the title of this post is the first you think when something doesn't go as expected, and I should admit that even knowing that probably is my fault, my first reaction is to say: this is a bug.
But experience teach that most of the time, probably we're the cause of the error. Ok, direct to the story, I want to resize a component when user resize the browser, so you need to add the proper listener:

this.stage.scaleMode StageScaleMode.NO_SCALE
this
.stage.addEventListener(Event.RESIZEcheckResize);

This will cancel automatic behaviour on resizing and gives you the control. Then inside the function you position or resize manually elements. My goal is to resize a panel but seems to fail. Switching between two sizes (instead to manually resize the browser by hand), that's pressing F11, so switch full screen/normal screen for the browser, I discover that my panel takes always the old size of the container, not the new one, and this is because the measurement phase for the componets happens after the Event was dispatched.
Solution?
I discover that the Application width/height was allways correct, so I do my calculations based on the whole application size instead of only the container, since I should work based on percentages due to the liquid layout I have in mind. Sequence uis:

Application resizes ->Event is dispatched -> components fires his render routines

Jorge
Logged

kofi addaquay
Global Moderator
Senior Programmer
*****
Posts: 450



View Profile WWW Email
« Reply #1 on: 02/05/10, 10:39 »

i feel your pain on this one Jorge. with flex components comes a time when one really needs to delve into understanding the flex component life cycle in order to solve a simple problem. anyway, thinking off the top of my head might be to create your own custom panel component that implements mx.core.IUIComponent (this as you already know defines all the functions necessary for a class to be considered a UIComponent). this is so that your component can override the measure() function and/or the updatedisplaylist() function when it needs to.

what i have read is that measure() is NOT always called and one needs to sometimes set flags using the invalidatedisplaylist() function in order for updatedisplaylist() to be called. i guess the point i am trying to make is by creating your own custom components u have to power to call the components interface methods whenever needed(in your case resize the panel). the only problem for me ...is knowing exactly when this is needed SmileySmiley just thinking out loud

Kofi
Logged
Jorge Solis
Administrator
Systems Administrator
*****
Posts: 14600


View Profile
« Reply #2 on: 02/05/10, 11:39 »

invalidateDisplay is a choice because it forces the component to measure again. Probably next time will go trough this path, but calling manually methods from the component cycle life is probably not much scalable.
And since it comes in handy around this discussion, will copy here the components layout cycle life, where you can see that key methods are commitProperties, measure and updateDisplayList

Quote
Stage 1 - Commitment pass

Determines the property settings of the application's components. This phase allows components whose contents depend on property settings to configure themselves before Flex determines their sizes and positions.
During the commitment pass, the Layout Manager causes each component to run its commitProperties() method, which determines the property values.

Stage 2 - Measurement pass

Calculates the default size of every component in the application. This pass starts from the most deeply nested components and works out toward the Application container. The measurement pass determines the measured, or default, size of each component. The default size of each container is based on the default or explicit (if specified) sizes of its children. For example, the Box container's default width is equal to the sum of the default or explicit widths of all of its children, plus the thickness of the borders, plus the padding, plus the gaps between the children.
During the measurement pass, the Layout Manager causes each component to run its measureSizes() method (a private method that calls the measure() method) to determine the component's default size.

Stage 3 - Layout pass
Lays out your application, including moving and resizing any components. This pass starts from the outermost container and works in toward the innermost component. The layout pass determines the actual size and placement of each component. It also does any programmatic drawing, such as calls to the lineTo() or drawRect() methods.
During the layout pass, Flex determines whether any component's sizing properties specify dimensions that are a percentage of the parent, and uses the setting to determine the child component's actual size. The Layout Manager causes each component to run its updateDisplayList() method to lay out the component's children; for this reason, this pass is also referred to as the update pass.

Jorge
Logged

Pages: [1] Print 
« previous next »
Jump to:  


Powered by MySQL Powered by PHP Powered by SMF 1.1.16 | SMF © 2011, Simple Machines Valid XHTML 1.0! Valid CSS!