Add code for the Checkout screen

Now you're ready to add code to the Checkout screen of the application, on Frame 10 in the main Timeline. This code processes the data that users enter in the Billing, Shipping, and Credit Card Information panes that you created earlier with the Accordion component and other components.

In the Timeline, select Frame 10 in the Actions layer and insert a blank keyframe (select Insert > Timeline > Blank Keyframe)

Open the Actions panel (F9).

In the Actions panel, add the following code:

stop();
import mx.containers.*;

// Define the Accordion component on the Stage.
var checkout_acc:Accordion;

Next you will add the first child to the Accordion component instance, to accept billing information from the user. Add the following code:

// Define the children for the Accordion component.
var child1 = checkout_acc.createChild("checkout1_mc", "child1_mc", {label:"1. Billing Information"});
var thisChild1 = child1.checkout1_sp.spContentHolder;

The first line calls the createChild() method of the Accordion component and creates an instance of the checkout1_mc movie clip symbol (which you created earlier) with the instance name child1_mc and the label "1. Billing Information". The second line of code creates a shortcut to an embedded ScrollPane component instance.

Create the second child for the Accordion instance, to accept shipping information:

/* Add the second child to the Accordion. 
Add an event listener for the sameAsBilling_ch CheckBox.
This copies the form values from the first child into the second child. */
var child2 = checkout_acc.createChild("checkout2_mc", "child2_mc", {label:"2. Shipping Information"});
var thisChild2 = child2.checkout2_sp.spContentHolder;
var checkboxListener:Object = new Object();
checkboxListener.click = function(evt:Object) {
    if (evt.target.selected) {
        thisChild2.shippingFirstName_ti.text = thisChild1.billingFirstName_ti.text;
        thisChild2.shippingLastName_ti.text = thisChild1.billingLastName_ti.text;
        thisChild2.shippingCountry_ti.text = thisChild1.billingCountry_ti.text;
        thisChild2.shippingProvince_ti.text = thisChild1.billingProvince_ti.text;
        thisChild2.shippingCity_ti.text = thisChild1.billingCity_ti.text;
        thisChild2.shippingPostal_ti.text = thisChild1.billingPostal_ti.text;
    }
};
thisChild2.sameAsBilling_ch.addEventListener("click", checkboxListener);

The first two lines of code are similar to the code for creating the Billing Information child: you create an instance of the checkout2_mc movie clip symbol, with the instance name child2_mc and the label "2. Shipping Information". The second line of code creates a shortcut to an embedded ScrollPane component instance.

Beginning with the third line of code, you add an event listener to the CheckBox instance. If the user clicks the check box, the shipping information uses the data the user entered in the Billing Information pane.

Next, create a third child for the Accordion instance, for credit card information:

// Define the third Accordion child.
var child3 = checkout_acc.createChild("checkout3_mc", "child3_mc", {label:"3. Credit Card Information"});
var thisChild3 = child3.checkout3_sp.spContentHolder;

Add this code to create ComboBox instances for the credit card month, year, and type, and populate each with a statically defined array:

/* Set the values in the three ComboBox instances on the Stage:
ccMonth_cb, ccYear_cb and ccType_cb */
thisChild3.ccMonth_cb.labels = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"];
thisChild3.ccYear_cb.labels = [2004, 2005, 2006, 2007, 2008, 2009, 2010];
thisChild3.ccType_cb.labels = ["VISA", "MasterCard", "American Express", "Diners Club"];

Finally, add the following code to add event listeners to the Checkout button and the Back button. When the user clicks the Checkout button, the listener object copies the form fields from the Billing, Shipping, and Credit Card Information panes into a LoadVars object that is sent to the server. (The LoadVars class lets you send all the variables in an object to a specified URL.) When the user clicks the Back button, the application returns to the main screen.

/* Create a listener for the checkout_button Button instance.
This listener sends all the form variables to the server when the user clicks the Checkout button. */
var checkoutListener:Object = new Object();
checkoutListener.click = function(evt:Object){
    evt.target.enabled = false;
    /* Create two LoadVars object instances, which send variables to
    and receive results from the remote server. */ 
    var response_lv:LoadVars = new LoadVars();
    var checkout_lv:LoadVars = new LoadVars();
    checkout_lv.billingFirstName = thisChild1.billingFirstName_ti.text;
    checkout_lv.billingLastName = thisChild1.billingLastName_ti.text;
    checkout_lv.billingCountry = thisChild1.billingCountry_ti.text;
    checkout_lv.billingProvince = thisChild1.billingProvince_ti.text;
    checkout_lv.billingCity = thisChild1.billingCity_ti.text;
    checkout_lv.billingPostal = thisChild1.billingPostal_ti.text;
    checkout_lv.shippingFirstName = thisChild2.shippingFirstName_ti.text;
    checkout_lv.shippingLastName = thisChild2.shippingLastName_ti.text;
    checkout_lv.shippingCountry = thisChild2.shippingCountry_ti.text;
    checkout_lv.shippingProvince = thisChild2.shippingProvince_ti.text;
    checkout_lv.shippingCity = thisChild2.shippingCity_ti.text;
    checkout_lv.shippingPostal = thisChild2.shippingPostal_ti.text;
    checkout_lv.ccName = thisChild3.ccName_ti.text;
    checkout_lv.ccType = thisChild3.ccType_cb.selectedItem;
    checkout_lv.ccNumber = thisChild3.ccNumber_ti.text;
    checkout_lv.ccMonth = thisChild3.ccMonth_cb.selectedItem;
    checkout_lv.ccYear = thisChild3.ccYear_cb.selectedItem;
    
    /* Send the variables from the checkout_lv LoadVars to the remote script on the server. 
    Save the results in the response_lv instance. */
    checkout_lv.sendAndLoad("http://www.flash-mx.com/mm/firstapp/cart.cfm", response_lv, "POST");
    response_lv.onLoad = function(success:Boolean) {
        evt.target.enabled = true;
    };
};
thisChild3.checkout_button.addEventListener("click", checkoutListener);
cart_mc._visible = false;
var backListener:Object = new Object();
backListener.click = function(evt:Object) {
    evt.target._parent.gotoAndStop("home");
}
back_button.addEventListener("click", backListener);