Flex 3 Basics – Introduction to Data Binding

It sounds a lot like a buzzword for developers, but what is data binding exactly? Is it even useful? In short, absolutely. Chances are you’ll be working with some sort of data in Flex. With data bindings,  a developer can link data automatically between sources and targets. Still confused? Imagine a label set to automatically display the value of a selected button. It’s a simple concept that has an incredible amount of usefulness when building RIA’s. On second thought, let’s just build it.

Setting Up the Workspace

Start up Flex 3 Builder, and making a new project. Name it anything you’d like, it won’t affect any of the steps we’ll be going through. Make sure to change the default layout from “absolute” to “vertical” so the components will arrange correctly.

New Application - Data Binding

The ActionScript

Switch to the source view if needed, and begin by making a script tag directly below the application tag. This will contain the ActionScript we’ll be writing. Think of Flex’s <mx:Script> like the HTML <script> tag’s RIA cousin.

You’ll notice that once you complete the opening tag everything else will automatically be filled in. Flex is convenient like this. If you you start typing a keyword (IE: script) Flex will still bring up the auto complete for a tag. Typing the “mx:” prefix on tags gets tedious with big apps, so just skip it!

In order to work with a variable data, we first have enable binding for it. By adding the code [Bindable] on a line immediately preceding a variable, we declare it to be bindable. Make a bindable variable called selectedName of data type String and give it an initial value of “nobody”. Your code should look something like this:

Caution: The [Bindable] line is something specific to each variable, and must be declared to each. One will not cover them all!

Next we’re going to write a basic function that will be used in displaying the contents of ‘selectedName’ in a label we’ll make shortly. It will be called ‘changeName’, and will receive a parameter ‘changeTo’ string which will assign to the ‘selectedName’ variable. Hopefully you’ve come up with something that looks like this:

After this, we’ve finished with the ActionScript. All that’s left to do is make the components to house all this good looking ActionScript.

Design & Layout

We will need a label, and two buttons. The label’s text will display a sentence with a selected name. The buttons with each contain a name to be displayed in the label’s contents. You have the option of building these visually in design view or via MXML in source mode depending on your comfort level. I have opted to get in some extra practice, man up, and do it via MXML. We’ll start with the label:

A bound data source is specified by brackets in Flex. In this instance, the {selectedName} will load the contents of the selectedName variable (Which we’ve enabled as bindable earlier) and display it within the sentence.

The buttons will each pass a string containing a name to the changeName function. Recall that the changeName function’s purpose is to reassign the value of selectedName, so essentially we are replacing the current name with a new one. Feel free to personalize.

Save the project and run it. With luck, the label should display a new name whenever each button is displayed. Here’s the completed code for error checking:

And there you have it. Another reason to love Flex.

See the live demo with extra example

Download the project source files

An honest admission to those of you with past Flex experience: this was a roundabout way to display a component’s value. To reconcile, the attached source files include an additional example of directly binding to an input’s value without the use of variables. If you’re not looking for a high degree of flexibility, the direct binding would suit just fine. The goal for this explanation was to introduce an interactive means of binding variables. If you’ve got it figured out, go ahead and optimize! Be sure to share your results in the comments!

Posted Friday, December 5th, 2008 · Back to Top

SPONSOR

Add Comment

3 Comments 6 Mentions

  1. apad Author Editor

    Nice resources! great info for the masses
    .-= apad´s last blog ..PHP Contact Form with jQuery Validation =-.

    ·

  2. Siddharth Author Editor

    This is a useful one. However, I have already gone thru’ it and a little bit more in Flex Charting. I wonder if there’s a way to pass XML data to Flex components like “Panel Title” so that we can control Title of the Panel or similar components from external data – just like “xField”, “yField” and “categoryField”. Would really appreciate any light on the subject please.

    ·

  3. Jacklyn Author Editor

    This site was… how do you say it? Relevant!! Finally I have found something which helped me.

    Thanks!

    ·

 

Build Internet by One Mighty Roar. Since 2008.