CODEWITHSUNDEEP
actionscript-3apache-flexactionscriptflex4.6
ShawnPConroy
ShawnPConroy

Reputation: 239

Changing States does immediate make changes in Flex

I have an application that switched between different graphs in Flex. Each graph is it's own state. In the MXML I have it set so that the source of the image change when the state changes:

<s:Image id="chartImage"
         source.all="{ callImages.all }"
         source.classA="{ callImages.classB }"
         source.classB="{ callImages.classA }"
         />

I have buttons that successfully change the images. However, I have a small bug which occurs because after the line

this.currentState = chartName;

My code expected the graph image source to be changed, however the actual change to the s:Image element doesn't appear to happen until after the function ends and the screen updates, I assume. So when it grabs chartImage.height, it uses the old one from the state I just left.

Is there a way to have it get the new image (and thus it's dimensions) so I can do calculations with those dimensions on the next line? So far, chartImage.height returns the height from before the state change, but it is different after the function executes.

I could run a timmer after a fraction of a second then execute the lines there, and it would work. However, I'd rather tell it to render the screen and then continue my code. Is this possible? It just seems more elegant.

Upvotes: 0

Views: 256

Answers (2)

Mark Fox
Mark Fox

Reputation: 8924

You generally can't change the source of an image in Flex and then immediately check ("on the next line") it's height — the exception might be when the source is a raw bitmap, but even then Flex's layout framework will vary depending on different factors so I wouldn't rely on this.

This is the classic problem with Flex: the beauty (and misery) of the framework is that it progressively renders it's changes to maximize the responsiveness of the app. Google "flex component life cycle" for a ton of resources about the details of this process.

There are a couple of ways to deal with this. Usually you'll want to use binding expressions, since they are designed for exactly this reason: asynchronous layout changes. Don't overuse them but they are a solid tool to keep the codebase simple and flexible.

You can bind to the height of a SparkImage via mxml: 

<s:Image id="chartImage" />
<s:Label id="debugLabel" text="{ 'Height of chartImage: ' + chartImage.height }" />

but if you need to run logic I'd recommend using the BindingUtils (in the script block):

import mx.binding.utils.BindingUtils;

protected function someOtherFunctionBlock():void
{
    BindingUtils.bindSetter( handleHeigtChange, image, "height" );
}

protected function handleHeigtChange( value:Number ):void
{
   // Deal with value change
}

Upvotes: 1

JeffryHouser
JeffryHouser

Reputation: 39408

Is there a way to have it get the new image (and thus it's dimensions) so I can do calculations with those dimensions on the next line?

Each Flex component must go through it's own validation cycle, which is built on top of the Flash Player's rendering mechanism. There are some great posts out on this, if you perform a Google search for the Flash/Flex Elastic Racetrack.

However, you can force a component to run through it's validation methods in a linear manner by calling the validateNow() method.

It is possible--especially if you have a state transition--that the properties on your Image have not changed yet after you set the currentState variable.

Upvotes: 2

Related Questions