Add an event listener to trigger the display of gift details

Next you will add an event listener to the products_dg DataGrid instance to display information about each product. When the user clicks a product in the Gift Ideas section, a pop-up window appears with information about the product.

In the Actions panel of the main Timeline, add the following code:

// Create a listener for the DataGrid to detect when the row in the
// DataGrid is changed
var dgListener:Object = new Object();
dgListener.change = function(evt:Object) {
    // When the current row changes in the DataGrid, launch a new pop-up 
    // window displaying the product's details.
    myWindow = mx.managers.PopUpManager.createPopUp(_root, mx.containers.Window, true, {title:evt.target.selectedItem.name, contentPath:"ProductForm", closeButton:true});
    // Set the dimensions of the pop-up window.
    myWindow.setSize(340, 210);
    // Define a listener that closes the pop-up window when the user clicks
    // the close button.
    var closeListener:Object = new Object();
    closeListener.click = function(evt) {
        evt.target.deletePopUp();
    };
    myWindow.addEventListener("click", closeListener);
};
products_dg.addEventListener("change", dgListener);

This code creates a new event listener called dgListener, and creates instances of the Window component you added to the library earlier. The title for the new window is set to the product's name. The content path for the window is set to the ProductForm movie clip. The size of the window is set to 340 x 210 pixels.

The code also adds a close button to enable the user to close the window after viewing the information.