Bindable - redeRIA | Agregador de noticias, artigos, tutoriais Flex, Flash, JavaFX, AJAX e Rich internet applications em geral!

Out 20

Formatar/Alinhar codigo FLEX

Escrito por Bindable em Flex @ 10 20th, 2009 | via http://www.bindable.com.br/blog | Sem comentários

FlexFormat

O FlexFormat e um plugin muito útil na hora de identar o código flex. Economize horas de trabalho e mantenha um padrão de código em sua equipe/grupo. Baixe já http://sourceforge.net/projects/flexformatter/

DICA: Ao fazer o download, salve o arquivo dentro da pasta plugins do eclipse/Flex Builder.

fonte: Eduardo Kraus

Ago 10

Chamada a um executável utilizando adobe AIR por intermédio de sockets

Escrito por Bindable em Adobe Air, Flex @ 08 10th, 2009 | via http://www.bindable.com.br/blog | 2 comentários

A algum tempo precisei fazer uma chamada a um arquivo do tipo .exe por intermédio do Air, encontrei algumas soluções como o projeto Merapi, Fluorine Aperture e outros. Porem essas soluções eram como um tiro de bazuca em uma formiga, Por isso preferi implementar um serviço simples utilizando socket por intermédio do java.

import java.io.*;
import java.net.*;
 
class Server
{
	private static Server server;
	ServerSocket socket;
	Socket incoming;
	BufferedReader readerIn;
	PrintStream printOut;
	public static void main(String[] args)
	{
		server = new Server(3244);
	}
	private Server(int port)
	{
		System.out.println(">> Starting SimpleServer");
		try
		{
			socket = new ServerSocket(port);
			for( ;; )
			{
				incoming = socket.accept();
				readerIn = new BufferedReader(new InputStreamReader(incoming.getInputStream()));
				printOut = new PrintStream(incoming.getOutputStream());
				Runtime.getRuntime().exec("notepad.exe");
				incoming.close();
			}
		}
		catch (Exception e)
		{
//			System.out.println(e);
		}
	}
}

1
2
3

var xmlsock:XMLSocket = new XMLSocket();
xmlsock.connect("127.0.0.1",3244);
xmlsock.send("call\n");

Espero ter ajudado. t+

Jul 30

Editor WYSIWYG vetorial para flex

Escrito por Bindable em Flex @ 07 30th, 2009 | via http://www.bindable.com.br/blog | Sem comentários

O codeDraw é um projeto openSource de edição visual para criar gráficos vetoriais para aplicações flex, flash, TASC e haXe. Com ele podemos criar movieClips graficamente e logo exportar para as2, as3.

codeDraw integra um pequeno núcleo de gestão de objectos gráficos em tempo de execução, Atualmente o codeDraw possui 4 ferramentas : Desenho e seleção, painel de propriedades, camadas e filtros. Ainda se encontra em estado prematuro mas tem bastante potencial, facilita muito em situações onde a necessidade de criar imagens vetoriais em code para flex.

Fonte: made in flex

Jul 16

Lista completa de css do flex (Versão 3)

Escrito por Bindable em Flex @ 07 16th, 2009 | via http://www.bindable.com.br/blog | Sem comentários

Css no flex é um assunto que deixa muitos de cabelos em pé, segue uma dica muito legal para quem tem que enfrentar estilos no flex. Uma lista completa de todos estilos dos componentes do flex 3.
Link: clique aqui

Abraço.

Jul 14

Arredondando os cantos de uma imagem usando máscara

Escrito por Bindable em Flex @ 07 14th, 2009 | via http://www.bindable.com.br/blog | 1 comentário

