User Guide

36 Creating an Application with Components (Flash Professional Only)
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.