Entire Site
Free Trial
Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.
- Create BookmarkCreate Bookmark
- Create Note or TagCreate Note or Tag
- DownloadDownload
- PrintPrint
Lesson 14. Implementing the Checkout Process > Completing the Order
Completing the Order
The checkout process is almost complete. You still need an OrderEvent object to pass the OrderInfo back to the main application. You’ll create that in this next exercise. For now, if you save the files and run the application, you’ll see that you can add items to the cart, enter your information, step through to the confirmation page, and go back to edit the information.
1. | Right-click the events package and choose new ActionScript Class. Leave the Package as events, set the Name to be OrderEvent, and add flash.events.Event as the Superclass. Click Finish. |
2. | In your new class, add a public property named order of type OrderInfo. public var order:OrderInfo; Be sure to import the valueObjects.OrderInfo class. |
3. | Modify the constructor, so that an order object, of type OrderInfo, is passed as the second argument, between the type and bubbles parameters. In the body of the method, set this.order equal to the order parameter, just after the call to the super class.
Code View:
Scroll
/
Show All public function OrderEvent(type:String, order:OrderInfo, bubbles:Boolean=false, cancelable:Boolean=false)
{
super(type, bubbles, cancelable);
this.order = order;
}
|
4. | Override the clone method, so it returns a new instance of the OrderEvent. Your completed class should look like this:
Code View:
Scroll
/
Show All package events
{
import flash.events.Event;
import valueObjects.OrderInfo;
public class OrderEvent extends Event
{
public var order:OrderInfo;
public function OrderEvent(type:String, order:OrderInfo, bubbles:Boolean=false, cancelable:Boolean=false)
{
super(type, bubbles, cancelable);
this.order = order;
}
public override function clone():Event{
return new OrderEvent(type, order, bubbles, cancelable);
}
}
}
|
5. | Save and close the OrderEvent class. |
6. | Open CheckoutView.mxml. Find the handleComplete method. In this method, create and dispatch an OrderEvent, with the type set to placeOrder, and using the orderInfo object to populate its order property. protected function handleComplete(event:Event):void
{
dispatchEvent( new OrderEvent( 'placeOrder', orderInfo ) );
}Remember that you’ll need to import the OrderEvent class. |
7. | Still in the handleComplete method, reset the checkout process by setting the currentView to 0 and passing currentView to setViewByIndex. The final step of the method is to clear out the orderInfo property by setting it equal to a new OrderInfo() instance: protected function handleComplete(event:Event):void
{
dispatchEvent( new OrderEvent( 'placeOrder', orderInfo ) );
currentView=0;
setViewByIndex(currentView);
orderInfo = new OrderInfo();
} |
8. | Add a Metadata tag block and declare the placeOrder event. <fx:Metadata> [Event(name="placeOrder",type="events.OrderEvent")] </fx:Metadata> |
9. | Save CheckoutView, and open FlexGrocer. Find the instantiation of the CheckoutView, and add an event handler for the placeOrder event, which will call a method named handlePlaceOrder and pass along the event object. Use the quick assist feature to have Flash Builder build this method for you. |
10. | Find the newly created handlePlaceOrder method. Inside the method, reset the shopping cart (by instantiating a new ShoppingCart in its place) and set the currentState to shopping: protected function handlePlaceOrder(event:OrderEvent):void
{
shoppingCart = new ShoppingCart();
this.currentState="shopping";
} |
11. | Find the button with the Flex Grocer label, and add a click handler, which calls a method named returnToShopping. Pass an event object to the method. Use code assist to create this method. |
12. | In the newly created returnToShopping method, set the currentState to shopping: protected function returnToShopping( event:MouseEvent ):void
{
this.currentState="shopping";
} |
13. | Save and run the application. The only remaining problem is that users can start the checkout process even if they have no items in their cart. Although this isn’t really a problem, it can lead to user confusion. In the final step, you’ll dynamically enable/disable the checkout button, based on the contents of the cart. |
14. | Back in FlexGrocer.mxml, find the btnCheckout button and use a binding expression to enable the button only if the cart’s total isn’t $0:
Code View:
Scroll
/
Show All <s:Button id="btnCheckout" y="10" right="10" label="Checkout" click="startCheckout(event)" enabled="{shoppingCart.total != 0}"/>
|
15. | Save and run the application. This time it should be clearer to users that the checkout button is disabled until after they have added an item to the cart. |
