Making Your Model Bindable in Flex

I decided to write on a beginner topic today, so if you know everything there is to know about binding then you may want to pass.

When writing a Flex application I always write “model” objects which represent the data and business logic of my application. These would be the User objects, the ShoppingCart object, or the Document objects (see MVC). The MXML components will bind to these object’s data, and as such, I need to make sure that they will dispatch the correct events for binding to occur.

There are really two main practices to keep in mind. The first is to put the [Bindable] tag at the top above your model class. Putting it outside the class tells the compiler to apply it to every single public property (or getter/setter) in the class. This shortcut saves a lot of time and keeps you class from being cluttered with Bindable tags over each property. And if you have a specific case where the property is already dispatching an event that can be listened to you can still use [Bindable(“specificEventName”)] over the property where these occur.

The second practice is to always use ArrayCollection over Array for public properties. This makes you learn a new API as you now have to addItem rather than push and so on, but it allows you to update this property and have the updates refresh Trees or Lists that may be displaying your property. Many-a-time I’ve had to go back and refactor my application to use an ArrayCollection in an area where I didn’t think I’d need it. So now I always use them. If I suddenly need to list those items in a List it is all set to go and any code that modifies the ArrayCollection triggers an update to the list’s display.

One last note on using your own events as the events that trigger bind updates, make sure when you do use them such as [Bindable(“specificEventName”)], that you always add an “if (value == {currentValue}) return;” where {currentValue} is the private variable that you store the data in. This ensures your binding does not get into an infinite loop when you have a two-way or circular bind (e.g. page is bound to currentPage is bound to selectedPage is bound to page).

I hope that’s helpful to some. I’d like to keep a variety of stuff on here, but mostly I’m motivated to write about stuff I get excited about. :)

3 Responses to “Making Your Model Bindable in Flex”

  1. barry.b Says:

    thanx Jacob.

    could you clarify the last point about circular binding? I get what you’re saying but I’m having trouble “seeing” it…

  2. scott cornwell Says:

    This is the best 1 hour tutorial you can get on binding – if the link becomes invalid it was called
    “Diving in the Data Binding Waters with Michael Labriola”

    http://www.onflex.org/ted/2008/08/diving-in-data-binding-waters-with.php

    I always kinda understood binding but this takes it to the next level

  3. Lucas Thomas Says:

    Hey Jacob,

    I saw this link posted on Flex 3’s documentation. I just thought I’d add to it even though it was posted three years ago.

    Have you given much thought about this since then? I don’t agree with ArrayCollection. I’m on a Flex project and we have decided to use ArrayList or an IList implementation.

    The problem I see with ArrayCollection is when you use a sort or a filter on the collection. This will cause update issues when views are updating your model.

    I do agree, however, that using Array’s on your model class is not a good idea. I prefer to use interfaces.

    Just a thought.

    Lucas