http://www.adobe.com/br/
http://flex.apache.org
www.flashdevelop.org

Flex Software Development Kit (SDK)
Esta apostila visa fornecer uma introdução no aprendizado da programação flex, aborda a compatibilidade de versões, tem por objetivo apresentar a linguagem ao iniciante, porém com conhecimentos sólidos que permite progredir nos estudos no futuro.

1. Introdução
Atualmente, 2014, a versão dessa plataforma é a 4.6, a primeira grande transformção ocorreu com a versão 4 que implantou vários recurso, será envidado esforço para apresentar a versão mais atual possível.
Programar em Flex significa criar arquivos com extensão .swf utilizando código fonte em MXML ou ActionScript, os compiladores mais comuns são o Adobe Flash SDK e o Apache Flex que podem ser operados via linha de comando, o arquivo com extensão swf é capazes de rodar em qualquer Browsers que tenha instalado o plugin Adobe Flash Player. Ambos compiladores citados são open souce (grátis). A programação Flex é utilizada pelo programa Flash para criar suas aplicações dinâmicas para internet como salas de bate papo com video, vide conferência, banners, etc.
Para trabalhar com os compiladores mencionados pode-se citar pelo menos quatro programas que apresentam interface gráfica, isto é, menus e botões, não necessitando digitar os comados no prompt, são eles:
1.1. O programa Adobe Flash Builder também utiliza as linguagens citadas, porém há muito mais recurso que apenas o compilador puro, há um interface gráfica que facilita a criação de programas. A desvantagem é que tal programa é pago.
1.2. O programa JetBrains IntelliJ IDEA que tem duas versões uma paga e outra com menos recurso, porém é open souce.
1.3. O programa Flashdevelop que é open souce, este será melhor explicado no item 5.3 desta apostila, pois será utilizado durante o desenvolvimento dos exemplos.
Esses são os programas mais comumentes utilizados, são suficientes para o aprendizado da programação Flex.

Atualmente, 2014, a programação em Flash e Flex está sofrendo concorrência direta com a programação em HTML 5 e JavaScript que são capazes de dar dinamismo as páginas sem a necessidade de instalar plugins e consumir menos energia nos celulares segundo as críticas, porém nada ainda está definido, a programação é muito dinâmica e a empresa Adobe é muito forte, tem profissionais competentes que estão sempre inovando com suas tecnologias.
Para quem tem tempo suficiente e quer aprender a programar (estudantes e desenvolvedores) é aconselhável a começar aprendendo a usar o compilador através de comando no prompt e utilizando também o programa Flashdevelop, para quem quer investir no aprendizado pode adquiri o programa Adobe Flash Builder, já para a linha de produção o Adobe Flash Profissional é mais indicado, porém, é aconselhável saber programar em em Flex.

1.4. O Flash Profissional é um ambiente integrado de desenvolvimento (IDE) em que possibilita a criação de programas flex sem a necessidade de digitação integral do código fonte, diferentemente do flex puro em que há necessidade da digitação do código fonte em um editor de texto e sua compilação no prompt de comando (mxmlc para código fonte em MXML e amxmlc para código fonte em Action Script).

Julgo que atualmente é mais recomentado utilizar programação flex somente para situações em que o HTML 5, o JavaScript, o PHP, o JQuery e o CSS (Cascading Style Sheet que em português foi traduzido para Folha de Estilo em Cascata) não consiga fazer, embora tais linguagens ainda não conseguiram superar  a programação flex no que se refera a multimídia (vídeo e animações).

Há uma enorme dificuldade no aprendizado da linguagem Flex para o iniciante, pois há poucos livros e tutoriais atualizados sobre o assunto, a maioria das matérias encontradas utilizam o programa Adobe Flash Builder para trabalhar com o Flex, as demosntrações modelos apresentam o código já compilado, com extensão .swf que é similar a extensão .exe (não permite abertura ou formatação) o que é inútil para o programador iniciante, torna-se necessário uma intensa pesquisa a fim de descobrir as regras de programação em Fex nos forum e comentários pela internet. O compilador Flex gera arquivos swf a partir de código fonte escrito em MXML ou ActionScript, embora as regras básicas dessas linguagens seja relativamente fácil de se encontrar, quando se deseja aprender algo avançado, o que realmente interessa, não se encontra facilmente tutoriais, apostilas ou livros explicando como construir uma sala de bate-papo ou videoconferência, por exemplo, encontra-se apenas utilizando o programa Adoble Flash Builder ou Adobe Flash Profissional que são vendidos.

1.5. Referência
Consulte o site:
http://www.adobe.com.br
Suport & Learning
Adobe Developer Connection
Flex
Reference and documentation
Using Flex 4.6

2. Adobe Flash Player
A programação Flex gera arquivos .swf que rodam no plugin Adobe Flash Payer, antes de mais nada é necessário saber algumas peculiaridades desse plugin, após a explicação deste tópico caso haja dúvidas acesse o site oficial, e consulte a documentação e suporte técnico a respeito:
http://www.adobe.com.br
Suport & Learning
Adobe Developer Connection
Flash Player
Flash Player para usuários finais
12.0.0.77  (Windows, Mac)

Flash Player para desenvolvedores
Flash Player e Adobe AIR lista de recursos
flashplayer13_debugsa_win_32
A seguir serão feitos alguns comentários indispensáveis para o conhecimento do plugin em questão:
- Cada sistema operacional tem uma versão do Adobe Flash Player.
- O Google Chrome já vem com a instalação por padrão desse plugin, para outros navegadores deve-se fazer a instalação separadamente no sistema operacional.
- a desistalação não é feita pelo Painel de Controle do Windows, tem que baixar um programa de desinstalação, o site oficial da Adobe explica como, embora o Painel de Controle processe a desistalação. Verifique se não ficou algum arquivo da instalação anterior em: C:\Windows\System32\Macromed\Flash, observe que a instalação não fica em C:\Program Files
- a reinstalação requer o computador sem nenhum plugin, há necessidade de desistalação de uma versão para instalar outra.
- como disse acima, o plugin não fica instalado em C:\Program Files (Windows), fica em  C:\Windows\System32\Macromed\Flash
- Adobe Flash Player Debugger é um tipo de plugin voltado para os desenvolvedores realizarem testes, há uma versão Flash Player específica para o usuário final.
- Observe que dentro do Flex SDK tem um Flash Player
1) Acesse a pasta onde foi intalado o compidador flex, no meu caso, C:\flex2\runtimes\player\11.1\win
2) Dê um clique com o botão direito no arquivo FlashPlayerDebugger > propriedades pode verificar que é a versão Adobe Flash Player 11.1 r102

2.1. Consultas realizadas no site http://www.adobe.com/br/
Cada sistema operacional tem uma versão do Flash player, a atualização é constante para corrigir erros anteriores, antes de qualquer coisa a instalação desse plugin tem de estar correta, a desistalação requer um programa, consulte o site oficial, no link acima, há vários procedimentos para instalar e desistarar caso seja necessário.

A Adobe recomenda que todos os usuários do Flash Player em sistemas suportados atualizar para a versão mais recente. Você pode obter a versão mais recente do Flash Player do Centro de Download Flash Player.

2.2. Para Instalar acesse:
http://www.adobe.com.br
Suport & Learning
Adobe Developer Connection
Flash Player
Download e atualizações
Baixe o Flash Player para desktop
Obter depurador jogador (está opção foi a escolhida porque é a versão de teste para desenolvedores)
Obtenha a ultima versão
install_flashplayer12x32_mssa_awc_aih (dê dois cliques no arquivo baixado)



2.3. Para desinstalar
Para instalar uma nova versão tem que baixa um programa de desistalação, não é só desistalar pelo painel de controle, acesse:
Entre no site da Adobe: www.adobe.com.br
Digite no campo de pesquisa: desinstalar player
Acesse o link: Desinstalar o Flash Player | Windows
http://www.adobe.com/cfusion/search/index.cfm?term=desistalar+player&loc=pt_br
Solução
Baixe o desinstalador do Flash Player.

Feche todos os navegadores e outros programas que usam Flash.
Execute o desinstalador.
Verifique se a desinstalação está concluída.
Verifique se não ficou algum arquivo da instalação anterior em: C:\Windows\System32\Macromed\Flash, caso tenha ficado delete-o.

Obs: o site da Adobe muda constantemente de layout, portanto as explicações acima poder variar para fazer o download

2.4. Google Chrome
O Adobe Flash Player está diretamente integrado ao Google Chrome, ou seja, já vem com ele instalado internamente nesse Browser e fica ativado por padrão. As atualizações disponíveis para o Adobe Flash Player são automaticamente incluídas nas atualizações do Chrome.

Se desejar usar o Adobe Flash Player em outros navegadores, será necessário fazer o download do Adobe Flash Player separadamente para esses navegadores em https://get.adobe.com/br/flashplayer/ e instalá-lo conforme já foi explicado.

2.4.1. Ativar ou desativar o Adobe Flash Player no Google Chrome
Estas instruções se aplicam ao Google Chrome nos sistemas operacionais Windows, Mac, Linux e Chrome.

Digite chrome:plugins na barra de endereço para abrir a página Plug-ins.


Observe os endereços
Para o Google Chrome:
C:\Program Files\Google\Chrome\Application\33.0.1750.154\PepperFlash\pepflashplayer.dll
Para o sistema operacional (outros navegadores):
C:\Windows\system32\Macromed\Flash\NPSWF32_12_0_0_77.dll

Observe a janela do Google Chrome, na página "Plug-ins", encontre a listagem "Flash".
Para ativar o Adobe Flash Player, clique no link Ativar abaixo do nome do programa.
Para desativar totalmente o Adobe Flash Player, clique no link Desativar abaixo do nome do programa.

Nota: se já tiver instalado o Adobe Flash Player separadamente, você verá dois arquivos listados para o plug-in. Se os dois estiverem listados como desativados, a versão em pacote com o Chrome será usada. Para ativar uma versão específica do Adobe Flash Player, clique em Detalhes no canto superior direito da página. Em seguida, clique no link Ativar para a versão do Adobe Flash Player que deseja ativar.

A tabela abaixo mostra o nome do arquivo da versão que está integrada ao Google Chrome.
PlataformaPlug-in do Adobe Flash Player integrado ao Google ChromePlug-in de sistema
Windowspepflashplayer.dllNPSWF32.dll
MacPepperFlashPlayer.pluginFlash Player.plugin
Linuxlibpepflashplayer.solibflashplayer.so
Chrome OSlibpepflashplayer.solibpepflashplayer.so

As informações desse tópico não esgotamo assunto, dão apenas uma visão panorâmica, como já foi dito, cada tipo e versão do sistema operacional requer um procedimento diferente, consulte a fonte de origem caso necessite.

2.5. Adobe Flash Player Debugger
A instalação já foi descrito no item 2.2, como já foi dito, há dois tipos de plugin Flash Player, somente um tipo pode estar instalado no sistema operacional, o tipo debugger é voltado para testes e o outro tipo é voltado para o usuário final. Embora há programas que já possuem tal plugin incorporado no mesmo como o Google Chorme e Flashdevelop, nestes caso, o sistema operacional pode ter outro instalado.

3. Instalações do Java SE Development Kit
Para você utilizar o compilador Flex, você precisa primeiro instalar o Java (JDK).
3.1. Instalação do programa Java no Windows
a) Download
Site: http://www.oracle.com/technetwork/java/index.html
Menu: Dowload
Java for Developers
Browse by Category:
Java
Java SE
Java SE 7u11
Download
jdk-7u11-windows-i586.exe (para windows de 32 bit)


Obs:  procure o arquivo que você o achará

b) Após o download é só instalar. (no meu caso foi baixado a versão 1.7.0).
c) Crie uma pasta chamada java no diretório raiz (c:/) onde será instalado o programa, dentro desta pasta será criado mais duas no momento da instalação.
d) Após aceitar os termos do contrato será solicitado dois diretorios que serão sugeridos, o primeiro corresponde ao jdk, mude para o diretório raiz (ficará assim c:/java/jdk170) e retire os pontos, pois, no modo prompt do dos não aceita essa formatação, o segundo diretório corresponderá ao jre, da mesma forma, mude para o diretório raiz e retire os pontos (ficará assim c:/java/jre170), os números correpondem a versão, eles devem ser mantidos para facilitar a sua identificação.
e) Após a instalação será necessário a configuração da variável de ambiente no windows, para que se possa acessar o JDK pela linha de comando do Windows (prompt de comando), isto deverá ser feito também para o Flex SDK.
Siga os seguintes passos:
- No windows vá até o sistema:
Botão iniciar > Painel de controle > Sistemas e Manutenção > Sistema > Configurações Avançadas do Sistema
- Criar uma variável de sistema com o nome CLASSPATH (botão novo) e referencia onde esta localizados os arquivos .jars do jdk.
No meu caso ficou: c:\java\jdk170\lib\tools.jar;%PATH%
- Da mesma forma criar uma variável de sistema com o nome JAVA_HOME (botão novo) e referencia onde foi instalado o jdk.
No meu caso ficou: c:\java\jdk170
- Agora é só acrescentar  na variável já existente, de nome Path, em variáveis de ambiente, o endereço da pasta bin do jdk:
c:\java\jdk170\bin;...
- inserir também na variável já existente, de nome Path, em variáveis de ambiente o caminho do “bin” do Flex SDK, permitindo assim que possamos chamar o compilador do Flex pela linha de comando.
- reinicie o computador para o novo ambiente.
Obs: coloque no primeiro item, logo após o c:\, repare que há um ponto e vírgula separando os demais ítens já existentes, cuidado para não apagar ou alterar outras referência, isso comprometerá a funcionalidade do windows.
f) após a instalação teste  a compilação com o comando javac no prompt do dos e o comando java na execução de um programa teste.
g) teste do programa:
- abra o prompt do dos e digite o seguinte comando:
c:\> java -version
- se a instalação estiver bem sucedida será apresentado a versão do programa java version "1.7.0" ...

Obs: em algumas versões do JDK, é necessário inserir o parâmetro -cp para informar à máquina virtual que as classes de execução estão no diretório corrente (ponto) .
Exemplo:
>java -cp . NomeDaClasse

Observações:
1) Java SE Development Kit = JDK (SE: Standart Edition)
2) Java Runtime Environment = JRE = JVM + APIs
   Compila através do comando javac, ou seja,  lê o arquivo fonte .java e gera o arquivo de classe .class no formato de bytecodes. É um pacote de software executado como um aplicativo do sistema operacional.
   Uma API é uma coleção de componentes de software que já vêm prontos para serem usados.
3) Java Virtual Machine = JVM
   Software que emula CPU e memória para a execução de programas em Java. Executa (interpreta) aplicativo java.
4) A próxima figura é possível visualizar o conteúdo do JDK simplificado.

Agora vamos fazer com que consigamos acessar pela linha de comando tanto o compilador do Java quanto do Flex.

Abra um prompt de comando, ou digite “cmd” no executar do Windows (win+r) e dê OK. Vamos ver primeiramente se algum programa do “bin” do JDK está visível. Digite “javac -version” (sem aspas) no prompt e tecle <ENTER>.  Se tudo estiver correto a versão do javac será mostrada. Caso contrário, o Windows vai reclamar que não consegue reconhecer o comando dado. Da mesma forma que fizemos com o javac, para testar o “bin” do JDK, vamos testar agora o “bin” do Flex SDK. Para isso, ainda no prompt, digite “mxmlc -version” e dê <ENTER>. Novamente a versão do mxmlc deve ser apresentada. Veja a Figura abaixo. As saídas dos comandos javac e mxmlc estão destacadas respectivamente em azul e roxo. Caso tenha algum problema, verifique onde errou.

A partir de agora podemos compilar arquivos mxml e ActionScript a partir do prompt de comando ou a partir de arquivos em lote (batch scripts)! Mas não vamos fazer isso, não queremos sofrer muito para desenvolver nossas aplicações em Flex. Vamos automatizar um pouco isso, usando a IDE FlashDevelop que é gratuita.

4. Compiladores
4.1. Apache Flex

O compilador Adoble Flex foi doado para a empresa Apache, surgindo assim o Apache Flex que passou a ser gratuido, mesmo assim o Adobe Flex continua sendo baixado pelo site da Adobe, porém, criar projetos apenas com o compilador é algo difícil, para auxiliar a construção de programas Flex há necessidades de outros programas, primeiro deve ser instalado o Java SE Development Kit (JDK) que é obrigatório, depois outros programas que aumentam a produtividade, podendo ser os da própria Adobe que são pagos ou os open souce.