Este é um dos tipos de exemplo que utilizo muito, é bem simples, basta criar uma Sprite como mascara de uma imagem e através do método drawRoundRect() é possível arredondar os cantos.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/ -->
<mx:Application name="Image_mask_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">
 
    <mx:Script>
        <![CDATA[
            import mx.events.ResizeEvent;
 
            private var roundedMask:Sprite;
 
            private function init():void {
                roundedMask = new Sprite();
                canvas.rawChildren.addChild(roundedMask);
            }
 
            private function image_resize(evt:ResizeEvent):void {
                var w:Number = evt.currentTarget.width;
                var h:Number = evt.currentTarget.height;
                var cornerRadius:uint = 60;
                roundedMask.graphics.clear();
                roundedMask.graphics.beginFill(0xFF0000);
                roundedMask.graphics.drawRoundRect(0, 0,
                            w, h,
                            cornerRadius, cornerRadius);
                roundedMask.graphics.endFill();
                image.mask = roundedMask;
            }
        ]]>
    </mx:Script>
 
    <mx:Canvas id="canvas">
        <mx:Image id="image"
                source="http://www.helpexamples.com/flash/images/image1.jpg"
                resize="image_resize(event);">
        </mx:Image>
    </mx:Canvas>
 
</mx:Application>

by: http://blog.flexexamples.com

Jul 10

Flex Explorer’s

Escrito por Bindable em Abode flex, Flex @ 07 10th, 2009 | via http://www.bindable.com.br/blog | Sem comentários

Resolvi reunir algumas ferramentas no estilo explorer, que ajudam muito na hora do desenvolvimento flex, uma recomendação entre eles e o tour de flex que contem varios exemplos de códigos de diversas ferramentas e bibliotecas. Para quem esta começando com flex ajuda muito.

01. Tour de Flex / Versão WEB

tourdeflex

02. Component Explorer

flexcomponentexplorer

03. Style Explorer

flexstyleexplorer

07. Filter Explorer

filterexplorer

08. Primitive Objects Explorer

primitiveexplorer

09. Data Visualization Explorer

quvisexplorer

10. Button Skin Explorer

buttonskinexplorer

11. Cairngorm Diagram Explorer

12. PureMVC Explorer ( Criado por mim)

…

Jul 7

Efeito fumaça usando sistema de partícula TweensyFX

Escrito por Bindable em Abode flex, Flex @ 07 7th, 2009 | via http://www.bindable.com.br/blog | Sem comentários

