Curso de Adobe Flex focado em PHP - Eduardo Kraus

Curso de Adobe Flex focado em PHP – turma 01

Para os programadores PHP que estiverem interessados em aprender Flex, Eduardo Kraus esta iniciando a primeira turma voltado a Flex com conexão ao PHP com AMFPHP e Zend Framework.

No decorrer do treinamento os componentes que necessitarem de dados será utilizado conexões com o PHP para prover estes dados.

Aqueles que tiverem interesse, leia mais em http://www.adobeflex.com.br/cursos/adobe-flex-focado-em-php-turma-01

Período:

O Curso se estenderá do dia 30/11 até dia 17/12, com aulas de Segunda à Quinta das 19:00 as 21:00totalizando 24 horas de aula ao vivo e mais duas horas na Sexta Feira com duas horas para revisão.

Com tudo isso o curso terá um total de 30 horas em contato com o instrutor para aprender mais e mais.

Investimento:

O Investimento é de R$230,00 para pagamento via PagSeguro que pode ser parcelado em até 18X no cartão, ou se preferir depositar diretamente em conta, fica no valor de R$200,00.

Matricule-se

http://www.adobeflex.com.br/cursos/adobe-flex-focado-em-php-turma-01#Matricule

Ementa do curso:

http://www.adobeflex.com.br/cursos/adobe-flex-focado-em-php-turma-01#ementa

Retirade de : http://blog.mxml.com.br/adobe-flex-focado-em-php-turma-01

Criar uma Painel Deslizante

Exemplo de Painel Deslizante

Exemplo : http://www.files.riacodes.com/flex_sliding-panel/demo/

Código Fonte : http://www.files.riacodes.com/flex_sliding-panel/demo/srcview/SlidingPanel.zip

Retirado de : http://www.riacodes.com/category/flex/

Criando Cursor Customizado

Exemplo de cursor customizado.

Exemplo : http://www.files.riacodes.com/flex_custom-animated-cursor/demo/

Código Fonte : http://www.files.riacodes.com/flex_custom-animated-cursor/demo/srcview/index.html

Retirado de : http://www.riacodes.com/flex/create-a-custom-animated-cursor-for-your-flex-app/

Configurando e Utilizando o ZendAMF

Video do ZendAMF do Fabio Vedovelli

"Neste episódio será feita a configuração do ZendAMF, utilizado para conectar uma interface Flex ao PHP. O código gerado durante a gravação está disponível ao final do post."

Fabio Vedovelli

Link para video : http://www.vedovelli.com.br/?p=974

Retira de : http://www.vedovelli.com.br/

Relatórios usando FlexReport

Relatório utilizando o flex.

Exemplo : http://www.msdevstudio.com/blog/flexSource/testeFlexReport/

Código Fonte : http://msdevstudio.com/blog/flexSource/testeFlexReport/srcview/

Retirado de: http://www.flexpernambuco.com.br/?p=13

Collapsible Accordion

Accordion Customizado

Exemplo: http://www.flexsamples.com/tourdeflex/collapsibleaccordion/CollapsibleAccordionSample2.html

Download : http://www.flexsamples.com/tourdeflex/collapsibleaccordion/srcview/index.html

Retirado de :http://www.flexsamples.com/blog/2009/04/

Molecule Viewer

Exemplo de Visualizador de Moléculas.

Link para Exemplo : http://mark-shepherd.com/SpringGraph/MoleculeViewer/bin/MoleculeViewer.html

Exemplo Utilizando Números: http://mark-shepherd.com/SpringGraph/SpringGraphDemo/bin/SpringGraphDemo.html

Codigo Fonte: http://mark-shepherd.com/SpringGraph/MoleculeViewer/bin/srcview/index.html

Retirado de : http://mark-shepherd.com/blog/

VistaFlow - Simulador do Windows Vista

Exemplo de gerenciamento de janelas igual o Windows Vista.

Abra o exemplo e pressione SHIFT + ENTER o resultado esta na imagem abaixo:

Veja o Exemplo : http://dougmccune.com/360Flex_ATL/VistaFlow/