Para esta apostila os exemplos são simples, apenas para conhecer as liguagens MXML e ActionScript, portanto será instalado apenas o compilador Apache Flex,  o compilador Adobe Flash SDK e o programa de Interface Gráfica Flashdevelop (evitar o uso de comandos  no prompt).

Serão também comentados os programas Adobe Flash Builder e Adobe Flash Profissional que são mais produtivos.

4.1.1. Instalação do ApacheFlex

Esse compilador não será utilizado nessa apostila, em primeiro lugar é necessário saber que o ApacheFlex necessita obrigatoriamente do Flash Builder (pago) ou qualquer outra IDE, a alternativa é  construir o instalador usando ANT (sem Flash Builder ou qualquer outra IDE obrigatório). Consequentemente, as aplicações Flex podem ser desenvolvidos usando IDEs padrão, por exemplo Eclipse, ou outro open source como o IDE FlashDevelop, este compilador não será utilizado nesta apostila.
O ambiente de desenvolvimento Flex 4 é chamado Adobe Flash Builder, antes conhecido como Adobe Flex Builder.

Acesse o site: http://flex.apache.org/

No Menu de Download há três opções para baixar:
a) DOWNLOAD THE SDK INSTALLER (FOR APPLICATION DEVELOPERS):
Esta primeira opção é a versão com instalador, vem preparado para trabalhar com o Flash Builder, porém esta apostila está voltada para programas livres, o intuito é aprender a programar em flex a partir do básico, aprendendo a programar em MXML e ActionScript.

b) DOWNLOAD THE SDK binaries (FOR SDK DEVELOPERS):
Esta opção o programa vem compactado, a instalação é só descompactá-lo em um local adequado. Esta apostila utilizará esta versão, porque a desinstalação é mais fácil, é só deletar a pasta que tem o programa.
Baixar o arquivo de nome: apache-flex-sdk-4.11.0-bin

Crie a pasta c:/flex e descompacte o arquivo.
Acrescente o caminho c:\flex\bin a variável path do ambiente do sistema.
Teste no prompt de comando:
mxmlc -version
Deverá retornar: Version 4.10.0 build 0

c) DOWNLOAD THE SDK SOUCE CODE (FOR SDK DEVELOPERS):
Esta última opção e para que o programa possa ser compilado na forma mais adequado conforme as configurações de hardware e software do desenvolvedor (sistema operaicona e processador por exemplo).

4.1.2.. Caso deseje a opção a) é so:
SDK INSTALLER

Menu:
DOWNLOAD
DOWNLOAD SDK INSTLLER (FOR APPLICATION DEVELOPERS)
SDK Installer

A SDK Installer Apache Flex é um aplicativo que simplifica o download e instalação do SDK Apache Flex ® e seus componentes (obrigatórios). Ele é destinado a qualquer pessoa que queira usar a versão mais recente do Apache Flex SDK, mas que pode não ser necessariamente familiarizado com as ferramentas e os procedimentos necessários para compilar o Apache Flex SDK a partir do código fonte. O aplicativo irá agarrar o lançamento oficial, atual do SDK do apache.org , instalá-lo em seu computador e prepará-lo para uso com Adobe Flash Builder. Use o emblema abaixo para fazer o download do SDK Installer Apache Flex.

Clique no botão DOWNLOAD da figura acima.
Após o download é só instalar normalmente.

4.1.3. Apache SDK 4.10 com Adobe Flash Builder 4.7
Pequeno tutorial (copiado e traduzido do Apache Flex) para instalar o Adobe Flash Builder 4.7 junto com a última versão do SDK o Apache Flex SDK 4.10 que foi lançado dia 06/08/2013.

1. Faça download do Adobe Flash Builder 4.7 neste link: https://creative.adobe.com/products/flash-builder com cerca de 1,2Gb (para isso você precisa ter uma conta da adobe), esta versão tem 60 dias de avaliação.
2. Instale o FlashBuilder normalmente, seguindo as informações da tela.
3.  Faça download da ultima versão do SDK Installer no logo abaixo ou pelo link: http://flex.apache.org/installer.html
4. Após o término do download, instale o Apache SDK 4.10 de acordo com as instruções de tela.
5.  Após a instalação do SDK, abra o FlashBuilder, insira seu login e senha da Adobe para ativar os 60 dias de teste.
6. Agora vamos configurar o SDK dentro do FlashBuilder.
Com o FlashBuilder aberto, vá no menu Windows > Preference, então expanda o item "Flash Builder", vá até o item "Installed Flex SDKs", clique em "ADD" e selecione a pasta de instalação do SDK (passo 4), por padrão está dentro da pasta do FlashBuilder\sdks, ex: "C:\Program Files\Adobe\Adobe Flash Builder 4.7\sdks\4.10\". Automaticamente será preenchido o campo "Flex SDK name" com o seguinte nome "Apache Flex 4.10 FP11.1 en_US", clique em OK e OK novamente.

4.2. Flex SDK

Esse compilador  será usado nessa apostila. O compilador flex pode ser baixado gratuitamente pelo site da Adobe, repare que há tutoriais a respeito:
http://www.adobe.com.br
Suport & Learning
Adobe Developer Connection
Flex
Downloas and apdates
Free Flex 4.6 SDK

Reference and documentation
Using Flex 4.6

Logo que você clicar, o download vai iniciar. Para a versão que baixei (4.6) o tamanho do download foi de cerca de 328 MB. Sendo assim, baixe o arquivo. Assim que terminar, escolha onde vai salvar os SDK, sugiro a raiz de qualquer partição. Crie então uma pasta chamada “Flex2”. Neste exemplo, o caminho para a pasta sdk ficou “C:\Flex2”. Descompacte o conteúdo do arquivo baixado (no exemplo é flex_sdk_4.6.zip) na pasta criada. Deve ficar assim:


Note que você pode escolher o caminho que quiser para descompactar, estou apenas sugerindo um local. Note que caso você já tenha instalado o Flash Builder 4, ele já vai vir com dois SDKs instalados.
Em outro item será configurada a variável de ambiente (path) do windows, incluir o endereço C:\flex2\bin, isso faz com que o sistema operacional reconheça o programa instalado manualmente, facilita a digitação dos comandos no prompt, não tornando necessário ir até C:\flex2\bin> para começar a digitar os comandos, caso essa variável não tenha sido configurada, é só acessar o diretório C:\flex2\bin> para começar a usar o compilador.

Consultando o site da Adobe encontrei a seguinte informação:
Além do Open Source Flex SDK, Adobe produz o SDK gratuito Adobe Flex que contém tudo no Open Source Flex SDK mais ferramentas úteis para melhorar a experiência de desenvolvimento de aplicações, tais como o depurador de tempo de execução do Adobe Flash Player e Adobe AIR. Adobe também fornece um IDE profissional, o Adobe Flex Builder, para a construção de aplicativos Flex usando o Adobe Flex SDK ou o Open Source Flex SDK. (explicação: entendi que Open Source Flex SDK se refere ao Apache Flex).

4.3. Fonte ou Binário
Normalmente, quando alguém faz um pacote para um programa, coloca todo o código fonte do programa nele. O código fonte é escrito por programadores, e nada mais é do que um conjunto de instruções em código para o computador, que pode ser lido por humanos. Os computadores podem apenas entender este código se ele for interpretado. Uma das formas de interpretação do código fonte para um computador é a compilação dele para um código binário, que é o "idioma natural" dos computadores.

Então, por que as pessoas que fazem pacotes (chamados empacotadores), simplesmente, não os convertem em binários, já que essa é a forma final do programa de computador? Bem, diferentes computadores necessitam de diferentes tipos de binários, portanto, se você fizer um pacote para o seu tipo de processador (como um PC Intel), ele pode não funcionar em um outro tipo (como um processador de 64bits, por exemplo).

Códigos Fonte é a sequência de instruções no idioma do programador e podem ser "traduzidos" para o "idioma" do computador, independente de qual idioma seja esse. Cada tecnologia de processadores possui seu próprio "idioma".

5. Ambiente de desenvolvimento integrado (IDE)
São programas que possuem interface gráfica, ou seja, não é necessário a utilização de comandos no prompt para executar o compilador, utiliza-se menus e botões.

5.1. O Adobe Flash Builder
Anteriormente conhecido como Adobe Flex Builder, este programa não é gratuito, é um ambiente de desenvolvimento para construção de jogos e aplicativos usando a linguagem ActionScript e o compilado Adobe Flex SDK que é gratuito..
Há duas versões para o Flash Builder uma que é um Plugin para o Eclipse, e outra que é Standalone (é um Eclipse com o plugin já instalado). Os desenvolvedores Java podem utilizar Flex e Java paralelamente, a melhor escolha para esse caso é utilizar o plugin Flex,
É um ambiente de desenvolvimento integrado (IDE) para a construção de multi-plataforma, aplicações ricas para internet (RIAs) para o ambiente de trabalho e uma grande variedade de dispositivos móveis. Flash Builder também inclui o teste, depuração e ferramentas de criação de perfil que levam ao aumento dos níveis de produtividade e eficácia.

Flash Builder é construído em cima do Eclipse, um IDE de código aberto e fornece todas as ferramentas necessárias para desenvolver aplicações que usam o compilador Adobe Flex SDK de código aberto e ActionScript 3.0.

Flash Builder fornece suporte completo para a criação de aplicativos que usam o Apache Flex SDK. Ao criar um projeto Flex no Flash Builder, você pode especificar para usar o Apache Flex SDK.

Flash Builder é executado no Microsoft Windows e Apple Mac OS X, e está disponível em várias versões. Opções de configuração de instalação permite que você instale o Flash Builder como um conjunto de plug-ins em uma instalação do Eclipse existente.

Para iniciar o desenvolvimento  de um projeto com Flex, você tem três escolhas, usar o Flash Builder, o plugin Flex para Eclipse ou programas como o Flashdevelop.

5.2. Adobe Flash Professional

Flash Professional refere-se ao Flash IDE tradicional, que é um membro da família Creative Suite, portanto é muito mais completo que o Flash Builder e também mais caro.
É uma ferramenta que você pode usar para criar apresentações, aplicativos e outros conteúdos que responde a interação do usuário. Projetos Flash pode incluir animações simples, conteúdo de vídeo, interfaces de usuário complexas, aplicativos e tudo mais. Em geral, os projetos individuais criados com Flash Professional são chamados de aplicativos (ou aplicações SWF), mesmo contendo apenas animação básica. Você pode fazer aplicações de mídia rica, incluindo fotos, som, vídeo e efeitos especiais.

O formato SWF é extremamente bem adaptada para trafegar na web, porque os arquivos SWF são muito pequenas e tem pouco tempo para download. Projetos Flash muitas vezes incluem o uso extensivo de gráficos vetoriais. Gráficos vetoriais exigem muito menos memória e espaço de armazenamento de bitmap porque eles são representados por fórmulas matemáticas em vez de grandes conjuntos de dados. Usando gráficos de bitmap no Flash projetos resulta em tamanhos de arquivos maiores, porque cada pixel individual na imagem requer um pedaço de dados para representá-lo. Além disso, o Flash permite que você selecione os elementos gráficos e convertê-los em símbolos tornando-os mais fáceis de reutilizar e continuar a melhorar o desempenho quando os arquivos SWF são vistos online.

Criação de um arquivo FLA e adicionando elementos gráficos
Para construir uma aplicação em Flash Professional, você cria gráficos vetoriais e elementos do projeto com as ferramentas de desenho e de importação elementos de mídia adicionais, tais como áudio, vídeo e imagens em seu documento. Em seguida, você pode usar a linha do tempo e Palco para posicionar os elementos e definir como e quando eles aparecem. Usando Adobe ActionScript (uma linguagem de script) que você criar funções para especificar como os objetos na aplicação comportar.

Quando você criar conteúdo em Flash Professional (escolhendo File > New), você trabalha com o documento principal, o que é chamado de um arquivo FLA. Arquivos FLA usar a extensão do arquivo.Fla (FLA). Ao editar um arquivo FLA no ambiente de criação do Flash, você vai notar que a interface do usuário é dividido em cinco partes principais:

- O Stage é como a tela que define a área visível durante a reprodução, você organizar gráficos, vídeos, botões e outros elementos no palco.
- A Timeline controla o tempo que especifica quando os elementos do filme aparecem no Palco. A reprodução começa no Quadro 1 e se move da esquerda para a direita que o filme prossegue através dos quadros. Arraste as camadas na Linha de tempo para organizar a ordem de camadas de gráficos no Palco. Gráficos nas camadas mais altas parecem ser colocado no topo dos gráficos nas camadas mais baixas.
- O Tools panel, contém as ferramentas usadas para selecionar objetos no Palco, criar elementos de texto e desenhar gráficos vetoriais.
- O Property inspector, exibe informações contextuais sobre os atributos de qualquer objeto selecionado, você pode editar as opções para ajustar as configurações de um objeto.
- O Library panel, contém elementos e símbolos que são armazenados para um projeto de mídia. Utilize este painel para gerenciar e organizar os elementos do projeto. Quando você publica um arquivo SWF, apenas os itens de biblioteca que você realmente usa são incluídos no arquivo publicado, você não tem que "limpar" os elementos não utilizados que não foram utilizados porque não vai aumentar o tamanho do arquivo SWF publicado ( embora o façam aumentar o tamanho do ficheiro mestre FLA).

5.3. FlashDevelop
É um IDE gratuita desenvolvida em .Net, é uma alternativa ao uso do Flash Builder. Quando vamos desenvolver uma aplicação em Flex, temos como ferramenta padrão a IDE Flash Builder, que é uma ferramenta comercial da Adobe, entretanto, o Flex SDK, que constitui todo o ferramental para a compilação dos projetos do Flash Builder, é uma solução gratuita, sendo que qualquer um pode baixá-lo e usá-lo em qualquer outra IDE que desejar, ou mesmo desenvolver seus códigos em qualquer editor de texto.

Portanto para programar em flex gratuitamente há duas opções:
- Utilizar apenas o compilador flex e digitar os comando no prompt.
- Utilizar o FlashDevelop ou outro similar.
A alternativa mais barata para os desenvolvedores é a aquisição do Flash Builder, porém para construção de projetos mais sofisticadores o desenvolvedor encontrará difilculdades, por exemplo:
- Arquivos modelos e exemplos estão com extensão .fla ou .swf que abrem apenas no Flash Profissional.
- Video utiliza servidor com protocolo RTMP, também não será possível utilizá-lo, o servidor Red 5 é gratuito, porém os modelos de exemplos estão no formato .fla.

5.3.1. Download do FlashDevelop
Primeiramente, vamos fazer o download da ferramenta.
O site oficial do FlashDevelop é http://www.flashdevelop.org/ e as instruções de download e das dependências necessárias para utilizá-lo pode ser encontrada nesse link: http://www.flashdevelop.org/community/viewtopic.php?f=11&t=6956.

Note que nesse link está listada a última versão disponível. Sendo assim, recomendo que você entre no site e busque pelo link download. Note também que das dependências necessárias, já resolvemos a parte do JDK e do Flex SDK, sendo necessário que você instale o .Net framework caso ainda não o tenha instalado (Windows Vista e 7 já vem com ele instalado).

Há duas opções:
1) Download FlashDevelop 4.5.2 Setup
Esta já vem com o instalador, a instalação começa com dois cliques no arquivo.
2) Download FlashDevelop 4.5.2 Zip
Esta versão é instalada apenas com a descompactação do arquivo.

Instalação do FlashDevelop 4.5.2 Setup
Depois que baixar o FlashDevelop, instale-o.
 
No primeiro acesso ao programa aparecerá a janela:

Caso tenha algum problema futuramente e tenha que reinstalar o programa, verifique se ficou algum arquivo ou pasta da desistalação.

Configuração
As opções se referem a instalação conjunta do Flasdevelop com as respectivas opções, caso queira instalar as opções separadamente (versões mais atuais) é só deixar desmarcado e instalar as opções separadamente (fazer o download) e fazer a configuaração no Menu Tools > Program Setting...
É recomendável instalá-lo juntamente com as opções que são padrão, indicadas na instalação, assim não terá conflito de versões entre o Flasdevelop e esses programas que serão instalados conjuntamente. Caso necessite mudar, isso poderá ser feito pelo menu Tools:

