Using the New Data Manager Component | Adobe Flex 2: Training from the Source

This will be the first of several times you use the new data manager component to retrieve data for an application. In this case, you'll remove the <mx:HTTPService> tag from the main application, DataEntry.mxml, and instead instantiate the new data manager component. With the new data manager component instantiated, you will then use it to get both a list of categories and a list of categorized products. The list of categorized products is used immediately in the UpdateDeleteProd component, and the list of categories will be used later, when you build yet another component in this lesson.

Open DataEntry.mxml. Remove the <mx:HTTPService> tag that has the id property of prodByCatRPC. Also remove the invocation of the send() method for this remote procedure call (RPC) in the creationComplete event of the <mx:Application> tag. Finally, remove the <mx:XMLListCollection> tag.

Here you are removing all the code associated with the <mx:HTTPService> tag that retrieved categorized product information. This will shortly be replaced by instantiating the new data manager component.

Check to be sure that your DataEntry.mxml page appears as follows:

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"    layout="vertical"    creationComplete="unitRPC.send()"    xmlns:v="views.dataEntry.*">    <mx:Script>       <![CDATA[          import mx.collections.ArrayCollection;          import mx.rpc.events.ResultEvent;          [Bindable]          private var units:ArrayCollection=new ArrayCollection();          private function unitRPCResult(event:ResultEvent):void{             units =event.result.allUnits.unit;          }       ]]>    </mx:Script>    <mx:HTTPService        url="http://www.flexgrocer.com/units.xml"       result="unitRPCResult(event)"/>    <v:UpdateDeleteProd       units="{units}"       foodColl="{foodColl}"/> </mx:Application>

Make sure that you have a clean base to start with before adding in new code that uses the new data manager component.

Add the following namespace definition in the <mx:Application> tag:

xmlns:m="managers.*"

After working so hard to build the new data manager component, this code will allow you to access it.

Near the bottom of the file, just above the closing </mx:Application> tag, instantiate the new data manager component, named CategorizedProductManager, and assign the id property to be prodMgr. Remember that you'll need to use the m: prefix to instantiate this.

<m:CategorizedProductManager />

The fruits of your labor are beginning to pay off. You have now instantiated the new component from which you can invoke methods to retrieve data.

In the <mx:Script> block, add a bindable private variable named categories, data typed as an ArrayCollection. Add another bindable private variable named foodColl, datayped as an XML.

The categories variable will be used to store the array of categories retrieved from the data manager component. The foodColl variable will be used to store the grocery items stored by category.

Just above the end of the <mx:Script> block, create a public function named categorizedProductDataLoaded(). Have the function accept a parameter named aCats, data typed as an Array, and data type the function itself as void.

public function categorizedProductDataLoaded(aCats:Array):void{ }

This is the function that is called from the data manager component. Remember that this is a bad practice that will be remedied later.

As the first line of code in the function, set the categories variable equal to a new ArrayCollection with an argument of aCats:

categories = new ArrayCollection(aCats);

Also in the function, set the foodColl variable equal to the invocation of the getCategorizedProducts() method of the prodMgr component instance.

foodColl= prodMgr.getCategorizedProducts();

Be sure that the main application file DataEntry.mxml appears as follows:

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"    layout="vertical"    creationComplete="unitRPC.send()"    xmlns:v="views.dataEntry.*"    xmlns:m="managers.*">    <mx:Script>       <![CDATA[          import mx.collections.ArrayCollection;          import mx.rpc.events.ResultEvent;          [Bindable]          private var units:ArrayCollection=new ArrayCollection();          [Bindable]          private var categories:ArrayCollection;          [Bindable]          private var foodColl:XML;          private function unitRPCResult(event:ResultEvent):void{             units = event.result.allUnits.unit;          }          public function categorizedProductDataLoaded(aCats:Array):void{             categories = new ArrayCollection(aCats);             foodColl= prodMgr.getCategorizedProducts();          }       ]]>    </mx:Script>    <mx:HTTPService        url="http://www.flexgrocer.com/units.xml"       result="unitRPCResult(event)"/>    <v:UpdateDeleteProd       units="{units}"       foodColl="{foodColl}"/>    <m:CategorizedProductManager /> </mx:Application>

Now the new data manager component is built and is being used, so it's time for testing.

Note

When you save DataEntry.mxml, you will be getting an error that is corrected in the next step by changing a data type of a public variable.

10.

Open UpdateDeleteProd.mxml and change the data type of the public variable foodColl from XMLListCollection to XML. Remove the import of the XMLListCollection class. The variable declaration should appear as follows:

public var foodColl:XML;

You are now passing XML instead of an XMLListCollection, so this data type must be updated.

Note

You do not need to import the XML class to replace the XMLListCollection because it is automatically imported as part of the Top Level package. You can see this by looking in ASDoc at the Package information.

11.

Locate the instantiation of the Tree component. Add the showRoot property to the Tree and set it equal to false. Also set the width of the Tree equal to 200 pixels.

<mx:Tree     height="100%" width="200"    dataProvider="{foodColl}"    labelField="@name"    change="populateForm(event)"    showRoot="false"/>

The foodColl data used in the dataProvider binding has a root node of catalog which you do not want to be visible. You make the root node not show by setting the showRoot property to false.

12.

Run DataEntry.mxml. Select a product from the Tree and you should see that the form fills correctly.

After all the work in the last two tasks, you might be a little disappointed that no new functionality appears to the user. Remember that the last two tasks were for rearchitecting the application, not adding functionality. You now have a component to provide product and category data whenever you need it throughout the three applications.