Flex 2: Rich Internet Applications in a Flash!

Getting Wild with Data

We've finished the general layout of our Flex application. Now, let's move on to one of the coolest features Flex provides -- we're going to bind a data source to our form, and watch Flex automatically handle all the details for us.

In the finished example code, under the main form markup that we've already covered, you'll find an ArrayCollection element. Copy and paste this section into the MXML code. The ArrayCollection contains all the data that we need to show about the company leaders. It's pretty long, so here's a shorter version that only contains the details of a single person, Darron Bryant.

<mx:ArrayCollection id="people">  
 <mx:Object>  
   <mx:image>images/darron.jpg</mx:image>  
   <mx:name>Darron Bryant</mx:name>  
   <mx:title>Chief Technology Officer</mx:title>  
   <mx:description>Darron leads the charge when it comes to developing new products. He's passionate about riding the bleeding edge of technology to take advantage of every new development.</mx:description>  
 </mx:Object>  
</mx:ArrayCollection>

MXML features a native ability to bind data sources to the properties of components. Let's start out by binding the names of the ArrayCollection we just added to our List component:

<mx:List id="names" dataProvider="{people}" labelField="name" selectedIndex="0"/>

You'll notice that the dataProvider property contains curly brackets, which sit around the "people" collection. This is how Flex discovers that we want to bind the data source to our List. When Flex binds data, it automatically generates all of the boring event-handling code that would be such a hassle for us to write in ActionScript. Flex can determine when the data in the "people" collection changes, and it will notify every event listener that's listening for those changes. With just those two brackets, we get dozens of lines of code for free.

The next property, labelField, tells the List which property from our data source it should show when displaying text on the List. In this case, we're looking for the name of the person whose details we're displaying. Our first person's name is Darron Bryant, so his name will appear as the first item in the List. I've also set the selectedIndex to 0. This means that Darron's name will be selected by default.

