Flex Snippet Tutorial - Bindable Meta Tag Part 3

This is the third piece in a snippet tutorial series about the Bindable meta tag. This time I am going to go through how to use custom events with your bindable objects. Part 1 of the series can be found here and part 2 can be found here, they cover the basics of the tag and how to use it in simple situations.

The example program works like this: you can enter a name and age and these will be bound to two variables, which also are bound to a couple labels on the bottom half of the app. The labels on the bottom will not, however, reflect the changes until the button "Update Info" has been pressed. This is when the events are dispatched for the bound properties and the bottom labels are then updated. As you can see the application is fairly simple.

Starting with the user interface we add a panel which holds all the other components. The other components include the text inputs and all the labels. Two of these labels will be bound to variables which we will we create later. The beginning interface code looks like the following:

The rest of the code is used for the data binding. We start with the actionscript that declares the two variables for the name and age. Using the [Bindable] meta tag we declare each one bindable but we use a special syntax to say what the event name is. This is done using [Bindable(event="eventName")]. Once this syntax is used though you have to dispatch the property bind events yourself. The start of the script code goes right beneath the opening application tag.

Now we are going to bind our two new variables to the text input components and to the labels in the bottom half. The code below uses the <mx:Binding> tag to bind the text inputs to the variables - this goes right after the <mx:Script> tag. The second piece of of code is for the new labels at the bottom which are bound to the variables.

Now the labels.

The only thing left to do is hook up the button to trigger the event. We create a simple function in the actionscript to dispatch the event.

This first piece is the updated button.

Second, this function goes inside our script tag.

That pretty much takes care of it. We are left with this final code for the example.

Now, you might ask, why would you want to use this technique - well there are several reasons. The first one that comes to mind is to wait for the data to be validated before dispatching the updated data. Another reason is you might want something else to happen successfully before sending out any updates, in a work flow type situation. I hope you all find this short little tutorial useful. If there are any questions just drop a comment.