Recentemente houve um debate na FB sobre qual seria um valor justo a se pagar a um programador Flex. A pessoa que começou a thread por até não ter se dado conta, mas mexeu num vespeiro. Muitas pessoas deram suas opiniões (eu também, lógico!) e parece que o saldo do debate ficou assim:

1. Programadores ganham pouco porque a profissão não é regulamentada.
2. Programadores em Flex ganham pouco porque há muitos newbies.

Eu, pessoalmente, não estou competindo com nenhum newbie… Não há um projeto onde eu tenha trabalhado que pudesse ser tocado por eles (menos quando eu era newbie, haha).

Mas eu não estou escrevendo para quem está fazendo a vida em cima do Flex, que ganha bem e entende o framework. Eu queria escrever para aqueles que estão aprendendo Flex e estão entrando num emprego ou aceitando um free-lance.

Eu até ia fazer uma compilação das perguntas absurdamente sem noção que aparecem na FB e na FD, de pessoas que estão trabalhando (e provavelmente desenvolvendo uma gastrite, coitados…), mas isso seria antiético. Então, pegue um lápis e um papel e faça o checklist:

1. Sei exportar um projeto de forma correta.
2. Sei a diferença entre Flex e AIR.
3. Entendo os prós e contras de trabalhar com módulos e RSLs.
4. Sei disparar e capturar eventos. Entendo as propriedades .currentTarget, o parâmetro bubbles e os métodos da classe EventDispatcher.
5. Sei o que é deferred instantiation.
6. Sei escolher os containers de forma a otimizar aplicações.
7. Sei popular os data controls com coleções do Flex.
8. Sei recuperar e modificar itens dentro das coleções do Flex.
9. Sei usar os métodos das coleções do Flex.
10. Sei recuperar dados de RadioButtons, ComboBox e Repeaters.
11. Sei construir um ItemRenderer.
12. Passo objetos entre views (por exemplo, módulos ou seus custom components).
13. Sei usar um swc de terceiros.
14. Sei usar o HTTPService, RemoteObjects, WebServices ou a tecnologia que você está usando.
15. Entendo o que significa assincronismo e aceitar que isso não é ruim; é uma característica do framework.
16. Sei quando o que procuro é uma propriedade, um estilo, um método ou um evento.
17. Sei ler a documentação.
18. Sei pesquisar meus problemas na internet (google, flex forums,etc)
19. Sei elaborar uma questão para alguns dos forums Flex e não espero uma solução pronta com código pra só copiar/colar.

Se você aceitou um freela ou não é estagiário e não passou em TODOS estes itens, saiba que as chances de você ter dificuldades muito grandes durante o seu projeto são enormes. E que você vai ter que depender da boa vontade / paciência / disponibilidade de outras pessoas te ajudarem.

Se você está aprendendo ou é estagiário: você está estudando – PARABÉNS PELO SEU BOM SENSO!

E aos que deram risada desse checklist: aceito sugestões!

Twitter!

Resolvi repetir a dose. E aqui estou eu novamente para mais um Terça Insana Megapost.

Componente ValidatorGroup: Use apenas um validador para mais de um controle de interface.

[kml_flashembed movie="/sources/validationGroup/ValidationGroup.swf" width="496" height="190"/]
Download do ValidatorGroup

HTMLTextItemRenderer: Use um ItemRenderer super leve para formatação “avançada” de uma célula no DataGrid

[kml_flashembed movie="/sources/htmlRenderer/HTMLTextItemRendererSample.swf" width="496" height="264"/]
Download do HTMLTextItemRenderer

Screencast 2 em 1: Entenda os dois componentes em apenas 5 minutos.

Podcast: Podcast baseado numa “reunião/apresentação” sobre componentetização e vários assuntos “avançados” de Flex na DClick. Neste Podcast a Parte I da reunião com foco em componentização e performance no front-end

Download do Podcast

Uma questão que tira o sono de muitos desenvolvedores Flex é a questão da reciclagem de componentes. Vou explicar.
Supondo que vc tenha um DataGrid com 1000 registros. Em uma das colunas vc tem um checkbox, que aparece selecionado ou não, conforme um dos valores do seu objeto que é mostrado no registro. Você carrega o [...]

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.

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:

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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104

 <?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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

			<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>

O arquivo final foi:

Se você mexer no scrollBar agora, verá que o problema não mais acontece.
 

Espero ter contribuído.

Autor:Claudio Araujo