Veja também:

• Flerry 1.2.0 disponível
• FlexMania 2010 – Adobe Flex + Oracle WebLogic 10.x
• Adobe Flex + BlazeDS e um problema de conexão no servidor
• Adobe Flash Builder + Flex 4 + BlazeDS 4
• Adobe Flex 3.5 : UploadDownloadBlazeDS

Olá pessoal, nesse breve artigo eu irei falar um pouco sobre as Metadata Tags.

[Importante]
A partir da versão 4.5 do flex as Metadatas customizadas não precisam ser declaradas para o compilador nos projetos Flex, o conhecido “-keep-as3-metadata”, quem trabalha com Frameworks de terceiros entende bastante isso.

Notei na nova versão do Swiz Framework que existe também uma complementação do código para metadatas personalizadas como “Inject e EventHandler”. Depois de vasculhar os fontes do Swiz Framework encontrei o arquivo metadata.xml que é o responsável pela declaração de todas essas metadatas.

Se você está criando uma biblioteca que possui suas próprias metadatas e deseja criar uma complementação do código, basta seguir os passos da documentação da própria Adobe, é bem simples.

Esse é um exemplo desse arquivo de configuração.

Você pode se basear pelo arquivo do próprio framework do flex. Fica na pasta: sdks4.5.0frameworksmetadata.xml

Espero que a informação tenha sido útil.

Abaixo seguem alguns links interessantes relacionados ao assunto.

• About metadata tags
• Metadatas Personalizadas (Flex 3 e Flex 4)
• Code completion for custom metadata tags

Esta é uma tradução do seguinte artigo: 10 Things A Good Flex Developer Should Know

Para ser um bom programador Flex é preciso mais que simplesmente saber como usar alguns componentes nativos do Flex. É preciso muito mais.

Aqui está minha contribuição sobre o assunto… juntamente com alguns recursos ou algumas palavras-chave que você poderá pesquisar facilmente através do Google.

Por favor, comente no blog se você achar que esqueci algo (o que é inevitável) ou se quiser sugerir alguns recursos interessantes que devo acrescentar.

1- Programação orientada a Objetos (OO)

