Advanced Flash Components

Working with Events in Grid: Adding a Text Description

Updated: Dec 31, 2007 Views: 3783

Description: This tutorial will show you how to add and use a mouse roll over and mouse click event to call a function that loads the description from the XML document for the event target item into a dynamic text field. We also want to add a mouse roll out function that will return the description to the selected item since it will change on roll over of item.

Components Used in this Tutorial: Grid AS3.0 and a dynamic text field created within flash.

The Complete Project:

Complete Code:

import com.afcomponents.events.GridEvent;
import flash.events.MouseEvent;

function onGridInit(event:Event){
    myGrid.addGenericItemEventListener(MouseEvent.CLICK, loadItemDescription);
    myGrid.addGenericItemEventListener(MouseEvent.ROLL_OVER, loadItemDescription);
    myGrid.addGenericItemEventListener(MouseEvent.ROLL_OUT, loadSelectedtemDescription);

    txtDescr.text = myGrid.getSelectedItem().description;
}
myGrid.addEventListener(GridEvent.XML_LOAD_COMPLETE, onGridInit);

function loadItemDescription(event:MouseEvent){
    txtDescr.text = event.target.description;
}

function loadSelectedtemDescription(event:MouseEvent){
    txtDescr.text = myGrid.getSelectedItem().description;
}

Set-Up and Add Content Using through XML

Before you begin make sure that you have successfully installed the component inspector have been able to load content into the Grid component using XML. Also make sure that you give your Grid an instance name of myGrid

Creating a Dynamic Text Field

These tutorial also requires that you create a dynamic text field that we can load the description from the XML into. Add a new text field on the stage and in the properties panel (Window > Properties > Properties) select dynamic text from the drop down and give it an instance name of txtDescr.

Understanding the Plan for ActionScript

Before we begin with code, it is important to understand the few things that we want to accomplish with ActionScript.

Since mouse event listeners for the items in Grid have to be added after the component initializes, we first want to add an event listener for when the component initializes that calls a function that adds the mouse event listeners for roll over, roll out, and click.
Also we need our text description to show when our Grid initializes, so we will included a line in our function that is called on initialization that adds our initial description
Next, we need our description to be updated for the item as we click or roll over it.
Lastly, we need our description to update to the selected items description as we roll out of an item and no item is targeted.

Event Listener for Grid Initialization

As discussed in our plan our first step is to wait for the component to initialize and then calling a function that will add our mouse event listeners for roll over, roll out, and click. We also want to load our initial selected item's description into our text field.

Function that Loads Events Target's Description (Roll Over and Click)

As you may notice in the above initialize function where we added the mouse event listeners, we call the same function for mouse roll over and click. This is because they both essentially do the same thing and load the description for the item that the mouse targets so we can just write one function for both.

function loadItemDescription(event:MouseEvent){
txtDescr.text = event.target.description;
}

Function that Loads the Selected Item's Description

Lastly, we need to write the function that our mouse event listener that we added during component initialization above calls. This function is different from the mouse roll over and click because it loads the description of the selected item when component is selected instead of the targeted component.

function loadSelectedtemDescription(event:MouseEvent){
txtDescr.text = myGrid.getSelectedItem().description;
}

Component Info

Grid (AS 3.0)

Knowledge Base

Forum