Botao com skinclass dinamica dentro de um datagrid

Assuntos Gerais
#1

Olá pessoal estou iniciando em flex e me deparei com um problema, é o seguinte, tenho um DG que recebe os dados pelo seu dataProvider, dentro desse data grid tenho um botao (editar/vizualizar) que deve se comportar da seguinte maneira. quando a dataLeitura estiver null o botao deve aparecer editar. quando a mesma nao for nula deve aparecer vizualizar.
até ai tudo bem. quando eu busco os itens os botoes sao alterados conforme a logica. porem quando o scroll é usado, os botoes perdem as configuracoes.

segue abaixo o codigo

<mx:DataGridColumn headerText="Data registro" dataField="dataRegistro" labelFunction="{formataData}" width="140" />
				<mx:DataGridColumn headerText="Data Leitura" dataField="dataLeitura" labelFunction="{formataData}" width="140"/>
				<mx:DataGridColumn headerText="Usuário registro" dataField="usuarioRegistro.nome" width="250" />
				<mx:DataGridColumn headerText="Mensagem" dataField="descricao" />
				<mx:DataGridColumn width="100" editable="false" >
					<mx:itemRenderer>
						<fx:Component>
							<s:MXItemRenderer>
								<s:Button id="tipoBotao" creationComplete="{changeButton()}" click="{outerDocument.editMensagem()}" 
										  horizontalCenter="0" verticalCenter="0" >
								<fx:Script>
									<![CDATA[
										import br.com.neodent.flex.model.bean.Mensagem;
										import br.com.neodent.flex.view.skin.EditarButtonSkin;
										import br.com.neodent.flex.view.skin.VisualizarButtonSkin;
										public function changeButton():void{
											if(data.dataLeitura == null){
												tipoBotao.setStyle("skinClass", Class(EditarButtonSkin)); 
											}
											else if(data.dataLeitura != null){
												tipoBotao.setStyle("skinClass", Class(VisualizarButtonSkin)); 
												
											}
										}
									]]>
								</fx:Script>
									</s:Button>
							</s:MXItemRenderer>
						</fx:Component>
					</mx:itemRenderer>
				</mx:DataGridColumn>
			</mx:columns>
		</mx:DataGrid>
#2

Isso acontece pq o Flex para gerenciar melhor a memória cria somente os renderers necessários para a visualização atual, isso se chama Deferred Instantiation.
O TabNavigator / ViewStack tem isso tb, os objetos de cada aba só serão realmente criados qd forem visualizados, nesse componente vc pode contornar através do atributo creationPolicy = all, states tb tem isso.

Resumindo, se vc tem 10 linhas e uma coluna tem um itemrenderer, o Flex então criará 10 objetos desse itemrenderer um para cada linha dessa coluna. Qd vc dá o scroll para mostrar o item 11, o q acontece na verdade é q o item 1 q deixa de ser visível será reutilizado para ser mostrado no item 11 e o evento creationComplete só acontece uma vez.

Para vc acertar isso sobreescreva sempre o atributo data, o set data sempre será chamado a cada visualização:

override public function set data(value:Object):void {
     super.data = value;

     if ( value != null ) {
          if  ( data.dataLeitura == null ) {
              setStyle("skinClass", Class(EditarButtonSkin)); 
          }
          else {
              setStyle("skinClass", Class(VisualizarButtonSkin)); 
          } 
     }
}

Outra sugestão em vez de click="{outerDocument.editMensagem()}" o q gera um acoplamento muito forte evitando reaproveitamento de código dispare um evento bubbles = true a ser escutado pelo objeto mais externo.

Estou para escrever algo sobre isso no meu blog já faz algum tempo mais ainda não tive tempo.

[]s

#3

Obrigado Fabio, ótima sua explicação, e funcionou perfeitamente.

Att.

#4