Código Fonte : http://dougmccune.com/360Flex_ATL/VistaFlow/srcview/index.html

Retirado de : http://dougmccune.com/blog/2008/02/26/examples-from-my-360flex-session-using-open-source-community-projects/

Physics Form

Um exemplo muito interessante de Formulario, clique no botão "Login" e veja o resultado.

Link Enviado pelo Marcos : http://flex-cast.blogspot.com/2009/10/campos-do-flex-com-gravidade.html

Retirado de : http://dougmccune.com/blog/2008/02/26/examples-from-my-360flex-session-using-open-source-community-projects/

Exemplo : http://dougmccune.com/360Flex_ATL/PhysicsContainer/

Download : http://dougmccune.com/360Flex_ATL/PhysicsContainer/srcview/index.html

Sites com ferramentas interessantes para o programador e desenvolvedor Adobe Flex

Navegando no Blog Fernando Hidemi Uchiyama encontrei alguns links interessantes para desenvolvimento FLEX.

Guia de Referência para Flex 2.0 - Documentação de todas as classes, métodos e propriedades do Actionscript 3. Este guia vai ser o seu amigo diário enquanto programando com Actionscript 3 e Flex.

Flex Componente Explorer - Amostra dos componentes disponíveis no Adobe Flex Builder, com source code disponível. Uma boa fonte de consulta para quem está construindo uma aplicação e tem dúvidas sobre qual componente usar.

Flex Style Explorer - Site da Adobe onde é possível testar folha de estilo (CSS) para os componentes disponíveis no Flex Builder. Outro amigo diário de todo desenvolvedor Flex.

Flex Primitive Explorer - Site em Flex onde é possível visualizar e testar as classes das formas primitivas Star, Burst, Polygon, Gear, Wedge e Arc. O melhor de tudo é que é possível copiar o código fonte dos exemplos para a sua aplicação Flex.

Flex Filter Explorer - Em vez de perder tempo testando os filtros, use este site para escolher o filtro e a configuração que mais lhe agradam. Depois é só copiar e colar o código fonte.

Flex Charting Explorer - Aplicativo que permite testar os gráficos do Flex. Últil para quem não quer perder tempo.

Flex Transitions and Effects Explorer - Permite testar transições e efeitos.

Flex Button Style Explorer - Site muito legal onde existe a possibilidade de estilizar o componente Button de uma forma bem atraente e copiar o código fonte.

Flex Transitional Flips Explorer - Site onde é possível testar transições de troca de janela. Bem interessante, pena que não mostra o código-fonte.

Links e Textos Retirados de : http://fernandoaprendeflex.awardspace.com/?p=43

Formatando uma Data

Abaixo um exemplo para formatar uma data de um DateChooser.



FormataData.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:DateChooser id="dtcPrincipal" x="20" y="10"/>
<mx:DateFormatter id="dtfFormata" formatString="DD/MM/YYYY"/>
<mx:Label x="20" y="198" text="Data Selecionada : {dtfFormata.format(dtcPrincipal.selectedDate)}" fontWeight="bold"/>
</mx:Application>

Somando e Subtraindo Datas

Um simples exemplos para somar e subtrair Datas.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> 
 <mx:TitleWindow x="64" y="10" width="450" layout="horizontal" title="Somando Datas">
  <mx:DateField id="dtfData" formatString="DD/MM/YYYY"/>  
  <mx:Label text="+" fontWeight="bold" fontSize="12"/>
  <mx:NumericStepper id="nmsDias"/>  
  <mx:Label text="=" fontWeight="bold" fontSize="12"/>
  <mx:DateField formatString="DD/MM/YYYY" selectedDate="{somarData(dtfData.selectedDate,nmsDias.value)}"/>
 </mx:TitleWindow>
 <mx:TitleWindow x="64" y="118" width="450" layout="horizontal" title="Subtraindo Datas">
  <mx:DateField id="dtfInicial" formatString="DD/MM/YYYY"/>  
  <mx:Label text="-" fontWeight="bold" fontSize="12"/>
  <mx:DateField id="dtfFinal" formatString="DD/MM/YYYY"/>
  <mx:Label text="{subtrairData(dtfInicial.selectedDate,dtfFinal.selectedDate)}"/>   
 </mx:TitleWindow>
 
 <mx:DateFormatter id="dtfFormatada" formatString="DD/MM/YYYY"/>

 <mx:Script>
  <![CDATA[
   private function somarData(data : Date, dias : int):Date
   {
    return new Date(data.getTime() + (dias * 1000 * 60 * 60 * 24));
   }   

   private function subtrairData(dataInicial : Date, dataFinal : Date):int
   {   
    return Math.abs((dataFinal.getTime() - dataInicial.getTime()) / (1000 * 60 * 24 * 60));    
   }
  ]]>
 </mx:Script> 