Para quem não conhece TweensyFX é uma library de expansão do projeto Tweensy
que fornece varios recursos de efeitos otimizados, entre eles estão directional motion blur, pixelation, xray, bulge/dent displacements, reflection, emitters, rgb channel splitting e bump mapping. Criei um exemplo bem simples de um efeito de fumaça, espero que ajude os interessados.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	creationComplete="init()">
	<mx:Script>
		<![CDATA[
			import com.flashdynamix.motion.effects.core.ColorEffect;
			import com.flashdynamix.motion.effects.core.FilterEffect;
			import com.flashdynamix.motion.effects.PerlinDisplacementEffect;
			import com.flashdynamix.motion.layers.BitmapLayer;
			import com.flashdynamix.motion.extras.Emitter;
			private var layer:BitmapLayer;
			private var disp:PerlinDisplacementEffect;
			private var tx:Number;
			private var ty:Number;
			private var smokeEmittor:Emitter;
			private var smokeStartCt:ColorTransform;
			private var smokeEndCt:ColorTransform;
 
			[Embed(source="smokeFX.png")]
			private var _fireParticle:Class;
 
			public function init():void
			{
				myButton.addEventListener(MouseEvent.CLICK, startSmoke);
 
				layer = new BitmapLayer(550, 400, 2);
 
				disp = new PerlinDisplacementEffect(275, 200, 2, -6, 1);
				disp.baseX = 50;
				disp.baseY = 40;
 
				layer.add(disp);
				layer.add(new FilterEffect(new BlurFilter(3, 3, 1)));
				layer.add(new ColorEffect(new ColorTransform(1, 1, 1, 0.95)));
 
				smokeStartCt = new ColorTransform(255, 255, 255, 0, 255, 255, 255, 0);
				smokeEndCt = new ColorTransform(0, 0, 0, .0, 255, 255, 255, 7.72);
				smokeEmittor = new Emitter(_fireParticle, {scaleX: 2.5, scaleY: 2.5, rotation: "-180,180"}, 1, 1, "255, 285", "100, 200", 1);
 
				smokeEmittor.transform.colorTransform = smokeStartCt;
				smokeEmittor.endColor = smokeEndCt;
				smokeEmittor.scale = 0.1;
 
				layer.draw(smokeEmittor.holder);
 
				tx = 250;
				ty = 350;
 
				myUIComponent.visible = false;
				myUIComponent.addChild(layer);
 
				addEvent(myUIComponent, Event.ENTER_FRAME, draw);
				addEvent(myUIComponent, MouseEvent.MOUSE_MOVE, mover);
			}
 
			private function mover(e:MouseEvent):void
			{
				tx = myUIComponent.mouseX;
				ty = myUIComponent.mouseY;
			}
 
			private function draw(e:Event):void
			{
				smokeEmittor.transform.colorTransform = new ColorTransform(ca.value, cb.value, cc.value, cc0.value, da.value, db.value, dc.value, dc0.value);
				smokeEmittor.endColor = new ColorTransform(aa.value, ab.value, ac.value, ac0.value, ba.value, bb.value, bc.value, bc0.value);
				smokeEmittor.x = myUIComponent.width / 2;
				smokeEmittor.y = myUIComponent.height;
			}
 
			protected function addEvent(item:EventDispatcher, type:String, liststener:Function, priority:int = 0, useWeakReference:Boolean = true):void
			{
				item.addEventListener(type, liststener, false, priority, useWeakReference);
			}
 
			private function startSmoke(e:MouseEvent):void
			{
				myUIComponent.visible = true;
				layer.startRender();
				myButton.removeEventListener(MouseEvent.CLICK, startSmoke);
				myButton.addEventListener(MouseEvent.CLICK, endSmoke);
			}
 
			private function endSmoke(e:MouseEvent):void
			{
				myUIComponent.visible = false;
				layer.stopRender();
				myButton.removeEventListener(MouseEvent.CLICK, endSmoke);
				myButton.addEventListener(MouseEvent.CLICK, startSmoke);
			}
		]]>
	</mx:Script>
	<mx:UIComponent id="myUIComponent" height="400" width="600" x="19" y="33"/>
	<mx:Button id="myButton" label="Inicia" x="19" y="10"/>
	<mx:HSlider id="aa" maximum="255" minimum="0" value="255" width="78" x="19" y="40"/>
	<mx:HSlider id="ab" maximum="255" minimum="0" value="255" width="78" x="105" y="40"/>
	<mx:HSlider id="ac" maximum="255" minimum="0" value="255" width="78" x="191" y="40"/>
	<mx:HSlider id="ba" maximum="255" minimum="0" value="255" width="78" x="19" y="60"/>
	<mx:HSlider id="bb" maximum="255" minimum="0" value="255" width="78" x="105" y="60"/>
	<mx:HSlider id="bc" maximum="255" minimum="0" value="255" width="78" x="191" y="60"/>
	<mx:HSlider id="bc0" maximum="255" minimum="0" value="255" width="78" x="277" y="66"/>
	<mx:HSlider id="ca" maximum="255" minimum="0" value="255" width="78" x="19" y="86"/>
	<mx:HSlider id="cb" maximum="255" minimum="0" value="255" width="78" x="105" y="86"/>
	<mx:HSlider id="cc" maximum="255" minimum="0" value="255" width="78" x="191" y="86"/>
	<mx:HSlider id="da" maximum="255" minimum="0" value="255" width="78" x="19" y="112"/>
	<mx:HSlider id="db" maximum="255" minimum="0" value="255" width="78" x="105" y="112"/>
	<mx:HSlider id="dc" maximum="255" minimum="0" value="255" width="78" x="191" y="112"/>
	<mx:HSlider id="ac0" maximum="255" minimum="0" value="255" width="78" x="277" y="40"/>
	<mx:HSlider id="cc0" maximum="255" minimum="0" value="255" width="78" x="277" y="86"/>
	<mx:HSlider id="dc0" maximum="255" minimum="0" value="255" width="78" x="277" y="112"/>
