User Guide
Create the checkout screen 45
4. 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.
5. 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.