Configuração para o Flashdevelop apontar para o Flex SDK.  No campo “Installed Flex SDK” precisamos apontar para o diretório raiz do Flex SDK.
Caso esta opção não tenha sido marcada na instalação, terá que instalar separadamente o Flex SDK e depois a configuração do Flashdevelop.

Da mesma forma para a configuração do Flash Player (plugin):

Caso tenha escolhido a opção de instalar o Flash Player junto com o Flasdevelop, o endereço será:
C:\Program Files\FlashDevelop\Tools\flexlibs\runtimes\player\11.8\win\FlashPlayerDebugger ( no meu micro), não necessitando da configuração.

Observação:
Tenho instalado no meu micro os Flash Player no Google Chrome (automaticamente) e no sistema operacional, mais , contudo o Flashdevelop não os reconhece, provavelmente por conflito de versões. Os locais de instalação testados foram:
Para o Coogle Chrome:
C:\Program Files\Google\Chrome\Application\33.0.1750.154\PepperFlash\pepflashplayer.dll
Para os demais navegadores:
C:\Windows\system32\Macromed\Flash\NPSWF32_12_0_0_77.dll

Depois da instalação, abra a ferramenta:


Vamos então criar um projeto para podermos configurar a ferramenta. Procure na barra de menu pelo item “Project”. Clique nele e escolha “New Project”. Em “Installed Templates” escolha “Flex 4 Project”. Em “Name” entre com “TesteFlashDevelop” (sem as aspas). Escolha onde quer salvar o projeto, dê uma nome para o pacote principal da aplicação (caso queira) e marque a opção “Create directory for project”. Dê OK e a ferramenta vai pedir o nome do autor. Preencha o campo e dê OK. Veja a Figura abaixo.

No canto superior direito da interface do FlashDevelop, a estrutura do projeto será apresentada. Procure na pasta “src” pelo Main.mxml e clique duas vezes. O arquivo será aberto no editor. Note que o código não tem nenhum componente visual, apenas a estrutura da aplicação. Vamos então tentar dar um build no projeto. Na barra de ferramentas da IDE, procure por um ícone com uma engrenagem e clique nele.

Após fazer isso clique em close e tente dar o build novamente no projeto (botão da engrenagem). Com isso, o projeto deve ser compilado e você pode ver o resultado na pasta “bin” do projeto onde um arquivo “swf” com o nome do projeto vai ser gerado.

Uma desvantagem do FlashDevelop é que ele não tem um editor visual para a interface gráfica, mas é muito melhor usar ele do que ter que fazer tudo na mão, pois ele automatiza todo o processo de compilação para nós.

6. Programando em Flex
Os programas acima mencionados foram citados para que o leitor tenha uma visão do assunto, serão utilizado nesta apostila apenas comandos via prompt ou o programa Flasdevelop, serão criado apenas arquivos com extensão .swf a fim de conhecer a linguagem flex utilizando a linguagem MXML e a linguagem Action Script 3.0.
Há uma apostila fornecida em português pela própria Adobe sobre Action Script, ela serve de apoio.

6.1. MXML
É uma linguagem de marcação, baseada no XML, usada para definir a interface da aplicação, está integrada ao ActionScript, que traz o poder de uma linguagem Orientada a Objeto.
Podemos aplicar CSS sem precisar saber CSS, apenas alterando propriedades dos objetos. Apenas com os recursos da MXML não podemos tomar decisões no código nem usar estruturas de controle como laços e outros, mas o ActionScript permite tudo isso e pode ser incorporado aos scripts MXML através de seções, ou seja, o código fonte tem extensão .mxml.
Pode ser usada também para definir aspectos não visuais da aplicação como acesso a dados no servidor.
MXML inclui tags para componentes visuais como dataGrids, inputText, comboBox e menu. Inclui também tags para componentes não visuais como conexão com web services, data binding e efeitos de animação.

<s:Application>

Exemplo:
A seguir mostra um aplicativo simples "Olá mundo", que contém apenas uma <s:Application> tag e três tags filhas, o <s:Panel> tag e o <s:Label> etiquetas, além de um <s:layout> tag.
O <s:Application> etiqueta define o container Application que é sempre a marca de raiz de um aplicativo.
O <s:Panel> tag define um Painel contêiner que inclui uma barra de título, um título, uma mensagem de status, uma borda, e uma área de conteúdo para os seus filhos.
O <s:Label>   tag representa um controle Label, um componente de interface de usuário muito simples que exibe texto.

Exemplo:
1) Abra o FlashDevelop
2) Crie o arquivo Action Script Exemplo2.mxml
Nenu Fle > New > MXML Document > olamundo
3) Recorte e cole o código fonte baixo:

Arquivo: olamundo.mxml
<?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/halo">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:Panel title="My Application">
<s:Label text="Hello World" fontWeight="bold" top="10" left="20" fontSize="14"/>
</s:Panel>
</s:Application>

4) Compilação e execução:
Menu Tools > Flash Tools > Build Current File
Deverá aparecer o texto no Flash Player, afim de que o leitor possa testar a aplicação, será incluido o programa já compilado nessa própia página.
5) Inclusão do arquivo gerado, olamundo.swf, nesta própria página.
Para inserir um arquivo com extensão .swf, deve-se utilizar a tag <object> no corpo do código html, conforme configuração abaixo:
 <html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title></title>
</head>
<body>
<object data="swf\olamundo.swf" type="application/x-shockwave-flash" height="200" width="200">
  <param value="swf\olamundo.swf" name="movie">
  <param value="transparent" name="wmode">
</object>
</body>
</html>

6) Resuldado

A primeira linha do documento especifica uma declaração opcional da versão XML. É uma boa prática para incluir
codificação de informações que especifica como o arquivo MXML é codificado. Muitos editores permitem que você selecione a partir de uma gama de arquivo opções de codificação. Em sistemas operacionais norte-americanas, ISO-8859-1 é o formato de codificação dominante, e a maioria programas utilizam esse formato por padrão. Você pode usar o formato de codificação UTF-8 para garantir a máxima da plataforma  compatibilidade. UTF-8 fornece um número único para cada personagem em um arquivo, e é plataforma, o programa de e  independente de linguagem. Se você especificar um formato de codificação, deve coincidir com a codificação de arquivos que você usa. O exemplo a seguir mostra um XML tag declaração que especifica o formato de codificação UTF-8:  

<? xml version = "1.0" encoding = "UTF-8"> Sobre a tag <s:Application>

Além de ser a marca de raiz de um aplicativo, o <s:Application> tag representa um container Application Spark.
Um recipiente é um componente de interface de usuário que contém outros conjuntos de componentes, e usa regras de layout para posicionar sua componentes filhos. Por padrão, o container Application spark permite que você defina a posição dos seus filhos. No exemplo anterior, você define o layout do container para VerticalLayout para que o container Application automaticamente estabelece seus filhos em uma coluna vertical. Pode aninhar outros tipos de recipientes dentro de um recipiente de aplicação, tal como o recipiente de painel mostrado acima.

6.2. Action Script 3.0
Da mesma forma que arquivos fontes com extensão mxml, arquivos fontes com extensão .as podem ser digitados em um editor de texto comum e compilado via prompt no compilador Flex.
ActionScript é uma linguagem de programação orientada a objetos baseada em ECMAScript, utilizada principalmente para construção de aplicações RIA (do inglês RIA: Rich Internet Applications (Aplicações Ricas de Internet)). É executada em uma máquina virtual (AVM - "ActionScript Virtual Machine", atualmente na versão 3 que está disponível no Adobe Flash Player (plugin encontrável em navegadores Web) e também no ambiente Adobe AIR, um dos recursos mais característicos dessa linguagem é a possibilidade filmagem através de uma webcam como em video conferência, a implantação de outros recursos são necessários para o seu funcionamento com servidor de stream.

Classe
Uma classe é um programa auto-contido, que tem variáveis (propriedades) e métodos capazes de executar uma tarefa especializada ou um grupo de tarefas. Uma classe serve de base para os objetos como também pode ser herdada por outras classes.
Objeto
Um objeto é uma cópia da classe em memória.

ActionScript assim como outras linguagens OO é nada mais que uma grande coleção de classes. Com a experiência em OO vamos criando nossas classes, utilizando fontes de terceiros e aprendendo a reutilizar tanto nossas classes quanto as do próprio ActinScript e com isso precisamos cada vez criar menos classes e levamos menos tempo para desenvolvimento e consequentemente a possibilidade de bugs diminui, já que boa parte já foi testada.
Isso sugere que evitemos reinventar a roda e antes de iniciar um novo projeto devemos consultar para ver o que já existe e podemos utilizar.
Toda classe pode ter propriedades e métodos.
Propriedades são variáveis da classe e métodos são funções.
Alguns autores identificam uma terceira construção, um event listener, ou evento, identificada por alguns apenas como um método especializado.
Herança
Um arquivo de classe é uma poderosa forma de modularizar nossas aplicações em pequenos e reutilizáveis blocos de construção.
Acontece que herança nos traz mais que reutilização.
Pacotes
Pacote é a forma de organizar bibliotecas de classes em grupos. Cada pacote contém um grupo de classes em uma estrutura semelhante à do sistema de arquivos, em arquivos e diretórios em um diretório que representa o pacote.
Em ActionScript pacotes estão um passo à frente de outras linguagens, enquanto outras permitem somente empacotam arquivos de classes, em ActionScript podemos empacotar métodos e propriedades individuais. Dando possibilidade de se criar bibliotecas de métodos e propriedades sem qualquer classe e a qualquer momento objetos podem acessar estes objetos e propriedades.
Visibilidade
Através das palavras reservadas public e private podemos controlar quem pode ou não estar visível externamente.

7. Programa básico
O exemplo abaixo é um programa action script.

Exemplo 1 (classe):
1) Abra o FlashDevelop
2) Crie o arquivo Action Script
Nenu Fle > New > AS3 Document > Exemplo1
3) Recorte e cole o código fonte baixo:

Arquivo: Exemplo1.as
package
{
  import flash.display.Sprite;
  import flash.text.TextField;

  [SWF(width="640", height="480", backgroundColor="#cccccc")]
 
  public class Exemplo1 extends Sprite
  {
    public function Exemplo1()
    {
      var textField:TextField = new TextField();
      textField.text = "Olá! Como vai!";
      addChild(textField);

      trace("Este é meu primeiro exemplo.");
    }
  }
}

4) Compilação e execução:
Menu Tools > Debug (com esta opção o arquivo é executado no Flash Player Debug do Flashdevelop)
Menu Tools > Flash Tools > Build Current File


Nota (teste erro):

O comando trace () é usado para testar os valores das variáveis ​​na ferramenta de criação do Flash. Em pequenas e grandes projetos, é difícil trabalhar cegamente com variáveis ​​e esperar que elas  alcancem seus objetivos, sem ter uma saída numérico real indicando o seu valor. O comando trace () ajuda a testar o valor de qualquer variável facilmente. Parece que está obsoleta.

O comando trace ("...") deveria mostra qualquer valor que você passar para ele na janela de saida do Flash, contudo há necessidade de configuração do Flash Player Debugger para corrigir deste erro, encontrei uma soluação, porém não deu certo, mesmo assim irei explicar:

- Abra o Windows Explore
- Vá até C:\Users\Usuario1(meu caso)
- Crie o arquivo mm.cfg (bloco de notas) e adicione as duas linhas abaixo
ErrorReportingEnable = 1
TraceOutputFileEnable = 1

- Acione o batão Organizar do Windows Explore siga para verificar o arquivo flashlog.txt foi criado:
Organizar > Opções de Pastas e Pesquisa > Modo de Exebição >
desmarque: Ocultar as extensões dos tipos de arquivos conecindos
Marque: Mostrar pastas e arquivos ocultos
- A pasta AppData pode ser acessada verifique o arquivo o arquivo:
C:\Users\Usuario1\AppData\Roaming\Macromedia\Flash Player\Logs\flashlog.txt

8. Fases do ciclo de vida do Flex - preinitialize, inicializar e creationComplete
Quando um aplicativo Flex é iniciado, ele executa uma série de processos ou etapas antes da carga total no browser, uma aplicação é composta por um número de componentes e recipientes, estes recipientes podem ter mais recipientes ou componentes como filhos e suas propriedades serão definidas quando o aplicativo for iniciado, por exemplo, a propriedade stage só está disponível quando o componente foi adicionado à lista de exibição, vou mostrar aqui a ordem em que esses eventos são executados.



No gráfico acima, você pode ver como a ordem em que esses eventos são acionados. Primeiro, vemos que a ordem em que eles são disparados é preinitialize (), inicializar (), creationComplete (), UpdateComplete () e applicationComplete ().

Agora uma explicação mais detalhada de cada evento:
preinitialize (): É acionado quando o componente for adicionado à sua área de conteúdo, mas antes que o componente foi inicializado, ou qualquer um dos seus filhos foram criados. Na maioria dos casos, este evento é acionado antes também, para ser capaz de acessar suas propriedades ou configurar o componente. É a primeira fase do ciclo de vida da aplicação.
inicializar (): É acionado quando o componente terminou sua construção e todas as suas propriedades iniciais foram estabelecidas.
creationComplete (): É acionado quando o componente e todos os seus filhos e todos os filhos de seus filhos foram criados, estabelecidos e são visíveis.
UpdateComplete (): É acionado sempre que as características do componentes mudar.
applicationComplete (): É acionado após a aplicação completa for lançada, ele é processado por LayoutManager quando for adicionado à lista de exibição. Este é o último evento disparado durante a inicialização do aplicativo, após o creationComplete () evento, que é acionado após o preloader for removido e o aplicativo for adicionado à lista de exibição.

Exemplo:
<?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"
               preinitialize="application_preinitializeHandler(event)"
               initialize="application_initializeHandler(event)"
               creationComplete="application_creationCompleteHandler(event)">
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import mx.controls.Alert;

            protected function application_preinitializeHandler(event:FlexEvent):void
            {
                trace('A Aplicação foi pré inicializada');
                Alert.show("A Aplicação foi pré inicializada");
            }

            protected function application_initializeHandler(event:FlexEvent):void
            {
                trace('A Aplicação foi inicializada');
                Alert.show("A Aplicação foi inicializada");
            }

            protected function application_creationCompleteHandler(event:FlexEvent):void
            {
                trace('A Aplicação foi criada');
                Alert.show("A Aplicação foi criada");
            }

        ]]>
    </fx:Script>
</s:Application>

Debugando a aplicação teremos no Console:
A Aplicação foi pré inicializada
A Aplicação foi inicializada
A Aplicação foi criada

8.1. Adobe Flex: Ciclo de inciciação de Componente.
Ao percorrer a documentação da Adobe, reparei num resumo bastante interessante que fala do ciclo de execução/criação de cada componente da nossa aplicação, é incrível como cada simples botão ao ser adicionado a um container tem uma dezena de procedimentos até que seja disparado o evento creationComplete. Para quem já criou/extendeu um componente via action script já sabe bem do que falo, mas mesmo assim coloco a explicação.

Vou falar apenas do processo de adicionar um botão como child a um container (Box) com o simples código:

   1: // Criar uma box, um botão, definir o label e adicionar como child
   2: var boxContainer:Box = new Box();
   3:
   4: var b:Button = new Button()
   5:
   6: b.label = "Enviar";
   7:
   8: boxContainer.addChild(b);

O flex, procederá da seguinte forma:

1. É chamado o componente construtor (new Box e depois new Button)
2. Chamado o setter (b.label=) e atualizado todo o componente ( muitas das vezes são chamados métodos de atualização para definirem todo o layout: invalidateProperties(), invalidateSize(), ou invalidateDisplayList() )
3. Adiciona como child (filho) do box. Aqui o flex faz a maior parte do trabalho, executando-se a  seguinte ordem:
4. Define a propriedade parent do componente para fazer referencia ao seu "container".
5. Calcula e define o estilo/"style" de todo o componente.
6. Dispara o evento preinitialize do componente.
7. Chama o método createChildren() do componente.
8. Chama os métodos invalidateProperties(), invalidateSize(),  e invalidateDisplayList() para obrigar a serem disparadas/chamadas os métodos commitProperties(), measure(), ou updateDisplayList() no próximo evento render. A única excepção a estes acontecimentos, é que o flex não chama o método measure()  quando o "user/programador" define a altura e largura do componente.
9. Dispara o evento initialize no componente. Nesta altura todos os childs (childrens) no componente são inicializados, mas o componente ainda não foi correctamente definido no seu tamanho, nem processado o seu layout. Este evento pode ser usado para definir /executar procedimentos extra no componente antes que seja completamente processado.
10. Dispara o evento childAdd no componente "pai" / "parent".
11. Dispara o evento initialize do seu componente "pai" / "parent".
12. Durante o próximo evento render o flex faz as seguinte acções:

- Chama o métodos pela seguinte ordem:
commitProperties();
measure();
layoutChrome();
updateDisplayList();

- Finalmente é disparado o evento updateComplete no componente.
13. O flex, depois deste processo ainda poderá disparar eventos de renderização (render) se os métodos commitProperties(), measure(), ou updateDisplayList() forem executados/chamados através dos métodos invalidateProperties(), invalidateSize(), ou invalidateDisplayList().

14. Depois do ultimo evento render ser chamado, o flex executa as seguintes acções:
- Coloca o componente visível ( .visible=true; ).
- Dispara o evento creationComplete no componente. O componente é dimensionado e processado para o layout. Este evento é apenas disparado uma única vez e só quando o componente é criado.
- Dispara o evento updateComplete no componente, este evento também é disparado quando são alteradas quaisquer definições do componente, como layout, posição, tamanho ou qualquer alteração das características visuais.
A maior parte do trabalho de configuração, definição, e renderização de um componente acontece quando este é adicionado a um container ( método addChild() ), isto porque enquanto o componente não for adicionado a um container, o flex não consegue saber o seu tamanho, definir as propriedade "in-line"/"inheriting" ou desenha-lo no ecrã.

Perceber que estes passos, é essencial para conhecer  as propriedades e as operações que são executadas a quando da criação de um componente. Ajuda-nos também a perceber melhor porque é que às vezes temos certos erros no nosso código bem como a entender o processo de criação de um componente, o que se torna muito útil para criar-mos ou extender  o nosso próprio componente.

9. FlexEvent
Um Evento são ações que ocorrem quando o evento for acionado, na maioria dos casos os eventos estão associados a um botão que ao ser acionado realizaram uma tarefa como salvar, excluir, alterar, girar, avançar, etc.

Um Evento possui três fases, onde pode ser ouvido e tratado, são elas:
Capturing Phase
Targeting Phase
Bubbing Phase


Capturing Phase: nesta fase, o evento parte da extremidade da aplicação, e vem se propagando na hierarquia até que atinja o objeto que sofreu o evento, nesta fase o Current Target vai se alterando conforme o nível.
Targeting Phase: aqui o evento está exatamente sobre o componente que o causou.
Bubbing Phase: esta fase é o reverso da Capturing Phase, pois o evento vai subindo do nível que causou o evento até o topo da aplicação, ou seja FlexGlobals.topLevelApplication.

Uma das grandes vantagens de se utilizar Eventos no Flex, é que não precisamos referenciar funções dentro dos componentes, deixando-os totalmente desacoplados e conseqüentemente mais leve ao executar a aplicação, pois desta forma um objeto que não está sendo usado pode ser descartado pelo Garbage Collection, o que não acontece quando vinculamos uma função dentro do componente, pois este passa a guardar um valor que ainda está sendo usado em outro contexto.

Utilizando em classes .as
A forma mais simples de se utilizar eventos é nos getters de uma classe, por exemplo, se queremos que ao setar um valor na propriedade x, o get da propriedade y execute sua lógica e atualize o valor basta disparar o evento e bindar o mesmo no get do Field y, ex:

public function set x(value:Object):void {
    this._x = value;
    dispatchEvent("changeX");
}
 
[Bindable ("changeX")]
public function get y():Object {
    return this._y + this_x;
}

Desta forma, ao setar o valor no x, o y será atualizado imediatamente.

Utilizando em componentes mxml:
Para utilizar em um componente visual, temos uma lógica simples, basicamente:

No componente  adiciona-se um ouvinte a um determinado evento, a função que será executada ao ocorrer o evento veja o exemplo abaixo:
Componente.addEventListener("nomeDoEvento", funcaoExecutar);

O componente  Disparando um evento:
Componente.dispatchEvent("nomeDoEvento");
Desta forma a função funcaoExecutar Será executada.

Exemplo prático:
Crie uma aplicação;
Crie um componente de login, um form qualquer que contenha os campos, login e senha;
Adicione um botão de login que executará esta função:

private function login(evt:Event):void{
 
    dispatchEvent(new Event("doLogin"));
 
}

Adicione também uma metaTag como abaixo, ela será responsável por expandir nosso evento para que possa ser ouvido fora do componente:

<fx:Metadata>
    [Event(name="doLogin", type="flash.events.Event")]
</fx:Metadata>

Crie um outro form que chamará o login como PopUp, antes de invocar esta PopUp vamos adicionar um listener para que ela dispare o evento que queremos ouvir. Isso funcionará perfeitamente:

private function openLogin(evt:Event):void {
    var loginForm:Login = new Login();
    loginForm.addEventListener(Login.DO_LOGIN, tryLogin);
    PopUpManager.addPopUp(loginForm, this, true);
    PopUpManager.centerPopUp(loginForm);
}

Podemos também utilizar este evento em forma mxml, que causará o mesmo efeito, veja abaixo:

<components:LoginForm doLogin = tryLogin(event)/>

Desta forma poderemos executar uma função sem adicionar explicitamente um listener, usando a propriedade do próprio componente que chamará a função assim que disparar o evento.

Perceba que na função tryLogin, descrita abaixo, temos acesso ao componente de login por meio do evento.  O que isto significa? O evento também é um objeto, e podemos obter diversas informações através deste, no exemplo abaixo acessamos evt.target, o que nos retorna o objeto a qual adicionamos o listener, assim podemos usufruir de todas suas propriedades públicas sem ter uma referência no form onde estamos trabalhando estas informações.

private function tryLogin(evt:Event):void {
 
    Alert.show("login " + evt.target.edtLogin)
 
}

Se o evento é também um objeto, logo podemos adicionar propriedades extras ao mesmo, basta criar uma classe que extenda de flash.events.Event, então podemos adicionar os fields dos quais precisamos, veja abaixo:

package br.com.components
{
 
    import flash.events.Event;
 
    public class LoginEvent extends Event
    {
 
        public static const DO_LOGIN_SPECIFIC:String = "doLoginSpecific";
 
        public function LoginEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
        {
            super(type, bubbles, cancelable);
        }
 
        public var login:String;
 
        public var senha:String;
 
    }
}

Para que consigamos trafegar estes dados a partir do evento, basta mudar a forma de disparar o mesmo, veja  abaixo:

private function login(evt:Event):void {
 
    var levt:LoginEvent = new LoginEvent(LoginEvent.DO_LOGIN_SPECIFIC);
 
    levt.login = this.edtLogin.text;
 
    levt.senha = this.edtSenha.text;
 
    dispatchEvent(levt);
 
}




Note que instanciamos o objeto e simplesmente setamos as propriedades desejadas, assim ao despachar o mesmo ele será recebido pelos ouvintes carregando os valores setados.
Existe também algumas formas de neutralizar este evento, ou seja, interromper o evento como ilustrado abaixo :

evt.preventDefault();

Cancela a execução dos listeners nativos, ou padrões, como o de dois cliques em um text, o qual selecionará a palavra por inteiro. No exemplo abaixo quando o texto for quebra de linha, prevenimos o evento, e não deixamos quebrar o texto como acontece automaticamente.

<fx:Script>
    <![CDATA[
 
        private function textArea_textInput(evt:TextEvent):void {
            if (evt.text == "\\n") {
                evt.preventDefault();
            }
        }
 
        private function textArea_change(evt:Event):void {
            textArea.text = textArea.text.replace(/\\n|\\r/ig, "");
        }
 
    ]]>
 
</fx:Script>
 
<mx:TextArea id="textArea"
             text="The quick brown fox jumped over the lazy dog."
             verticalScrollPolicy="on"
             width="100%"
             height="100%"
             textInput="textArea_textInput(event);"
             change="textArea_change(event);" />
evt.stopPropagation();

Cancela a propagação do evento no target a qual está sendo ouvido, ou seja, se você tem um botão dentro de um form, este form está com uma função para seu click, você clica no botão, o form também recebe o click, porque o botão pertence a este form, porém se ao executar uma função no botão, você parar a propagação, apenas os listeners do botão serão notificados.

evt.stopImmediatePropagation();

Cancela a propagação imediatamente, nenhum listener ouvirá o evento independentemente onde estiver.

Nota:
dispatch (dɪˈspætʆ):  v. (3a pess sing -ches) enviar, despachar.
bubble (ˈbʌbəl): s. 1. bolha (num líquido, de sabão), bola (de chiclete), 2. to blow bubbles: fazer bolhas (num líquido), fazer bolas (com chiclete), 3.  bubble bath: espuma para banho, bubble gum: chiclete de bola; v. borbulhar, to bubble up: sair aos borbotões.

9.1. Componente botão em flex que tem o evento "enter"
O componente botão em flex que tem o evento "enter"
(na verdade esse é um componente que extende o botão padrão do flex e adiciona o evento "enter", ou seja, ao teclar o enter, o botão será acionado):

Exemplo:

package com.inside.hctissflex.util.component
{
 import flash.events.KeyboardEvent;
 import flash.ui.Keyboard;
 
 import mx.controls.Button;
 import mx.events.FlexEvent;

[Event(name="enter", type="mx.events.FlexEvent")]

 public class IsaButton extends Button
 {
  public function IsaButton()
  {
   //TODO: implement function
   super();
  }
 
/**
* @private
*/
override protected function keyDownHandler(event:KeyboardEvent):void
{
switch (event.keyCode)
{
case Keyboard.ENTER:
{
dispatchEvent(new FlexEvent(FlexEvent.ENTER));
break;
}
}
}
 }
 
}

9.2. Eventos
São ações que acontece quando você clica com o mouse ou pressiona uma tecla, este clique dispara um evento de mouse ou teclado respectivamente. O Flash Player captura estes eventos e repassam para quem está "ouvindo", os chamados Listeners (ouvintes).

Exemplo de evento de alerta em mxml:
1) Abra o FlashDevelop
2) Crie o arquivo MXML evento1.mxml
Nenu Fle > New > MXML Document > evento1
3) Recorte e cole o código fonte baixo:
Arquivo: evento1.mxml

<?xml version= "1.0" encoding= "utf-8" ?>
<mx:Application xmlns:mx= "http://www.adobe.com/2006/mxml" >
     <mx:Script>
         import mx.controls.Alert;
     </mx:Script>
     <mx:Button label= "CliqueAqui" fontSize= "40" click= "Alert.show('Olá!')" />
</mx:Application>
4) Compilação e execução:
Menu Tools > Flash Tools > Build Current File
Deverá aparecer o texto no Flash Player, afim de que o leitor possa testar a aplicação, será incluido o programa já compilado nessa própria página.
5) Inclusão do arquivo gerado, evento1.swf, nesta própria página.

Exemplo de evento em actionScript:
1) Abra o FlashDevelop
2) Crie o arquivo MXML evento2.mxml
Nenu Fle > New > MXML Document > evento2
3) Recorte e cole o código fonte baixo:
Arquivo: evento2.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
   import mx.controls.Alert;
]]>
</mx:Script>
<mx:Button label="CliqueAqui!" id="myButton" click="Alert.show('Ola! Como vai?');" mouseUp="Alert.show('Up');" />
</mx:Application>
4) Compilação e execução:
Menu Tools > Flash Tools > Build Current File
Deverá aparecer o texto no Flash Player, afim de que o leitor possa testar a aplicação, será incluido o programa já compilado nessa própia página.
5) Inclusão do arquivo gerado, evento2.swf, nesta própria página. 

10. Referência
Link para a documentação oficial

11. Programação em Flex 4.6. com MXML
A maioria das tags MXML correspondem às classes ActionScript 3.0 ou propriedades das classes. Flex analisa marcas MXML e compila um arquivo SWF que contém os objetos do ActionScript correspondentes. ActionScript 3.0 usa a sintaxe baseada na edição 4 do projeto de especificação de linguagem ECMAScript.
ActionScript 3.0 inclui os seguintes recursos:

- Sintaxe de definição de classe Formal
- Estrutura formal de pacotes
- Digitação de variáveis​​, parâmetros e valores de retorno (apenas em tempo de compilação)
- Getters e setters implícitos que usam a obter e definir palavras-chave
- Herança
- Membros públicos e privados
-Membros estáticos
- Operador de conversão

11.1. Nomeando arquivos MXML
Nomes de arquivos MXML devem aderir às seguintes convenções de nomenclatura:

Os nomes de arquivos devem ser identificadores ActionScript válidos, o que significa que:
- Deve começar com uma letra ou um caractere sublinhado (_), e eles só podem conter letras, números e caracteres de sublinhado.
- Nomes de arquivos não deve ser o mesmo que os nomes de classe do ActionScript, os valores de ID de componente, ou do aplicativo.
- Não usar nomes de arquivos que correspondem aos nomes de marcas MXML que são: fx:,s: ou mx:
- Os nomes de arquivos devem terminar com uma extensão de arquivo .mxml (em minúsculas).
- Uma tag MXML que corresponde a uma classe ActionScript usa as mesmas convenções de nomenclatura da classe ActionScript.
- Nomes de classes começam com uma letra maiúscula, e as letras maiúsculas separam as palavras em nomes de classes. Por exemplo, quando uma tag corresponde a uma classe ActionScript, as suas propriedades correspondem às propriedades e eventos dessa classe.

11.2. Inicialização de um documento MXML
Todo documento MXML assim como um documento XML podem ser aberto com uma tag especial que define alguns valores básicos para o documento:
<?xml version="1.0" encoding="utf-8"?>
Essa declaração não é obrigatórico, da mesma forma que acontece com a linguagem XML, porém ela evita algum erro no processamento devido ao tipo de seqüência de caracteres que será usada ou referentes a diferentes versões de especificação de documentos MXML.

<?xml é uma marcação de início.
?> é uma marcação de fim.

O atributo version é obrigatório se a taga <?xml for declarada, determinando a versão do documento XML.
A informação da versão é importante para o processamento do documento, pois novas versões podem conter recursos, definições de estruturas, ou mesmo formatações suportadas pelas versôes atuais.
O atributo encoding também é opcional e indica qual será  a seqüência de caracteres usada no documento MXML, lembrando que em português o valor deve ser ISO-8859-1, o padrão HTML 5 é utf-8 na apostila sobre HTML esse assunto já foi explicado, a vantagem deste último padrão é que o caractere inserido na página não precisa de codificação especial, isto é, o que for digitado aparecerá na tela da mesma forma.

Exemplo:
1) Abra o FlashDevelop
2) Crie o arquivo Action Script Exemplo2.mxml
Nenu Fle > New > MXML Document > Exemplo2
3) Recorte e cole o código fonte baixo:

Arquivo: Exemplo2.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Label x="20" y="20" text="Bem vindo ao Flex" mouseDownEffect="WipeRight"/>
</mx:Application>

4) Compilação e execução:
Menu Tools > Flash Tools > Build Current File
Deverá aparecer o texto no Flash Player, afim de que o leitor possa testar a aplicação, será incluido o programa já compilado nessa própia página.
5) Inclusão do arquivo gerado, exemplo2.swf, nesta própria página.
Para inserir um arquivo com extensão .swf, deve-se utilizar a tag <object> no corpo do código html, conforme configuração abaixo:
 <html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title></title>
</head>
<body>
<object data="swf\exemplo2.swf" type="application/x-shockwave-flash" height="100" width="200">
  <param value="swf\exemplo2.swf" name="movie">
  <param value="transparent" name="wmode">
</object>
</body>
</html>

6) Dê um clique no texto abaixo para verificar o efeito que foi programado.

11.3. TextArea
É um componente que além de suportar textos simples (String) ele também suporta o Text Layout Framework uma das mudanças da nova arquitetura Spark.

Exemplo:
1) Abra o FlashDevelop
2) Crie o arquivo MXML
Nenu Fle > New > MXML Document > projflex1
3) Recorte e cole o código fonte baixo:

