| In this task, you will work on the Dashboard application. You will make a call to an HTTPService that returns all the grocery categories and IDs and uses the returned data to populate a ComboBox control. This task differs from the last in that you will do the common practice of adding an "All" type selection to the ComboBox control. Seldom will the XML or database table contain an "All" type selection for the user interface control that consumes the data. In this case you use the addItemAt() method of the ArrayCollection class to add such an option. 1. | Open a web browser and browse to the following URL:
www.flexgrocer.com/category.xml
Notice the structure of the XML. Your goal in this task is to populate a ComboBox control with this information. The XML contains a repeating node, category, which contains the information you will need to populate the ComboBox control.
| | | 2. | Open up Dashboard.mxml. Add a script block, directly below the mx:Application tag, and two import statements that will import the ArrayCollection class from the mx.collections package, as well as the ResultEvent from the mx.rpc.events package. Add a [Bindable] ArrayCollection property with the name of categories, and set it equal to a new ArrayCollection.
<mx:Script> <![CDATA[ import mx.collections.ArrayCollection; import mx.rpc.events.ResultEvent; [Bindable] private var categories:ArrayCollection=new ArrayCollection(); ]]> </mx:Script>
You will be binding an ArrayCollection to the ComboBox control. As a best practice, it makes sense to use an ArrayCollection for data binding with a complex data structure because you want it to update when any changes are made to the data structure. To use an ArrayCollection, you need to import the class. You will also be using a ResultEvent with the HTTPService class, so you need to import it as well.
| 3. | Directly below the script block, add an <mx:HTTPService> tag. Assign it an id of catRPC and specify the url property to http://www.flexgrocer.com/category.xml. Specify the result handler to call catHandler() and be sure to pass the event object, as follows:
<mx:HTTPService url="http://www.flexgrocer.com/category.xml" result="catHandler(event)"/>
You are specifying the URL of the HTTPService to point to the XML you examined in step 1. Later you will write a result handler with the name of catHandler that will be called when the data has been retrieved. Remember, an event object is created every time a result event occurs.
| 4. | Move to the top of the application and add a creationComplete event that calls the catRPC HTTPService using the send() method.
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" creationComplete="catRPC.send()">
To actually execute the HTTPService call, you must use the send() method. Remember, just adding the tag does not execute the call.
| | | 5. | Returning to the script block, add a new private method with the name of catHandler(). Be sure to name the parameter event and specify the type as a ResultEvent. Populate the ArrayCollection, categories, with the event.result.catalog.category ArrayCollection returned from the HTTPService and stored in the event object.
private function catHandler(event:ResultEvent):void{ categories = event.result.catalog.category; }
As in the first task, you have retrieved data and placed the ArrayCollection that is returned in a variable, in this case categories.
| 6. | Now you are going to programmatically add another option to the ComboBox control. Start by creating a new object with the name of catObj just below where you assigned categories a value in catHandler(). Set a property as name with the value of All, and set another property as categoryID with a value of 0. Your code so far should appear as follows:
private function catHandler(event:ResultEvent):void{ categories = event.result.catalog.category; var catObj:Object = new Object(); catObj.name = "All"; catObj.categoryID = 0; }
Here you created the Object that will be added to the ArrayCollection, and hence the ComboBox, in the next step.
| 7. | Now add the object to the first index of the ArrayCollection by using the addItemAt() method and specifying catObj and the first index, which is 0. Finally, set the selectedIndex of the ComboBox to 0 so the new item in the collection is selected at startup. Your code should appear as follows:
private function catHandler(event:ResultEvent):void{ categories = event.result.catalog.category; var catObj:Object = new Object(); catObj.name = "All"; catObj.categoryID = 0; categories.addItemAt(catObj, 0); catCombo.selectedIndex = 0; }
Because the data structure from the server does not include an All property, you need to add it manually in the result event handler then make it the selected item.
| | | 8. | Locate the ApplicationControlBar. After the endDate DateField and above the <mx:RadioButtonGroup> tag, add a ComboBox control and assign it an id of catCombo. Specify the dataProvider property to the categories ArrayCollection, as follows:
<mx:ComboBox dataProvider="{categories}"/>
You are specifying the dataProvider for the ComboBox to be the ArrayCollection that you built in the last step.
| 9. | In the <mx:ComboBox> tag add a labelField property to the control. Specify the value of name for the property, as follows:
<mx:ComboBox dataProvider = "{categories}" labelField = "name"/>
If you compile the application without adding the labelField property, the ComboBox would not know which property or field to use as the label property. You can specify any of the field names in the data structure as the labelField property. In this case, you specify the name field because you want the name of all the categories to be displayed.
| 10. | Save and run the application.
You should see that the ComboBox has been populated with the XML data you examined in the first step, as well as the word "All" in the first index.
 | 11. | Close the file.
|
|
