Flex & resizing browser window
I’m working on a fluid Flex application and ran into a small problem. Whenever the user resizes the browser window, Flex seems to wait for a small while to see if the window continues to resize and only renderes the view when resizing stops for about 50ms or so.
If I hook up to the resize-event of the application instance, it gets fired almost every frame when I resize the browser window. I also tried to invalidateSize() on the resize-event, but that does not help. Any ideas?
5 Comments
Follow me on Twitter!
Other services
The problem is, even though Flash Player updates every frame, this doesn’t happen when resizing the browser. Therefore, 50 milliseconds (I argue 300+) is good enough. If you increase it, you are using unecessarely processor cycles.
Some could argue that that extra refresh makes the design look better. You usually don’t get the onResize refresh rate you get in the Flash Player standalone / IDE that you get in the browser, but some want as much as possible.
Regardless, it’s up to the browser, not Flash. Firefox is the frikin’ worst. Give up, I say.
Are you using Resize event handler of mx:Application with some custom resizeEffect?
Or alternatively are you using pure AS3 approach without applying Flex containers?
http://www.adobe.com/devnet/flash/articles/liquid_gui.html
Hi JesterXL, it’s not an issue with the Flash Player, really. If I don’t use the Flex Framework and instead whip up a AS3 project, I can create a very fluid GUI, which updates during resizing at about 25fps on Firefox, even more on IE. The Flex Framework implements some kind of browser resize-redraw throttling, and I just don’t know where to disable it.
I know it takes up processor cycles, but I don’t care, really. I don’t think the user cares about multitasking, when he’s resizing his browser window;)
Hi Andrey, Thanks for the link, but I really want to use Flex’s layout mechanism. Currently I’m letting Flex handle everything. You know you can simply try it out by constraining a single button to the right side of the application.
OK, you want to rely on the power of Flex 2 UI layout containers and something like this:
–Code starts
mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”
mx:Button verticalCenter=”0″ horizontalCenter=”0″ label=”Hello, I am centered button”
/mx:Button
/mx:Application
–Code ends
Why the UI view is not refreshed with a 50ms delay after resize of the browser window had occurred i n that case?
I am guessing that’s the price you pay for changing styles for Flex 2 UI components at the runtime
“left”, “right”, “top”, “verticalCenter” are all specified as styles of UIComponent, the father of all UI elements in Flex 2 framework.
Handling any style change at the runtime had never been very performance wise neither in Flash v2 components nor Flex 2 UI IMHO.