Jumpy flex layout

Question

I'm relatively new to Flex however needed to take over maintenance and development of an application after a bit of a crisis. I'm familiar with AS3 and OOP in general if that's any help.

The application is built using Flex builder 3, Flex SDK 4.1 and is based around the Halo theme. Main.mxml contains a few navigation bits and pieces, application border and a canvas named placeholder.

As the user navigates around the site the state of the Main.mxml is changed, and based upon that the appropriate "screen" is then swapped within the placeholder with no animation applied (Sometimes a ProgressBar halts progress until data has loaded). Each screen is the same size as the main application, based around a mx:Canvas and set to position its self at 0,0 thus filling the entire window.

First off, is this a good approach, would you make any recommendations on things to change?

Next, some screens are suffering from some strange jumping with the layout and positioning and for the life of me I cannot figure out why. It's happening on a number of visual elements.

My first example being a button built using hbox, image and text controls. The hbox has been modified to include gradient backgrounds however the issue occurs when using the default mx hbox. The first image is on first render having had no interaction, the second is after I have rolled my mouse over it, and the 3rd (and correct) image is after leaving that screen and then returning. Notice it is no longer being clipped and includes the rounded corners on the right hand side too.

My second example is harder to capture but I have a series of 4 gradient buttons based around the flexlib advanced button skin stacked in a mx:vbox. On first display they are correct, on second display they appear correct but when hovering over them something seems to change but I'm not sure what which causes the buttons beneath to jump down by about a pixel for each button hovered over. After each button has caused that jump, everything is ok again.

And finally, when returning to the previous screen the entire screen appears to jump to the left slightly just after it has displayed giving it a very jerky appearance.

Many thanks for any help

EDIT - Success

After many hours of trying your suggestions and messing about removing elements from the stage one by one i eventually discovered the source of the problem to be the borderMetrics property of the VideoDisplay control. After removing these (i'm not even sure why they were there in the first place) all of the strange display issues I was suffering from went away.

Many thanks for the suggestions!

Answer 1

After many hours of trying your suggestions and messing about removing elements from the stage one by one i eventually discovered the source of the problem to be the borderMetrics property of the VideoDisplay control. After removing these (i'm not even sure why they were there in the first place) all of the strange display issues I was suffering from went away.

Answer 2

I'd recommend posting some code for your button so we can analyze it, but what you are seeing is the result of the component measuring itself multiple times. The way I've combated this in the past is to either set explicit sizes on the component and its subcomponents, and/or add judiciously placed minWidth="0" properties on the components/subcomponents. The latter is an old trick to cause a component to measure itself properly. Hope that helps. If not, post some code. Good luck.