Programming Flex 3

Data Binding Examples

In the next few sections, we’ll look at examples using data binding to achieve a variety of goals.

Controlling Images

Example 14-6 uses data binding to work with images. Using a combo box, the user can select an image to view. Using data binding, the value of the combo box is linked to the source property of an image component. Additionally, the example uses three slider controls to control the alpha, width, and height of the image, all of which are linked using data binding.

Example 14-6. Data binding example

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:VBox x="0" y="0" height="100%" horizontalAlign="center"> <!-- Add a combo box with several options. Each option has a label and then a data property that contains a URL to an image. --> <mx:ComboBox id="imageUrl"> <mx:Array> <mx:Object label="Water Lilies" data="example1.jpg" /> <mx:Object label="Sunset" data="example2.jpg" /> </mx:Array> </mx:ComboBox> <!-- Place the image within a canvas with a fixed size so that when the image resizes it won't cause the rest of the layout to change --> <mx:Canvas width="160" height="120"> <!-- Make sure maintainAspectRatio is set to false so you can change the width and height independently. --> <mx:Image id="image" width="160" height="120" alpha="0" maintainAspectRatio="false" /> </mx:Canvas> <!-- Add three labels and sliders. --> <mx:Label text="Alpha"/> <mx:HSlider id="imageAlpha" minimum="0" maximum="1" ...