In this task, your goal is to get credit card information into the OrderInfo object in the Checkout component and then display this information in a confirmation screen. In this case, you will use a component that is already built because it is identical in logic to the BillingInfo component you just built. In the task, you will open the CCInfo component and examine its logic to see the similarities. You will then instantiate the component and manipulate the ViewStack to get it to appear. Finally, you will take all the order information and display it on an order confirmation screen.
1. | Copy the file CCInfo.mxml from Lesson13/assets to your FlexGrocer/views/ecomm folder. Open the file and examine the code.
As you look at the code, you will see that the logic is the same as in the BillingInfo component you just built. Note that the custom event name is ccInfoReturn. You will need this name to use the component correctly. Also note the property names of the data gathered in the Model:
cardType cardNumber cardExpirationMonth cardExpirationYear
|
| |
2. | Open Checkout.mxml. In the <mx:ViewStack> block, under the BillingInfo component, instantiate the CCInfo component. Give it an instance name of ccInfo, and set the width and height to 100%.
This is the second of three containers that will be in the ViewStack.
|
3. | Handle the custom ccInfoReturn event in the component. In the ActionScript for the event, call a function named doCCInfoReturn(). Pass the event object as a parameter, which must be data typed as ObjectDataEvent. Also handle the back custom event. In the ActionScript for the event, set the selectedChild of the checkoutNav ViewStack to billingInfo. Be sure that your instantiation appears as follows:
<v:CCInfo width="100%" height="100%" ccInfoReturn="doCCInfoReturn(event)" back="checkoutNav.selectedChild=billingInfo"/>
Review the CCInfo custom component to confirm what these two custom events do.
|
4. | At the bottom of the <mx:Script> block, create a private function named doCCInfoReturn() and data type the function as void. The function should accept a parameter named event data typed as ObjectDataEvent. In the function, assign the four properties passed in the custom event object to the orderInfo object instance, using the same property names.
private function doCCInfoReturn(event:ObjectDataEvent):void{ orderInfo.cardType=event.data.cardType; orderInfo.cardNumber=event.data.cardNumber; orderInfo.cardExpirationMonth=event.data.cardExpirationMonth; orderInfo.cardExpirationYear=event.data.cardExpirationYear; }
At this point, your OrderInfo object should contain all the billing and credit card information collected from the user in the two custom components.
|
5. | As the last line of code in the doBillingInfoReturn() function, make the ccInfo component displayed in the ViewStack.
checkoutNav.selectedChild=ccInfo;
Until you add this code, there was no way to get to the CCInfo component. What happens now is when the user clicks the button in the billing information screen, the event is dispatched, the data is written into the OrderInfo object, and then the CCInfo component is displayed.
|
| |
6. | Run EComm.mxml. Click the Checkout button and fill in the billing information form. Click the Continue button and you will be shown the credit card information form. Fill in this form and click the Continue button. At this point, nothing happens. The Back button will take you back to the Customer Information screen.
You now have the customer information and credit card information in the single OrderInfo object.
Tip  | Use the debugger to confirm that all the data is in the orderInfo object. To do this, set a breakpoint at the end of the doCCInfoReturn() function and run EComm.mxml. Upon return to the Flex Builder debugger, add orderInfo as a Watched Expression in the Expressions pane. |
|
7. | Create a new MXML component in the views/ecomm folder named OrderConf, use a VBox as the base tag and remove any width and height values.
This component will display the order information.
|
8. | Insert an <mx:Script> block and import the OrderInfo value object. Also, create a bindable public variable named orderInfo data typed as OrderInfo.
import valueObjects.OrderInfo; [Bindable] public var orderInfo:OrderInfo;
This creates a property in the class. Order information will be passed to this property when the component is instantiated in the Checkout.mxml page.
|
| |
9. | Below the <mx:Script> block, insert the following form to display the order information to the user.
<mx:Form> <mx:Label text="Checkout Page 3 of 3"/> <mx:FormHeading label="Billing Information"/> <mx:HBox> <mx:VBox> <mx:FormItem > <mx:Label text="{orderInfo.billingName}"/> </mx:FormItem> <mx:FormItem > <mx:Label text="{orderInfo.billingAddress}"/> </mx:FormItem> <mx:FormItem > <mx:Label text="{orderInfo.billingCity}"/> </mx:FormItem> <mx:FormItem > <mx:Label text="{orderInfo.billingState}"/> </mx:FormItem> <mx:FormItem > <mx:Label text="{orderInfo.billingZip}"/> </mx:FormItem> </mx:VBox> <mx:VBox> <mx:FormItem label="Delivery Date"> <mx:Label text="{orderInfo.deliveryDate.month+1}/ {orderInfo.deliveryDate.date}/{orderInfo.deliveryDate.fullYear}"/> </mx:FormItem> </mx:VBox> </mx:HBox> </mx:Form>
Note that you are displaying three properties of the Date class in the Delivery Date section. Because the month count is zero index (January being 0) you must add 1 to the month value to make it meaningful for humans.
|
10. | Below the form, insert the following Buttons: Label and Spacer.
<mx:Button label="Complete Order"/> <mx:Label text="* Clicking this button will bill your credit card and complete this order"/> <mx:Spacer height="20"/> <mx:Button label="Edit Information" click="back()"/>
Functionality for the Complete Order button will be implemented in a later lesson. The event handler for the Edit Information button will be implemented in the next step.
|
11. | Add an <mx:Metadata> block just under the opening <mx:VBox> tag and add a custom event named back.
<mx:Metadata> [Event(name="back")] </mx:Metadata>
In this case, you do not have to supply the type because the default type for an event is the Event class.
|
| |
12. | At the bottom of the <mx:Script> block, create a private function named back, data typed as void. Create an object named o, data typed as Event and set it equal to a new Event object passing as a parameter the string back. Dispatch the o object in the second line of the function.
private function back():void{ var o:Event=new Event("back"); dispatchEvent(o); }
In this case, because you are NOT dispatching data in the custom event object, you did not need to create a custom event class.
|
13. | Return to Checkout.mxml. At the bottom of the ViewStack, instantiate the newly created OrderConf component, and set the width and height to 100%. Set the orderInfo property equal to a binding of the like named variable from the Checkout component. Finally, handle the back event by setting the selectedChild of the checkoutNav ViewStack to billingInfo.
<v:OrderConf width="100%" height="100%" orderInfo="{orderInfo}" back="checkoutNav.selectedChild=billingInfo"/>
This is the third and final component used in this ViewStack. At this point, the user has no way to see this component, which will be remedied in the next step.
|
14. | As the last line of code in the doCCInfoReturn() function, make the orderConf component displayed in the ViewStack.
checkoutNav.selectedChild=orderConf;
In this checkout process, you control when the different containers are displayed. The user cannot click nor do anything else to jump between these different screens. In a later lesson, you will see how validation ties into this navigation scheme to not let users move to the next step until the form is filled out correctly.
Note  | You will be getting warnings that data binding will not be able to detect assignments to the date, fullYear, and month items. You will correct this in the next lesson using a DateFormatter. |
|
| |
15. | Run EComm.mxml and click the Checkout button. After you fill in the customer information screen and click the Continue button, you will be taken to the credit card information form. After filling in this form and clicking the Continue button, you will be shown the order confirmation screen with the data entered in earlier forms now displayed.
Your checkout process should mimic the one shown here. At this point, the Complete Order button is not functional. Following are the three steps of the checkout process. In a later lesson, you will format the left margins of the form.
|
