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/