In the next few sections, we'll look at examples that use data binding to achieve a variety of goals.
Example 12-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 12-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="file:///C|/ Documents and Settings/All Users/Documents/My Pictures/ Sample Pictures/Water lilies.jpg" /> <mx:Object label="Sunset" data="file:///C|/ Documents and Settings/All Users/Documents/My Pictures/ Sample Pictures/Sunset.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" ...