O Flex se baseia na linguagem ActionScript3, que é totalmente orientada a objetos. Embora não seja um conceito fácil de aprender, programação orientada a objeto é um pré-requisito para aprender Flex. Se já possui experiência com OO (Java, C#, Ruby, etc), então você está pronto. Se não, você precisará pegar um livro sobre OO e começar a aprender o mais rápido possível.

· Head First Java (Java? Sim, Eu sei. Mas confie em mim.)

· Object-oriented programming with ActionScript 3.0

Nota: Alguns de vocês poderão perguntar – “O que são padrões de projetos?”. Vamos dar um passo de cada vez? Preocupe-se em entender classes e objetos, interfaces, herança, composição, polimorfismo, encapsulamento, etc. Só então considere estudar padrões de projetos. De fato, se eu escrever um post intitulado “10 coisas que um GRANDE programador Flex deve saber”, padrões de projeto estará nessa lista.

2- ActionScript/MXML

ActionScript é a linguagem de programação usada juntamente com MXML para criar aplicações Flex. MXML é uma linguagem de marcação baseada em XML. Cada tag MXML é mapeada diretamente para uma classe ActionScript correspondente. MXML é usado pelos desenvolvedores Flex principalmente para apresentar a interface do usuário, enquanto que, o ActionScript é usado para a lógica de negócio. Com exceções, é claro.

O Framework Flex inclui centenas de classes ActionScript e interfaces usadas para desenvolver aplicações Flex. Seu nível de habilidade como um desenvolvedor Flex está diretamente ligado ao seu conhecimento em relação ao ActionScript e MXML.

· Flex in a Week

· Tour De Flex

· Essential ActionScript 3.0

Nota: Fique ? vontade com a API do Flex. Como um desenvolvedor Flex, você vai usá-la diariamente.

3- Debugging

Boa parte do tempo de qualquer programador é gasto no debugging. Obviamente, é necessário debugar para rastrear a causa de bugs. No entanto, também é uma ótima maneira de conhecer o código fonte.

Felizmente, existem muitas ferramentas disponíveis para ajudá-lo com o trabalho de debugging. Invista algum tempo para aprender essas ferramentas. Seu investimento irá proporcionar retorno imediato.

· Flash Builder 4.5 Debugger

· De MonsterDebugger

· Kap Inspect

4- Programação orientada a eventos

Aplicações Flex são orientadas a eventos. Toda ação é o resultado de um evento assíncrono.

Como um desenvolvedor Flex, você deve saber como responder a eventos e como criar e disparar eventos. Para isso, é necessária uma sólida compreensão da arquitetura de eventos do Flex, incluindo familiaridade com os seguintes conceitos:

· Eventos nativos (Flash Player ou Framework de eventos Flex)

· Eventos customizados (Eventos criados pelo desenvolvedor, que estende a classe Event ou uma de suas subclasses)

· Disparar eventos, propagação de eventos (ver classe EventDispatcher e seu método dispatchEvent)

· Event listeners, event handlers (ver classe EventDispatcher e seus métodos addEventListener e removeEventListener)

· Fases do evento (capture, target & bubbling phases; target vs. currentTarget)

· Objetos do evento, tipos de eventos (ver classe Event e subclasses)

· Comportamento do evento default (ver classe Event e subclasses e seu método preventDefault)

5- Data binding

Aparentemente, data binding é um “no brainer”[1]. É só vincular o valor de uma propriedade ao valor de outra propriedade usando chaves. Quando o valor da propriedade de origem for alterado, o valor da propriedade de destino também é alterado.

No entanto, existe uma sobrecarga associada ao uso indiscriminado de data binding, podendo haver implicações no desempenho. Uma sólida compreensão de data binding ajudará a determinar quando é apropriado o seu uso e quando não é.

· Flex Tips – Using Bindable Metadata Events

· Michael Labriola’s presentation entitled Diving in the Data Binding Waters

6- Item renderers

Uma característica de uma aplicação Flex bem projetada é a apresentação dos dados de uma forma visualmente atraente. O Flex oferece uma série de controles baseados em listas (DataGrid, List, TileList, HorizontalList, etc) responsável pela apresentação dos dados. Portanto, pode-se personalizar a exibição dos dados com a ajuda de item renderers.

Você irá consumir muito tempo trabalhando com item renderers. Então é melhor saber bem como ele funciona.

· Flex Examples – Item Renderers in Practice

· A Deep Dive into Flex 4 Lists and Layouts

7- Acesso remoto a dados

Você conhece muitas aplicações que não interagem com os dados? Eu também não. Saiba como recuperar dados através de HTTPServive, WebService e RemoteObject. A arquitetura do framework Flex também poderá ajudá-lo com isso (ver #9).

· Retrieving and handling data with HTTPService

· Retrieving and handling data with WebService

· Retrieving and handling data with RemoteObject

8- Styling / Skinning

Não vamos nos esquecer que o Flex é uma tecnologia de interface e, como tal, certamente há expectativas em relação ao design. Como um desenvolvedor Flex, você deve ser capaz de personalizar a aparência de seus aplicativos usando estilos CSS, gráficos e/ou skins.

Com o Flex 4, não há mais desculpas. Use um pouco do seu tempo para conhecer de uma vez o lado direito do seu cérebro. É uma excelente mudança de paradigma, e vai ajudá-lo a diferenciar-se dos outros desenvolvedores Flex.

· Flex Style Explorer

· ScaleNine

· Introduction to Flex: Part 3 – Styles & Skins

9- Pelo menos um framework de arquitetura Flex

A maioria dos frameworks de arquitetura Flex impõe uma separação de camadas através da implementação do MVC (model-view-controller). Além disso, esses mesmos frameworks especificam como seu código deve ser organizado dentro do projeto Flex.

Embora muitos argumentariam que os frameworks são desnecessários, acredito que os desenvolvedores Flex se beneficiam em muitos aspectos da experiência de usá-los. Basta assistir ? s técnicas (boas ou más) empregadas por um framework para resolver problemas complexos de arquitetura. Isso contribuirá para seu crescimento como um desenvolvedor Flex.

Além disso, é difícil negar o fato de que a experiência com framework aumentará substancialmente o seu valor comercial como um desenvolvedor Flex. Jesse Warden me disse recentemente “Existem poucas empresas que não usam frameworks, mas isso é raro. Queiramos ou não, está na ‘moda’”. Eu concordo com Jesse.

· Cairngorm

· Parsley

· PureMVC

· Mate

· Swiz

· Robotlegs

10- Ciclo de vida de componentes e display list

Eu não estava convencido da necessidade de aprender o ciclo de vida de componentes Flex ou da display list até que escrevi o meu primeiro componente customizado (na verdade foi um componente semi-customizado que se estendia do componente Canvas). Até essa época eu usava componentes nativos do Flex, usando apenas o MXML enquanto que a display list era renderizada para mim. Em nenhuma vez tive que usar os métodos addChild, createChildren ou commitProperties, e usava o evento creatiomComplete para tudo.

Meu primeiro componente customizado usava uma quantidade enorme de eventos assíncronos, e eu não poderia prever a ordem em que cada evento seria disparado. Só depois que eu aprendi os métodos e variáveis do ciclo de vida dos componentes do Flex que eu pude ter um certo controle.

Estes métodos do ciclo de vida estão lá para serem usados. Saiba como funcionam e use-os para o seu benefício. Sua vida será mais fácil e você perderá menos cabelos.

· Colin Moock’s Lost ActionScript Weekend – The Display List

· Creating New Components in Flex 3

· Diving Deep with the Flex Component Lifecycle

· Understanding the Flex 3 Component and Framework Lifecycle

[1] Expressão americana usada para algo que requer pouco esforço mental ou inteligência para realizar ou compreender

Atendendo a pedidos, um resumo do status dos meus livros:

• Adobe Flex 3 Conceitos e Exemplos – esgotado
• Criando sistemas com Flex 3 e PHP – esgotado
• Dominando Flex e Zend – esgotado
• Dominando Adobe Flex 4 – esgotado
• Dominando Flex 4 e Java – Em estoque (promoção)
• ebook Dominando Swiz (Swiz 1.1 e Flex 4.5) – Em estoque
• ebook Dominando Action Script? -? Em estoque
• Dominando Orientação a Objetos – Pré Venda
• Dominando Adobe Flex 4.5 – Na gráfica
• Dominando Flex Mobile – Em desenvolvimento
• Dominando Flex + PHP – Planejado

Dae pessoal.

Estou iniciando ainda no FX4 ou Flash Builder como queiram, então tenho minhas dificuldades ainda, mas é muito bom o resultado que estou vendo. Esse dias me deparei com alguns problemas com states que no Flex 3 eu fzia algo do tipo:

Fx3

<mx:State name="logonState">
	<mx:SetProperty target="{textInputNome}" name="visible" value="true" />

Bom as mudanças para o FX4 foram muitas onde no próprio componente adicionamos essas propriedades.
Logo no inicio fiquei de cara achava mais dificil sei la, mas achei que é algo que melhorou muito, ou seja,
sim ficou melhor ja me acostumei e achei mais “clean” o negocio.

veja o exemplo que fiz abaixo:
FX4

e o Codigo fica esse

xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   minWidth="955" minHeight="600"
			   currentState="state1" viewSourceURL="srcview/index.html">
	<fx:Declarations>
?
	fx:Declarations>
	<fx:Script>
		[CDATA[
			import mx.collections.ArrayCollection;
?
			import spark.events.IndexChangeEvent;
			[Bindable]
			private var arrayCollection:ArrayCollection=new ArrayCollection([
				{prop:'state1'},{prop:'state2'}]);
?
?
?
?
			protected function comboBox_changeHandler(event:IndexChangeEvent):void
			{
				this.currentState=comboBox.selectedItem.prop;
			}
?
		]]>
	fx:Script>
	<s:states>
		<s:State name="state1"/>
		<s:State name="state2"/>
	s:states>
	<mx:Form>
		<mx:FormItem>
			<s:TextInput id="textInput1" text.state1="FELIPE" text.state2="BORELLA"/>
		mx:FormItem>
		<mx:FormItem>
			<s:TextInput id="textInput2" text.state1="BORELLA" text.state2="FELIPE"/>
		mx:FormItem>
		<mx:FormItem>
			<s:ComboBox id="comboBox" labelField="prop" dataProvider="{arrayCollection}"
						change="comboBox_changeHandler(event)" selectedIndex="0"/>
		mx:FormItem>
	mx:Form>
s:Application>

Felipe!

Preloader Personalizado – Flex 3 conseguiu ver como criar o seu preloader e adicioná-lo a um projeto Flex 3. Contudo, a mesma biblioteca disponibilizada não funciona perfeitamente no Flex 4, e vou explicar o porque.

No Flex 3, nosso preloader personalizado extende a classe mx.preloaders.DownloadProgressBar e no Flex 4, a classe que o preloader deve extender é a mx.preloaders.SparkDownloadProgressBar. Só por esse detalhes já conseguimos perceber que houveram mudanças no sistema de preloader após a versão 4 da SDK.

Apesar da nova classe SparkDownloadProgressBar ser uma cópia da classe DownloadProgressBar, houveram algumas mudanças no disparo do evento ProgressEvent.PROGRESS, que agora na nova SDK é disparado toda vez que um novo progresso é inicado, seja ele de download do SWF, download das RSL e na inicialização da aplicação, gerando um progresso de 0 a 100% para cada nova etapa. Com essas mudanças não é mais aconselhavel ter um listener para esse evento para controlar o seu progresso, que era exatamente o que faziamos no Flex 3.

Agora que entendemos as mudanças, vou disponibilizar aqui a biblioteca atualizada para o Flex 4 que não mais escuta o evento ProgressEvent.PROGRESS e funciona perfeitamente com o novo método setDownloadProgress da classe SparkDownloadProgressBar.

* Lembre-se que o seu preloader só deve seguir a regra de ter os 100 frames, e que a barra foi só um modo simples de mostrar a evolução do progresso.

Agora você já pode fazer o download aqui da biblioteca necessária para a customização do preloader.

Two-way data binding é uma das novidades do flex 4 e para quem não conhece, vou mostrar como funciona e o que mudou em relação ao Flex 3.

No Flex 3 tinhamos data binding de apenas uma via, como mostra o exemplo abaixo:

Nesse exemplo, caso o valor da caixa de texto do tiValor1 mudasse, o valor da caixa de texto do tiValor2 seria alterado também, porém, se o valor da caixa tiValor2 fosse alterado, nada seria refletido a caixa de texto tiValor1.

No Flex 4 temos data binding de duas vias, como mostra o exemplo:

Nesse exemplo notamos que a anotação “@” foi colocada antes do meu código “{tiValor1.text}”, essa anotação identifica um data binding de duas vias. O resultado desse exemplo é: Caso eu altere o texto da caixa de texto tiValor1, ele será refletido na caixa de texto tiValor2, e vice-versa.

Obviamente esse exemplo da funcionalidade é muito básico e serve apenas para demonstrar a funcionalidade, logo vou apresentar uma situação real que acontece a todo momento em qualquer aplicação.

Para o nosso exemplo real, vou utilizar uma situação comum para qualquer tipo de aplicação, o CRUD. Para todo CRUD precisamos sempre fazer essas 3 operações:
1. Mostrar o objeto carregado do back-end nas caixas de texto. (Famoso método carregaObjeto)
2. Atualizar o objeto com os novos valores das caixas de texto. (Famoso método preencherObjeto)
3. Limpar as caixas de textos. (Famoso método limpar)

No flex 3 teriamos o seguinte cenário.
Para a situação 1:
caixaDeTexto.text = Objeto.valor;
Para a situação 2:
Objeto.valor = caixaDeTexto.text;
Para a situação 3:
caixaDeTexto.text = “”;

Para quem usava o data binding do flex 3 de uma forma correta, conseguia resolver uma das situações com ele, mas nas outras situações sempre acabava escrevendo a linha de código apresentada.

No flex 4 poderiamos resolver da seguinte forma:

Com essa simples mudança, nós evitaríamos todas as situações acima, dispensando os métodos de carregarObjeto, preencherObjeto e limpar objeto.

Veja o exemplo funcional abaixo:

Fonte:

PLAIN TEXT

ACTIONSCRIPT:

1. xml version=“1.0″ encoding=“utf-8″?>
2. “http://ns.adobe.com/mxml/2009″
3. ? ? ? ? ? ?? ? xmlns:s=“library://ns.adobe.com/flex/spark” maxHeight=“400″ maxWidth=“600″
4. ? ? ? ? ? ?? ? xmlns:mx=“library://ns.adobe.com/flex/mx” width=“600″ height=“400″ xmlns:local=“*”>
5. ? ?
6. ? ? ? ? “user”>
7. ? ? ? ? ? ? 1
8. ? ? ? ? ? ? Bruno Sales
9. ? ? ? ? ? ? São Paulo
10. ? ? ? ?
11. ? ?
12. ? ?
13. ? ?
14. ? ? ? ? [CDATA[
15. ? ? ? ? ? ? private function recarregar():void
16. ? ? ? ? ? ? {
17. ? ? ? ? ? ? ? ? user = new User("1", "Bruno Sales", "São Paulo");
18. ? ? ? ? ? ? }
19. ? ? ? ? ]]>
20. ? ?
21. ? ?
22. ? ?
23. ? ? ? ? “middle” horizontalAlign=“center”/>
24. ? ?
25. ? ?
26. ? ? “Form” width=“250″ height=“180″>
27. ? ? ? ?
28. ? ? ? ? ? ? “Id”>
29. ? ? ? ? ? ? ? ? “tiValor1″ text=“@{user.id}” maxChars=“20″/>
30. ? ? ? ? ? ?
31. ? ? ? ? ? ? “Nome”>
32. ? ? ? ? ? ? ? ? “tiValor2″ text=“@{user.nome}” maxChars=“20″/>
33. ? ? ? ? ? ?
34. ? ? ? ? ? ? “Cidade”>
35. ? ? ? ? ? ? ? ? “tiValor3″ text=“@{user.cidade}” maxChars=“20″/>
36. ? ? ? ? ? ?
37. ? ? ? ? ? ? “right”>
38. ? ? ? ? ? ? ? ? Button label=“Limpar” click=“user = new User()”/>
39. ? ? ? ? ? ?
40. ? ? ? ?
41. ? ?
42. ? ?
43. ? ? “Objeto User” width=“300″ height=“180″>
44. ? ? ? ?
45. ? ? ? ? ? ? “middle” horizontalAlign=“center”/>
46. ? ? ? ?
47. ? ? ? ? “label” text=“{user.toString()}”/>
48. ? ? ? ? Button label=“Recarregar Objeto” click=“recarregar()”/>
49. ? ?
50. ?