</mx:Application>

Trabalhando com Data Inicial e Data Final

Abaixo um exemplo de como bloquear o inicio ou fim de um DateField, utilizado principalmente em telas que tenha um campo com Data Inicial e Final.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Form x="202" y="10" width="393" height="180" backgroundColor="#FFFFFF">
<mx:FormItem label="Data Inicial" direction="horizontal">
<mx:DateField dayNames="{dayNames}" monthNames="{monthNames}" formatString="{formatString}" id="dtfInicial" change="{bloqueiaDataFinal(DateField(event.target),dtfFinal)}"/>
<mx:FormItem label="Data Final">
<mx:DateField id="dtfFinal" dayNames="{dayNames}" monthNames="{monthNames}" formatString="{formatString}"/>
</mx:FormItem>
</mx:FormItem>
</mx:Form>

<mx:Script>
<![CDATA[
[Bindable] private var dayNames : Array = ["D","S","T","Q","Q","S","S"];
[Bindable] private var monthNames : Array = ["Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agosto","Setembro","Outubro","Novembro","Dezembro"];
[Bindable] private var formatString : String = "DD/MM/YYYY";

private function bloqueiaDataFinal(dtfInicial : DateField, dtfFinal : DateField):void
{
dtfFinal.selectableRange=
{
rangeStart : new Date(dtfInicial.selectedDate.fullYear,dtfInicial.selectedDate.month,dtfInicial.selectedDate.date)
};

dtfFinal.text='';
}

]]>
</mx:Script>
</mx:Application>

Alerta de Mensagem

Publiquei a alguns dias um exemplo do Fabiel Prestes de Alerta de Mensagem similar ao MSN. Fiz um exemplo bem parecido com o exemplo mostrado.




JanelaMensagem.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
    width="200"
    height="150"
    styleName="opaquePanel"
    layout="vertical"
    creationCompleteEffect="{EfeitoJanelaCima}"   
    removedEffect="{EfeitoJanelaBaixo}"
    creationComplete="init()"    
    showCloseButton="true"
    close="{fechaJanela()}"
    verticalScrollPolicy="auto" horizontalScrollPolicy="off"
    moveEffect="Move">

 <mx:Move xTo="{Application.application.width - this.width}"
    xFrom="{Application.application.width- this.width}"
    yTo="{Application.application.height - (this.height*ordem)}"
    yFrom="{Application.application.height}"
    id="EfeitoJanelaCima"
    duration="500"/>

 <mx:Move xTo="{Application.application.width - this.width}"
    xFrom="{Application.application.width- this.width}"
    yTo="{Application.application.height}"
    yFrom="{Application.application.height- (this.height*ordem)}"
    id="EfeitoJanelaBaixo"
    duration="500"/>

 <mx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   import mx.events.CloseEvent;
   import com.adobe.ac.mxeffects.Pop;
   import mx.managers.PopUpManager;
   import mx.controls.Alert;
   import flash.utils.setTimeout;
   import mx.core.Application;

   [Bindable] public var ordem   : int =  1;
   [Bindable] public var tempo   : int =  0;
   [Bindable] private var idTimeOut : uint;
   [Bindable] public var arrLista  : ArrayCollection;


   private function init():void
   {
    if(tempo > 0)
     idTimeOut = setTimeout(fechaTempo,tempo*1000);

    this.addEventListener(Event.CLOSE,function (e:Event):void
     { 
      for(var i:int=arrLista.getItemIndex(e.currentTarget)+1; i< arrLista.length ; i++)     
       JanelaMensagem(arrLista.getItemAt(i)).moveBaixo();     

      arrLista.removeItemAt(arrLista.getItemIndex(e.currentTarget));     
     });  

    this.ordem = arrLista.length+1;

    arrLista.addItem(this);

   }

   public function moveBaixo():void
   {
    this.move(this.x,(this.y+this.height));
    ordem--;    
   } 

   private function fechaTempo():void
   {
    dispatchEvent(new Event(CloseEvent.CLOSE));
    fechaJanela();
   }

   private function fechaJanela():void
   {     
    PopUpManager.removePopUp(this);
    clearTimeout(idTimeOut);    
   }

  ]]>
 </mx:Script>
