Add code to the ProductForm movie clip

Next, you will add ActionScript to the ProductForm movie clip that you just created. The ActionScript populates the components in the movie clip with information about the selected gift, and adds an event listener to the Add to Cart button that adds the selected product to the cart.

For more information on working with event listeners, see Using event listeners in Learning ActionScript 2.0 in Adobe Flash.

In the Timeline of the ProductForm movie clip, create a new layer and name it Actions. Select the first frame in the Actions layer.

In the Actions panel, add the following code:

// Create an object to reference the selected product item in the DataGrid.
var thisProduct:Object = this._parent._parent.products_dg.selectedItem;
// Populate the description_ta TextArea and price_lbl Label instances with
// data from the selected product.
description_ta.text = thisProduct.description;
price_lbl.text = "<b>$"+thisProduct.price+" "+thisProduct.priceQualifier+"</b>";
// Load an image of the product from the application directory.
image_ldr.load(thisProduct.image);

NOTE

The code includes comments explaining its purpose. It's a good idea to include comments like these in all the ActionScript code you write, so that you or anyone else going back to the code later can easily understand what it was for.

First, the code defines a variable to refer to the selected product in the subsequent code. Using the thisProduct variable means you don't have to refer to the specified product using the path this._parent._parent.products_dg.selectedItem.

Next, the code populates the TextArea and Label instances by using the description, price, and priceQualifier properties of the thisProduct object. These properties correspond to elements in the products.xml file that you linked to the products_xmlcon XMLConnector instance at the beginning of the tutorial. Later in the tutorial, you will bind the XMLConnector, DataSet, and DataGrid component instances together, and the elements in the XML file will populate the other two component instances.

Finally, the code uses the image property of the thisProduct object instance to load an image of the product into the Loader component.

Next you will add an event listener to add the product to the cart when the user clicks the Add to Cart button. (You will add ActionScript to the main Timeline in the application later in the tutorial, to create an instance of the Cart class.) Add the following code:

var cartListener:Object = new Object();
cartListener.click = function(evt:Object) {
    var tempObj:Object = new Object();
    tempObj.quantity = evt.target._parent.quantity_ns.value;
    tempObj.id = thisProduct.id;
    tempObj.productObj = thisProduct;
    var theCart = evt.target._parent._parent._parent.myCart;
    theCart.addProduct(tempObj.quantity, thisProduct);
};
addToCart_button.addEventListener("click", cartListener);

Click the Check Syntax button (the blue check mark above the Script pane) to make sure there are no syntax errors in the code.

You should check syntax frequently as you add code to an application. Any errors found in the code are listed in the Output panel. (When you check syntax, only the current script is checked; other scripts that may be in the FLA file are not checked.) For more information, see "Debugging your scripts" in Using Flash.

Click the arrow button at the upper left of the Document window or select View > Edit Document to exit symbol editing mode and return to the main Timeline.

TIP

Press Control+S to save your work and then Control+Enter (or select Control >Test Movie) to test your application. When you click a gift selection now, a window should appear and display an image of the gift, accompanied by a description, the price, and a numeric stepper that allows you to choose the quantity that you want.