</mx:Application>

Jun 25

Componentes para Flex

Escrito por Bindable em Flex @ 06 25th, 2009 | via http://www.bindable.com.br/blog | 2 comentários

Para aqueles que vivem na correria em projetos, como eu segue uma lista de vários componentes para flex, para mim facilitou a vida pois ficar caçando na internet realmente e uma coisa muito chata fora o tempo perdido. Espero que ajude.

DisplayShelf Component - http://www.quietlyscheming.com/blog/components/tutorial-displayshelf-component/ Um componente que pode ser entendido como uma aula sobre alguns pontos bem interessantes do flex, como o Matrix, Item renderer, masking, bitmap manipulation, etc… o resultado final dos 2 exemplos é muito bom!!

ASDIA - http://code.google.com/p/asdia/ Uma libraria para desenhar diagramas de dados na nossa aplicaçao flex.

Flex Book – http://www.quietlyscheming.com/blog/components/flexbook/ Um componente que simula um livro, que pode conter qualquer outro componente, folheado pagina a pagina, é uma maneira bem original de mostrar conteudo na nossa aplicação.

Flex2treemap - http://code.google.com/p/flex2treemap/

Um componente treeMap, que permite apresentadr dados de uma forma bem original e profissional.

FlexFM - http://flexfm.us/about/ Um componente que permite que o flex se ligue directamente ao FileMaker (sistema de base de dados)

Ramdom Walk Component – http://www.quietlyscheming.com/blog/components/randomwalk-component/ Um componente que cria um menu conhecido como Walk. Um optimo exemplo de menu pratico.

FlexUnit – http://code.google.com/p/as3flexunitlib/wiki/Welcome Fornece uma pequena framework para testar o nosso aplicativo, bem como as suas librarias.

FishEye Component - http://www.quietlyscheming.com/blog/components/fisheye-component/ Um componente e explorador, que cria o efeito fishEye visto em tantos menus como até o proprio menu tipo mac.

ASSql – http://code.google.com/p/assql/ Um conjunto de classes que permite que uma aplicação AIR faça chamadas directas a uma base de dados MySql.

Animated Drag & Drop – http://www.quietlyscheming.com/blog/components/animated-dragtile-component/ Um exemplo de uma grande utilidade, principalmente educativa. Demonstra a utilização de propriedades drag & drop em elementos menos usados.

Metaphile – http://code.google.com/p/metaphile/ Uma libraria que permite ler e escrever os “cabeçalhos” (metadata) nos ficheiros audio (ID3), video ou até swf, que até podem incluir imagens, titulos, etc…

Flex Calendar – http://code.google.com/p/flexcalendar/ Embora não muito profissional, esta libraria pode ser extensa e usade de uma forma bem util.

Interactive Calendar – http://www.quietlyscheming.com/blog/components/interactive-calendar/ Mais um calendário, mas este muito mais interactivo, que basicamente serve de agenda em que podem ser apresentados varios calendários de varios utilizadores, muito util quando hà necessidade de guardar agendas partilhadas…

Flexedtoolkit - http://code.google.com/p/flexedtoolkit/ Um conjunto de librarias e componentes que podem facilmente ser usados e que são de grande utilidade, tais como AutoRefresh, ClientIdleTimeout, customAlerts ou customGrid.

Datagrid Search – http://www.preterra.com/flexsamples/gridsearch/gridsearch.html Um exemplo de como utilizar um sistema para procurar algo numa datagrid e colorir as linhas que apresentam essa palavra procurada.

Landscape Zoomer – http://www.quietlyscheming.com/blog/components/landscape-zoomer/ Um componente que permite ampliar imagens a partir das suas miniaturas, utiliza no exemplo a API do flickr para obter as imagens.

Interactive ToolTip – http://www.meutzner.com/blog/index.cfm/2008/2/20/A-PersistentInteractive-Tooltip-in-Flex Um tooltop personalizado com um botão para mais informações. Simples mas muito util.