Arquivo: projflex1.mxml
<?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">
    <fx:Script>
        <![CDATA[
            import spark.events.TextOperationEvent;
 
            protected function meuTexto_changeHandler(event:TextOperationEvent):void
            {
                meuTexto.textDisplay.scrollToRange(0,0);
            }
 
        ]]>
    </fx:Script>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:TextArea id="meuTexto" x="10" y="10" minWidth="150" minHeight="150" prompt="Cole algum texto aqui" change="meuTexto_changeHandler(event)"/>
</s:Application>

4) Compilação e execução:
Menu Tools > Flash Tools > Build Current File
A figura abaixo mostra como deverá aparecer o campo texto no Flash Player, afim de que o leitor possa testar a aplicação, será incluido o programa já compilado nessa própia página no item 5 e pondendo testá-lo no item 6.

5) Inclusão do arquivo gerado, projflex1.swf, nesta própria página.
Para inserir um arquivo com extensão .swf, deve-se utilizar a tag <object> no corpo do código html, conforme configuração abaixo:
 <html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title></title>
</head>
<body>
<object data="swf\projflex1.swf" type="application/x-shockwave-flash" height="100" width="200">
  <param value="swf\projflex1.swf" name="movie">
  <param value="transparent" name="wmode">
</object>
</body>
</html>
file:///C:/projetoFlex/p7/efeitoDinamico.swf
Obs:
Esta página está em um diretório acima do diretório swf que contém os arquivos .swf.

6) Insira qualquer texto no quadro abaixo para testá-lo.

11.4. Menu Drop Down
Este tipo de menu forneçe uma caixa com várias opções de escolha, sendo que apenas uma será escolhida.

Exemplo1:
1) Abra o FlashDevelop
2) Crie o arquivo MXML
Nenu Fle > New > MXML Document > menuDropDown1
3) Recorte e cole o código fonte baixo:

Arquivo: menuDropDown1.mxml
<?xml version="1.0" encoding="utf-8"?>
<!-- dpcontrols\sparkdpcontrols\SparkDDSimple.mxml -->
<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">

    <s:DropDownList width="140">
        <mx:ArrayCollection>
            <fx:String>Endereço1</fx:String>
            <fx:String>Endereço2</fx:String>
            <fx:String>Endereço3</fx:String>
            <fx:String>Endereço4</fx:String>
            <fx:String>Endereço5</fx:String>
        </mx:ArrayCollection>
    </s:DropDownList>
</s:Application>

4) Compilação e execução:
Menu Tools > Flash Tools > Build Current File
A figura abaixo mostra como deverá aparecer no Google Chrome, afim de que o leitor possa testar a aplicação, será incluido o programa já compilado nessa própia página conforme item 5 e pondendo testá-lo no item 6.


5) Inclusão do arquivo gerado, menuDropDown1.mxml.swf, nesta própria página.
Para inserir um arquivo com extensão .swf, deve-se utilizar a tag <object> no corpo do código html, conforme configuração abaixo:
 <html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title></title>
</head>
<body>
<object data="swf\menuDropDown1.swf" type="application/x-shockwave-flash" height="100" width="200">
  <param value="swf\menuDropDown1.swf" name="movie">
  <param value="transparent" name="wmode">
</object>
</body>
</html>

Clique no menu abaixo para testá-lo.

Obs:
Esta página está em um diretório acima do diretório swf que contém os arquivos .swf.

Exemplo2:
1) Abra o FlashDevelop
2) Crie o arquivo MXML
Nenu Fle > New > MXML Document > menuDropDown2
3) Recorte e cole o código fonte baixo:

Arquivo: menuDropDown2.mxml
<?xml version="1.0" encoding="utf-8"?>
<!-- dpcontrols\sparkdpcontrols\SparkDDSimple.mxml -->
<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">

    <s:DropDownList width="200" prompt="Selecione um endereço">
        <mx:ArrayCollection>
            <fx:String>Endereço1</fx:String>
            <fx:String>Endereço2</fx:String>
            <fx:String>Endereço3</fx:String>
            <fx:String>Endereço4</fx:String>
            <fx:String>Endereço5</fx:String>
        </mx:ArrayCollection>
    </s:DropDownList>
</s:Application>

4) Compilação e execução:
Menu Tools > Flash Tools > Build Current File
Afim de que o leitor possa testar a aplicação, será incluido o programa já compilado nessa própia página conforme item 5 e pondendo testá-lo no item 6.

5) Inclusão do arquivo gerado, menuDropDown2.mxml.swf, nesta própria página.
Para inserir um arquivo com extensão .swf, deve-se utilizar a tag <object> no corpo do código html, conforme configuração abaixo:
 <html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title></title>
</head>
<body>
<object data="swf\menuDropDown2.swf" type="application/x-shockwave-flash" height="100" width="200">
  <param value="swf\menuDropDown2.swf" name="movie">
  <param value="transparent" name="wmode">
</object>
</body>
</html>

Clique no menu abaixo para testá-lo.

Exemplo3:
1) Abra o FlashDevelop
2) Crie o arquivo MXML
Nenu Fle > New > MXML Document > menuDropDown3
3) Recorte e cole o código fonte baixo:

Arquivo: menuDropDown3.mxml
<?xml version="1.0" encoding="utf-8"?>
<!-- dpcontrols\sparkdpcontrols\SparkDDSimpleSetSelectedIndex.mxml -->
<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">
    <s:layout>
        <s:VerticalLayout paddingLeft="10"
            paddingTop="10"/>
    </s:layout>

    <s:DropDownList width="140"
        selectedIndex="4">
        <mx:ArrayCollection>
            <fx:String>Endereço1</fx:String>
            <fx:String>Endereço2</fx:String>
            <fx:String>Endereço3</fx:String>
            <fx:String>Endereço4</fx:String>
            <fx:String>Endereço5</fx:String>
        </mx:ArrayCollection>
    </s:DropDownList>
</s:Application>

4) Compilação e execução:
Menu Tools > Flash Tools > Build Current File
Afim de que o leitor possa testar a aplicação, será incluido o programa já compilado nessa própia página conforme item 5 e pondendo testá-lo no item 6.

5) Inclusão do arquivo gerado, menuDropDown3.mxml.swf, nesta própria página.
Para inserir um arquivo com extensão .swf, deve-se utilizar a tag <object> no corpo do código html, conforme configuração abaixo:
 <html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title></title>
</head>
<body>
<object data="swf\menuDropDown3.swf" type="application/x-shockwave-flash" height="100" width="200">
  <param value="swf\menuDropDown3.swf" name="movie">
  <param value="transparent" name="wmode">
</object>
</body>
</html>

Clique no menu abaixo para testá-lo.

Exemplo4:
1) Abra o FlashDevelop
2) Crie o arquivo MXML
Nenu Fle > New > MXML Document > menuDropDown4
3) Recorte e cole o código fonte baixo:

Arquivo: menuDropDown5.mxml
<?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">

  <!-- <fx:Style source="/com/tutorialspoint/client/Style.css"/>-->

   <fx:Script>
      <![CDATA[
         import mx.collections.ArrayCollection;
         import spark.events.IndexChangeEvent;
         
         [Bindable]
         public var data:ArrayCollection = new ArrayCollection(
         [  
            {value:"1ª Cia"},
            {value:"2ª Cia"},
            {value:"3ª Cia"},
            {value:"4ª Cia"},
            {value:"Cia Força Tática"},
            {value:"27º BPM/M"}   
         ]               
         );

         protected function dropDownList_changeHandler
           (event:IndexChangeEvent):void
         {
         
            ddlSelectedItem.text=dropDownList.selectedItem.value;
          
         }

      ]]>
   </fx:Script>
   <s:VGroup width="100" height="50" horizontalAlign="left"
      verticalAlign="bottom">
               <s:Label id="ddlSelectedItem"
                  text="{dropDownList.selectedItem.value}" fontWeight="bold"/>
</s:VGroup >
    
                      
            <s:DropDownList  id="dropDownList" dataProvider="{data}"
               width="150" change="dropDownList_changeHandler(event)"
               selectedIndex="0" labelField="value"/>                      
 
</s:Application>

4) Compilação e execução:
Menu Tools > Flash Tools > Build Current File
Afim de que o leitor possa testar a aplicação, será incluido o programa já compilado nessa própia página conforme item 5 e pondendo testá-lo no item 6.

5) Inclusão do arquivo gerado, menuDropDown4.swf, nesta própria página.
Para inserir um arquivo com extensão .swf, deve-se utilizar a tag <object> no corpo do código html, conforme configuração abaixo:
 <html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title></title>
</head>
<body>
<object data="swf\menuDropDown4.swf" type="application/x-shockwave-flash" height="100" width="200">
  <param value="swf\menuDropDown4.swf" name="movie">
  <param value="transparent" name="wmode">
</object>
</body>
</html>

Clique no menu abaixo para testá-lo.

12. Flex 4 (Gumbo)
O Flex 4 é uma evolução muito significativa no desenvolvimento da tecnologia Adobe Flex. Não se trata apenas da correção de bugs e criação de novas funcionalidades, mas da evolução de conceitos que tornarão o Flex uma ferramenta mais dinâmica e poderosa.
Novas ferramentas e nova arquitetura foram criadas para que o Design de uma aplicação fosse otimizada.  Novos tipos de componentes também fazem parte desta evolução, sendo que estes possuem uma estrutura melhorada de forma a atender melhor a criação de estilos e a sua manipulação de design.
Produtividade: melhorias na performance do novo Flex Builder 4, que agora passa a se chamar Flash Builder 4. Destas melhorias podemos citar a criação automática de eventos, novas janelas de visualização de dados, e novas formas de realizar DataBind dos componentes, principalmente se você estiver utilizando ColdFusion.
Evolução: com o novo Flash Player 10, o framework Flex 4 apresenta novos recursos para trabalhar principalmente com o suporte das novas funcionalidades do Player.
Separando as mudanças de uma forma mais significativa, temos:

12.1. NameSpaces
Vemos agora a criação de 3 namespaces.
O mx é o mesmo do Flex 3 (sendo que muitos foram substituídos), contém todos os componentes do Flex mx * componentes pacotes, gráficos flexível e dados de visualização;
O s é relativo aos componentes Spark (ignição); e
O fx contém os elementos de alto nível linguagem ActionScript.

O Flex 4 não suporta mais a "library ://ns.adobe.com/flex/halo" namespace componente.
Componentes MX deve ser referenciado usando o namespace "library://ns.adobe.com/flex/mx".

Exemplo:
<?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="1024" minHeight="768">
</s:Application>

Algumas marcas estão disponíveis somente em MXML. O compilador Flex implementa essas marcas; portanto, elas não estão disponíveis no ActionScript.
MarcaDescrição
fx:BindingUse a marca <fx:Binding> para vincular dados de um objeto a outro objeto.
fx:ComponentUse a marca <fx:Component> para definir uma célula em linha ou um editor de célula em um arquivo MXML.
fx:DeclarationsUse a marca <fx:Declarations> para declarar as propriedades non-default e non-visual da classe atual.
fx:DefinitionUse uma ou mais marcas <fx:Definition> dentro da marca <fx:Library> para definir os filhos gráficos que você poderá então usar em outras partes do aplicativo.
fx:DesignLayerA marca <fx:DesignLayer> é somente para uso interno.
fx:LibraryUse a marca <fx:Library> para declarar as propriedades non-default e non-visual da classe atual.
fx:MetadataUse a marca <fx:Metadata> para inserir marcas de metadados em um arquivo MXML.
fx:ModelUse a marca <fx:Model> para declarar um modelo de dados em MXML.
fx:PrivateUse a marca <fx:Private> para fornecer metainformações sobre o documento MXML ou FXG.
fx:ReparentUse a marca <fx:Reparent> para alterar o contêiner pai de um componente como parte de uma alteração do estado de exibição.
fx:ScriptUse a marca <fx:Script> para definir blocos de código ActionScript.
fx:StyleUse a marca <fx:Style> para definir estilos que se aplicam ao documento atual e seus filhos.
fx:XMLVocê pode declarar um modelo de dados em formato XML em MXML em uma marca <fx:XML>.
fx:XMLListÉ possível criar um objeto E4X XMLList a partir de um modelo em formato de texto em MXML em uma marca <fx:XMLList>.
Novas classes e elementos de classe adicionados para Adobe® Flash® Player 12
RuntimesClasseTipoElemento
Adobe® Flash® Player 12flash.display3D.Context3DBufferUsageNova classeContext3DBufferUsage
Adobe® Flash® Player 12flash.display.Stage3DNovo métodorequestContext3DMatchingProfiles
Adobe® Flash® Player 12flash.display.GraphicsPathNovo métodocubicCurveTo
Adobe® Flash® Player 12flash.display3D.Context3DNova propriedadeprofile
Adobe® Flash® Player 12flash.display3D.Context3DBufferUsageNovas constantesDYNAMIC_DRAW
STATIC_DRAW
12.1.1. mx
O “namespace” mx, no Flex 3, vem do package www.adobe.com/2006/mxml.
Já no Flash Builder 4 vem do package library://ns.adobe.com/flex/halo. Para haver compatibilidade com o Flex 3, é necessária a utilização deste novo package.

Exemplo:
1) Abra o FlashDevelop
2) Crie o arquivo MXML
Nenu Fle > New > MXML Document > teste1
3) Recorte e cole o código fonte baixo:

Arquivo: nameSpaces2.mxml
<?xml version="1.0"?>
<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">
<mx:TextInput id="txData" text="texto..." x="10" y="10"/>
<s:Button label="Enviar" x="220" y="10"/>
</s:Application>

4) Compilação e execução:
Menu Tools > Flash Tools > Build Current File


5) Incorporação do arquivo nameSpaces2.swf nesta página:
Adicione o código abaixo no corpo da página para o teste em tempo real. Observe que o arquivo nameSpaces2.swf foi criado com a compilação do arquivo nameSpaces2.mxml.
...
<body>
<object data="swf\nameSpaces2.swf" type="application/x-shockwave-flash" height="50" width="300">
  <param value="swf\nameSpaces2.swf" name="movie">
  <param value="transparent" name="wmode">
</object>
</body>
...


12.1.2. Spark
O tema Spark teve sua  arquitetura construída com base na antiga arquitetura  conhecida como Halo. O Flash Builder 4 oferece a  você a opção de utilizá-la nos seus projetos com o Flex 4.
A arquitetura do Spark nos fornece um mecanismo muito  mais definido e que conduz os desenvolvedores e designers a  trabalhar em conjunto para criar as suas aplicações.
O Spark tem vários  componentes. Entre eles, estão novos atributos e melhorias  em componentes existentes, criando uma nova era de  componentes. O Spark também melhorou muito os recursos de  animação e efeitos. O Spark foi desenvolvido com base no “namespace”.

Exemplo:
1) Abra o FlashDevelop
2) Crie o arquivo MXML
Nenu Fle > New > MXML Document > nameSpaces1
3) Recorte e cole o código fonte baixo:

Arquivo: nameSpaces1.mxml
<?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">

    <fx:Declarations>
        <s:Fade id="fadeOut"
                target="{tgt}"
                alphaFrom="1"
                alphaTo="0" />
    </fx:Declarations>
    <s:Button id="tgt" />
    <s:Button label="Click e veja o efeito"
              click="fadeOut.play()"
              x="80" />
</s:Application>

4) Compilação e execução:
Menu Tools > Flash Tools > Build Current File

5) Incorporação do arquivo nameSpaces1.swf nesta página:
Adicione o código abaixo no corpo da página para o teste em tempo real. Observe que o arquivo nameSpaces1.swf foi criado com a compilação do arquivo nameSpaces1.mxml.
...
<body>
<object data="swf\nameSpaces1.swf" type="application/x-shockwave-flash" height="50" width="300">
  <param value="swf\nameSpaces1.swf" name="movie">
  <param value="transparent" name="wmode">
</object>
</body>
...


Os novos componentes Spark substituiriam alguns componentes mx, dentre eles o vbox, hbox e canvas, que agora pertencem a um novo componente chamado group. A definição sobre a posição dos elementos, se eles vão ficar na vertical ou na horizontal, depende exclusivamente da propriedade layout, veja:

VBOX:

<s:Group x="98" y="96" width="245" height="195">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
      
        <s:Button label="Button"/>
        <s:Button label="Button"/>
