Question/Baffled about how binding works

Question

In an attempt to position my canvas in the center of the
user's browser (no matter what the size). I ended up using the
following code. The Application is set to a width and height of
100%.
<mx:Canvas id="primaryCanvas" horizontalScrollPolicy="off"
verticalScrollPolicy="off" x="{(parentDocument.width >
backgroundImage.width)? parentDocument.width /2 -
primaryCanvas.width / 2 : 0}" y="{(parentDocument.height >
backgroundImage.height)? parentDocument.height /2 -
primaryCanvas.height / 2 : 0}">
In particular, focus on the x and y attributes. This works as
I expect, as in, I get the result I want. However, I'm a bit
baffeld about the under pinnings about how/why it works :)
How does the canvas know to re-position itself each time the
browser is re-sized?
How would I make these bindings into a function so I don't
have to have my "code" intermingled with the actual mxml parts? Or
is this even possible?
I have read various things on binding but still have the
above outstanding questions.
Shiv.

Answer 1

This is how it appears to work to me...
The binding mechanism recognizes bindable variables in the
expression you give it. If any of those variables change, the
entire expression is re-evaluated. In this case,
parentDocument.width is a bindable variable.
One thing you can do is bind to a method call. The trick is
to pass the method a bindable variable so that the binding
mechanism calls your method whenever the variable changes.
Something like:
x="{getx(parentDocument.width)}"
And getx() does the calculations and returns an int.