Ted On Flash: Property binding in Flex

Property binding in Flex

DIGG IT! 3 Comments Published Thursday, June 16, 2005 at 8:54 AM .

Outside of layout management, property binding is my favorite feature of Flex. It is so drop dead easy that it should be criminal. This features has pulled me out of a jam in several situations.&

Any property in MXML can have a property binding. All you do is put curly braces within the quotes for the property and whatever AS is within will become a function at compile time. It sounds bazaar but it becomes second nature one you try it.

<mx:Button label="{ new Date().toString() }"/>

The above MXML will render the current system date/time onto a button. The call the new Date().toString() returns a string of the current time. The code within curly braces is put into a function called when the label value changes.

<mx:Button click="{ myFunction( event ) }"/>

It also supports multiple calls too:

<mx:Button click="{ myFunc0( event );myFunc1( event );myFunc2( event ); }"/>

In this one I assigned the button event "click" to a function defined within curly braces. In this case, when click happens, the code in curly braces will call myFunction or the series of functions.

Another handy use is positioning. Flex masks all movieclip properties to allows bindings to be supported. So if you find that you need to roll your own positioning within a canvas here is how to do it.

EXAMPLE SWF

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
  <mx:Canvas id="C1" width="100%" height="100%">
    <mx:Button id="TC" x="{ C1.width/2 - TC.width/2 }" label="Top Center"/>
    <mx:Button id="BC" x="{ C1.width/2 - BC.width/2 }" y="{ C1.height - BC.height }" label="Botton Center"/>
    <mx:Button id="MC" x="{ C1.width/2 - MC.width/2 }" y="{ C1.height/2 - MC.height/2 }" label="Middle Center"/>
    <mx:Button id="TR" x="{ C1.width - TR.width }" label="Top Right"/>
    <mx:Button id="BR" x="{ C1.width - BR.width }" y="{ C1.height - BR.height }" label="Botton Right"/>
    <mx:Button id="MR" x="{ C1.width - MR.width }" y="{ C1.height/2 - MR.height/2 }" label="Middle Right"/>
    <mx:Button id="TL" label="Top Left"/>
    <mx:Button id="BL" y="{ C1.height - BL.height }" label="Botton Left"/>
    <mx:Button id="ML" y="{ C1.height/2 - ML.height/2 }" label="Middle Left"/>
  </mx:Canvas>
</mx:Application>
So next time you need to code your way out of a layout issue, just think property bindings. You can make some killer layouts using canvas and property bindings.

Cheers,

ted ;)

3 Responses to “Property binding in Flex”

# Matt June 16, 2005 8:04 PM

Flattery will get you everywhere :-) The one thing I'd like to point out is that you don't need those curly braces in the Button click handler. "click" is an event so the code in quotes is always treated as actionscript code. The curly braces don't cause any harm, but they aren't necessary because you're not really doing binding, just filling in the equivalent of an event handler function.

And for those of you getting started with binding and running into problems I suggest checking out our docs: http://livedocs.macromedia.com/flex/15/flex_docs_en/00000697.htm which are based on an article I did on my blog.
# Ted Patrick June 17, 2005 9:47 AM

Matt, I should have named this "Attribute Binding". Thanks for the added info on the events.

Cheers,

ted ;)
# Anonymous December 20, 2007 8:47 AM

You just solved my problem! Now my movie control centers within my canvas.

Thanks!

Alex ......

Ted Patrick - Flash Platform @ Adobe Systems

Note: This is the personal blog of Ted Patrick. The opinions and statements voiced here are my own.

Property binding in Flex

3 Responses to “Property binding in Flex”

Where to find me:

Latest

Lists

Links

Jobs

Archives