Advanced Flash Components
Components
Tutorials
Forum
Search!
Search!
Home >  Components >  Grid (AS 3.0) >  API Documentation
View Cart
Signup
Login
API Documentation
Grid (AS 3.0) V. 2.0 Documentation
Printer-friendly
Properties
Name Type Description
content Object Defines displayed content.

    1.description:String
    2.path:Mixed
    3.type:String – content type
    com.afcomponents.common.ContentType
        ContentType.IMAGE
        ContentType.INSTANCE
    4.data - Miscellaneous property

Example

import fl.data.DataProvider;
import com.afcomponents.events.GridEvent;

function gridInit(event:GridEvent) {
    myGrid.addItem({path:"image.gif",description:"Test Item", data:"some_url.htm", type:"image"});
}
myGrid.addEventListener(GridEvent.INITIALIZE, gridInit);
contentXML String Path to content XML file or RSS 2.0 image feed.

XML File Format

<content>
    <item>
        <description>Image 1</description>
        <path>image.jpg</path>
        <data>url.html</data>
        <type>image</type>
    </item>
</content>

Example

myGrid.contentXML = "file.xml";


Note: You can use a custom node in your XML and it becomes of property of the item.

Custom Node XML Example

<content>
    <item>
        <description>Image 1</description>
        <path>image.jpg</path>
        <data>url.html</data>
        <name>MyCustomNode</name>   
    </item>
</content>

trace(myGrid.getSelectedItem().name);
contentStyle Object Property defines image size. Please note that width and height parameters override maintainAspectRatio and scaleContent properties.

    1. width:Number
    2. height:Number
    3. maintainAspectRatio:Boolean
    4. scaleContent:Boolean
    5. autoSize:Boolean

Example

myGrid.contentStyle = {width:100, height:150, maintainAspectRatio:true, scaleContent:true, autoSize: false};
itemContainerDefaultStyle Object Defines the default item container shape style.

    1.fill:Bolean
    2.fillColor:Number (ARGB)
    3.fillGradient:Object [ActionScript Only]
    4.stroke:Boolean
    5.strokeColor:Number (ARGB)
    6.strokeWidth:Number
    7.cornerRadius:Number
    8.horizontalPadding:Number
    9.verticalPadding:Number

Example

myGrid.itemContainerDefaultStyle = {fill:true, fillColor:0xFF0000CC, stroke:false, strokeColor:0x00FF00CC, strokeWidth:2, cornerRadius:2, horizontalPadding: 5, verticalPadding: 5};
itemContainerOverStyle Object Defines the item container shape style on mouse over event.

  
    1.fill:Bolean
    2.fillColor:Number (ARGB)
    3.fillGradient:Object [ActionScript Only]
    4.stroke:Boolean
    5.strokeColor:Number (ARGB)
    6.strokeWidth:Number
    7.cornerRadius:Number
    8.horizontalPadding:Number
    9.verticalPadding:Number

Example

myGrid.itemContainerOverStyle = {fill:true, fillColor:0xFF0000CC, stroke:false, strokeColor:0x00FF00CC, strokeWidth:2, cornerRadius:2, horizontalPadding: 5, verticalPadding: 5};
itemContainerSelectedStyle Object
    1.fill:Boolean
    2.fillColor:Number (ARGB)
    3.fillGradient:Object [ActionScript Only]
    4.stroke:Boolean
    5.strokeColor:Number (ARGB)
    6.strokeWidth:Number
    7.cornerRadius:Number
    8.horizontalPadding:Number
    9.verticalPadding:Number

Example

myGrid.itemContainerSelectedStyle = {fill:true, fillColor:0xFF0000CC, stroke:false, strokeColor:0x00FF00CC, strokeWidth:2, cornerRadius:2, horizontalPadding: 5, verticalPadding: 5};
previewClip String Property defines a class of a placeholder movie clip.

Example

myGrid.previewClip = "MyClip";
scrollAnimation Object Property defines scroll properties.

Properties

    1. enabled:Boolean
    2. duration:Number
    3. easing:String
        (easeIn, easeInOut, easeOut, or easeNone)
    4. scrollDirection:String
       (horizontal, or vertical)

Example

myGrid.scrollAnimation = {enabled: true,duration: 500, easing: "easeIn",scrollDirection: "horizontal"};
scrollLoop Boolean Defines whether the slide show is looped.

Example

myGrid.scrollLoop = true;
selectedItem Number Defines initially selected item. First item is selected by default.

Example

myGrid.selectedItem = 5;
selectOnPageScroll Boolean Defines whether an item gets selected once the page scroll is activated.

Example

myGrid.selectOnPageScroll = false;
slideShow Object Defines slide show properties.

    1. enabled:Boolean
    2. loop:Boolean
    3. time:Number

myGrid.slideShow = {enabled:true, loop:false, time:2000};
transition Object Property determines whether to display image transition (true) or not (false). Fade transition is displayed after thumbnail image has been loaded.

