Here’s a quick beginners tutorial on creating loosely coupled components in Flex by using the property bindings and eventDispatchers.

I’m pretty much a beginner to Flex myself and just learned these techniques from watching the Lynda.com Flex Tutorials. This approach is so central to Flex development that I felt it was worthwhile to go over and over it until I got my head wrapped around it.

The basic premise behind building loosely coupled components in your applications is that your components share data without being hard wired to each other.

By analogy: a car has a gas gauge – the application. The GasGauge has a needle, to display the FuelLevel – a component. There might also be a warning light that lights up to indicate that the FuelLevel is nearing empty.

In the hard wried approach the FuelLevel component would tell the WarningLight component to light up.

In the loosely coupled version the FuelLevel component would dispatch an event – nearingEmptyEvent – to whom ever might happen to be listening. In this case the GasGauge application would be listening. The WarningLight would get it’s cue regarding whether or not be be lite-up by looking at the appropriate property in the application. If either one of these components are removed from the application then nothing breaks.

In this example I have used the DateChooser to create a calendar. When the user clicks on a date another component displays the selected date as a string. Presumably the DisplayDate component would do something a little more complex than simply showing you the date as a string. Perhaps it would update a database or something. I tried to keep this example as simple as possible just to show the essentials.

Here is a simple walk through of the application. The code is thoroughly commented so you might want to skip right to it.

When the user clicks on the DateChooser the Calendar component broadcasts that event – dateChangedEvent. That’s it. It doesn’t do anything else and it doesn’t know, or matter, if anything is listening. It’s responsibility is to simply make the announcement when the event, dateChangedEvent, occurs.

As it happens the main application file – Date_main – is listening. When it receives notice that the dateChangedEvent has occurred it changes its own property – dateAsString.

The dateAsString property is in turn bound to a property of the DisplayDateAsString component – passedDateString. The nice thing about this last part is that it doesn’t take any Actionscript to work. It’s all built in via the binding of component properties.

Yakov at Farata Systems has a similar tutorial that’s a more advanced than this one. You might want to give that one a shot to.