Flex Snippet Tutorial - Bindable Meta Tag Part 1

We here on the blog decided to start trying to give daily updates and this is the first smaller daily update. Don't worry we will still keep up with our larger in depth tutorials at least a couple times a week. But we just want to put some more content out and thought this would be a nice way to do it.

So heres a quick rundown of a very cool way to bind data in Flex. The way you can do this is a very simple meta tag called Bindable. First, you probably want to know what exactly a meta tag is. Meta tags are pieces of information you use in your code to tell the compiler certain things. The tag itself does not get compiled into the binary executable. You can find more information about meta tags here in the Adobe documentation.

So the [Bindable] tag lets you tell the compiler that an object or value can be mapped to a property and can be triggered by an event or value change. I don't know how much sense a small description is going to make so a couple examples should help.

In the first example, as seen below, we are just going to bind a variable we create to the text of a label. This will automatically copy the value of our variable to the text in the label. So we start off with a very simple flex interface, I am not going to go over much of the interface code but basically we have put a label and button on a simple panel.

Now I am going to go over the interesting parts of the code below. The first interesting thing we see is the <mx:Script> tag which lets us put actionscript in our mxml file. Next we get to our all important [Bindable] declaration and the variable that is being binded to. So basically this piece tells us that our public var ourLabelText is bindable and whatever is bound to it will automatically be updated with the variable changes, but this is only one way. Next you see a small function to change the value our our variable. Now down in the label tag we see that our text attribute has been set to {ourLabelText}. This is the other important part of binding our data, this actually tells the text property of the label to be bound to the ourLabelText variable. And last we set the click event of our button to the actionscript function we created to change the variable to show that the label will be automatically updated.

That gives you a quick use of the [Bindable] meta tag. I will show you one more example real quick which will show how to bind data from a component on our screen back to a variable. Now this binding syntax is a little different but accomplishes the exact same thing as above, and could be used instead of the above approach. The example app below shows our data being bound from a text input to a variable and then the variable is bound to our label. Basically making it so when you type in the textbox it shows up in the label.

Ok, now a quick rundown of the code below. First we see that nothing is crazy in the interface code except the <mx:Binding> tag that is used. This is what we use to bind the data from our text input to our variable. You will also notice we don't have to use brackets { } inside the source and destination attributes because it already expects a variable/property there. Also you see that the source is our txtInput.text which tells the compiler we want to bind the value in our text field to our destination inoutText. Now we have backwards data binding. Just to make the example complete we bind the variable to our label using the same approach as above. So here is the code.

Now you know how to bind data to and from mxml components and actionscript variables. The next part in this data binding series we will go over binding data from a custom class we have made. If your looking for more information on the [Bindable] meta tag check out Part 2. Feel free to ask any and all questions you have about the above code.