[FLEX] – Estilizando uma coluna do DataGrid…

April 28th, 2010 | Tags: , , , , ,

Bom galera, após muito tempo sem blogar, hoje vou mostrar como fazer para estilizar os dados de uma coluna no DataGrid de uma forma mais limpa, customizável e, visando um melhor desempenho.

Como assim estilizar um dado da coluna de um DataGrid?

Talvez eu não tenha me expressado legal no título do post, então vou explicar o que faz nosso exemplo.
Basicamente é alterar a estilo do texto na coluna do datagrid, por exemplo: cor, negrito, itálico, etc…
E o legal é que vc pode fazer uma formatação condicional, ou seja, dependendo de um determinado valor, a formatação é diferente…

Como assim, melhor desempenho?

Bom, primeiramente, a solução para esse nosso exemplo seria usar um itemRenderer, isso é algo que está bem explicado em diversos blogs por aí, então não vou explicar aqui como ele funciona, mas vou apenas detalhar umas coisas…

A forma mais utilizada para chegar a essa solução, seria criar um Componente do Tipo HBox, nele, adicionar um objeto do Tipo Label, dar um override no médodo data, e fazer a formatação do Label de acordo com o dado.

Isto funciona, porém, não é uma boa prática, pois o flex já tem uma classe expecífica para itemRenderer utilizando componentes mais leves como por exemplo o UITextField, desta forma, você apenas altera a formatação de um componente ja existente, não precisando criar um outro para aplicar a formatação.

Customizável?

Sim, sabemos que pela solução mais utilizada, dependendo da situação, teremos que criar vários itemRenderers diferentes…
Neste exemplo, vamos criar um itemRenderer onde as cores, formatação, etc, vc define separadamente, tornando o seu itemRenderer reutilizável.

Bom, vamos para a prática, assim vocês vão entender melhor…

O primeiro passo, é criar nossa coluna customizada…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
package com.marcosjunior.components.datagrid
{
	import mx.controls.dataGridClasses.DataGridColumn;
	import mx.core.ClassFactory;
 
	public class StylizedDataGridColumn extends DataGridColumn
	{
 
		public function StylizedDataGridColumn()
		{
			super();
			this.itemRenderer = new ClassFactory( StylizedDataGridItemRenderer );
		}
 
		public var stylesFunction:Function
 
	}
 
}

Perceba que precisamos criar um atributo stylesFunction, esse atributo servirá para que possamos customizar nosso estilo, veremos mais a frente…
Perceba também que no construtor da classe, estamos setando o itemRenderer desta coluna, que será a classe que iremos criar em seguida.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
package com.marcosjunior.components.datagrid
{
	import flash.text.TextFormat;
 
	import mx.controls.DataGrid;
	import mx.controls.dataGridClasses.DataGridItemRenderer;
	import mx.controls.dataGridClasses.DataGridListData;
 
	public class StylizedDataGridItemRenderer extends DataGridItemRenderer
	{
		public function StylizedDataGridItemRenderer()
		{
			super();
		}
 
		private var lastUID:String;	
 
		override public function set data(value:Object):void
		{
			super.data = value;
 
			if (listData && listData.uid != lastUID)
			{
				styleChanged("color");
				lastUID = listData.uid;
			}
		}
 
		override public function getTextStyles():TextFormat
		{
			if (!listData) 
			{
				return super.getTextStyles();
			}
 
			var tf:TextFormat = super.getTextStyles();
 
			var dgListData:DataGridListData = listData as DataGridListData;
			var dataGrid:DataGrid = dgListData.owner as DataGrid;
			var column:StylizedDataGridColumn = dataGrid.columns[dgListData.columnIndex];
			var o:Object = column.stylesFunction(data, column);
 
			for (var p:String in o)
			{
				tf[p] = o[p];
			}
 
			return tf;
 
		}
 
 
	}
}

Bom, a mágica está no método getTextStyles, este é o método responsável pelo estilo do texto, então o que fazemos nele é pegar o retorno do atributo stylesFunction, que criamos na nossa Coluna, logo acima, este nos retornará um objeto o qual nós pegaremos os atributos dele e setaremos no nosso TextFormat.

Em seguida, colocaremos essas duas classes para funcionar

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:datagrid="com.marcosjunior.components.datagrid.*">
 
	<mx:Script>
		<![CDATA[
 
		[Bindable]
		private var _dp:Array = [
			{ aluno: "Marcos Junior", media_final: 9},
			{ aluno: "Fábio Vedovelli", media_final: 9},
			{ aluno: "William Morais", media_final: 7},
			{ aluno: "Tabata Ruiz", media_final: 8},
			{ aluno: "Luiz Augusto", media_final: 5},
			{ aluno: "Camila Rodrigues", media_final: 4},
			{ aluno: "Paulo César", media_final: 4}
			];
 
		private function changeStyles(data:Object, column:DataGridColumn):Object
		{
			var o:Object = new Object();
 
			var value:Number = data[column.dataField];
			if (value < 5)
			{
				o.color = 0xFF0000;
				o.bold = true;
				o.underline = false;
			}
			else if (value < 7)
			{
				o.color = 0xc34805;
				o.bold = false;
				o.underline = true;
			}
			else
			{
				o.color = 0x023064;
				o.bold = false;
				o.underline = false;
			}
			return o;
		}
 
		private function situacao_labelFunction(data:Object, column:DataGridColumn):String
		{
			var value:String = "";
			var media:Number = data["media_final"];
			if (media < 5)
			{
				value = "Reprovado";
			}
			else if (media < 7)
			{
				value = "Exame";
			}
			else
			{
				value = "Aprovado";
			}
			return value;
		}
 
		]]>
	</mx:Script>
 
	<mx:DataGrid id="dg1" dataProvider="{_dp}" top="10" left="10" right="10" bottom="10" verticalAlign="middle" >
		<mx:columns>
		<mx:DataGridColumn headerText="Name" dataField="aluno" width="140"/>
		<mx:DataGridColumn headerText="Média" dataField="media_final" width="60" />
		<datagrid:StylizedDataGridColumn headerText="Situação" dataField="media_final" labelFunction="situacao_labelFunction" stylesFunction="changeStyles" />
		</mx:columns> 
	</mx:DataGrid>
</mx:Application>

Notemos que na criação do DataGrid, utilizamos a nossa Coluna customizada, nela, definimos o atributo stylesFunction, com uma função que criamos chamada changeStyles
Nesta função nós criamos as condições de formatação que quisermos, desde que retornemos um objeto com as formatações setadas corretamente.
Este objeto será usado no itemRenderer para formatar o texto.

Note que também utilizamos o labelFunction, que no exemplo foi apenas para mostar que as propriedades nativas da Coluna do DataGrid funcionam normalmente, caso você não queira usar labelFunction, poderá setar o dataField normalmente como em outra coluna.

Veja um exemplo de como ficou nosso DataGrid:


Você tbm pode fazer o download do source clicando aqui.

Espero que isto tenha ajudado

Em breve mais dicas…

[]‘s


  1. April 28th, 2010 at 09:02
    Reply | Quote | #1

    Que bacana que vc voltou a blogar! O conhecimento da RIA Labs não pode ficar dentro de nossas paredes, parabens!