</mx:TitleWindow>

Usando.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*"
    verticalScrollPolicy="off" horizontalScrollPolicy="off">

 <mx:Button x="227" y="174" label="Abrir Janela" click="abrir()" height="100" width="226" fontSize="14"/>

 <mx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   import mx.controls.Text;
   import mx.controls.Label;
   import mx.controls.Alert;
   import mx.events.StateChangeEvent;
   import mx.events.FlexEvent;
   import mx.events.CloseEvent;
   import mx.managers.PopUpManager;   

   [Bindable] private var arrListaJanela : ArrayCollection = new ArrayCollection();

   public function abrir():void
   { 
    var janela1 : JanelaMensagem = new JanelaMensagem();
    var texto : Text = new Text();    

    janela1.title='luizdeangeli.blogspot.com'
    janela1.tempo  = 10;
    janela1.arrLista = arrListaJanela;    

    texto.width=175;
    texto.setStyle("color","red");
    texto.text='Esta é uma mensagem do blog do Luiz. Esta é uma mensagem do blog do Luiz. Esta é uma mensagem do blog do Luiz.';

    janela1.addChild(texto);    

    PopUpManager.addPopUp(janela1,this,false);
   }
  ]]>
 </mx:Script>
</mx:Application>

Exemplo de Validação de Formulários

Fiz um exemplo simples de validação de formulários, esta validação também pode ser utilizado com os validadores CNPJ, CPF, E PIS que coloquei a alguns dias no blog.



Exemplo.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 <mx:TitleWindow title="Exemplo de Validação de Campos" x="102" y="40" width="438" layout="absolute">
  <mx:Form x="0" y="0" width="100%" height="100%">
   <mx:FormItem label="Código" width="100%" required="true">
    <mx:TextInput id="txiCodigo" width="50"/>
   </mx:FormItem>
   <mx:FormItem label="Nome" width="100%" required="true">
    <mx:TextInput id="txiNome" width="296"/>
   </mx:FormItem>
   <mx:FormItem label="Sexo" width="100%" required="true">
    <mx:ComboBox id="cbbSexo" prompt="Selecione o sexo">
     <mx:dataProvider>
      <mx:Array>
       <mx:Object data='M' label='Masculino'/>
       <mx:Object data='F' label='Feminino'/> 
      </mx:Array>
     </mx:dataProvider>
    </mx:ComboBox>
   </mx:FormItem>
   <mx:FormItem label="Data" width="100%" required="true">
    <mx:DateField id="dtfData"/>
   </mx:FormItem>

  </mx:Form>  
  <mx:ControlBar horizontalAlign="right">
   <mx:Button label="Salvar" click="salvar()"/>
  </mx:ControlBar>
 </mx:TitleWindow>

 <mx:Array id="arrCampos">

  <mx:StringValidator source="{txiCodigo}" property="text" required="true" requiredFieldError="Campo Obrigatório"/>
  <mx:StringValidator source="{txiNome}" property="text" required="true" requiredFieldError="Campo Obrigatório"/>
  <mx:StringValidator source="{dtfData}" property="text" required="true" requiredFieldError="Campo Obrigatório"/>
  <mx:NumberValidator source="{cbbSexo}" property="selectedIndex" minValue="0" lowerThanMinError="Campo Obrigatório" requiredFieldError="Campo Obrigatório"/>
 </mx:Array>

 <mx:Script>
  <![CDATA[
   import mx.validators.Validator;
   import mx.controls.Alert;
   import mx.events.ValidationResultEvent;

   public function salvar():void
   {
    if(!validaForm(arrCampos)) 
     return

    //CONTINUAR O PROCESSO DE GRAVAÇÃO
   }

   public function validaForm(ArrayCampos:Array):Boolean
   {
    var validatorErrorArray:Array = Validator.validateAll(ArrayCampos);;
    var isValidForm:Boolean = validatorErrorArray.length == 0;
    if (isValidForm) {
     return true;
    } else {
     var err:ValidationResultEvent;
     var errorMessageArray:Array = [];

     for each (err in validatorErrorArray)
     { 
      var errField:String = FormItem(err.currentTarget.source.parent).label
      errorMessageArray.push(errField + ": " + err.message);              
     }            
     Alert.show(errorMessageArray.join("\n\n"), "ATENÇÃO: Dados Inválidos", Alert.OK);          
    }   
    return false;   
   }


  ]]>
 </mx:Script>

