| In a grocery application, there would be many, many grocery items. So many, in fact, that it would not be reasonable to display minimal information and a thumbnail image for each item without making the user do lots of scrolling to see them. To ease the process, the idea of categories of items will be used. The first step of getting this functionality to work is to display the categories. In a later task, you will make the categories clickable and display corresponding grocery items; but, for now, you will just get the categories to display. At this point in the application, the categories will be displayed as text and be clickable using a HorizontalList control.  Putting to work what you learned in Lesson 7, you will build a component to display the categories and then instantiate it where you want the categories to be displayed. 1. | In the FlexGrocer project, locate the views folder. Create a subfolder named ecomm.
| 2. | Right-click on the ecomm folder and choose New > MXML Component. In the New MXML Component dialog box, set the filename to be CategoryView.mxml and the base component to a HorizontalList; then click Finish.
| 3. | Below the <mx:HorizontalList> tag, insert an <mx:Script> block. In the <mx:Script> block, import the mx.collections.ArrayCollection class. Also in the <mx:Script> block, create a bindable public variable named cats, data typed as an ArrayCollection:
<mx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] public var cats:ArrayCollection; ]]> </mx:Script>
To reiterate an important concept from Lesson 7: when you used the var keyword and public access modifier, you created the cats property of the CategoryView class.
| | | 4. | Add the dataProvider property to the HorizontalList and bind it to the cats ArrayCollection.
<mx:HorizontalList xmlns:mx="http://www.adobe.com/2006/mxml" dataProvider="{cats}" >
When you instantiate this component, you will pass to it an ArrayCollection that contains all the category information. This information is the category name, named catName, and that category primary key value, named catID.
| 5. | In the <mx:HorizontalList> tag, set the itemRenderer equal to views.ecomm.TextAndPic.
<mx:HorizontalList xmlns:mx="http://www.adobe.com/2006/mxml" dataProvider="{cats}" itemRenderer="views.ecomm.TextAndPic" >
Remember that when you supply the value for the itemRenderer, you do not include the filename's extension, which could be either .mxml or .as. Include the path to the itemRenderer from the location of the main application file: EComm.mxml.
| 6. | Set the horizontalScrollPolicy to off.
<mx:HorizontalList xmlns:mx="http://www.adobe.com/2006/mxml" dataProvider="{cats}" itemRenderer="views.ecomm.TextAndPic" horizontalScrollPolicy="off" >
The tolerances of the images displayed are tight, and horizontal scroll bars are not needed.
| 7. | Right-click on the ecomm folder and choose New > MXML Component. In the New MXML Component dialog box, set the filename to be TextAndPic.mxml and the base component to a VBox. Set the width to 100 pixels and the height to 75 pixels; then click Finish.
<?xml version="1.0" encoding="utf-8"?> <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100" height="75"> </mx:VBox>
This is the skeleton of your itemRenderer.
| 8. | In the <mx:VBox> tag, set the horizontalAlign to center.
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100" height="75" horizontalAlign="center">
| | | 9. | In the body of the component, display an image. The image is a JPEG file that is located in the assets folder. The name of the file is the same as the category name with the string nav_in front of the name and a .jpg extension. Remember that the data passed to this itemRenderer is in an object called data, and the category name is in a property called catName. You need to use string concatenation in the binding for the source property to create the correct path to the image. Also set the height of the image to 31 pixels and the width of the image to 93 pixels.
<mx:Image source="{'../assets/nav_'+data.catName+'.jpg'}" height="31" width="93"/>
Tip  | Adding words together is referred to as string concatenation. In ActionScript, you simply use the plus sign (+) to perform string concatenation operations. Notice that when using string concatenation in a binding, the braces surround the entire expression, or alternatively, you could have used the following syntax: source="../assets/nav_{data.catName}.jpg" where the braces are around only the variable name and you do not need the plus signs. |
The HorizontalList will use this renderer component once for each category object in the dataProvider, so you will have a unique image displayed for each category.
| 10. | Under the image, use an <mx:Label> tag to display the category name. Again, the data passed to this itemRenderer is an object called data, and the category name is in a property called catName. Set the width of the Label control to 100%.
<mx:Label text="{data.catName}" width="100%"/>
This is all your renderer file will do: display an image associated with the category and under that display the category name.
| 11. | Open EComm.mxml. Add the following XML namespaces to the <mx:Application> tag so you can use the files you've just built in this lesson, as well as the data manager component built in the last lesson:
xmlns:v="views.ecomm.*" xmlns:m="managers.*"
| 12. | Create a bindable private variable named categories, data typed as ArrayCollection.
This variable will store the category information when retrieved from the data manager component.
| 13. | 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 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 in the next lesson.
| | | 14. | As the first line of code in the function, set the categories variable created in step 12 equal to a new ArrayCollection with an argument of aCats:
public function categorizedProductDataLoaded(aCats:Array):void{ categories=new ArrayCollection(aCats); }
This assigns an array of categories built in the data manager component to your categories variable.
| 15. | At the bottom of the page, just above the closing <mx:Application> tag, instantiate the data manager component named CategorizedProductManager, and assign the id property to be catProds. Remember that you'll need to use the m: prefix so the component can be located.
<m:CategorizedProductManager />
You are now seeing the benefit of building the data manager component in the last lesson. Rather than having to write all the functionality that retrieves the category data, you can just instantiate the data manager component and use data from it.
| 16. | Locate the ApplicationControlBar. Below the two Labels that display the text Flex GROCER, insert the CategoryView component. Set the id to catView, the width to 600 pixels, the left property to 100 pixels, and bind the cats property to the categories ArrayCollection.
<mx:Label x="0" y="0" text="Flex"/> <mx:Label x="0" y="41" text="GROCER"/> <v:CategoryView width="600" left="100" cats="{categories}"/>
| 17. | In the <mx:Canvas> tag that contains the CategoryView, set both the horizontalScrollPolicy and verticalScrollPolicy to off.
<mx:Canvas width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off">
You do not want scroll bars anywhere in the ApplicationControlBar, and this will ensure that none appear.
| 18. | Run your EComm.mxml main application file and you should see the categories being displayed.
 |
|
