DataGrid - ToolTip com Imagem

Olá Pessoal!!

=)

Primeiro... Feliz dias das Mães!!!!

Elas merecem!! Principalmente a minha!! Te Amuh Maew!!!

+)

Mas Então, essa semana meu cliente pediu para visualizar a imagem do Produto a qual ele quisesse. Só que como eu mostraria imagem de mais de 200 produtos listado em uma DataGrid !? Aí que tive a idéia de quando Clicar na Row do produto, mostrasse sua Miniatura!

Vamos ver como ficou!?

É Muito simples..

AS3:

//Imports das lib que irei utilizar
import mx.collections.ArrayCollection;
import mx.controls.ToolTip;

//Var ToolTip
[Bindable]
public var tp:ToolTip = new ToolTip;

//Array que contem os dados: Nome, autor, e nome da Imagem.
[Bindable]
private var listaArtes:ArrayCollection=new ArrayCollection();

//Funcao init para carregar o array
private function iniciar():void{

listaArtes = new ArrayCollection();

listaArtes.addItemAt({nome:"Homem Aranha",autor:"MARVEL",imagem:"1.jpg"},0);

listaArtes.addItemAt({nome:"Mulher Quadro",autor:"www.olhares.com",imagem:"2.jpg"},1);

listaArtes.addItemAt({nome:"Papel de Parede",autor:"www.olhares.com",imagem:"3.jpg"},2);

listaArtes.addItemAt({nome:"Casa Antiga",autor:"www.olhares.com",imagem:"4.jpg"},3);

listaArtes.addItemAt({nome:"Lampada",autor:"www.olhares.com",imagem:"5.jpg"},4);

listaArtes.addItemAt({nome:"Anjo Guardiao",autor:"www.olhares.com",imagem:"6.jpg"},5);

}

//Funcao chamada pela DGrid ao Clicar em um produto na Grid
public function showImagem(img:String):void{

//Coloco um um BG no Tooltip mapeando o dir que se encontra a img
tp.setStyle('backgroundImage',"imagens/" + img);

tp.width = 300;

tp.height = 200;

tp.x = 20;

tp.y = 250;

tp.setVisible(true);

addChild(tp);
}

//Funcao chamada pela DGrid quando tirar o mouse do produto
public function ocultImagem(event:Event):void{

tp.setVisible(false);
}

MXML:

<> id="dgArtes" dataProvider="{listaArtes}" width="620" height="203"

itemClick="showImagem(dgArtes.selectedItem.imagem)" itemRollOut="ocultImagem(event)"

horizontalCenter="0" verticalCenter="-96.5" selectedIndex="0" alpha="0.53" themeColor="#c0c0c0">

<mx:columns>

<> headerText="Nome" dataField="nome"/>

<> headerText="Autor" dataField="autor"/>

Download do Source:

Link

Aplicação Rodando:

Link

Blza Pessoal!!

Abraço!!!

\o/