Flex Snippet Tutorial - Bindable Meta Tag Part 2

This short tutorial is part two in an ongoing series of tutorials about the Bindable Meta Tag in Flex. If you need a refresher check out the first part. So lets get to it.

Here we have a quick example that shows us binding some data again. But this time instead of having a bunch of [Bindable] variables in our <mx:Script> we are going to create a class to hold this data. Now the neat thing that we can do is create the class and declare the entire class [Bindable]. And this will enable you to use all the properties of this class as if they were each declared [Bindable].

So as you can see in the example we have a couple of fields (Name, Position, and Age) which are bound to some text boxes and labels and as we update the contents of a textbox, its corresponding label updates.

The class we create is going to be a very simple data holding object. The only special thing we need to do with this class definition is add the [Bindable] tag above the class declaration. This tells the compiler that we want all the public properties for this class to be bindable. Now this will not make private or protected properties bindable. If you need them to be bindable you need to add the [Bindable] meta tag to them individually. But since our class doesn't have anything but a few public properties and a constructor we are good to go. You can see the class code below.

Now we have a completely Bindable class to use. Next lets take a quick look at the interface for this example - it is just a typical mxml interface. It has a panel that fills the application area, a few labels, and a couple text boxes. Once everything is in place, we end up with the code below:

The next thing we need is a bit of script to instantiate our EmployeeEins class and initialize the values. We do this by adding a function to creationComplete event for our application and a variable for our employee. So our new application tag looks like the following:

Now its time to add a a <mx:Script> section beneath our application code. This code imports our src files, declares a variable to use, and finally creates the function "initApplication()" (which is called from our application creation complete event). In the initApplication function we set our variable to a new instance of our class and initialize the values through the constructor. Once that is all done, it should look something like this:

Now, as you remember, we made our class bindable so why do we have to add the bindable tag to the variable as well? This is because when we made our class bindable we told the compiler that it was ok to bind to the public properties of that class, but making the variable bindable tells the compiler that we can now bind to this particular instance of our class. All that is left to do is bind the properties of our class to the labels and text boxes like normal - meaning we set the text properties of our labels and text boxes to the properties of our employee class instance. Also, we need three instances of the <mx:Binding> tag, one for each textbox (these tags will take care of changing the variable as the user changes the contents of the textbox. And all of this leads to the final code below:

This code should give you a decent understanding of how to use the [Bindable] meta tag on classes and how to bind fields on classes to visual components. If you have any questions about this tutorial please leave a comment. Also look for a part three soon on, which will explain some of the advanced things that can be done with the [Bindable] Meta tag.