</mx:Application>

AutoComplete no Input

Encontrei um exemplo muito interessante do AutoComplente no input.

Fonte : http://www.websector.de/blog/2008/04/30/quick-tip-avoid-issues-using-adobes-autocomplete-input-component-using-flex-3/

Download : http://www.websector.de/blog/download-manager.php?id=18

WSMonitor e Actionscript 3 Garbage Collector: Monitorando a memória no Adobe Flex e Flash

Navegando pelo blog do Fernando Hidemi Uchiyama encontrei uma ferramenta muito interressante.

"Não é uma ferramenta essencial para a maioria das aplicações desenvolvidas, mas se o seu SWF faz uso extensivo de criação dinâmica de classes e você não confia no Actionscript Garbage Collector, está aí uma boa opção para monitorá-lo.

Para quem não sabe, quando uma instância de uma classe é criada no Actionscript 3, depois de usá-la, o programador não consegue destruí-la como em linguagens de programações tradicionais. O responsável por desalocar a memória de uma instância fora de uso é o Garbage Collector, que segundo a Adobe, destrói a instância logo após perceber que a mesma perdeu todas as referências.

O tema é complexo pois testes comprovam que o Garbage Collector é instável. Não consegue-se prever quando este irá liberar a memória de instâncias não usadas e muitas vezes o Garbage Collector demora ou falha.

Para aplicativos que usam extensivamente a memória, como editores de texto, editores de imagens, etc, vale a pena dar um conferida no WSMonitor."

Fernando Hidemi Uchiyama

Fonte : http://fernandoaprendeflex.awardspace.com/?p=61

Adobe : http://www.adobe.com/devnet/flashplayer/articles/garbage_collection.html

Download : http://www.websector.de/blog/download-manager.php?id=13

Aplicação em Flex

Aplicação em flex usando Drag e Drop.

Link para aplicação : http://alex-uhlmann.de/flash/adobe/blog/store_with_flighteffect/

Fonte : http://blogs.adobe.com/auhlmann/

Contrast-A

Ferramenta desenvolvida em AIR muito util para desenvolvedores WEB.

Fonte :http://www.adobe.com/cfusion/marketplace/index.cfm?event=marketplace.offering&marketplaceid=1&offeringid=10763

Mindset Geometrics

O que é a Mindset Geometrics?

Mindset Geometrics é um projeto open source destinado a produção não-convencional, mostrando gráficos SVG composto por regiões com informações associadas.

O componente permite ao desenvolvedor ter em regiões definidas em um formato SVG e pintá-los com cores diferentes de acordo com critérios definidos e os dados fornecidos. O gráfico SVG pode ser dividido em áreas (regiões geométrico), e cada área pode ser atribuído um valor, uma descrição e informações relacionadas.

A alavanca o componente biblioteca Defraga, que é uma fonte de estrutura declarativa gráficos abertos para aplicações Flex.

Mindset Geometrics também é projetado para ter um grande impacto visual. Você pode adicionar efeitos de forma muito fácil de fazer seus gráficos aparência profissional e elegante.

