Up to this point the only functionality available in the e-commerce application was selecting products and adding them to the shopping cart, which is all implemented by using states. You will now add a home page and a checkout process. You will build a ViewStack and Buttons to navigate between the home page, product selection, and checkout screens.
1. | Copy the file HomePage.mxml from Lesson13/assets to your flexGrocer/views/ecomm folder.
Feel free to open this file and see that it contains no code that you haven't already worked with.
|
2. | Open EComm.mxml and locate near the bottom of the file the HBox with the id of bodyBox.
You will add two more containers to this HBox in a ViewStack.
|
3. | Just above the bodyBox HBox, instantiate the new HomePage.mxml component. Give it an id of homePage.
<v:HomePage />
Because this will be the first child in the ViewStack, it will be the page displayed by default.
|
4. | Create a new MXML component in the views/ecomm folder named Checkout.mxml and use a VBox as the base tag. Remove any width and height values.
This is the page that will control the checkout process.
|
5. | In the component, use a Label to display the text "In the checkout component".
This is just temporary to test the navigation. Later in this lesson you will complete the checkout process.
|
6. | In EComm.mxml (just below the closing tag for the bodyBox HBox and just above the instantiation of the CategorizedProductManager), instantiate the new Checkout.mxml component. Give it an id of checkout. Also set the width and height to 100%.
<v:Checkout width="100%" height="100%"/>
Later in this lesson this component will turn out to be a controller for the checkout process.
|
7. | Run EComm.mxml and select a grocery category. You should see the home page, products, and text from the checkout component all stacked up on each other.
This mess will soon be cured with navigation.
|
| |
8. | Surround the HomePage, bodyBox HBox, and Checkout containers with an <mx:ViewStack> tag block and give the ViewStack an id of ecommNav. Set the width and height to 100%, and the creationPolicy to all. Run EComm.mxml; only the home page is now displayed.
<mx:ViewStack width="100%" height="100%" creationPolicy="all"> <v:HomePage /> <mx:HBox x="0" y="0" width="100%" height="100%" > <v:FoodList width="100%" height="100%" prodByCategory="{prodByCategory}" itemAdded="addToCart(event.product)"/> <mx:VBox height="100%" > <mx:HBox> <mx:Label text="Your Cart Total: $"/> <mx:Label text="{cart.total}"/> </mx:HBox> <mx:LinkButton label="View Cart" click="this.currentState='cartView'" /> <mx:List dataProvider="{cart.aItems}" width="100%" dragEnter="doDragEnter(event,'cartFormat')" dragDrop="doDragDrop(event,'cartFormat')"/> </mx:VBox> </mx:HBox> <v:Checkout width="100%" height="100%"/> </mx:ViewStack>
 By default, the first container in a ViewStack is displayed and the others are hidden, so you will now see just the home page. Flex normally creates visual elements as they are needed. The home page would be created immediately, however bodyBox and Checkout would be created only when the ViewStack changes the visible child. As you have not yet implemented any way to change which child of the ViewStack is displayed, Flex would only create the home page. By setting the creationPolicy to all, you are instructing Flex to create all of the children at the same time it creates the ViewStack. The decision to modify this property is normally made to optimize performance of specific application areas; here you are setting the property to simplify the remaining steps.
|
9. | Move the <mx:Label> tag that contains the FlexGrocer copyright information from directly above the newly added ViewStack to just below it and above the CategorizedProductManager.
As was demonstrated in step 7, Flex allows child tags and containers to occupy the same x and y coordinates on the page. Each child occupies a different depth (their place on the z axis) initially determined by the order they are declared in MXML. Previous to this step, the <mx:Label> tag was placed on the screen and then the <mx:ViewStack>. Because they were not occupying the same x and y coordinates, they never formed the mess in step 7; however, as you continue to develop the application, there will be times when these two occupy the same space. By moving the declaration for the <mx:Label> tag below the <mx:ViewStack> we are ensuring that the label will be at a higher depth, and always seen.
|
10. | Add a click event to both Labels in the ApplicationControlBar to display the home page. Use the id, the selectedChild property of the TabNavigator, and the id of the HomePage component to accomplish this.
<mx:Label x="0" y="0" text="Flex" click="ecommNav.selectedChild=homePage"/> <mx:Label x="0" y="41" text="GROCER" click="ecommNav.selectedChild=homePage"/>
This follows the convention that is used in many web applications of clicking the site name at the top of the page to return to the home page.
|
11. | Add a click event to the Checkout Button in the ApplicationControlBar to display the Checkout custom component when this Button is clicked.
<mx:Button label="Checkout" right="10" y="0" click="ecommNav.selectedChild=checkout"/>
This will make Checkout component the active child of the ViewStack.
|
| |
12. | Add a click event to the View Cart Button in the ApplicationControlBar. Have the event call a function named showCart().
<mx:Button label="View Cart" right="90" y="0" click="showCart()"/>
You will follow the best practice of creating a function and calling it when you have multiple lines of code for an event handler.
|
13. | Open ecomm.as and at the bottom of the file insert a private function named showCart() data typed as void with the code needed to control the view state and navigation.
private function showCart():void{ ecommNav.selectedChild=bodyBox; this.currentState='cartView'; }
Remember that you could have used the selectedIndex property instead of placing ids on the containers and using the selectedChild property.
Note  | The selectedChild property has at least two advantages over selectedIndex. First, it is probably more intuitive for you to display the child of the ViewStack by name rather than number. Second, if you ever add a container anywhere except as the last child into the ViewStack, you do not have to renumber references to the children. |
|
14. | In EComm.mxml add a click event to the instantiation of the CategoryView component to call a function named showProducts().
<v:CategoryView width="600" left="100" cats="{categories}" categorySelect="displayProdByCategory(event)" click="showProducts()"/>
This ensures that when the user clicks the categories HorizontalList, the products will be displayed.
|
| |
15. | Open ecomm.as and at the bottom of the file insert a private function named showProducts() data typed as void with the code needed to control the view state and navigation.
private function showProducts():void{ ecommNav.selectedChild=bodyBox; currentState=''; }
This function will ensure that the products are displayed when a user clicks a product category in the ApplicationToolbar.
|
16. | Run EComm.mxml and navigate around the application to be sure that you are seeing the correct child of the ViewStack displayed as you click each button.
|