</s:Group>

TILE:

<s:Group x="98" y="96" width="245" height="195" >
        <s:layout>
            <s:TileLayout/>
        </s:layout>
        <s:Button label="Button"/>
        <s:Button label="Button"/>
        <s:Button label="Button"/>
        <s:Button label="Button"/>
        <s:Button label="Button"/>
        <s:Button label="Button"/>
   </s:Group>

Exemplo:
<?xml version="1.0" encoding="utf-8"?>
<!-- Groups with different layouts and layout properties -->
<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">


    <s:layout>
        <s:VerticalLayout />
    </s:layout>


    <!--HORIZONTAL LAYOUT: setting property layout-->
    <s:Group>

        <s:layout>
            <s:HorizontalLayout paddingLeft="100"
                                gap="20" />
        </s:layout>

        <s:Button label="One" />
        <s:Button label="Two" />
        <s:Button label="Three" />
        <s:Button label="Four" />

    </s:Group>


    <mx:HRule width="100%" />

    <!--HORIZONTAL LAYOUT:  alignment-->
    <s:Group width="100%">

        <s:layout>
            <s:HorizontalLayout horizontalAlign="center" />
        </s:layout>

        <s:Button label="One" />
        <s:Button label="Two" />
        <s:Button label="Three" />
        <s:Button label="Four" />

    </s:Group>




    <!--VERTICAL LAYOUT-->
    <mx:HRule width="100%" />
    <s:Group width="200">

        <s:layout>
            <s:VerticalLayout />
        </s:layout>

        <s:Button label="A" />
        <s:Button label="B" />
        <s:Button label="C" />
        <s:Button label="D" />

    </s:Group>



    <!--VERTICAL LAYOUT: alignment-->
    <mx:HRule width="100%" />
    <s:Group width="200">

        <s:layout>
            <s:VerticalLayout horizontalAlign="right" />
        </s:layout>

        <s:Button label="A" />
        <s:Button label="B" />
        <s:Button label="C" />
        <s:Button label="D" />

    </s:Group>



    <!--TILE LAYOUT-->
    <mx:HRule width="100%" />
    <s:Group width="250">

        <s:layout>
            <s:TileLayout />
        </s:layout>

        <s:Button label="A" />
        <s:Button label="B" />
        <s:Button label="C" />
        <s:Button label="D" />
        <s:Button label="E" />
        <s:Button label="F" />
        <s:Button label="G" />
        <s:Button label="H" />
    </s:Group>



    <!--Use VGROUP -->
    <mx:HRule width="100%" />
    <s:VGroup width="200">

        <s:Button label="A" />
        <s:Button label="B" />
        <s:Button label="C" />
        <s:Button label="D" />

    </s:VGroup>

</s:Application>
----------------------------------------

<s:Panel
   Properties
    controlBarContent="null"
    controlBarLayout="HorizontalLayout"
    controlBarVisible="true"
    title=""
 
   Styles
    borderAlpha="0.5"
    borderColor="0"
    borderVisible="true"
    cornerRadius="0"
    dropShadowVisible="true"
   >
      ...
      child tags
      ...
  </s:Panel>

Suporte à criação de retângulos, quadrados, elipses,etc.

Uma das maiores atualizações do Flex 4 é a inclusão de diversos “artefatos” para o desenho de formas geométricas.

Exemplo:
1) Abra o FlashDevelop
2) Crie o arquivo MXML
Nenu Fle > New > MXML Document > canvas1
3) Recorte e cole o código fonte baixo:

Arquivo: canvas1.mxml
<?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"
               width="600"
               height="600">

    <!-- CIRCULO -->
    <s:Ellipse x="25"
               y="25"
               width="75"
               height="75">
        <!-- BORDA -->
        <s:stroke>
            <s:SolidColorStroke color="0x000000"
                                weight="2" />
        </s:stroke>
        <!-- PREENCHIMENTO -->
        <s:fill>
            <s:SolidColor color="0x891156" />
        </s:fill>
    </s:Ellipse>

    <!-- QUADRADO -->
    <s:Rect x="250"
            y="25"
            width="100"
            height="100">
        <!-- BORDA -->
        <s:stroke>
            <s:SolidColorStroke color="0x000000"
                                weight="2" />
        </s:stroke>
        <!-- PREENCHIMENTO -->
        <s:fill>
            <s:SolidColor color="0x891156" />
        </s:fill>
    </s:Rect>

    <!-- ELIPSE -->
    <s:Ellipse x="25"
               y="150"
               width="150"
               height="75">
        <!-- BORDA -->
        <s:stroke>
            <s:SolidColorStroke color="0x000000"
                                weight="2" />
        </s:stroke>
        <!-- PREENCHIMENTO -->
        <s:fill>
            <s:SolidColor color="0x891156" />
        </s:fill>
    </s:Ellipse>

    <!-- RETANGULO -->
    <s:Rect x="250"
            y="150"
            width="250"
            height="50">
        <!-- BORDA -->
        <s:stroke>
            <s:SolidColorStroke color="0x000000"
                                weight="2" />
        </s:stroke>
        <!-- PREENCHIMENTO -->
        <s:fill>
            <s:SolidColor color="0x891156" />
        </s:fill>
    </s:Rect>

    <!-- formas complexas -->
    <!-- TRIANGULO -->
    <s:Path x="-25"
            y="200"
            data="
            M 50 200
            L 150 50
            L 250 200
            L 50 200 ">
        <!-- BORDA -->
        <s:stroke>
            <s:SolidColorStroke color="0x000000"
                                weight="2" />
        </s:stroke>
        <!-- PREENCHIMENTO -->
        <s:fill>
            <s:SolidColor color="0x891156" />
        </s:fill>
    </s:Path>

    <!-- POLIGONO -->
    <s:Path x="250"
            y="75"
            data="
            M 50 200
            L 100 150
            L 200 150
            L 250 200
            L 250 300
            L 200 350
            L 100 350
            L 50 300
            L 50 200">
        <!-- BORDA -->
        <s:stroke>
            <s:SolidColorStroke color="0x000000"
                                weight="2" />
        </s:stroke>
        <!-- PREENCHIMENTO -->
        <s:fill>
            <s:SolidColor color="0x891156" />
        </s:fill>
    </s:Path>

    <!-- ABSTRATO -->
    <s:Path x="-50"
            y="360"
            data="
            M 100 100
            Q 150 50 200 100
            Q 250 150 300 100
            L 600 100
            L 600 200
            L 150 200
            Q 100 200 100 150
            L 100 100">
        <!-- BORDA -->
        <s:stroke>
            <s:SolidColorStroke color="0x000000"
                                weight="2" />
        </s:stroke>
        <!-- PREENCHIMENTO -->
        <s:fill>
            <s:SolidColor color="0x891156" />
        </s:fill>
    </s:Path>
</s:Application>

4) Compilação e execução:
Menu Tools > Flash Tools > Build Current File

5) Incorporação do arquivo canvas1.swf nesta página:
Adicione o código abaixo no corpo da página para o teste em tempo real. Observe que o arquivo canvas1.swf foi criado com a compilação do arquivo canvas1.mxml.
...
<body>
<object data="swf\canvas1.swf" type="application/x-shockwave-flash" height="600" width="600">
  <param value="swf\canvas1.swf" name="movie">
  <param value="transparent" name="wmode">
</object>
</body>
...




12.2. Declarações
Uma boa ideia do Flex 4 é fazer o desenvolvedor  separar o que é visível e o que não é visível para o designer,
separando por declarações, que tratam o que não vai ser  mostrado visualmente. Assim, o SDK do Flex 4 utiliza a
tag <fx:Declarations>, que nos permite separar nosso  código da forma exemplificada:
<fx:Declarations>
   <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

Esta Tag permite que possamos criar novas propriedades dentro de um componente. Por exemplo, suponha um botão, e queremos que ele tenha uma propriedade chamada “LabelDefault”. Então criamos o seguinte componente:

<?xml version="1.0" encoding="utf-8"?>
<!-- language/MyButton.mxml -->
 <s:Button
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/halo"
    xmlns:s="library://ns.adobe.com/flex/spark"
>
<!Propriedades comuns são declaradas como Tags normais, dentro do Button -->
     <s:color>Red</s:color>
     <s:fontSize>16</s:fontSize>
    
      <!Propriedades customizadas usam a tag Declarations
-->
     <fx:Declarations>
          <fx:String id="LabelDefault">Clique aqui</fx:String>
     </fx:Declarations>
Desta forma, quando utilizamos este botão, podemos fazer assim:

<?xml version="1.0" encoding="utf-8"?>
<!-- language/MainApp.mxml -->
 <s:Application
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/halo"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:myComps="*"
>
     <myComps:MyButton id="b1" label="{b1.LabelDefault}"/>
</s:Application>
Fim do mx:VBox, mx:Canvas, MS:Tile, entre outros

Os novos componentes Spark substituiriam alguns componentes mx, dentre eles o vbox, hbox e canvas, que agora pertencem a um novo componente chamado group. A definição sobre a posição dos elementos, se eles vão ficar na vertical ou na horizontal, depende exclusivamente da propriedade layout, veja

VBOX:

<s:Group x="98" y="96" width="245" height="195">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
      
        <s:Button label="Button"/>
        <s:Button label="Button"/>

</s:Group>
TILE:
A nova Tag <declarations>

Esta Tag permite que possamos criar novas propriedades dentro de um componente. Por exemplo, suponha um botão, e queremos que ele tenha uma propriedade chamada “LabelDefault”. Então criamos o seguinte componente:.

<?xml version="1.0" encoding="utf-8"?>
<!-- language/MyButton.mxml -->
 <s:Button
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/halo"
    xmlns:s="library://ns.adobe.com/flex/spark"
>
<!Propriedades comuns são declaradas como Tags normais, dentro do Button -->
     <s:color>Red</s:color>
     <s:fontSize>16</s:fontSize>
    
      <!Propriedades customizadas usam a tag Declarations
-->
     <fx:Declarations>
          <fx:String id="LabelDefault">Clique aqui</fx:String>
     </fx:Declarations>
Desta forma, quando utilizamos este botão, podemos fazer assim:

<?xml version="1.0" encoding="utf-8"?>
<!-- language/MainApp.mxml -->
 <s:Application
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/halo"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:myComps="*"
>
     <myComps:MyButton id="b1" label="{b1.LabelDefault}"/>
</s:Application>
Fim do mx:VBox, mx:Canvas, MS:Tile, entre outros

12.3. Processando ActionScript em scripts MXML

As tags CDATA tem seu conteúdo ignorado pelo MXML. Seu conteúdo é normalmente usado para adicionar código ActionScript. Com isso existe integração entre o código no interior da CDATA e no restante do MXML.

O fx / mx depende principalmente do namespace definido no cabeçalho do seu mxml.

Para o Flex4, o cabeçalho terá pelo menos três compomentes:
xmlns: fx = "http://ns.adobe.com/mxml/2009"
xmlns: s = "biblioteca ://ns.adobe.com/flex/spark"
xmlns: mx = "biblioteca :// ns.adobe.com/flex/mx"

Para o Flex3:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="absolute">
    <mx:Script>
        <![CDATA[
           
        ]]>
    </mx:Script>
</mx:Application>

Para o Flex4:
<?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" >
    <s:layout>
        <s:BasicLayout/>
    </s:layout>
    <fx:Script>
        <![CDATA[
           
        ]]>
    </fx:Script>
</s:Application>

Flex 4
Exemplo:
1) Abra o FlashDevelop
2) Crie o arquivo MXML
Nenu Fle > New > MXML Document > teste8
3) Recorte e cole o código fonte baixo:

Arquivo: teste8.mxml
<?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">

    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
           
        ]]>
    </fx:Script>
    <mx:TextInput id="nome" x="10" y="10" minWidth="150"/>
    <mx:Label id="meuLabel" x="10" y="50" minWidth="150"
              text="{nome.text}" />

</s:Application>

4) Compilação e execução:
Menu Tools > Flash Tools > Build Current File

5) Incorporação do arquivo teste8.swf nesta página:
Adicione o código abaixo no corpo da página para o teste em tempo real. Observe que o arquivo teste8.swf foi criado com a compilação do arquivo teste8.mxml.
...
<body>
<object data="swf\teste8.swf" type="application/x-shockwave-flash" height="600" width="600">
  <param value="swf\teste8.swf" name="movie">
  <param value="transparent" name="wmode">
</object>
</body>
...


Flex 3
Vejamos:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
function meuNome():String
{
var meuNome:String = "Carlos";
var meuSobreNome:String = "Brito";
return meuNome + " " + meuSobreNome;
}
]]>
</mx:Script>
<mx:Label id="meuLabel" text="{meuNome()} Recebido do ActionScript" />
</mx:Application>

Obs.: Veja que usamos {} para trazer propriedades e métodos vindos do ActionScript do interior da CDATA.

13. States
States é um conceito que inicialmente parece simples,  mas no Flex 3 não foi compreendido por todos. Com isso,
entre as melhorias do MXML 2009, estão os recursos que dão um maior apoio ao entendimento e ao trabalho com
os States. Agora, o desenvolvimento com States está mais flexível e  direto, dando um melhor controle à manipulação sua manipulação.

Exemplo:
1) Abra o FlashDevelop
2) Crie o arquivo MXML
Nenu Fle > New > MXML Document > states1
3) Recorte e cole o código fonte baixo:

Arquivo: states1.mxml
<?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">

    <s:states>
        <s:State name="state1" />
        <s:State name="state2" />
    </s:states>

    <s:Button label="alternar"
              x="0"
              y="5"
              click="currentState=(currentState=='state1')?'state2':'state1'" />

    <s:TextInput text="texto"
                 excludeFrom="state1"
                 x="120"
                 y="40" />
    <s:Button label="botao"
              x="120"
              y="5"
              includeIn="state1" />
</s:Application>

4) Compilação e execução:
Menu Tools > Flash Tools > Build Current File

5) Incorporação do arquivo states1.swf nesta página:
Adicione o código abaixo no corpo da página para o teste em tempo real. Observe que o arquivo states1.swf foi criado com a compilação do arquivo states1.mxml.
...
<body>
<object data="swf\states1.swf" type="application/x-shockwave-flash" height="300" width="400">
  <param value="swf\states1.swf" name="movie">
  <param value="transparent" name="wmode">
</object>
</body>
...


Exemplo com transitions
Criar os states:

<s:states>
    <s:State name="normal"/>
    <s:State name="login"/>
    <s:State name="logado"/>
</s:states>

E após criar estas states, podemos relacioná-los da seguinte forma:

<s:BorderContainer
    width="200"
    width.normal="80"
    height="150"
    right="50"
    y.normal="-120"
    y.logado="-120"
    y.login="10"
/>

A parte destacata em verde define a propriedade y do componente, de acordo com o state ativado.

TRANSITIONS
Transições estão diretamente ligadas aos states. Sempre que você quiser usar efeitos em conjunto com states, deverá usar transitions. Na transition, você cria o efeito. Veja o exemplo a seguir:

<s:transitions>
    <s:Transition>
        <s:Parallel>
            <s:Sequence>
                <s:Resize target="{caixa}"/>
                <s:Move target="{caixa}"/>
            </s:Sequence>
            <s:Fade targets="{[btnLogarOk,btnLogar, btnSair,lblHello]}"/>
        </s:Parallel>
    </s:Transition>
</s:transitions>

No exemplo acima, a tag <s:Transition> relaciona qualquer mudança de state na aplicação. Pode-se usar as propriedades toState e fromState para definir states específicos. Na definição da transition, criamos um efeito em paralelo (Parallel) seguido de um efeito em série (Sequence). O target destes efeitos estão relacionados ao componente cujo o id é “caixa”. O efeito Fade possui a propriedade targets, define os botões que sofrerão efeito de Fade.

Exemplo:
1) Abra o FlashDevelop
2) Crie o arquivo MXML
Nenu Fle > New > MXML Document > states2
3) Recorte e cole o código fonte baixo:

Arquivo: states2.mxml
<?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="300"
               minHeight="300">

    <s:creationComplete>
        <![CDATA[
            currentState = 'normal';
        ]]>
    </s:creationComplete>

    <s:states>
        <s:State name="normal" />
        <s:State name="login" />
        <s:State name="logado" />
    </s:states>

    <s:transitions>
        <s:Transition>
            <s:Parallel>
                <s:Sequence>
                    <s:Resize target="{caixa}" />
                    <s:Move target="{caixa}" />
                </s:Sequence>
                <s:Fade targets="{[btnLogarOk,btnLogar, btnSair,lblHello]}" />
            </s:Parallel>
        </s:Transition>
    </s:transitions>

    <fx:Declarations>
    </fx:Declarations>

    <s:BorderContainer id="caixa"
                       cornerRadius="5"
                       backgroundColor="#eeeeee"
                       borderColor="#aaaaaa"
                       width="200"
                       width.normal="80"
                       height="150"
                       left="10"
                       y.normal="-120"
                       y.logado="-120"
                       y.login="10">

        <s:Button id="btnLogar"
                  label="Logar"
                  bottom="5"
                  right="5"
                  includeIn="normal"
                  click="{this.currentState='login'}" />

        <s:Button id="btnLogarOk"
                  label="Ok"
                  bottom="5"
                  right="5"
                  includeIn="login"
                  click="{this.currentState='logado'}" />

        <s:Button id="btnSair"
                  label="Sair"
                  bottom="5"
                  right="5"
                  includeIn="logado"
                  click="{this.currentState='normal'}" />

        <s:Label id="lblHello"
                 text="Ola Fulano"
                 bottom="5"
                 left="5"
                 includeIn="logado" />

        <s:Label top="10"
                 left="10"
                 text="Email:" />

        <s:TextInput top="25"
                     left="10"
                     right="10"
                     text="" />

        <s:Label top="60"
                 left="10"
                 text="Senha:" />

        <s:TextInput top="75"
                     left="10"
                     right="10"
                     text="" />

    </s:BorderContainer>

</s:Application>

4) Compilação e execução:
Menu Tools > Flash Tools > Build Current File

5) Incorporação do arquivo states2.swf nesta página:
Adicione o código abaixo no corpo da página para o teste em tempo real. Observe que o arquivo states2.swf foi criado com a compilação do arquivo states2.mxml.
...
<body>
<object data="swf\states2.swf" type="application/x-shockwave-flash" height="200" width="300">
  <param value="swf\states2.swf" name="movie">
  <param value="transparent" name="wmode">
</object>
</body>
...



14. Efeitos no Flex 4 – Move, Fade, Parallel, Easing, Bounce
Os efeitos devem ser utilizado lenvando em consideração a funcionalidade, estética, organização, facilidade de acesso, navegabilidade através de menus, etc

No Flex 4 não podemos mais utilizar as propriedades MoveEffect, ResizeEffect.. entre, devendo atribuir cada efeito diretamente na declaração do documento mxml.
Isso significa que toda a descrição de um efeito deve estar contida na tag fx:Declarations.

EFEITO MOVE
Este efeito é responsável em mover componentes na tela. Uma simples aplicação para ela é, por exemplo, uma tela de login:

Exemplo:
1) Abra o FlashDevelop
2) Crie o arquivo MXML
Nenu Fle > New > MXML Document > move1
3) Recorte e cole o código fonte baixo:

Arquivo: move1.mxml
<?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="300"
               minHeight="300">

    <fx:Declarations>
        <s:Move id="MoveDown"
                target="{login}"
                yFrom="-50"
                yTo="50" />
        <s:Move id="MoveUp"
                target="{login}"
                yFrom="50"
                yTo="-100" />
    </fx:Declarations>

    <s:creationComplete>
        <![CDATA[
            MoveDown.play();
        ]]>
    </s:creationComplete>

    <s:Panel id="login"
             title="Login"
             width="100"
             height="100"
             x="10">
        <s:Button label="ok"
                  x="20"
                  y="20">
            <s:click>
                <![CDATA[
                    MoveUp.play();
                ]]>
            </s:click>
        </s:Button>
    </s:Panel>

</s:Application>

4) Compilação e execução:
Menu Tools > Flash Tools > Build Current File

5) Incorporação do arquivo move1.swf nesta página:
Adicione o código abaixo no corpo da página para o teste em tempo real. Observe que o arquivo move1.swf foi criado com a compilação do arquivo move1.mxml.
...
<body>
<object data="swf\move1.swf" type="application/x-shockwave-flash" height="50" width="300">
  <param value="swf\move1.swf" name="movie">
  <param value="transparent" name="wmode">
</object>
</body>
...


Neste simples exemplo, criamos dois efeitos chamados de MoveDown e MoveUp. O efeito Move possui as propriedades yFrom (de: origem), yTo (para: destino) e , que descrevem a animação do efeito de mover, da coordenada y de origem e da coordenada y de destino, um pode ser o inverso do outro caso se pretenta fazer um movimento de ida e volta pelo mesmo caminho. O mesmo vale para xFrom e xTo. Outra propriedade é o target, que informa o alvo em que o efeito será realizado. Neste caso o target é o panel criado.

Para realizarmos o efeito, usamos o método play(). Ele é feito no creationComplete da aplicação e no click do botão.

APLICANDO BOUNCE
Bom, o efeito acima é muito simples, e possivelmente você não gostou dele. Você quer dar mais “efeito ao efeito” e para isso existem os efeitos do tipo bounce. Esta técnica aplica um efeito de “mola” no componente, e é ativado através do efeito s:Bounce do Flex 4.  Veja:

Exemplo:
1) Abra o FlashDevelop
2) Crie o arquivo MXML
Nenu Fle > New > MXML Document > move2
3) Recorte e cole o código fonte baixo:

Arquivo: move2.mxml
<?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="300"
               minHeight="300">

    <fx:Declarations>
        <s:Bounce id="bounceEasing" />
        <s:Move id="MoveDown"
                target="{login}"
                yFrom="-50"
                yTo="50"
                easer="{bounceEasing}"
                duration="2000" />
        <s:Move id="MoveUp"
                target="{login}"
                yFrom="50"
                yTo="-100" />
    </fx:Declarations>

    <s:creationComplete>
        <![CDATA[
            MoveDown.play();
        ]]>
    </s:creationComplete>

    <s:Panel id="login"
             title="Login"
             width="100"
             height="100"
             x="10">
        <s:Button label="ok"
                  x="20"
                  y="20">
            <s:click>
                <![CDATA[
                    MoveUp.play();
                ]]>
            </s:click>
        </s:Button>
    </s:Panel>
</s:Application>

4) Compilação e execução:
Menu Tools > Flash Tools > Build Current File

5) Incorporação do arquivo move2.swf nesta página:
Adicione o código abaixo no corpo da página para o teste em tempo real. Observe que o arquivo move2.swf foi criado com a compilação do arquivo move2.mxml.
...
<body>
<object data="swf\move2.swf" type="application/x-shockwave-flash" height="50" width="300">
  <param value="swf\move2.swf" name="movie">
  <param value="transparent" name="wmode">
</object>
</body>
...


Neste exemplo, criamos o efeito Bounce e aplicamos ele no efeito MoveDown, através da propriedade easer. Utilizamos também a propriedade duration para definir a duração do movimento, em milissegundos.

APLICANDO EFEITOS SIMULTÂNEOS
Podemos aplicar efeitos ao mesmo tempo em um componente através da tag Parallel (Paralelo). O Exemplo a seguir ilustra como combinar o efeito de Fade (aparecer) com o Move:

Exemplo:
1) Abra o FlashDevelop
2) Crie o arquivo MXML
Nenu Fle > New > MXML Document > move3
3) Recorte e cole o código fonte baixo:

Arquivo: move3.mxml

<?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="300"
               minHeight="300">

    <fx:Declarations>
        <s:Bounce id="bounceEasing" />
        <s:Parallel id="MoveDown"
                    target="{login}">
            <s:Move yFrom="-50"
                    yTo="50"
                    easer="{bounceEasing}"
                    duration="2000" />
            <s:Fade alphaFrom="0"
                    alphaTo="1"
                    duration="2000" />
        </s:Parallel>
        <s:Move id="MoveUp"
                target="{login}"
                yFrom="50"
                yTo="-100" />
    </fx:Declarations>

    <s:creationComplete>
        <![CDATA[
            MoveDown.play();
        ]]>
    </s:creationComplete>

    <s:Panel id="login"
             title="Login"
             width="100"
             height="100"
             x="10">
        <s:Button label="ok"
                  x="20"
                  y="20">
            <s:click>
                <![CDATA[
                    MoveUp.play();
                ]]>
            </s:click>
        </s:Button>
    </s:Panel>
</s:Application>

4) Compilação e execução:
Menu Tools > Flash Tools > Build Current File

5) Incorporação do arquivo move3.swf nesta página:
Adicione o código abaixo no corpo da página para o teste em tempo real. Observe que o arquivo move2.swf foi criado com a compilação do arquivo move2.mxml.
...
<body>
<object data="swf\move3.swf" type="application/x-shockwave-flash" height="50" width="300">
  <param value="swf\move3.swf" name="movie">
  <param value="transparent" name="wmode">
</object>
</body>
...



Neste exemplo, criamos a tag s:Parallel e já definimos o seu target. Inserimos então os efeitos Move e Fade. O Fade possui duas propriedades novas, alphaFrom e alphoTo. Alpha é o valor da transparência sendo que o valor 0 é totalmente transparente e o valor 1 é totalmente opaco.

APLICANDO TARGETS DINÂMICOS
Nos exemplos exibidos, sempre relacionamos o efeito ao componente. Ou seja, todos os efeitos faziam uma referência ao componente. Em determinados momentos, precisamos criar componentes dinâmicos no Flex, e para que possamos aplicar efeitos nestes componentes, precisamos definir um target dinâmico também. O método play que foi usado nos exemplos anteriores possui um parâmetro que aceita um array de componentes, que pode ser usado da seguinte forma:

NomeDoEfeito.play([componente1,componente2]);

Exemplo:
1) Abra o FlashDevelop
2) Crie o arquivo MXML
Nenu Fle > New > MXML Document > efeitoDinamico
3) Recorte e cole o código fonte baixo:

Arquivo: efeitoDinamico.mxml
<?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="200"
               minHeight="200">

    <fx:Declarations>
        <s:Bounce id="bounceEasing" />

        <s:Parallel id="MoveDown">
            <s:Move yFrom="-100"
                    yTo="200"
                    easer="{bounceEasing}"
                    duration="2000" />
            <s:Fade alphaFrom="0"
                    alphaTo="1"
                    duration="1000" />
        </s:Parallel>

        <s:Fade id="Sumir"
                alphaFrom="1"
                alphaTo="0"
                duration="500" />

    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayList;
           
            import mx.events.EffectEvent;
           
            private function OnClick(e:MouseEvent):void
            {
                Sumir.play([e.target as Button]);
            }
        ]]>
    </fx:Script>

    <s:Button label="Criar">
        <s:click>
            <![CDATA[
                var b:Button = new Button();
                b.x = Math.round(Math.random() * 300);
                b.label = b.x.toString();
                b.y = -100;
               
                b.addEventListener(MouseEvent.CLICK, OnClick);
               
                this.addElement(b);
                MoveDown.play([b]);
            ]]>
        </s:click>
    </s:Button>
</s:Application>

4) Compilação e execução:
Menu Tools > Flash Tools > Build Current File

5) Incorporação do arquivo move3.swf nesta página:
Adicione o código abaixo no corpo da página para o teste em tempo real. Observe que o arquivo efeitoDinamico.swf foi criado com a compilação do arquivo efeitoDinamico.mxml.
...
<body>
<object data="swf\efeitoDinamico.swf" type="application/x-shockwave-flash" height="300" width="400">
  <param value="swf\efeitoDinamico.swf" name="movie">
  <param value="transparent" name="wmode">
</object>
</body>
...



Neste exemplo, criamos botões dinâmicos que caem na tela. Ao clicar no botão, aplicamos um efeito de Fade para que tenhamos a sensação de que ele sumiu da tela, apesar dele continuar lá. Veja que usamos três efeitos agora, o primeiro é contido no Parallel (2 efeitos então) e o terceiro é um Fade para sumir o botão.

Ao clicar no botão “Criar”, criamos dinamicamente um botão e definimos o valor da coordenada x como um número randômico até 300. A coordenada y é –100, pois ainda vamos aplicar o efeito de movimento nele. Também adicionamos um listener no click do botão, executando o método OnClick. Este método irá executar o efeito de Fade.

Como os efeitos são realizados em componentes dinâmicos, temos que passá-lo como parâmetro do método play. Como este parâmetro é sempre um array, usamos os colchetes para simular um array com um elemento.

Atenção: Este exemplo serve apenas para ilustrar o processo. Veja que mesmo sumindo com os botões através do efeito fade, eles continuam lá, na memória.

Efeitos no Flex 4 – Move, Fade, Parallel, Easing, Bounce), repare que não definimos propriedades para os efeitos. Ou seja, não usamos xTo ou yFrom, nem alphaFrom ou alphaTo. Quem define essas propriedades é o próprio componente (na verdade é o trigger do efeito em relação ao componente…), na mudança de states. Ou seja, se em um determinado state um botão está visivel, e em outro state não está mais, o efeito será realizad

15. Problemas com datas
http://scrtchpad.wordpress.com/2008/07/29/handling-dates-across-different-geographies/

Exemplo:
       import flash.events.TimerEvent;
       import flash.utils.Timer;
       import mx.controls.Label;
       import mx.events.FlexEvent;
       public class DateTime extends Label  {
               private var dtNow:Date = new Date();
               private var timer:Timer;
               public function DateTime()  {
                       super();
                       this.addEventListener(FlexEvent.CREATION_COMPLETE,startTimer);
               }
               private function startTimer(e:FlexEvent):void{
                       timer = new Timer(1000);
                       timer.addEventListener(“timer”, atualizarHoras);
                       timer.start();
               }
               private function atualizarHoras(event:TimerEvent):void{
                       var now:Date = new Date();
                       var sMes:Array = new Array(
                               “Janeiro”,
                               “Fevereiro”,
                               “Março”,
                               “Abril”,
                               “Maio”,
                               “Junho”,
                               “Julho”,
                               “Agosto”,
                               “Setembro”,
                               “Outubro”,
                               “Novembro”,
                               “Dezembro”);
                       var sDiaSemana:Array = new Array(
                               “Domingo”,
                               “Segunda-Feira”,
                               “Terça-Feira”,
                               “Quarta-Feira”,
                               “Quinta-Feira”,
                               “Sexta-Feira”,
                               “Sábado”);
                       this.text = String(sDiaSemana[now.dayUTC] + ‘, ‘+
                               (dtNow.dateUTC < 10 ? “0″ + dtNow.dateUTC:dtNow.dateUTC) +’ de ‘+
                               sMes[now.getMonth()]+’ de ‘+
                               now.getFullYear() +’ – ‘+
                               (now.getHours()   < 10 ? “0″ + now.getHours()   :now.getHours())+’:'+
                               (now.getMinutes() < 10 ? “0″ + now.getMinutes() : now.getMinutes())+’:'+
                               (now.getSeconds() < 10 ? “0″ + now.getSeconds() :now.getSeconds())
                       );
               }
       }
Data: 26 de maio de 2011
Faça seu comentário
Datas – diferença entre datas
Um pequeno trecho de código

//Diferença entre dias
private function daysBetween(dt1:Date,dt2:Date):int {
return parseInt(((dt2.getTime()-dt1.getTime())/(1000 * 60 * 60 * 24)).toString());
//ou
return int(((dt2.getTime()-dt1.getTime())/(1000 * 60 * 60 * 24)).toString());
}

// data atual
var dataAtual:Date = new Date();
// data inicio ano
var inicioAno:Date = new Date(dataAtual.getFullYear(), 0, 1);
// dia no ano
var diaAno:Number = (data1.getTime() – data2.getTime()) / 24 / 60 / 60 / 1000;
//************ DATA DE HOJE MENOS 10 DIAS
var dataHoje:Date = new Date();
idDoCampo.selectedDate = new Date(dataHoje.getFullYear(),dataHoje.getMounth(), dataHoje.getDate()-10);
//************Hora – fuso horário
public function dataEnvio(data:Date):Date{
data.setMinutes(data.minutes – data.timezoneOffset);
return data;
}
Data: 26 de maio de 2011
Data: 4 de maio de 2011