Código Fonte e Exemplos : http://www.mindset-geometrics.com.ar/

Fonte : http://www.mindset-geometrics.com.ar/

Criando “Alerta de Mensagens” similar ao MSN

Navegando agora no site do Fabiel Prestes encontrei um exemplo muito interessante.

Veja O código fonte e o exemplo funcionando : http://www.fabielprestes.com.br/?p=274

Fonte : http://www.fabielprestes.com.br/

EFFlex Explorer

Abaixo o link para alguns exemplos de efeitos que o flex pode realizar.

Veja Funcionando: http://www.efflex.org/EfflexExplorer.html

Fonte : http://www.efflex.org/

Efeitos 3D - Cubo

Abaixo o link para o exemplo do Cubo 3D.

Veja exemplo : http://www.alex-uhlmann.de/flash/adobe/blog/distortionEffects/effectCube/

Download : http://weblogs.macromedia.com/auhlmann/archives/DistortionEffects.zip

Fonte : http://blogs.adobe.com/auhlmann/archives/2009/01/lighted_distort.html

Tour Flex em Tempo Real

Ferramenta muito interessante desenvolvida em Flex que mostra em Tempo Real os acessos aos exemplos do Tour Flex já mostrado aqui mesmo no Blog alguns posts atrás.

Fiz um teste e o site apresentou a informação conforme a imagem abaixo.

Veja a imagem maior : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgne8ty-X6HsMQpAOIIoIqgcMEF4l052cgK4C_EK74hu5P8tqud9JQn4vBmhPOw0MRPQC04A57Id7GAu32ACiNEmwyzpNxllv4WizaBIxUKq6qPqSXKSxBevvuWbOl7rVoIxSEuu9RjUsEq/s1600-h/tour.JPG

Tour Flex : http://www.adobe.com/devnet/flex/tourdeflex/web/

Veja o Site : http://visudemos.ilog.com/tourdeflex/TdFDashboard/TourDeFlexDashboard.html

Reflexão de Imagem

Abaixo um exemplo de Reflexão de Imagens no Flex



Veja funcionando : http://graphics-geek.blogspot.com/2009/03/video-moment-of-reflexion.html

Download do Source: http://graphicsgeek1.googlepages.com/ReflexionSrc.zip

Fonte : http://graphics-geek.blogspot.com/

FLEX + WEB CAM + PHP

Montrei a algum tempo no blog um exemplo de como capturar e salvar a imagem da webcam no computador, o Eduardo Kraus fez um exemplo para enviar essa imagem para o php.

"Um exemplo simples que captura a imagem da Webcam e salva em uma pasta no Servidor. Este exemplo utiliza a classe ImageSnapshot para capturar uma imagem baseado em um objeto. Ele esta gerando um JPG com 100% de qualidade, configurada em new JPEGEncoder( 100 )."

Eduardo Kraus

Veja o exemplo : http://blog.mxml.com.br/capturar-imagem-da-webcam-e-salvar-com-php

Fonte : http://blog.mxml.com.br/

Componente para Download com Barra de Progresso

Download.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
width="400"
height="130"
title="Download"
showCloseButton="true"
close="PopUpManager.removePopUp(this)"
creationComplete="init()">

<mx:NumberFormatter id="numberFormatter" rounding="up"/>

<mx:ProgressBar id="pgbProgresso" mode="manual" labelPlacement="center" width="100%" height="100%"/>

<mx:ControlBar horizontalAlign="center">
<mx:Button label="Cancelar" click="{PopUpManager.removePopUp(this)}"/>
</mx:ControlBar>

<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.managers.PopUpManager;
import mx.rpc.events.ResultEvent;

[Bindable] private var downloadURL :URLRequest;
[Bindable] private var file :FileReference;
[Bindable] public var fileName :String;
[Bindable] public var fileUrl :String;

