Changing 'top' property at runtime in Flex

Question

In the follow Canvas, how do I change the property top at runtime?

<canvas top="10"/>

I tried:

<canvas top="{ topVariable }"/>

But the binding doesn't seem to take effect. How can this be achieved?

Answer 1

If this is Flex 3, then myCanvas.setStyle("top", 10); (top is a style not an ActionScript property).

Answer 2

Your example must be missing something. I built this quick application with the top value bound and it works just fine. Be sure you're not setting the X and Y (or really just the Y) properties as they would override the top style.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init();" borderStyle="none" borderColor="#000000" borderThickness="5">
    <mx:HSlider id="slider" x="10" y="463" minimum="0" maximum="100" snapInterval="10" enabled="true"/>
    <mx:Canvas width="200" height="200" borderStyle="solid" borderColor="#000000" borderThickness="3" top="{slider.value}">
    </mx:Canvas>

</mx:Application>

Answer 3

It sounds like your Canvas is embedded in something that already handles layout and thus will ignore top, like HBox or VBox. If that's the case then try setting padding on your container or nesting your Canvas inside another Canvas which will utilize the top setting.

Answer 4

The right way to do it is in did with SetStyle method (as CoreyDotCom show above) just do:

myCanvas.setStyle('top',[your own value])

But (there is always a "but") be careful with this way of use, notice that this line is could very expensive in performances issues, it initiate the object's renderering life cycle, which of course could make all its children to do it too and so on.

Hope it helps...