For the first time so far, a change to the code will not be reflected in the design view -- to see data binding in action, we need to run our application. Click the Run button on the main toolbar (it's the green circle with the white arrow in it).

Running the application in Flex Builder

When you click the Run button, Flex Builder opens your default web browser and displays your application. Unlike the design view, this display lists a series of names that we can click on.


The sample application with simple data binding in play

Let's take our binding a step further so that something actually happens when we choose a name from the list. When the user clicks on a name, we want additional information about that person to appear in the Form to the right. Data binding is pretty flexible, so let's use a little inline ActionScript to populate the Form.

<mx:TextInput id="nameInput" text="{people.getItemAt(names.selectedIndex).name}"/>

We've taken the selectedIndex from the List and used it to retrieve an object from the data source. This object represents one of the people we're dealing with; we can access the name property based on this index. Run the application again, and click on a couple of the names. Thanks to Flex, the data changes with almost no effort on our part! Alter the two other TextInput boxes -- titleInput and descInput -- to display a person's title and a short description of him or her. The code to do this should be almost identical to the code that retrieved the person's name.

Let's look at one last example of data binding. Since we're recognizing this group of people for their leadership ability, we probably want to show users of the application what they look like. You may have noticed the first property in our data source that makes reference to an image. We're going to bind this image property to an Image component, in order to display a picture when a person is selected. Start by adding a few elements around the Form:

<mx:VBox horizontalAlign="center" width="100%">  
 <mx:Image id="picture"                        source="{people.getItemAt(names.selectedIndex).image}"/>  
 <mx:Form id="details">  
   // removed Form code for brevity //  
 </mx:Form>  
</mx:VBox>

Directly above the Form, we've added the Image component. I've already bound its source property to the data source in the same way I bound the TextInput boxes to the data source previously. Around the image and Form, you'll see a component called a VBox. Boxes are special layout components that help keep our application organized. You'll remember that we set the Panel's layout property to "horizontal". We want the Image to appear directly above our Form; the VBox gives us the vertical alignment we need, and it affects only the components that are inside the box. The HBox does the same, except it aligns its children horizontally.

Look for the images you'll need in the downloadable source archive. Once you've included them with your project, and run it, you'll see that the images change with the rest of the data whenever you click on a name in the List component.

We just need to do one more thing to make our application fully functional. You may have noticed the button on the form that says Save Changes. After a user changes a person's data, he or she should be able to save the updated profile. The next time the person is selected, the modified data will be displayed.

We want this to happen after the user clicks on the Save Changes button. We'll use the click event property to trigger a function call:

<mx:Button label="Save Changes" click="this.saveChanges();"/>

We're going to get a little more advanced at this point. We used a small amount of ActionScript to handle the event binding; now, we're going to write a short function right inside our MXML document that will let us save the data. Let's add a Script element to the application and put our function inside:

<mx:Script>  
 <![CDATA[  
   private function saveChanges():void  
   {  
     var updatedPerson:Object =                      this.people.getItemAt(this.names.selectedIndex);  
     updatedPerson.name = this.nameInput.text;  
     updatedPerson.title = this.titleInput.text;  
     updatedPerson.description = this.descInput.text;  
     this.people.setItemAt(updatedPerson, this.names.selectedIndex);  
     this.people.refresh();  
   }  
 ]]>  
</mx:Script>

When the saveChanges function is called, we use getItemAt to access the profile from our data source, and we set each of its properties manually. Next, the setItemAt function overwrites the previous data. Finally, we call the refresh function to inform the ArrayCollection that we altered some of the data, and Flex will take care of the rest.

Congratulations! You've run your very first working Flex application. The appropriate data will display whenever you click on a person's name in the list, and you can save any changes you make to the data back to the data source. With a little data binding and some ActionScript for the more advanced functionality, building a web application couldn't be simpler.

Enhancements ... and More!

If you're looking to do more, you might want to add a Reset button, which users could click to restore the person's data to its previous state (if for example, they decided not to save the changes they'd made to a profile). You could also create a custom item renderer for the names list, to display a thumbnail of each person's picture next to his or her name. You might even pull the data from a different source.


Adding an image to each of our fearless leaders

Take a look at some styling code I added to my final version of the application (if you've coded any CSS before, this will look familiar):

   Panel  
   {  
     borderStyle: solid;  
     headerColors: #e7e7e7, #d9d9d9;  
     backgroundAlpha: 100;  
     paddingTop: 10;  
   }  
   List  
   {  
     paddingLeft: 10;  
     paddingRight: 10;  
     paddingTop: 10;  
     paddingBottom: 10;  
   }

Flex's style system includes many different properties, and by creating your own assets inside Flash or Photoshop, you can change the appearance of your application entirely. Imagine changing the skin to match your company's branding and marketing materials. With a little work, you could even create a skin to match the default theme of Windows or Mac OS X. The possibilities are endless!

Resources

The resources available to teach you about developing with Flex are growing quickly, with most of the information provided by Adobe. If you're interested in learning more about Flex, I'd encourage you to check out some of the following resources:

The FlexCoders mailing list is worth subscribing to.

For some more introductory material, look no further than the Flex Quick Start guide.

You'll also want to visit Adobe's new development community site, Flex.org. It just launched with the release of Flex 2, and Adobe has plans to expand it to include all sorts of great community interaction related to Flex.

Adobe has put a great demo app online to showcase most of what is possible in Flex called JamJar.

Finally, you should check out Adobe's listing for Flex blogs. These folks share all sorts of information about their own discoveries.

Summary

In this article, we've barely scraped the surface of a whole new way to build Rich Internet Applications. We took a brief look at the Flex development cycle for building web applications using MXML and ActionScript, then looked at using the Design View of Flex Builder to create a simple page layout. We added some data binding to populate a list on this page, and we then went one step further by writing a small amount of ActionScript that saved the changes a user made to the data. Finally, I pointed you in the direction of some other resources that you can use to expand your Flex development skills.

I hope this has given you a taste for just what's possible with the Flex 2 framework. Now it's up to you to get out there and start flexing your muscles!