private function init():void {
file = new FileReference();
file.addEventListener(Event.CANCEL, cancelHandler);
file.addEventListener(Event.COMPLETE, completeHandler);
file.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
file.addEventListener(Event.OPEN, openHandler);
file.addEventListener(ProgressEvent.PROGRESS, progressHandler);
file.addEventListener(SecurityErrorEvent.SECURITY_ERROR, securityErrorHandler);
file.addEventListener(Event.SELECT, selectHandler);

pgbProgresso.label = "AGUARDANDO ARQUIVO";
pgbProgresso.setStyle("color",uint(0x999999));

downloadURL = new URLRequest();
downloadURL.url = fileUrl;

if(!fileName)
{
var arrayUrl : Array = fileUrl.split('/');
fileName = arrayUrl[arrayUrl.length-1];
}

file.download(downloadURL, fileName);
}

private function cancelHandler(event:Event):void {
PopUpManager.removePopUp(this)
}

private function completeHandler(event:Event):void {
pgbProgresso.setProgress(0,100);
pgbProgresso.label = "DOWNLOAD CONCLUÍDO!";

Alert.show("DOWNLOAD CONCLUÍDO","Atenção");
PopUpManager.removePopUp(this);
}

private function ioErrorHandler(event:IOErrorEvent):void {
trace("ioErrorHandler: " + event);
}

private function openHandler(event:Event):void {
trace("openHandler: " + event);
}

private function progressHandler(event:ProgressEvent):void {
var file:FileReference = FileReference(event.target);

pgbProgresso.setProgress(event.bytesLoaded,event.bytesTotal);

pgbProgresso.label = "CARREGANDO " + numberFormatter.format(pgbProgresso.percentComplete) + "%";
pgbProgresso.setStyle("color",uint(0x000000));

}

private function securityErrorHandler(event:SecurityErrorEvent):void {
pgbProgresso.label = "ERRO AO BAIXAR ARQUIVO!";
pgbProgresso.setStyle("color",uint(0xCC0000));
}

private function selectHandler(event:Event):void {
var file:FileReference = FileReference(event.target);
trace("selectHandler: name=" + file.name + " URL=" + downloadURL.url);
}
]]>
</mx:Script>

</mx:TitleWindow>

Usando.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Button label="Download" click="download()"/>
<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;

private function download():void
{
var download : Download = new Download();
download.fileUrl = "http://fpdownload.macromedia.com/get/flashplayer/current/licensing/win/install_flash_player_10_active_x.exe";
PopUpManager.addPopUp(download,this,true);
PopUpManager.centerPopUp(download);
}

]]>
</mx:Script>
</mx:Application>

Glass TV

Está não é uma postagem relacionada a FLEX mas é uma ferramenta muito interessante.

Fonte : http://www.glasstv.com.br/

Usando efeitos e animação no Flex 4

Um video mostrando como será os efeitos e animação do Flex 4.



Exemplos para download:
http://www.adobe.com/devnet/flex/articles/flex4_effects_pt1.html
http://www.adobe.com/devnet/flex/articles/flex4_effects_pt2.html

Exemplo do Efeito 3D


Fonte : http://labs.adobe.com/technologies/flash/videos/flashcamp/haase/

Flex Style Explorer

Flex Style Explorer fornece uma maneira visual para você ver como alterar as configurações de estilo de Flex, componentes de interface de usuário vai afetar a visualização de sua aplicação. Esta aplicação específica é dividido em três seções: Style Controls, Sandbox, e CSS. Essas seções permitem, respectivamente, teste, ver e aprender as configurações de estilo que são necessários para conseguir o "look" que você tem em mente. O Flex Style Explorer permite definir estilos para aplicações, elementos de formulário, grids de dados, e muito mais.

Link para Aplicação : http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html

Fonte da Aplicação : http://www.maclema.com/content/sek/srcview/index.html

Fonte : http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html

Axiis - Gráficos Elegantes

Axiis é uma fonte aberta quadro de visualização de dados projetado para desenvolvedores iniciantes e experientes.
Se você está construindo gráficos elegantes para reuniões de informação executiva ou a explorar as fronteiras da investigação avançadas de visualização de dados, Axiis tem algo para você.
Axiis fornece tanto componentes pré-visualização, bem como os padrões de layout e renderização de classes abstratas que permitem a você criar suas próprias visualizações únicas.
Axiis é construído sobre o quadro Degrafa gráficos e Adobe Flex 3.

