Sunday, January 16, 2011

AS3 DataGrid component: Part 11

Today we will add a feature that displays a larger version of the picture when an image in the data grid is clicked.

It's going to look like this:


Click an image to enlarge it. Click the large image to hide it. You can't click any other images when one is enlarged.

First of all, add an UILoader component to the stage. Place it how you want, and give it a name of mainLoader. Go to component inspector of this UILoader and make sure the Visible box is NOT checked.

To access this mainLoader from the CellRenderer class, we need to access the stage from it. To do that, we can pass the stage reference to the class as a variable. In your loaderCellRenderer.as, add this line right after you create the class:

public static var _stage;

In the .fla file, right after you set the cellRenderer of col_img to loaderCellRenderer, add this line:

loaderCellRenderer._stage = this;

Now you can access stage from loaderCellRenderer.as by referring to _stage.

Enlarging an image basically means that we make the mainLoader container visible and feed it the url path of the image of the icon that we clicked. Edit your onClick function so that it looks like this:

private function onClick(MouseEvent):void
{
if (! _stage.mainLoader.visible)
{
_stage.mainLoader.source = _data.Image;
_stage.mainLoader.visible = true;
Mouse.cursor = "auto";
}
}

We also want the cursor to change to a hand pointer when rolled over the image only if no picture is enlarged right now:

private function rOver(MouseEvent):void
{
if (! _stage.mainLoader.visible)
{
Mouse.cursor = "button";
}
}

We want the big image to hide when we click on it, so add this to the main .fla file:

mainLoader.addEventListener(MouseEvent.CLICK, closePicture);

function closePicture(MouseEvent):void
{
if (mainLoader.visible)
{
mainLoader.visible = false;
}
}

Here's the full .fla code:

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;
loaderCellRenderer._stage = this;

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;

mainLoader.addEventListener(MouseEvent.CLICK, closePicture);

function closePicture(MouseEvent):void
{
if (mainLoader.visible)
{
mainLoader.visible = false;
}
}

And here's the loaderCellRenderer.as:

package 
{

import fl.containers.UILoader;
import flash.events.MouseEvent;
import flash.display.Stage;
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 static var _stage;

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

private function onClick(MouseEvent):void
{
if (! _stage.mainLoader.visible)
{
_stage.mainLoader.source = _data.Image;
_stage.mainLoader.visible = true;
Mouse.cursor = "auto";
}
}

private function rOver(MouseEvent):void
{
if (! _stage.mainLoader.visible)
{
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
{
}

}
}

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 10
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

3 comments:

Haah Haam said...

help...cant follow this guide without a step by step instruction

Haah Haam said...

I know this is an old post, but can someone please direct me to where I can download this .fla file I keep on getting errors trying to follow this guide.

Haah Haam said...

HAHAHAHAH nevermind I got it!! Thank you Kirill Poletaev !! bless you, bless ur heart and bless ur brain making this guide

Post a Comment