Dual Slider Component – http://www.meutzner.com/blog/index.cfm/2006/7/26/Dual-Slider-Component Um componente muito util, que permite usar um slider para escolher 2 valores, ou algo compreendido entre 2 valores.

Flex Chart Range Selector - http://www.stretchmedia.ca/blog/index.cfm/2007/3/9/Flex-Chart-Range-Selector–Google-Financeish / Muitas vezes os nossos graficos são demasiado extensos, este componente permite visualizar apenas parte do grafico, tendo em baixo uma miniatura total do grafico que nos permite escolher a area a visualizar. Actualizado em: http://www.stretchmedia.ca/blog/index.cfm/2007/3/12/Chart-Range-Selector–Take-Two

FlexLib - http://code.google.com/p/flexlib/ Pouco mais hà a falar, a tão conhecida libraria de componentes flex. Reune componentes como: AdvancedForm, Base64Image, EnhancedButtonSkin, CanvasButton, ConvertibleTreeList, Draggable Slider, Fire, Highlighter, HorizontalAxisDataSelector IconLoader, ImageMap, PromptingTextArea, PromptingTextInput, Scrollable Menu Controls, SuperTabNavigator, Alternative Scrolling Canvases, Horizontal Accordion, TreeGrid, FlowBox, Docking ToolBar, Flex Scheduling Framework

Flex Debug Component – http://www.mikenimer.com/index.cfm/2006/7/5/FlexDebugPanel Um debugger para o flex, permite observar variados dados em tempo de execução.

JAM – Just ActionScript & MXML – http://www.onflex.org/code/ Um depósito de algum código bem util em ActionScript e MXML. Pode encontrar alguns exemplos de packages e componentes.

SpringGraph Flex Component – http://mark-shepherd.com/blog/springgraph-flex-component/ Um componente bem original, que apresenta uma forma de apresentação de dados num grafico com elementos unidos entre eles.

Yahoo Astra Flex – http://developer.yahoo.com/flash/astra-flex/ Um conjunto de componentes para o flex de uma grande utilidades. Contem componentes como AutoCompleteManager, ColorPlaneAndSliderPicker, ColorSliderPicker, DropDownColorPicker, IPv4AddressInput, TimeInput, ou TimeStepper

AS3Crypto – http://code.google.com/p/as3crypto/ Um motor de encriptação que suporta os mais variados sistemas de encriptação.

AS3MailLib – http://code.google.com/p/as3maillib/ Uma libraria que permite ligar a um servidor de email usando o protocolo SMTP ou POP3.

FleXtense – http://www.flextense.net/ Gera automaticamente as classes AS3 que servem de comunicação para Web Serviçes.

Audio Visualization Component – http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&loc=en_us&extid=1034708 Cria um equalizer de barras, linhas ou area de acordo com a variação do spectrum do som.

Sand Mail – http://sourceforge.net/projects/sandmanmail/ Mais um cliente de email (IMAP) feito em flex + php SSR 2 – Super Simple Remote – http://blog.rubyamf.org/?p=102 Uma libraria em Action Script para ligar o flash/flex a objectos remotos.

FlexibleTasks – http://www.weberdesignlabs.com/flexibletask/FlexibleTasks.html Um sistema blog/CMS feito totalmente em flex, com o código fonte disponivel.

Spell Check Component – http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=1401019 Um componente que fornece correcção ortográfica ao nosso aplicativo. Com certeza, um deles será util para você utilizar na sua rotina diária de desenvolvimento.

Dica de: Silva Developer

Jun 25

Problema de ItemRenderer com imagens part2

Escrito por Bindable em Abode flex, Flex, itemRenderer @ 06 25th, 2009 | via http://www.bindable.com.br/blog | Sem comentários