Options

    1. enable:Boolean
    2. type:fl.transitions
        (Blinds, Fly, Fade, Iris, Photo, PixelDissolve, Rotate, Squizee, Wipe,
        or Zoom)
    3. direction:String
    4. duration:Number
    5. easing:String

Example

import fl.transitions.*;
import fl.transitions.easing.*;

myGrid.transition = {enable:true, type:fl.transitions.PixelDissolve, direction:"IN",duration:1, easing:"easeOut"}
reflectionStyle Object Set the reflection of the Scroll Panel.

    1. enable:Boolean
    2. alpha:Number
    3. clipAlpha:Number
    4. distance:Number
    5. matrixRatio:Number
    6. matrixDropOff:Number

Example

myGrid.reflectionStyle = {enable:true, alpha: 0.8, clipAlpha: 0.5, distance: 1, matrixRatio: 1, matrixDropOff: 1};
buildStyle Object Determines how items load.

    1.axis:String
        (horizontal, or vertical)
    2.align:String
       (top_left, top_right, bottom_left, or bottom_right)

Example

myGrid.buildStyle = {axis:"horizontal", align:"top_left"};
length Number Read-only property indicates the number of items in the Grid.

Example

trace(myGrid.length);
gridStyle Object Defines the style of the Grid.
  1. rowCount:Number - Number of rows to be displayed in the Grid.
  2. rowCountAuto:Boolean - Determines whether to automatically set the number of rows based on the Grid's height.
  3. colCount:Number - Number of columns to be displayed in the Grid.
  4. colCountAuto:Boolean - Determines whether to automatically set the number of columns based on the Grid's width.
  5. rowSpacing:Number - Sets the padding between rows.
  6. colSpacing:Number - Sets the padding between columns.

Example

myGrid.gridStyle = {rowCount: 2, rowCountAuto:false, colCount:5, colCountAuto:false, rowSpacing:10, colSpacing:10};
Methods
Name Return Type Description
getItemNum( index:Number ) Object Returns content item object specified by index parameter.

Example

var item:Object = new Object();

item = myGrid.getItemNum(2);
trace(item.description);
trace(item.path);
trace(item.data);
trace(item.id);
getTotalItems( ) Number Returns total number of items in the content object.

Example

var items = myGrid.getTotalItems();
getSelectedItem( ) Object Returns selected item object.

Example

var item:Object = new Object();

item = myGrid.getSelectedItem();
trace(item.description);
trace(item.path);
trace(item.data);
trace(item.id);
selectItem( item:Object ) Void Selects item specified by the item parameter.

Example

var item:Object = new Object();

item = myGrid.getItemNum(2);
myGrid.selectItem(item);
selectItemNum( index:Number ) Void Selects item specified by index parameter.

Example

myGrid.selectItemNum(2);
selectNextItem( ) Void Selects next item.

Example

myGrid.selectNextItem();
selectPreviousItem( ) Void Selects previous item.

Example

myGrid.selectPreviousItem();
addItem( item:Object ) Void Adds a new item to the Grid.

Example

myGrid.addItem({description:”Item”, path:”image.jpg”,data:”url.html”});
removeItem( item:Object ) Void Removes item from the Grid.

Example
var item = myGrid.getItemNum(3);
myGrid.removeItem(item);
getCurrentPage( ) Number Function returns the current page number.

Example

var page:Number; page = myGrid.getCurrentPage();
displayNextPage( ) Void Displays the next page.

Example

myGrid.displayNextPage();
displayPreviousPage( ) Void Displays the previous page.

Example

myGrid.displayPreviousPage();
addGenericItemEventListener( event:String,
listener:Function )		 Void Adds an event listener to each item in the Grid.

Generic Event Example

import flash.events.MouseEvent;

function eventHandler(event:MouseEvent){
trace(event.target);
}

myGrid.addGenericItemEventListener(MouseEvent.CLICK, eventHandler);
getItemAt( index:Number ) Object Returns content item object specified by index parameter.

Example

var item:Object = new Object();

item = myGrid.getItemAt(2);
trace(item.description);
trace(item.path);
trace(item.data);
trace(item.id);
selectItemAt( index:Number ) Void Selects the item specified in the index parameter.

Example

myGrid.selectItemAt(3);
addItemAt( item:Object,
index:Number )		 Void Adds the object passed in the item parameter at index in the Grid.

Example

myGrid.addItemAt({description:"description", path:"pic.jpg", data:"url.html"}, 3);
removeItemAt( index:Number ) Void Removes the item at index from the Grid.

Example

myGrid.removeItemAt(3);
replaceItemAt( item:Object,
index:Number )		 Void Replaces the item at index with the passed item object.

Example

myGrid.replaceItemAt({description:"description", path:"pic.jpg", data:"url.html"}, 3);
removeAll( ) Void Removes all items from the Grid.

