Saturday, January 15, 2011

AS3 DataGrid component: Part 10

Today we will learn how to give our images in the data grid some functionality.

You can add event listeners to the CellRenderer class in its constructor. For example:

public function loaderCellRenderer()
{
super();
addEventListener(MouseEvent.CLICK, onClick);
addEventListener(MouseEvent.ROLL_OVER, rOver);
addEventListener(MouseEvent.ROLL_OUT, rOut);
}

Create functions for the listeners as you normally do. I'll show you how to trace data that is stored in the myData array in the main .fla file. Firstly, add a new parameter Description2 and write some stuff in it:

var myData:Array = [{Image: "http://www.newgrounds.com/dump/draw/339a74f8071f1b259453624e34a00895.jpg", Description: "Tom", Description2: "Cat number 1"},
{Image: "http://www.newgrounds.com/dump/draw/44e45c25c50747dba0d1a5f2859eb10f.jpg", Description: "Bill", Description2: "Cat number 2"},
{Image: "http://www.newgrounds.com/dump/draw/598b5ee98e29201f20488e10d5e9338e.jpg", Description: "Jim", Description2: "Cat number 3"},
{Image: "http://www.newgrounds.com/dump/draw/2645ec8e90e95b2ea3db6c9ce82f3976.jpg", Description: "George", Description2: "Cat number 4"},
{Image: "http://www.newgrounds.com/dump/draw/2b2e7648a2486a7c6e994cf29e37852c.jpg", Description: "Dan", Description2: "Cat number 5"},
{Image: "http://www.newgrounds.com/dump/draw/9154eb1525566b58e0ee41abb8f87d7b.jpg", Description: "David", Description2: "Cat number 6"}
];

And now add these functions to the loaderCellRenderer.as. These will change the mouse cursor when rolled on and over the picture and display the Description2 data of the array.

private function onClick(MouseEvent):void
{
trace(_data.Description2);
}

private function rOver(MouseEvent):void
{
Mouse.cursor = "button";
}
private function rOut(MouseEvent):void
{
Mouse.cursor = "auto";
}

Here's the full code in .fla file:

import fl.data.DataProvider;
import fl.controls.dataGridClasses.DataGridColumn;

myGrid.move(10,10);
myGrid.setSize(300, 200);

var col_img:DataGridColumn = new DataGridColumn("Image");
myGrid.addColumn(col_img);
col_img.width = 60;
col_img.cellRenderer = loaderCellRenderer;

var col_desc:DataGridColumn = new DataGridColumn("Description");
myGrid.addColumn(col_desc);

var textFormat1:TextFormat = new TextFormat();
textFormat1.size = 16;
textFormat1.color = 0x333333;
textFormat1.bold = true;
textFormat1.font = "Arial";

myGrid.setStyle("headerTextFormat", textFormat1);

var textFormat2:TextFormat = new TextFormat();
textFormat2.size = 10;
textFormat2.font = "Verdana";

myGrid.setRendererStyle("textFormat", textFormat2);

var myData:Array = [{Image: "http://www.newgrounds.com/dump/draw/339a74f8071f1b259453624e34a00895.jpg", Description: "Tom", Description2: "Cat number 1"},
{Image: "http://www.newgrounds.com/dump/draw/44e45c25c50747dba0d1a5f2859eb10f.jpg", Description: "Bill", Description2: "Cat number 2"},
{Image: "http://www.newgrounds.com/dump/draw/598b5ee98e29201f20488e10d5e9338e.jpg", Description: "Jim", Description2: "Cat number 3"},
{Image: "http://www.newgrounds.com/dump/draw/2645ec8e90e95b2ea3db6c9ce82f3976.jpg", Description: "George", Description2: "Cat number 4"},
{Image: "http://www.newgrounds.com/dump/draw/2b2e7648a2486a7c6e994cf29e37852c.jpg", Description: "Dan", Description2: "Cat number 5"},
{Image: "http://www.newgrounds.com/dump/draw/9154eb1525566b58e0ee41abb8f87d7b.jpg", Description: "David", Description2: "Cat number 6"}
];

myGrid.dataProvider = new DataProvider(myData);
myGrid.rowHeight = 30;
myGrid.rowCount = myGrid.length

And here's the loaderCellRenderer.as:

package 
{

import fl.containers.UILoader;
import flash.events.MouseEvent;
import flash.ui.Mouse;
import fl.controls.listClasses.ListData;
import fl.controls.listClasses.ICellRenderer;

public class loaderCellRenderer extends UILoader implements ICellRenderer
{
protected var _data:Object;
protected var _listData:ListData;
protected var _selected:Boolean;

public function loaderCellRenderer()
{
super();
addEventListener(MouseEvent.CLICK, onClick);
addEventListener(MouseEvent.ROLL_OVER, rOver);
addEventListener(MouseEvent.ROLL_OUT, rOut);
}

private function onClick(MouseEvent):void
{
trace(_data.Description2);
}

private function rOver(MouseEvent):void
{
Mouse.cursor = "button";
}
private function rOut(MouseEvent):void
{
Mouse.cursor = "auto";
}

public function get data():Object
{
return _data;
}

public function set data(value:Object):void
{
_data = value;
source = value.Image;
}

public function get listData():ListData
{
return _listData;
}

public function set listData(value:ListData):void
{
_listData = value;
}

public function get selected():Boolean
{
return _selected;
}

public function set selected(value:Boolean):void
{
_selected = value;
}

public function setMouseState(state:String):void
{
}

}
}

Here's what you're going to get (clicking on the picture in this example doesn't do anything because a trace function is called):


Thanks for reading!

Related:

AS3 DataGrid component: Part 1
AS3 DataGrid component: Part 2
AS3 DataGrid component: Part 3
AS3 DataGrid component: Part 4
AS3 DataGrid component: Part 5
AS3 DataGrid component: Part 6
AS3 DataGrid component: Part 7
AS3 DataGrid component: Part 8
AS3 DataGrid component: Part 9
AS3 DataGrid component: Part 11
AS3 DataGrid component: Part 12
AS3 DataGrid component: Part 13
AS3 DataGrid component: Part 14
AS3 DataGrid component: Part 15
AS3 DataGrid component: Part 16

2 comments:

Jahangir said...

Can we put any MovieClip instead of any image where MC instance will have eventlistener ??

Kirill Poletaev said...

The cell extends UILoader class, which has the 'source' property. Taken from Adobe website:

"Gets or sets an absolute or relative URL that identifies the location of the SWF or image file to load, the class name of a movie clip in the library, a reference to a display object, or a instance name of a movie clip on the same level as the component."

So basically, yes, you can. :)

Post a Comment