Ontem criei um post falando sobre um problema que tive no itemRenderer com imagens veja o post http://www.bindable.com.br/blog/problema-de-itemrenderer-com-imagens. Na época a única solução que havia encontrado foi a do post, mas o Mario Junior ontem me apontou uma solução mais elegante e proposta na documentação da Adobe http://livedocs.adobe.com/flex/3/html/help.html?content=cellrenderer_7.html, implementei no meu exemplo e funcionou perfeitamente.

A alteração consiste em setar a minha imagem não no creationCompleter e sim dando um override no método “set data”, veja como ficou o código:

<mx:itemRenderer>
					<mx:Component>
						<mx:Box verticalAlign="middle" horizontalAlign="center">
						<mx:Script>
							<![CDATA[
							    import mx.events.FlexEvent;
								/**
								 * Embeda as 3 imagens que serão utilizada no exemplo
								 * */
 
								[Embed('imagem1.png')] private var Img1:Class;
								[Embed('imagem2.png')] private var Img2:Class;
								[Embed('imagem3.png')] private var Img3:Class;
 
 
								override public function set data(value:Object):void
								{
								    super.data = value;
									if(value != null)
									{
										if(value.titulo == "imagem1")
										{
											img.source = Img1;
											img.toolTip = value.titulo;
										}
										else
										if(value.titulo == "imagem2")
										{
											img.source = Img2;
											img.toolTip = value.titulo;
										}
										else
										if(value.titulo == "imagem3")
										{
											img.source = Img3;
											img.toolTip = value.titulo;
										}
 
									}
									else
									{
										img.visible=false;
									}
									 dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
 
								}
							]]>
						</mx:Script>
							<mx:Image id="img" width="20" height="20"  autoLoad="true" creationComplete="init()" />
						</mx:Box>
					</mx:Component>
				</mx:itemRenderer>

Obrigado a todos pelas considerações.

Até a próxima.

Jun 24

Problema de ItemRenderer com imagens

Escrito por Bindable em Abode flex, Flex, itemRenderer @ 06 24th, 2009 | via http://www.bindable.com.br/blog | Sem comentários

Antes de tudo, quero dar as boas vindas a você que está visitando este blog, nós da Bindable que queremos compartilhar um pouco de nossos desafios, fique a vontate.

Neste post vou falar sobre um problema que assombra muitos programadores de flex, e compartilhar uma solução que encontrei.

Vamos ao problema: quando se usa um itemRenderer em um AdvancedDataGrid ou um DataGrid com uma coluna que tem que imagens, no evento do scrollbar as imagens se misturam não sendo condizente com o dataProvider. O primeiro passo para resolver o problema é saber reproduzir o mesmo, e é isso que vamos fazer nessa etapa:

 <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="200"  layout="absolute" creationComplete="init()">
<mx:Script>
	<![CDATA[
		import mx.collections.ArrayCollection;
		[Bindable]
		private var colletionData:ArrayCollection = new ArrayCollection();
 
		/**
		 * Evento é executado quando a Applicação está completa
		 * Inicializa a coleção de dados
		 * */
		private function init():void
		{
			colletionData =new ArrayCollection([{titulo:'imagem1', descricao:'conteudo com a imamge 1'},
							{titulo:'imagem1', descricao:'conteudo com a imamge 1'},
							{titulo:'imagem1', descricao:'conteudo com a imamge 1'},
							{titulo:'imagem2', descricao:'conteudo com a imamge 2'},
							{titulo:'imagem1', descricao:'conteudo com a imamge 1'},
							{titulo:'imagem2', descricao:'conteudo com a imamge 2'},
							{titulo:'imagem3', descricao:'conteudo com a imamge 3'},
							{titulo:'imagem3', descricao:'conteudo com a imamge 3'},
							{titulo:'imagem2', descricao:'conteudo com a imamge 2'},
							{titulo:'imagem1', descricao:'conteudo com a imamge 1'},
							{titulo:'imagem1', descricao:'conteudo com a imamge 1'},
							{titulo:'imagem3', descricao:'conteudo com a imamge 3'},
							{titulo:'imagem2', descricao:'conteudo com a imamge 3'},
							{titulo:'imagem1', descricao:'conteudo com a imamge 1'},
							{titulo:'imagem3', descricao:'conteudo com a imamge 3'},
							{titulo:'imagem3', descricao:'conteudo com a imamge 3'},
							{titulo:'imagem3', descricao:'conteudo com a imamge 3'},
							{titulo:'imagem2', descricao:'conteudo com a imamge 2'},
							{titulo:'imagem1', descricao:'conteudo com a imamge 1'},
							{titulo:'imagem3', descricao:'conteudo com a imamge 3'},
							{titulo:'imagem1', descricao:'conteudo com a imamge 1'},
							{titulo:'imagem3', descricao:'conteudo com a imamge 3'}]
							);
			gridDados.dataProvider = colletionData;
		}
	]]>
