Inserindo ícones em uma DataGrid com itemRenderer

Neste post, mostro como inserir ícones em uma DataGrid, algo muito útil em DataGrids

onde há funções para o usuário editar e excluir registros.

Deixe o código do seu arquivo .mxml principal como o código abaixo:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	
	<!--
	Utilizo a tag mx:Model para definir a estrutura de dados que populará a DataGrid.
	
	A tag mx:Model define um objeto(Object) utilizando uma estrutura xml.
	
	Ao atribuir um id a tag model podemos refericiar os dados usando ponto(.).
	Exemplo:Para visualizar o nome dos times, use modelPaulistas.clube.nome.
	Obs.:A tag raiz da estrutura, <clubes>, não é utlizada na referência. 
	-->
	
	<mx:Model id="modelPaulistas">
		<clubes>
			<clube nome="Palmeiras" libertadores="true" />
			<clube nome="Santos" libertadores="true" />
			<clube nome="São Paulo" libertadores="true" />
			<clube nome="Corinthians" libertadores="false" />
		</clubes>
	</mx:Model>
	
	<!--
	Definimos como dataProvider(provedor de dados) da DataGrid,	a tag model acima da seguinte forma: 
	dataProvider="{id.tag_que_se_repete}";
	obs.:as chaves são para fazer o binding dos objetos, quando houver qualquer alteração no model,
	a dataGrid será atualizada.
	
	Nas colunas da dataGrid definimos qual atributo do model será exibido através da propridade
	dataField, apenas atribuindo o nome da propriedade do objeto model.
	
	Na coluna Libertadores, através da propriedade itemRenderer, faço referência a um outro arquivo(classe)
	mxml, para cada item da dataGrid, o aquivo será invocado.
	-->

	<mx:DataGrid x="10" y="10" dataProvider="{modelPaulistas.clube}">
		<mx:columns>
			<mx:DataGridColumn headerText="Clube" dataField="nome"/>
			<mx:DataGridColumn headerText="Libertadores" itemRenderer="dataGridIcons"/>
		</mx:columns>
	</mx:DataGrid>	

</mx:Application>

Crie um novo MXML Component chamado dataGridIcons, based on HBox e 0 para width e Height.
e deixe o seu código como o código abaixo:

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center">
	
	<!--
	Para cada item da dataGrid esse arquivo(classe) será invocado,
	ao ser invocado é passado um objeto, data, onde é possível acessar os
	dados da classe que o invocou, nesse caso a dataGridColumn.
	
	Na propriedade source da tag Image, fiz um operador ternário, equivalente a um if-else,
	onde se liberdadores for true exibe a imagem checked.png, senão exibe notChecked.png.  
	-->
	<mx:Image source="{data.libertadores ? 'checked.png' : 'notChecked.png'}" />
	
</mx:HBox>

Componente Customizado com ActionScript

Neste tutotial mostro como criar e utilizar um componente customizado em actionScript e o melhor, reutilizável.

Optei por criar um projeto bem simples, nele, apenas faço uma tradução para o componente DateField(CampoData).

1. Utilizando o Flex Builder 3, criamos um novo projeto em File > New > Flex Project.

2. Nomeie como ComponentesCustomizados e Finish.

3. Entre as tags <mx:Application crie um novo DateField como abaixo:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:DateField y="10" x="10"/>
</mx:Application>

Obs.: Clique no ícone do calendário, note que os anos e os dias estão em inglês,

afim de melhorar a usabilidade e a experiência do usuário, deixaremos

nosso componente em português.

4. Crie uma nova classe ActionScript em File > New > ActionScript Class

5. Nomeie como CampoData e Finish.

6. Deixe o código da classe como abaixo:

package {
    import mx.controls.DateField;
    public class CampoData extends DateField {
        public function CampoData()	{
            this.yearNavigationEnabled = true;
            this.formatString = "DD/MM/YYYY";
            this.monthNames = ["Janeiro","Fevereiro","Março","Abril","Maio","Junho",
                "Julho","Agosto","Setembro","Outubro","Novembro","Dezembro"];
            this.dayNames = ["D","S","T","Q","Q","S","S"];
        }
    }
}

a. Estendemos a classe apartir da classe DateField para a mesma herde todas as caractéristicas de DateField.

b. yearNavigationEnabled = true cria setas para navegar através do anos, tornando muito mais rápido alterar entre intervalo de anos.

c. formatString, é máscara de exibição da data, no padrão brasileiro dia, mês e ano.

d. monthNames, array que armazena o nome dos meses.

e. dayNames, array com a inicial do dia da semana.

7. Adicione ao codigo mxml o componente CampoData, escrevendo <CampoDat e dando um Ctrl + Espaço automaticamente o Flex Builder adiciona a namespace local.

Seu código ficará parecido com o código abaixo.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
    <mx:DateField y="10" x="10"/>
    <local:CampoData y="10" x="300" />
</mx:Application>

8. Rode a aplicação e note a melhoria.

Combobox com ícone

Encontrei esse exemplo muito legal de combobox com ícone no site Flexible Experiments, o projeto é em flex 2, porém, funciona perfeitamente no flex 3.
Abaixo, minha utilização do componente, fiz uma combobox listando os cogumelos do Mario World, lembra do Mario?

Link do post no Flexible Experiments : Link