Example

myGrid.removeAll();
addItemEventListener( index:Number,
event:String,
listener:Function )		 Void Adds an event listener to the item specified by index.

Example

myGrid.addItemEventListener(4, MouseEvent.CLICK, eventHandler);
Events
Name Return Value Description
INITIALIZE target
type		 Triggered after component initializes.

Example

import com.afcomponents.events.GridEvent;

function eventHandler(event:Event){
    trace(event.type);
    trace(event.target);
}
myGrid.addEventListener(GridEvent.INITIALIZE, eventHandler);
ERROR target
type
message		 Triggered once error occurs. If there is an error loading an image this event fired. If a wrong parameter is passed to a function this event is fired.

Example

import com.afcomponents.events.GridEvent;

function eventHandler(event:Event){
    trace(event.type);
    trace(event.target);
    trace(event.message);
}
myGrid.addEventListener(GridEvent.ERROR, eventHandler);
CHANGE target
type		 Triggered once any of the component properties is modified or component state changes.

Example

import com.afcomponents.events.GridEvent;

function eventHandler(event:Event){
    trace(event.type);
    trace(event.target);
    trace(event.target);
}
 myGrid.addEventListener(GridEvent.CHANGE, eventHandler);
CONTENT_LOAD_START target
type		 Triggered whenever content (images) start loading. This event helps user track general loading progress.

Example

import com.afcomponents.events.GridEvent;

function eventHandler(event:Event){
    trace(event.type);
    trace(event.target);
}
myGrid.addEventListener(GridEvent.CONTENT_LOAD_START, eventHandler);
CONTENT_LOAD_PROGRESS target
type
itemsLoaded
itemsTotal		 Triggered during content (images) loading. Returns total and loaded number of content elements.

Example

import com.afcomponents.events.GridEvent;

function eventHandler(event:Event){
    trace(event.type);
    trace(event.target);
    trace(event.itemsLoaded);
    trace(event.itemsTotal);
}
myGrid.addEventListener(GridEvent.CONTENT_LOAD_PROGRESS, eventHandler);
CONTENT_LOAD_COMPLETE target
type		 Triggered after the content finishes loading.

Example

import com.afcomponents.events.GridEvent;

function eventHandler(event:Event){
    trace(event.type);
    trace(event.target);
}
myGrid.addEventListener(GridEvent.CONTENT_LOAD_COMPLETE, eventHandler);
XML_LOAD_START target
type		 Triggered when XML starts loading.

Example

import com.afcomponents.events.GridEvent;

function eventHandler(event:Event){
    trace(event.type);
    trace(event.target);
}
myGrid.addEventListener(GridEvent.XML_LOAD_START, eventHandler);
XML_LOAD_PROGRESS target
type
bytesLoaded
bytesTotal		 Triggered while XML file is being loaded.

Example

import com.afcomponents.events.GridEvent;

function eventHandler(event:Event){
    trace(event.type);
    trace(event.bytesLoaded);
    trace(event.bytesTotal);
}
myGrid.addEventListener(GridEvent.XML_LOAD_PROGRESS, eventHandler);
XML_LOAD_COMPLETE target
type		 Triggered after XML file finishes loading.

Example

import com.afcomponents.events.GridEvent;

function eventHandler(event:Event){
    trace(event.type);
    trace(event.target);
}
myGrid.addEventListener(GridEvent.XML_LOAD_COMPLETE, eventHandler);
ITEM_LOAD_START target
type		 Triggered when item image starts loading.

Example

import com.afcomponents.events.GridEvent;

function eventHandler(event:Event){
    trace(event.type);
    trace(event.target);
}
myGrid.addEventListener(GridEvent.ITEM_LOAD_START, eventHandler);
ITEM_LOAD_PROGRESS target
type
bytesLoaded
bytesTotal		 Triggered while item image is being loaded.

Example

import com.afcomponents.events.GridEvent;

function eventHandler(event:Event){
    trace(event.type);
    trace(event.target);
    trace(event.bytesLoaded);
    trace(event.bytesTotal);
}
myGrid.addEventListener(GridEvent.XML_LOAD_PROGRESS, eventHandler);
ITEM_LOAD_COMPLETE target
type		 Triggered after item image finishes loading.

Example

import com.afcomponents.events.GridEvent;

function eventHandler(event:Event){
    trace(event.type);
    trace(event.target);
}
myGrid.addEventListener(GridEvent.ITEM_LOAD_COMPLETE, eventHandler);
ITEM_SELECTED target
type		 Triggered once the item is selected. This event is triggered during the during the slide show mode.

Example

import com.afcomponents.events.GridEvent;

function eventHandler(event:Event){
    trace(event.type);
    trace(event.target);
}
myGrid.addEventListener(GridEvent.ITEM_SELECTED, eventHandler);