Using Data Binding with Complex Data Structures

In this task, you will display the information from the Array you built from the XML using data binding. For data binding, it is a best practice to use the ArrayCollection class because it will automatically update the visual controls if the underlying data structure changes. A plain old vanilla ActionScript Array does not have this functionality.

1.	Return to EComm.mxml. At the top of the script block, add an import statement that will import the ArrayCollection class from the mx.collections package. import mx.collections.ArrayCollection; This will give you access to the ArrayCollection class for use in the application.
2.	In the <mx:Script> block below the import statements, declare a bindable, private variable named groceryInventory as an ArrayCollection. [Bindable] private var groceryInventory:ArrayCollection; This declares a private ArrayCollection that you can use throughout the application. You can now use the data binding functionality of the ArrayCollection class, and you will be able to display the data in the visual controls.
3.	In the prodHandler() method, but outside the for each..in loop, on the last line of the method replace the TRace statement and assign the groceryInventory variable a new ArrayCollection object. Pass the prodArray as a parameter to the ArrayCollection constructor. groceryInventory=new ArrayCollection(prodArray); This code takes the local array, prodArray, and places it in the ArrayCollection with the name of groceryInventory. You can now use this for data binding anywhere in the current application.
4.	Near the bottom of the file locate the first VBox that displays product information. Modify the code in the VBox to bind the appropriate data to the new ArrayCollection you just created, groceryInventory, rather than displaying static data. Use the getItemAt() method of the ArrayCollection and pass the number 0 to this method, which represents the first index of the Array. When you pass the object to the addToCart() method be sure to cast it as a Product. <mx:VBox width="100%" height="100%"> <mx:Label text="{groceryInventory.getItemAt(0).prodName}"/> <mx:Image source="{'assets/'+groceryInventory.getItemAt(0).imageName}" scaleContent="true" mouseOver="this.currentState='expanded'" mouseOut="this.currentState=''"/> <mx:Label text="{groceryInventory.getItemAt(0).listPrice}"/> <mx:Button label="Add To Cart" click="addToCart(groceryInventory.getItemAt(0) as Product)"/> </mx:VBox> You have changed all the data binding to use an ArrayCollection. Data binding will now work and display the appropriate controls and images. The getItemAt() method of collections is defined to return an Object. The addToCart() function is defined to accept a Product as a parameter. If you did not cast the returned Object you would get the "implicit coercion" error. By using "as" to cast the returned item you tell the compiler you understand the difference exists and you want the compiler to ignore it in this case.
5.	Within the expanded state, bind the appropriate data to the new ArrayCollection you just created: groceryInventory. <mx:VBox width="100%" x="200"> <mx:Text text="{groceryInventory.getItemAt(0).description}" width="50%"/> <mx:Label text="Certified Organic" visible="{groceryInventory.getItemAt(0).isOrganic}"/> <mx:Label text="Low Fat" x="100" y="60" visible="{groceryInventory.getItemAt(0).isLowFat}"/> </mx:VBox> This code will set up data binding for the product at array position 0 in the ArrayCollection. In a later lesson, you will learn how to dynamically create controls based on an incoming data structure.
6.	Save and run the application. You should see that the data is now bound to the controls. Be sure to roll over the Buffalo item to see the description in the view state.