Adobe Flex: Trocar de figura no DataGrid de acordo com o DataProvider
Em um projeto com Adobe Flex precisei alterar a imagem de uma determinada célula no DataGrid de acordo com o valor originado do DataProvider.
Por exemplo, se no DataProvider o campo STATUS vier preenchido com 0 deve ser exibida a imagem off.png, caso contrário, dever ser exibida a imagem on.png.
Após várias pesquisas no Google, fiz uma compilação dos casos semelhantes e cheguei ao resultado que eu desejava.
Abaixo segue o código com essa funcionalidade.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Script> <![CDATA[ [Bindable] private var arAlternate:Array = new Array({"STATUS":0},{"STATUS":1},{"STATUS":1},{"STATUS":0},{"STATUS":1},{"STATUS":0}); ]]> </mx:Script> <mx:DataGrid id="dgAlternate" width="60" dataProvider="{arAlternate}"> <mx:columns> <mx:DataGridColumn headerText='Status'> <mx:itemRenderer> <mx:Component> <mx:Image horizontalAlign="center" width="32" height="32" source="{data.STATUS == 0 ? 'off.png' : 'on.png'}" /> </mx:Component> </mx:itemRenderer> </mx:DataGridColumn> </mx:columns> </mx:DataGrid> </mx:Application> |
O resultado final obtido foi:

Quem leu esse post, também leu...
- Adobe Flex - Como colocar gráficos em repeater
- Gráfico Cascata (Waterfall Chart aka Flying Bricks Chart) no Flex
- Modelo de consultas e relatórios ad-hoc no Adobe Flex
- Adobe Flex - Exportar Datagrid para Excel
- Adobe Flex - Criar colunas dinamicamente na DataGrid
- Flex Erro #1034: Não é possível converter DragManagerImpl em IDragManager
- Os 45 tutoriais de Adobe Flex mais procurados
- Mudar ícone do botão no Flex em tempo de execução
- Travar a seleção de datas anteriores a hoje no Flex
- Configurar o layout com CSS das aplicações Adobe Flex
| Imprimir artigo | Este artigo foi escrito por Igor Musardo em julho, 12 2008 às 10:50 am, e está arquivado em Adobe Flex. Siga quaisquer respostas a este artigo através do RSS 2.0. Você pode deixar uma resposta ou fazer um trackback do seu próprio site. |


















há 3 anos atrás
Bom tutorial…também serviu para mim.
Abraço Filipe
há 2 anos atrás
Velho, show de bola!
ficou perfect.
há 2 anos atrás
Igor,
Parabéns pela iniciativa de publicar estes exemplos. AJudam muito quem esta iniciando.
Porém eu recebo um error quando vou executar o meu programa.
No caso recebo o seguinte erro:
The element type mx:xolumns must be terminated by the matching end-tag
O que eu faço?
Podes me ajudar?
Obrigado.
há 2 anos atrás
@AndreCardoso você pode compartilhar a o código que está gerando esse erro?
há 2 anos atrás
Ola igor gostaria de saber se este exemplo da para implementar em um codigo onde uso um array para carregar o campo status do banco.
exemplo status AA=(imagem verde) BT = (imagem azul) AG= (imagem amarela)
pois eu tenho um codigo aqui que quando eu lista as imagens na grid ela duplica as cores pode me ajudar?
há 1 ano atrás
Galera, eu queria saber se tem como aplicar um filtro na coluna e filtrar por status.. Tipo.. mostrar apenas os on ou os off… valeu
há 1 ano atrás
Ola Pessoal, bom hoje tive que fazer algo parecido aqui no trabalho e mais uma vez esse excelente blog me ajudou, desde já eu agradeço ao Igor e a todos os participantes.
O unico problema é que eu precisava chavear entre 3 imagens então encontrei a seguinte solução:
/* CODIGO */
public function fGetImg(tpServico: int):String
{
if(tpServico == enumTpServico.FRETAMENTO) return ‘images/fretamento.png’;
else if(tpServico == enumTpServico.REGULAR ) return ‘images/regular.png’;
else return ‘images/escolar.png’;
}
Na Coluna “Tipo” eu inseri uma componente imagem e na propriedade source da imagem apontei pra uma função que retorna o endereço da imagem correta.
Abraço a todos.
Vlw.
há 1 ano atrás
Ótimo exemplo.
Entretanto, quando eu altero uma propriedade do array (por exemplo, status = 1) em tempo de execução, a renderização não é atualizada. Como resolver esse problema?
há 1 ano atrás
Valeu Igor, muito bom seu artigo, é o tipo de ajuda que não tem preço.
Abs.
Francisco
há 1 ano atrás
:-) O objetivo é compartilhar o conhecimento!!!
Abraços,
Igor Musardo