Flex Hello 2: Properties and Binding
I added a couple of simple features to my Flex sample: Binding, and centering the window.
By adding the viewSourceURL attribute to the Application tag, I've enabled a View Source menu item on the player's context menu, so you can see the source just by right-clicking and selecting that. This is Flash trying to give back some of the functionality that users like in HTML content, like View Source, and the ability to drag-select text (which you'll notice you can do in my little sample).
You'll notice I put the main Panel into a VBox which fills the entire application window (thanks to its width="100%" and height="100%"). The VBox uses horizontalAlign="center" and verticalAlign="middle" to control the layout of its children, so that our panel ends up centered.
The slick part of this little sample, though, is binding.
When you run the sample, you get some text that tells you the size of the Flex app (which is the size of the client area of the browser window), and the current mouse position.
The size of the Flex app is included by using the curly brace notiation for binding. Almost anywhere you can specify a value, you can include curly braces and embed ActionScript code, and the result of that code will replace the curly braces and their content.
So,
"The container size is {Application.application.width} x {Application.application.height}"
becomes:
"The container size is 1276 x 878."
And as you change the window size, the values update. Notice there's no code at all for updating these values? The curly brace syntax sets up listeners that listen for changes to the properties being bound to.
The next bit is a little tricker, because the mouseX and mouseY values are special values that are updated by the Player, not by ActionScript code - so you can't listen to them using the curly brace syntax. So instead, I have code in the Application tag that, when the mouse moves, updates some variables.
mouseMove="myMouseX=event.stageX; myMouseY=event.stageY"
So whenever the mouse moves, these two variables are updated - and because these variables are declared using the [Bindable] attribute:
[Bindable]
private var myMouseX:int = mouseX;
[Bindable]
private var myMouseY:int = mouseY;
You can listen to them. That's how "Your mouse cursor is at {myMouseX},{myMouseY}" becomes "Your mouse cursor is at 231,455".