</mx:Script>
 
	<mx:DataGrid id="gridDados" dataProvider="{colletionData}" width="400" height="200" x="0" y="0">
		<mx:columns>
			<mx:DataGridColumn headerText="Titulo Imagem" dataField="titulo" width="120"/>
			<mx:DataGridColumn headerText="Descrição" dataField="descricao" width="120"/>
			<mx:DataGridColumn headerText="Imagem"   width="80">
				<mx:itemRenderer>
					<mx:Component>
						<mx:Box verticalAlign="middle" horizontalAlign="center">
						<mx:Script>
							<![CDATA[
								/**
								 * Embeda as 3 imagens que serão utilizada no exemplo
								 * */
 
								[Embed('imagem1.png')] private var Img1:Class;
								[Embed('imagem2.png')] private var Img2:Class;
								[Embed('imagem3.png')] private var Img3:Class;
 
 
								/**
								 * Seta no creationComplete a imagem referênte ao data
								 * que veio do dataProvider
								 *
								 * Esse evento só ocorre uma vêz na criação do objeto
								 * */
								public function init():void
								{
									if(data != null)
									{
										if(data.titulo == "imagem1")
										{
											img.source = Img1;
											img.toolTip = data.titulo;
										}
										else
										if(data.titulo == "imagem2")
										{
											img.source = Img2;
											img.toolTip = data.titulo;
										}
										else
										if(data.titulo == "imagem3")
										{
											img.source = Img3;
											img.toolTip = data.titulo;
										}
									}
									else
									{
										img.visible=false;
									}
								}
							]]>
						</mx:Script>
							<mx:Image id="img" width="20" height="20"  autoLoad="true" creationComplete="init()" />
						</mx:Box>
					</mx:Component>
				</mx:itemRenderer>
			</mx:DataGridColumn>
		</mx:columns>
	</mx:DataGrid>
</mx:Application>

Como você pode ver, eu crie um itemRenderer que o data define qual imagem será exibida, o resultado disso é:

Veja que os três primeiros itens são da “imagem 1″, como um passe de mágica se você mexer no scrollbar, irá notar que as imagens mudaram, mas perceba que o data continua o mesmo, veja a coluna “Titulo Imagem”.

Agora que já sabemos como reproduzir o problema, vamos a solução que encontrei:

Para resolver esse problema, foi necessário fazer um bindable inline na tag imagem como mostra o itemRenderer a baixo:

			<mx:itemRenderer>
					<mx:Component>
						<mx:Box verticalAlign="middle" horizontalAlign="center">
						<mx:Script>
							<![CDATA[
								/**
								 * Embeda as 3 imagens que serão utilizada no exemplo
								 * */
 
								[Embed('imagem1.png')] private var Img1:Class;
								[Embed('imagem2.png')] private var Img2:Class;
								[Embed('imagem3.png')] private var Img3:Class;
 
							]]>
						</mx:Script>
							<mx:Image id="img" width="20" height="20"
								source="{data.titulo == 'imagem1'?Img1:data.titulo == 'imagem2'?Img2:data.titulo == 'imagem3'?Img3:''}"
								toolTip="{data.titulo}"
								autoLoad="true" />
						</mx:Box>
					</mx:Component>
				</mx:itemRenderer>