Glitchy screen redraws in flex application?

Question

I have a flex/actionscript based project. The project has various view stacks and tab navigators and a few popup windows. The whole thing is managed in pureMVC framework.

When transitioning between various view states, opening a popup, switching a tab, etc, I find the app to exhibit various redraw glitches. Parts of views will be partially drawn or flicker in odd ways. I am fairly confident that the code is working correctly, just seems to be an issue with the overall heaviness of the UI.

Is this a common issue? Are their tried and true techniques to optimize this problem?

In particular what event handlers are available to delay the drawing of view components until the last moment when everything is ready to quickly display to the screen?

Say for example I have a VBox inside a viewstack, and inside this VBox I have a fairly complex datagrid. Can I prepare the datagrid and/or delay the viewstack change until all subview components are in fact ready to be quickly drawn.

What are some possible symptoms to this kind of glitchiness?

Answer 1

Not sure if this applies to you, but in Firefox/OSX there is a known bug when you make too many javascript calls, and the result is similar as you say... the whole interface shows various glitches and flickers... The solution was to delay the JS calls a bit, so they don't get called too often... this was a serious issue with swfaddress for instance (I think it still is).

http://www.bigspaceship.com/blog/labs/mac-firefox-30-flash-javascript-random-artifacts/

Answer 2

just a guess, but this might be related to the flex framework ... i experienced this kind of behaviour too ... i guess it is related to the way flex framework works when carrying out ui tasks ... a lot of deferred instantiations/calls and so on ... when there is a lot going on, the framerate drops and since deferring is framebased, that is probably when the resulting delays become noticable ...

Answer 3

I assume you need the datagrid already attached to its parent container and you are loading data while it's being shown so it constantly updates and renders its content.

Have you simply tried setting its visibility to false until everything is loaded while keeping includeInLayout true and giving it a fixed size?