Adding a Generic DataGrid to ChartPod

This task will have you extending the current ChartPod.mxml, created in Lesson 10, "Creating Custom Components with ActionScript 3.0," in two ways. The first is to add a DataGrid, in which you can view sales data that is passed in. The second is to add a property to the component to allow the containing MXML file to pass in the data set that the component should use when displaying the data in the DataGrid. This task will focus on the base usage of the DataGrid, which allows for the DataGrid to get the definition of which columns it will use from the data set.

1.	Open the ChartPod.mxml file. If you didn't complete Lesson 10 or if you were unhappy with the state of the application after that lesson, you can copy Lesson11/start/views/dashboard/ChartPod.mxml to your flexGrocer directory.
2.	Below the beginning <mx:MaxRestorePanel> tag, place an <mx:Script> block to enable you to declare attributes that can be passed into the component. <mx:Script> <![CDATA[ ]]> </mx:Script> This is needed to allow you to import classes and declare functions and properties for the ChartPod.
3.	Inside of the script block, add an import for the mx.collections.ICollectionView class. import mx.collections.ICollectionView; The attribute passed into the component will be of type ICollectionView, so you need the import to data type the attribute.
4.	Below the import, declare a public variable, named dp, which will hold the reference of the data passed into the component. Make it of type ICollectionView and make it [Bindable] so that the DataGrid can update its data as the property value changes. [Bindable] public var dp:ICollectionView = null; A value of null is used to act as the initial state of the property until a value is passed in. The [Bindable] metadata is used to tell the compiler that this property is being watched by another part of the application.
5.	Below the script block, insert an <mx:DataGrid> tag. <mx:DataGrid /> It is not necessary for you to always define columns for a DataGrid. By not defining any columns in the DataGrid definition, the DataGrid will implicitly create a column for each column of the data set that is assigned to it. Also, you don't need to worry about how the DataGrid is positioning relative to the ControlBar because of the ControlBar's behavior of placing itself at the bottom of the component.
6.	In the <mx:DataGrid> tag, set the width and height to 100%. <mx:DataGrid width="100%" height="100%" /> This means that the DataGrid should fill 100% of the width and height of its parent.
7.	Bind the dataProvider attribute of the <mx:DataGrid> tag to dp. <mx:DataGrid dataProvider="{dp}" width="100%" height="100%" /> This will set the data set for the DataGrid to whatever is passed into the component.
8.	Save the ChartPod.mxml file. There is no need to test this component at this point because you don't have data being passed to it yet.