Flex resizing revisited

Mar 5, 2007   //   by Tuomas Artman   //  7 Comments

I earlier had the problem of slow responses to resizing the browser window and having the Flex Framework layout stuff with constraints. I revisited the problem, since our app is making it’s way to beta and I wanted to fix this bummer. As it turns out, it was really easy (there’s a lot of documentation in Flex, so it sometimes can take a while before you find what you’re looking for).

Anyhow, Flex2 does indeed throttle measure and layout passes (components get layout for every tenth or so resize event in my case), but using validateNow – method of the UIComponent class you can force measurement and layout of a component and all it’s children. Placing this:

private function init():void {

stage.addEventListener(Event.RESIZE, resize);

}



private function resize(e:Event):void{

this.validateNow();

}

into the application class wil make things resize aaahso smoothly.

7 Comments

  • I believe, by doing so, you are calling very expensive operation in CPU terms (this.validateNow() whenever Stage changes its size by 1px.
    Resize animation can be stalled on slow machines…

  • Damn right it’s CPU intensive, and it has to be! Nothing good has ever come out of a CPU running at 15% ;)
    Anyways, luckily resize events are dispatched only after each render cycle (and only one at a time), so running it on a slow computer will not put 100 events in the que and bog down the application. So basically this is exactly what I want: Whenever the user is resizing the window, the application will take up all processing power to render the resizing as quickly as possible. I’ll add this code to _every_ single Flex app I write. I just can’t think of a reason to _not_ to render as quickly as possible when the user resizes the browser window.

  • validateNow = haaaaaaaaaaaaandy.
    taa

  • Thanks… I was just about to embark on trying to solve this problem. Luckily your blog came up on the first page of Google search results :-)

  • I have a VBox & . And using the same methods as in your example. Instead of this I use the reference to Vbox . But it does not resize all its children immediately. I have a chart & a legend inside the Vbox. The legend resizes but the chart does not. Immediately after using validateNow(), I add it to the printjob. But the chart which is printed is not resized. But on the screen I can see the chart has resized. So, it seems there is a delay in which the chart is resized and it happens after it is added to printjob? Any options to this?

  • Thanks for the post. I was looking for some solution as to how to detect when the browser resizing has finished. My question is :-
    Cant we use updateComplete event to see when the browser has finished resizing? Calling validatenow will also result in updateComplete being called finally.

  • Fantastic. Thanks so much!!

Leave a comment