Creating and Using a Component for the Dashboard Application

In the Dashboard application there are three Panels that currently exist and will eventually display charting data. In this lesson, you abstract those Panels into components. In a later lesson, you will abstract those components even further to add functionality such as maximizing and minimizing.

1.	Open Dashboard.mxml and run it. You will be rearchitecting this application. In the end, you must be sure to have the same results as when you start, so give it a look now to refresh your memory.
2.	Create a folder named dashboard under the views folder. The views for each application will be stored in separate locations.
3.	Right-click the dashboard folder and then choose New > MXML Component. In the New MXML Component dialog box, set the filename to be ChartPod.mxml and the base component to be a Panel. After you have selected Panel, the layout option appears. Set the layout to be vertical and remove any width and height values; then click Finish. <?xml version="1.0" encoding="utf-8"?> <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"> </mx:Panel> In this case you are using a Panel as your root tag for this component because it will be used to replace some Panel tags in the main application file.
4.	In the new component, insert a <mx:ControlBar> tag set. Because the <mx:Panel> tags you are replacing with this component had ControlBars, the component also needs them.
5.	Check to be sure that your new component appears as follows: <?xml version="1.0" encoding="utf-8"?> <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"> <mx:ControlBar> </mx:ControlBar> </mx:Panel> At this time you are just creating the component, not putting any content into it.
6.	Return to Dashboard.mxml and insert a new namespace in the <mx:Application> tag so the new component can be used. Set the letter v to be the prefix: xmlns:v="views.dashboard.*" Remember that you must use the XML namespace so the new component can be located correctly.
7.	Locate the three Panels near the bottom of the file. Remove the three sets of <mx:ControlBar> tags. You will replace three instances of the Panel with instances of your new component, which now contains a ControlBar.
8.	Replace <mx:Panel> with <v:ChartPod> in the six places you see it. Do not change any other properties or associated values. Both opening and closing tags will be modified: <v:ChartPod width="100%" height="100%" title="Sales Chart"> </v:ChartPod> <mx:VBox width="100%" height="100%" > <v:ChartPod width="100%" height="100%" title="Category Chart"> </v:ChartPod> <v:ChartPod width="100%" height="100%" title="Comparison Chart"> </v:ChartPod> </mx:VBox> That finishes up the creation of the component and its use in the Dashboard application.
9.	Run the Dashboard.mxml and you should see no difference in the look of the application. Again, this was a rearchitecting change, with no new functionality added from the user's point of view.