Advanced Flash Components

Integrating Grid With Components: Description Pane

Updated: Dec 31, 2007 Views: 877

Description: This tutorial will show you how integrate the Grid with Description Pane so that the Description Pane shows the grid item's description from the XML document.

Components Used in this Tutorial: Grid AS3.0 and Description Pane AS3.0

The Completed Project:

Complete Code:

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

// Sets the Description Pane as a child of the Carousel
myDescrPane.setOwner({owner:myGrid, align:DescriptionPanePosition.TOP_CENTER, width:1});

//Changes the position of the Description Pane relative to the position you set it on the carousel above
myDescrPane.offset = {x:0, y:-55};

//Formats the Description Pane's text
myDescrPane.contentStyle = {align:"center", font:"Arial", color:0xFFFFFF, size:18, embed:false, isHTML:false, verticalPadding:10, horizontalPadding:10, autoSize:true};

//Adds a transition to the Description Pane on Show and Hide

import fl.transitions.*;
import fl.transitions.easing.*;
myDescrPane.transition = {type:AFC_Blur, direction:Transition.IN, duration:1, easing:Strong.easeOut, startPoint:2};

var myText:String;

//After XML Loads add events for All Items in Grid
function loadComplete(event:Event){
    myGrid.addGenericItemEventListener(MouseEvent.ROLL_OVER, showDescrPane);
    myGrid.addGenericItemEventListener(MouseEvent.CLICK, updateDescrPane);
    myGrid.addGenericItemEventListener(MouseEvent.ROLL_OUT, selectedDescr);
    myText = myGrid.getSelectedItem().description;
    myDescrPane.content = myText;
}
myGrid.addEventListener(GridEvent.XML_LOAD_COMPLETE, loadComplete);

//Switch Descriptions Panes text on Roll Over
function showDescrPane(event:MouseEvent){
    myDescrPane.content = event.target.description;
}

//Updates the default text on Click
function updateDescrPane(event:MouseEvent){
    myText = event.target.description;
}

//Switches Description Pane text back to selected items text
function selectedDescr(event:MouseEvent){
    myDescrPane.content = myText;
}

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.

Setting up The Description Pane

After you have the Description Pane component installed, drag an instance of it onto the stage from the components panel (Window > Components). Make sure that you give your Description Pane an instance name of myDescrPane.

Plan for ActionScript

We will use a little ActionScript to connect the Description Pane to the Grid and format the Description Pane.

First, we want to use ActionScript to add the Description Pane as a child of the Grid, set it's position offset, format the text, and set the transition
Next, we want to add an event listener for when a item is clicked, rolled over, and rolled off after the component's XML has loaded.
We want our Description Pane's default text to be our selected item, so we will create a variable and set it our initially selected Grid item's decription.
When an item is rolled we want to call a function that changes the Description Pane's text to this item
When an item is rolled out, we want our Description Pane's text to revert back to our default text stored in our variable.
Lastly, when an item is clicked we want to update our default text variable to this item's description

Formating the Description Pane

import com.afcomponents.events.GridEvent;
import com.afcomponents.descriptionpane.DescriptionPanePosition;

// Sets the Description Pane as a child of the Carousel
myDescrPane.setOwner({owner:myGrid, align:DescriptionPanePosition.TOP_CENTER, width:1});

//Changes the position of the Description Pane relative to the position you set it on the carousel above
myDescrPane.offset = {x:0, y:-55};

//Formats the Description Pane's text
myDescrPane.contentStyle = {align:"center", font:"Arial", color:0xFFFFFF, size:18, embed:false, isHTML:false, verticalPadding:10, horizontalPadding:10, autoSize:true};

//Adds a transition to the Description Pane on Show and Hide

import fl.transitions.*;
import fl.transitions.easing.*;
myDescrPane.transition = {type:AFC_Blur, direction:Transition.IN, duration:1, easing:Strong.easeOut, startPoint:2};

Add Item Click Event Listener

Event listeners for items in the Grid can only be loaded through ActionScript after the component has initialized. We do this by creating an event listener and calling a function in which we will use to add our click event listener.

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

//After XML Loads add events for All Items in Grid
function loadComplete(event:Event){
    myGrid.addGenericItemEventListener(MouseEvent.ROLL_OVER, showDescrPane);
    myGrid.addGenericItemEventListener(MouseEvent.CLICK, updateDescrPane);
    myGrid.addGenericItemEventListener(MouseEvent.ROLL_OUT, selectedDescr);
}
myGrid.addEventListener(GridEvent.XML_LOAD_COMPLETE, loadComplete);

Initial Item Variable

We need to store our default item so that when we change it on roll over we can change back to it on roll out. We do this by creating a variable and setting our initially selected item as the default by updating our last section of code.

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

var myText:String;

//After XML Loads add events for All Items in Grid
function loadComplete(event:Event){
    myGrid.addGenericItemEventListener(MouseEvent.ROLL_OVER, showDescrPane);
    myGrid.addGenericItemEventListener(MouseEvent.CLICK, updateDescrPane);
    myGrid.addGenericItemEventListener(MouseEvent.ROLL_OUT, selectedDescr);
    myText = myGrid.getSelectedItem().description;
    myDescrPane.content = myText;
}
myGrid.addEventListener(GridEvent.XML_LOAD_COMPLETE, loadComplete);

Switch Description Pane Text on Item Roll Over

We need to write our roll over function which switches our Description Pane's text to the item description from the XML that the user rolls over.

//Switch Descriptions Panes text on Roll Over
function showDescrPane(event:MouseEvent){
myDescrPane.content = event.target.description;
}

Update Default Text on Item Click

Every time a new item is select we want our default text to switch to this items. We do this by calling a function that updates our variable to our new selected items description

//Updates the default text on Click
function updateDescrPane(event:MouseEvent){
myText = event.target.description;
}

Switches Description Pane Back to Default Text on Item Roll Out

Lastly, we want the Description Pane's text to switch back to our default text that we have stored in our variable.

//Switches Description Pane text back to selected items text
function selectedDescr(event:MouseEvent){
myDescrPane.content = myText;
}

AFComponents.com