16. Erros de execução da aplicação
Este capítulo não foi testado por mim, mesmo assim achei interessante constá-lo nessa apostila como um assunto a ser estudado futuramente.
Vou explicar como usar a API de Log para mostrar os logs de execução da aplicação e também como usar o componente TraceTarget, que é muito útil para poder recuperar as informações das chamadas para o servidor, facilitando a resolução de problemas.

No Flex temos duas opções para recuperar informações ou logs de execução de uma aplicação. Uma primeira maneira e a mais utilizada, é usar a função global trace('') para mostrar informações no console do FlashBuilder. Essa abordagem sempre requer que a aplicação esteja sendo executada em modo de debug, o que exige a instalação de um FlashPlayer versão debug. Lógico que para o ambiente de desenvolvimento isso não é um problema, já que a instalação do FlashBuilder já inclui a versão correta do FlashPlayer versão debug. Mais quando a aplicação está em produção, ou seja, quando não contamos com a versão de debug do FlashPlayer? Ai que entra a segunda opção.Na segunda opção vamos usar a API de Logging do Flex, que vai nos permitir delegar para uma classe a função de logar informações, seja usando o trace(''), primeira abordagem, ou até mesmo customizando a forma de apresentação. Esta abordagem também nos permite controlar o que é exibido, utilizado categorias e nível de log.

A API de Logging do Flex é muito simples de ser usada. Toda vez que queremos usa-la, estaremos envolvendo duas partes:

    O Logger, que possui os meios para enviar informações em diversos níveis (all, debug, info, warn, error e fatal) em uma determinada categoria para o Log Target. O Logger sempre irá implementar a interface ILogger, iremos utilizar a classe mx.logging.LogLogger, que já vem no SDK;
    O Log Traget, que será responsável por registrar a informação usando o trace('') ou outra implementação. Iremos utilizar a classe mx.logging.targets.TraceTarget.

Para ficar mais fácil de entender como usar a API, vamos imaginar que queremos logar quando a aplicação é pré-inicializado, inicializado e criado. Inicialmente iremos usar a função global trace('') e depois usar as classes de Log.

<?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"
               preinitialize="application_preinitializeHandler(event)"
               initialize="application_initializeHandler(event)"
               creationComplete="application_creationCompleteHandler(event)">
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import mx.controls.Alert;

            protected function application_preinitializeHandler(event:FlexEvent):void
            {
                trace('A Aplicação foi pré inicializada');
                Alert.show("A Aplicação foi pré inicializada");
            }

            protected function application_initializeHandler(event:FlexEvent):void
            {
                trace('A Aplicação foi inicializada');
                Alert.show("A Aplicação foi inicializada");
            }

            protected function application_creationCompleteHandler(event:FlexEvent):void
            {
                trace('A Aplicação foi criada');
                Alert.show("A Aplicação foi criada");
            }

        ]]>
    </fx:Script>
</s:Application>

Debugando a aplicação teremos no Console:

   
A Aplicação foi pré inicializada
A Aplicação foi inicializada
A Aplicação foi criada

Nota:
handle (ˈhændl): v. 1.  encarregar-se, My assistant will handle the travel arrangements (Meu assistente vai encarregar-se da organização da viagem), 2.  aguentar, suportar, 3. pegar, manusear, 4. to handle sth well/badly (conduzir algo bem/mal, lidar bem/mal com algo). s. 1.  (também door handle) maçaneta, 2. asa (de xícara), 3 cabo (de panela, frigideira), 4 alça (de bolsa, mala, etc.), 5. cabo (de faca, chave de fenda, vassoura).

Agora vamos ver como ficaria se usarmos a API:

    A primeira coisa que devemos fazer é criar um Logger. Para fazer isso devemos utilizar o método estático getLogger da classe mx.Logging.Log, fornecendo a categoriado log. A categoria é usada para poder filtrar o que será mostrado no Log Target e por padronização usamos o nome completo da classe. Neste exemplo a aplicação está no pacote default, porém para exemplificar vou usar a categoria br.com.dclick.LogginExample.

       
    private var log:ILogger = Log.getLogger("br.com.dclick.LogginExample");


    Agora é só usar os métodos de log da interface ILogger:

       
    {
        log.info('A Aplicação foi pré inicializada');
    }
    protected function application_initializeHandler(event:FlexEvent):void
    {
        log.warn('A Aplicação foi inicializada');
    }
    protected function application_creationCompleteHandler(event:FlexEvent):void
    {
        log.log(LogEventLevel.INFO, 'A Aplicação foi criada');
    }


    Perceba a utilização dos métodos info(), warn() e log() para registrar as informações. É possível usar tokens no log para serem trocados
    por informações. Todos os tokens devem ser representados por {} como por exemplo, {0}, {1} e etc…
 
       
    {
        log.info('A Aplicação foi pré inicializada em: {0}', [new Date().toDateString()]);
    }


    Se debugarmos a aplicação após a implementação, podemos ver que nada é apresentado no console. Isso acontece por que ainda não informamos qual será o Log Target.
    Agora vamos informar quem será o responsável por logar as informações, ou seja, vamos criar o Log Target.

    Vale lembrar que só é necessário declara-lo uma vez só na aplicação inteira. Ainda podemos customizar este target como por exemplo definir quais os levels que quero mostrar e se quero apresentar informações adicionais. Antes de mais nada, se debugarmos a aplicação teremos:
 
       
    A Aplicação foi pré inicializada em: Sat Mar 5 2011
    A Aplicação foi inicializada
    A Aplicação foi criada


    Customizando o TraceTarget:
    1
       
    <s:TraceTarget includeCategory="true" includeDate="true" includeLevel="true" includeTime="true" level="{LogEventLevel.INFO}" />

    Resultando em:
 
    3/5/2011 21:27:41.840 [INFO] br.com.dclick.LogginExample A Aplicação foi pré inicializada em: Sat Mar 5 2011
    3/5/2011 21:27:41.870 [WARN] br.com.dclick.LogginExample A Aplicação foi inicializada
    3/5/2011 21:27:42.013 [INFO] br.com.dclick.LogginExample A Aplicação foi criada


    Se prestarmos atenção no último exemplo, definimos que o level seria info, mais então porque o level warn foi logado? A API nos permite selecionar os níveis ALL –&gt DEBUG –> INFO –> WARN –> ERROR –> FATAL. Então se selecionarmos o nível INFO, tudo o que for INFO e menos abrangente será logado. Se selecionarmos o nível ERROR, somente logs com o nível ERROR e FATAL serão apresentados.
    Para exemplificar a utilização das categorias, vamos criar um componente adicional:

       
    <?xml version="1.0" encoding="utf-8"?>
    <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
             xmlns:s="library://ns.adobe.com/flex/spark"
             xmlns:mx="library://ns.adobe.com/flex/mx"
             preinitialize="group1_preinitializeHandler(event)" initialize="group1_initializeHandler(event)"
             creationComplete="group1_creationCompleteHandler(event)">
        <fx:Script>
            <![CDATA[
                import mx.events.FlexEvent;
                import mx.logging.ILogger;
                import mx.logging.Log;

                private var log:ILogger = Log.getLogger("br.com.dclick.components.MyComponent");
                protected function group1_preinitializeHandler(event:FlexEvent):void
                {
                    log.info("MyComponent preinitialized");
                }


                protected function group1_initializeHandler(event:FlexEvent):void
                {
                    log.info("MyComponent initialized");
                }


                protected function group1_creationCompleteHandler(event:FlexEvent):void
                {
                    log.info("MyComponent created");
                }

            ]]>
        </fx:Script>
        <fx:Declarations>
            <!-- Place non-visual elements (e.g., services, value objects) here -->
        </fx:Declarations>
    </s:Group>



    Vamos declarar o componente e debugar a aplicação.
    1
       
    <components:MyComponent />

    O resultado é:
       
    3/5/2011 21:38:56.878 [INFO] br.com.dclick.LogginExample A Aplicação foi pré inicializada em: Sat Mar 5 2011
    3/5/2011 21:38:56.909 [INFO] br.com.dclick.components.MyComponent MyComponent preinitialized
    3/5/2011 21:38:56.909 [INFO] br.com.dclick.components.MyComponent MyComponent initialized
    3/5/2011 21:38:56.910 [WARN] br.com.dclick.LogginExample A Aplicação foi inicializada
    3/5/2011 21:38:57.057 [INFO] br.com.dclick.components.MyComponent MyComponent created
    3/5/2011 21:38:57.057 [INFO] br.com.dclick.LogginExample A Aplicação foi criada



    Imagine que só queremos apresentar os logs com a categoria br.com.dclick.components.*
    1
       
    level="{LogEventLevel.INFO}" filters="['br.com.dclick.components.*']"/>;

    O Resultado é:
       
    3/5/2011 21:59:44.240 [INFO] br.com.dclick.components.MyComponent MyComponent preinitialized
    3/5/2011 21:59:44.241 [INFO] br.com.dclick.components.MyComponent MyComponent initialized
    3/5/2011 21:59:44.387 [INFO] br.com.dclick.components.MyComponent MyComponent created

    Poderia querer imprimir os logs com a categoria br.com.dclick.components.MyComponent e br.com.dclick.LogginExample:
    1
       
    level="{LogEventLevel.INFO}" filters="['br.com.dclick.components.MyComponent', 'br.com.dclick.LogginExample']"/>;

    O Resultado é:
       
    3/5/2011 22:02:40.929 [INFO] br.com.dclick.LogginExample A Aplicação foi pré inicializada em: Sat Mar 5 2011
    3/5/2011 22:02:40.960 [INFO] br.com.dclick.components.MyComponent MyComponent preinitialized
    3/5/2011 22:02:40.960 [INFO] br.com.dclick.components.MyComponent MyComponent initialized
    3/5/2011 22:02:40.961 [WARN] br.com.dclick.LogginExample A Aplicação foi inicializada
    3/5/2011 22:02:41.105 [INFO] br.com.dclick.components.MyComponent MyComponent created
    3/5/2011 22:02:41.106 [INFO] br.com.dclick.LogginExample A Aplicação foi criada



    Moral da história, para poder filtrar os logs pela categoria, usamos a propriedade filter, que recebe uma lista de strings com as categorias permitidas. A API também permite a utilização do curinga *, e por padrão o filtro é igual a *, ou seja, imprime tudo.
    A última coisa que gostaria de mostrar é como usuar o TraceTarget para logar informações sobre as chamadas remotas. Irei utilizar como exemplo um HttpService consumindo o rss do Globo Esporte.

       
    <?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"
                   creationComplete="application_creationCompleteHandler(event)">
        <fx:Script>
            <![CDATA[
                import mx.events.FlexEvent;
                protected function application_creationCompleteHandler(event:FlexEvent):void
                {
                    rss.send();
                }

            ]]>
        </fx:Script>

        <fx:Declarations>
            <s:TraceTarget />
            <s:HTTPService id="rss" url="http://globoesporte.globo.com/dynamo/rss2.xml" />
        </fx:Declarations>

    </s:Application>


    No console podemos ver a chamada feita e o resultado da chamada.
       
    '136ECED5-AD86-47EB-E77F-88EE4AA0EA34' producer set destination to 'DefaultHTTP'.
    'direct_http_channel' channel endpoint set to http:
    '136ECED5-AD86-47EB-E77F-88EE4AA0EA34' producer sending message 'E52C0A6D-882A-37F9-F4C9-88EE4B7DF0FC'
    'direct_http_channel' channel sending message:
    (mx.messaging.messages::HTTPRequestMessage)#0
      body = (Object)#1
      clientId = (null)
      contentType = "application/x-www-form-urlencoded"
      destination = "DefaultHTTP"
      headers = (Object)#2
      httpHeaders = (Object)#3
      messageId = "E52C0A6D-882A-37F9-F4C9-88EE4B7DF0FC"
      method = "GET"
      recordHeaders = false
      timestamp = 0
      timeToLive = 0
      url = "http://globoesporte.globo.com/dynamo/rss2.xml"
    '136ECED5-AD86-47EB-E77F-88EE4AA0EA34' producer connected.
    '136ECED5-AD86-47EB-E77F-88EE4AA0EA34' producer acknowledge of 'E52C0A6D-882A-37F9-F4C9-88EE4B7DF0FC'.
    Decoding HTTPService response
    Processing HTTPService response message:
    (mx.messaging.messages::AcknowledgeMessage)#0
      body = "<?xml version="1.0" encoding="utf-8"?>
    <rss>...</rss>"
      clientId = "DirectHTTPChannel0"
      correlationId = "E52C0A6D-882A-37F9-F4C9-88EE4B7DF0FC"
      destination = ""
      headers = (Object)#1
        DSStatusCode = 200
      messageId = "FDA3E270-BAD8-82AD-2770-88EE5BE5C3E8"
      timestamp = 0
      timeToLive = 0

17. Integração entre blaze DS e JAVA

Para a integração entre o Java e o framework Flex, foi utilizado o BlazeDS – projeto de  código aberto da Adobe (Licença LGPL v3) que fornece serviços remotos que possibilitam a  comunicação entre o front-end Flex e o back-end Java, ou seja sua principal função é prover a  conectividade entre estes elementos. Para isso, em um primeiro momento, é preciso replicar o  modelo de dados desenvolvido em Java para o cliente Flex, ou seja, se faz necessário a definição de  um mapeamento da implementação do modelo implementado em Java para o código em
ActionScript, dessa forma é possível preencher os objetos no lado do cliente e depois entregá-los ao
Java.
A Figura abaixo apresenta o modelo de comunicação entre um cliente Flex e um servidor de  Aplicação J2EE. O BlazeDS possui mecanismos que atuam tanto na perspectiva do cliente quanto  do servidor. No lado do cliente, o BlazeDS possui diversas formas de comunicação (RemoteObject,  HTTPService, WebService, Consumer e Producer). No contexto deste projeto, foi utilizado o  RemoteObject, mecanismo responsável por realizar as requisições a objetos Java.

Comunicação entre um cliente Flex e o servidor de aplicação J2EE

Clientes Flex podem usar diferentes canais de comunicação como a AMFChannel  e HttpChannel. No caso deste projeto, a comunicação é realizada através do protocolo de  especificação aberta chamado AMF (Action Message Format). O AMF foi desenvolvido para  otimizar a serialização e desserialização de objetos em modo binário, característica que possibilita  um aumento na eficiência da transmissão de dados entre aplicações deste tipo. Segundo a Adobe, o uso do protocolo AMF apresenta uma melhor performace em comparação com outras
estratégias de comunicação, como o XML.

Para que seja estabelecida a comunicação, é preciso incluir a definição do AMFChannel, um  dos parâmetros de configuração deste protocolo; o endpoint. Como apresentado na Figura 17, o  endpoint é responsável por receber as mensagens da aplicação cliente, e em seguida – através de  uma URL que define o IP, a porta do servidor, e o contexto da aplicação – encaminhar para o  servlet MessageBroker. O MessageBroker é responsável por direcionar as mensagens para o  serviço alvo. No contexto deste projeto o serviço alvo é o Remoting service. O MessageBroker é  definido no arquivo services-config.xml no diretório WEB-INF/flex da aplicação BlazeDS.


Configuração AMF Channel e endpoint

O Remoting service tem como parâmetro de configuração o destination, que contém o  caminho para a classe Java que se deseja alcançar (ver abaixo). Além disso, é preciso definir o  adapter (JavaAdapter), que é responsável por fazer a intermediação entre os objetos instanciados no  lado do cliente (Action Script) e os objetos java no lado do servidor. Por fim, os objetos  instanciados no cliente Flex serão adaptados para serem utilizados na lógica de negócio Java.


Configuração do destination e do adapter

A Figura abaixo apresenta uma visão geral das interações entre a comunicação de uma aplicação  cliente FLEX, integrada com a arquitetura do BlazeDS, com o objetivo de manter conectividade  com o Java (BusinessLogic).

Visão geral do processo

Controle (Controller)
A camada de controle (Controller), define as regras de negócio da ferramenta através da  implementação da fachada. É o mecanismo que responde às ordens enviadas pelos clientes,  atuando sobre os dados contidos no modelo, decidindo que operações serão aplicadas e qual  apresentação da camada de visão será exibida. Por exemplo, o Controller recebe do cliente a  solicitação pedindo uma listagem dos recursos incluídos ou modificados recentemente, o mesmo  interage com a camada de Modelo, entregando ao cliente uma apresentação adequada que provém  da camada de Visão.