Veja os Exemplos :

http://www.axiis.org/examples.html





Fonte :
http://www.axiis.org/index.html
http://tourdeflex.blogspot.com/2009/06/axiis-data-visualization-samples-added.html

Tour de Flex

Tour de Flex é uma aplicação para explorar as capacidades Flex e recursos, incluindo os componentes do núcleo Flex, Adobe AIR, integração de dados, e uma variedade de componentes de terceiros, os efeitos, skins e muito mais.

O Tour de Flex inclui mais de 200 amostras de execução, cada um com código-fonte, links para documentação, e outros detalhes. Os tópicos incluem os principais componentes do Flex, Flex acesso a dados, recursos de desktop AIR, nuvem APIs, visualização de dados, mapeamento e uma crescente coleção de componentes personalizados, efeitos e skins.

Veja a aplicação online : http://www.adobe.com/devnet/flex/tourdeflex/web/

Fonte : http://www.adobe.com/devnet/flex/tourdeflex/

Criando um Custom Panel - Minimizar - Maximizar - Fechar

O Fabiel Prestes fez um exemplo da utilização do Minimizar, Maximizar e Fechar janelas no Flex.

Link para tutorial : http://www.fabielprestes.com.br/?p=160

Download do Projeto : http://www.fabielprestes.com.br/arquivos/customPanel/CustomPanel.rar

Fonte : http://www.fabielprestes.com.br/?p=160

Integrando Flex com Java

Para aquele que gostam do JAVA o Fabio Prestes fez um tutorial bem simples desta integração.

Lnk para tutorial : http://www.fabielprestes.com.br/?p=67

Requisitos para a realização da Integração:

• Tomcat 6
• Java 6
• BlazeDs 3.x
• Sdk Flex 3.x
• Eclipse, FelxBuilder ou NetBeans.

Fonte: http://www.fabielprestes.com.br/

Arrastar e Soltar usando Imagem (Drag e Drop)

Abaixo um exemplo de arrastar e soltar usando imagens.


Exemplo.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
backgroundGradientAlphas="[1.0, 1.0]"
backgroundGradientColors="[#FFFFFF, #FFFFFF]" viewSourceURL="srcview/index.html">

<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.core.DragSource;
import mx.managers.DragManager;
import mx.events.DragEvent;

[Bindable]
private var quantity : int = 0;

private function initiateDrag(event:MouseEvent):void {

var dragInitiator:Image = event.currentTarget as Image;

var source:DragSource = new DragSource();
source.addData(dragInitiator,"gift");

var proxy:Image = new Image();
proxy.source = dragInitiator.source;
proxy.width = 50;
proxy.height = 50;

DragManager.doDrag(dragInitiator, source, event, proxy);
}

private function dragEnterHandler(event:DragEvent):void {
if (event.dragSource.hasFormat("gift")){
DragManager.acceptDragDrop(event.currentTarget as Image);
}
}

private function dragDropHandler(event:DragEvent):void{
quantity ++;
Alert.show("Gift added to your cart");
}

]]>
</mx:Script>

<mx:Label text="Add drag and drop support manually" color="#990000"
fontSize="20" fontWeight="bold" fontStyle="italic"/>

<mx:Canvas width="800" height="366">
<mx:Label fontSize="14"
color="#000000" width="66" x="600" y="311"
fontWeight="bold" textAlign="center"
text="{quantity.toString()}"/>
<mx:Image source="assets/gift.png" x="40" y="120"
mouseDown="initiateDrag(event)" />
<mx:Image source="@Embed('assets/cart.jpg')" x="480" y="100"
dragEnter="dragEnterHandler(event)"
dragDrop="dragDropHandler(event)" />
</mx:Canvas>

</mx:Application>

Exemplo Funcionando : http://files.riacodes.com/flex_drag-drop-gift-cart/demo/

Código Fonte : http://files.riacodes.com/flex_drag-drop-gift-cart/demo/srcview/index.html

Fonte : http://www.riacodes.com/flex/add-drag-and-drop-support-manually/