Google Analytics para Flex

"Para aqueles como eu, amantes dos produtos Google, e querem utilizar o Google Analytics em todos os sistemas, segue aqui uma forma fácil de integra-lo com o Flex.

- Crie um novo Website Profile para conseguir uma nova Web Property ID.
- Faça o download do zip contendo o swc em http://code.google.com/p/gaforflash/downloads/list
- Copie o analytics.swc para a pasta /libs do seu projeto.
- O Exemplo abaixo, comentado possui um TabNavigator que possui sua navegação integrada com uma conta minha do Google Analytics.

O Exemplo abaixo, comentado possui um TabNavigator que possui sua navegação integrada com uma conta minha do Google Analytics."
Eduardo Kraus

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute"
    creationComplete="init()">
  <mx:Script>
    <![CDATA[
      import com.google.analytics.components.FlexTracker;
      /**
       * váriavel global para o Analytics
       */
      private var tracker:FlexTracker
      /**
       * Executa quando a aplicação é carregado
       *
       * Nesta função criamos uma nova instancia,
       * passamos as configurações
       * e chamamos o registro inicial
       */
      private function init():void
      {
        // Nova instancia do Analytics para o Flex
        tracker=new FlexTracker()
        // passando a conta que você deve ter criado
        // para o prjeto
        tracker.account='UA-4869081-3'
        // Define que o modo é para AS3
        tracker.mode="AS3"
        /*
        * Visualizar o debug no projeto,
        * para saber se esta funcionando
        *
        * Em projeto em produção, definir
        * tracker.visualDebug=false
        */
        tracker.visualDebug=true

        // Registra o acesso inicial
        tabnavigatorChange();
      }
      /**
       * Executa quando uma aba é alterada
       *
       * Neste método é chamado quando iniciamos a aplicação
       * e quando a alteramos entre as abas.
       */
      private function tabnavigatorChange():void
      {
        /*
         * O método trackPageview recebe uma String contendo a url acessada
         * Esta url deve começar com "/" e seguido do endereço a ser registrado
         *
         * Neste caso estou enviando o valor do label da aba selecionada,
         * substituindo o espaço por underline
         */
        var itemView:String='/' + tabnavigator1.selectedChild.label.replace( ' ', '_' )
        tracker.trackPageview( itemView )
      }
    ]]>
  </mx:Script>

  <mx:TabNavigator id="tabnavigator1"
           x="31" y="43" width="380" height="423"
           change="tabnavigatorChange()">
    <mx:HBox label="Aba 1" width="100%" height="100%"
         horizontalAlign="center">
      <mx:Text text="Esta é a aba 1."/>
    </mx:HBox>
    <mx:HBox label="Aba 2" width="100%" height="100%"
         horizontalAlign="center">
      <mx:Text text="Esta é a aba 2."/>
    </mx:HBox>
    <mx:HBox label="Aba 3" width="100%" height="100%"
         horizontalAlign="center">
      <mx:Text text="Esta é a aba 3."/>
    </mx:HBox>
    <mx:HBox label="Aba 4" width="100%" height="100%"
         horizontalAlign="center">
      <mx:Text text="Esta é a aba 4."/>
    </mx:HBox>
  </mx:TabNavigator>
</mx:Application>

Código Fonte : http://code.mxml.com.br/?sourceID=092

Fonte : Eduardo Kraus - http://blog.mxml.com.br/google-analytics-para-flex

Controle de uma animação flash dentro de uma aplicação Flex

Veja um exemplo de Controle de uma animação flash dentro de uma aplicação Flex.

Principal.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, #CBCBCB]" viewSourceURL="srcview/index.html">

<mx:Script>
 <![CDATA[
  private var flashMovie:MovieClip;
 
  private function initMovie():void{
    flashMovie = loader.content as MovieClip;   
 }
 ]]>
</mx:Script>
 <mx:SWFLoader id="loader" source="flash.swf" complete="initMovie()" />
 <mx:Button label="Play" click="flashMovie.play()"/>
 <mx:Button label="Stop" click="flashMovie.stop()"/>
</mx:Application>

Veja funcionando : http://files.riacodes.com/flex_control-flash-inside-flex/demo/

Fonte : http://www.riacodes.com/flex/control-flash-animation-inside-a-flex-application/

Inserindo dados em DataGrid usando ArrayCollection com PopUpManager

Fiz um outro exemplo utilizando a inserção em um ArrayCollection com PopUpManager:
O DataGrid está ligado neste ArrayCollection, desta forma as informações são atualizada quando inserimos mais dados no ArrayCollection.

Principal.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
verticalAlign="middle">
<mx:TitleWindow styleName="opaquePanel" width="567" title="Cadastro de Pessoas">
  <mx:Button label="Adicionar" click="adicionar()"/>
  <mx:DataGrid id="dtgPessoas" width="100%" dataProvider="{dtpListaPessoa}">
   <mx:columns>
    <mx:DataGridColumn headerText="Código" dataField="codigo" width="100" textAlign="center"/>
    <mx:DataGridColumn headerText="Nome" dataField="nome"/>
    <mx:DataGridColumn headerText="Idade" dataField="idade" width="100" textAlign="center"/>
   </mx:columns>
  </mx:DataGrid>
 
   <mx:Box horizontalAlign="right" width="100%">
   <mx:Button label="Excluir" enabled="{dtgPessoas.selectedIndex!=-1}" click="{dtpListaPessoa.removeItemAt(dtgPessoas.selectedIndex)}"/>
  </mx:Box>
 </mx:TitleWindow>

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

 [Bindable] private var dtpListaPessoa  : ArrayCollection = new ArrayCollection();
 [Bindable] private var janela   : Pessoa;

  private function adicionar():void
  {
    janela = new Pessoa();
    janela.addEventListener("closePessoa",closePessoa);
    PopUpManager.addPopUp(janela,this,true);
    PopUpManager.centerPopUp(janela);
  }

  private function closePessoa(e : Event):void
  {  
   dtpListaPessoa.addItem(
   {
   codigo : janela.txiCodigo.text,
   nome  : janela.txiNome.text,
   idade  : janela.nmsIdade.value
   });
  
   PopUpManager.removePopUp(janela);
  } 
 ]]>
</mx:Script>
</mx:Application>

Pessoa.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="500" title="Cadastro de Pessoa" styleName="opaquePanel"
 showCloseButton="true" close="PopUpManager.removePopUp(this);">
 
<mx:Metadata>
 [Event("closePessoa")]
</mx:Metadata>
 
 <mx:Form width="100%">
  <mx:FormItem label="Código" width="100%">
   <mx:TextInput width="68" id="txiCodigo"/>
  </mx:FormItem>
  <mx:FormItem label="Nome" width="100%">
   <mx:TextInput width="350" id="txiNome"/>
  </mx:FormItem>
  <mx:FormItem label="Idade" width="100%" direction="horizontal">
   <mx:NumericStepper maximum="200" minimum="0" id="nmsIdade"/>
  </mx:FormItem>
 </mx:Form>
 <mx:ControlBar horizontalAlign="right">
 <mx:Button label="Adicionar" click="dispatchEvent(new Event('closePessoa'))"/>
 </mx:ControlBar>

<mx:Script>
 <![CDATA[
  import mx.managers.PopUpManager;
 ]]>
</mx:Script>

</mx:TitleWindow>

Inserindo dados em DataGrid usando ArrayCollection

Fiz um exemplo utilizando a inserção em um ArrayCollection:
O DataGrid está ligado neste ArrayCollection, desta forma as informações são atualizada quando inserimos mais dados no ArrayCollection.

Cadastro.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
 verticalAlign="middle">
 <mx:TitleWindow styleName="opaquePanel" width="567" title="Cadastro de Pessoas">
  <mx:Form width="100%">
   <mx:FormItem label="Código" width="100%">
    <mx:TextInput width="68" id="txiCodigo"/>
   </mx:FormItem>
   <mx:FormItem label="Nome" width="100%">
    <mx:TextInput width="400" id="txiNome"/>
   </mx:FormItem>
   <mx:FormItem label="Idade" width="100%" direction="horizontal">
    <mx:NumericStepper maximum="200" minimum="0" id="nmsIdade"/>
    <mx:Button label="Adicionar" click="adicionar()"/>
   </mx:FormItem>
  </mx:Form>
 
  <mx:DataGrid id="dtgPessoas" width="100%" dataProvider="{dtpListaPessoa}">
   <mx:columns>
    <mx:DataGridColumn headerText="Código" dataField="codigo" width="100" textAlign="center"/>
    <mx:DataGridColumn headerText="Nome" dataField="nome"/>
    <mx:DataGridColumn headerText="Idade" dataField="idade" width="100" textAlign="center"/>
   </mx:columns>
  </mx:DataGrid>
  <mx:Box horizontalAlign="right" width="100%">
   <mx:Button label="Excluir" enabled="{dtgPessoas.selectedIndex!=-1}" click="{dtpListaPessoa.removeItemAt(dtgPessoas.selectedIndex)}"/> 
  </mx:Box>
  
  
  <mx:ControlBar>
  </mx:ControlBar>
 
 </mx:TitleWindow>
 
 <mx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   
   [Bindable] private var dtpListaPessoa : ArrayCollection = new ArrayCollection();
   
   private function adicionar():void
   {
    dtpListaPessoa.addItem(
    {
     codigo  : txiCodigo.text,
     nome : txiNome.text,
     idade : nmsIdade.value
    });
    
    txiCodigo.text='';
    txiNome.text='';
    nmsIdade.value=0;
   }
   
  ]]>
 </mx:Script> 
</mx:Application>

Capturar imagem da WEBCAM

Achei um exemplo na internet para capturar imagem de uma WEBCAM.

WebCam.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="{this.startUp()}" >
 <mx:Script>
 <![CDATA[
  import mx.graphics.ImageSnapshot;
  public function startUp():void
  {
   var cam:Camera = Camera.getCamera();
   myVideo.attachCamera(cam);
  }
  public function onClickFoto():void
  {
   var imageBitmapData:BitmapData = ImageSnapshot.captureBitmapData(myVideo);
   myImage.source = new Bitmap(imageBitmapData);
  }
 ]]>
 </mx:Script>

 <mx:Button click="{this.onClickFoto()}" x="10" y="10" label="Foto"/>
 <mx:Box id="myTile" x="10" y="40" direction="horizontal">
  <mx:VideoDisplay id="myVideo" width="300" height="200"/>
  <mx:Image id="myImage" width="300" height="200"/>
 </mx:Box>
</mx:Application>

Exemplo com botão salvar :

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="{this.startUp()}" > 
 <mx:Script> 
  <![CDATA[
   import mx.graphics.codec.JPEGEncoder;
   import mx.graphics.ImageSnapshot; 

   private var cam:Camera = Camera.getCamera();
   [Bindable]private var imageBitmapData:BitmapData;


   public function startUp():void
   {    
    myVideo.attachCamera(cam); 
   } 
   public function onClickFoto():void
   { 
    imageBitmapData = ImageSnapshot.captureBitmapData(myVideo); 
    myImage.source = new Bitmap(imageBitmapData);    
   } 

   public function SalvarImagem():void
   {
    var encoder:JPEGEncoder = new JPEGEncoder();
    var rawBytes:ByteArray = encoder.encode(imageBitmapData);
    new FileReference().save(rawBytes,"teste.jpg");
   }
  ]]> 
 </mx:Script> 

 <mx:Button click="{this.onClickFoto()}" x="10" y="10" label="Foto"/> 
 <mx:Button click="{SalvarImagem()}" x="70" y="10" label="Salvar"/>
 <mx:Box id="myTile" x="10" y="40" direction="horizontal"> 
  <mx:VideoDisplay id="myVideo" width="300" height="200"/> 
  <mx:Image id="myImage" width="300" height="200"/> 
 </mx:Box>
</mx:Application> 

Veja funcionando em outro endereço : http://files.riacodes.com/flash_capture-webcam/


Fonte : http://groups.google.com.br/group/flexdev/browse_thread/thread/99ad40c7e7b031/8ee3f06b2a802176?hl=pt-BR&lnk=gst&q=webcam#8ee3f06b2a802176

Google lança campanha para o fim do IE6

Esta deve ser novidade para 86% dos meus leitores, já que esta é a média de utilização do FF e Chome. O Google lançou campanha para atualização forçada aos internautas.

O Youtube agora tem um aviso de atualização.



Mais porque esta mensagem esta só no Youtube?

"Minha imaginação levou que o Gmail é utilizado só pela classe mais privilegiada intelectualmente, e há concorrentes. No caso do Reader ou Docs, a concorrencia cairia em cima disso. Mais deveriam colocar no Orkut…. Bom Orkut deve ter 99% de acesso via IE6!!!! e em um possivel bloqueio os usuarios partiriam para outros que possuem suporte.

Agora Youtube não. Não há concorrentes, e se provavelmente barrarem, terão que utilizar navegador compativel com HTML. Se te mandarem algum vídeo engraçado terão que atualizar para ver o conteúdo.

Estava pensando em fazer o mesmo em meu Blog. Não acessa quem tem IE 6 ou inferior."

Eduardo Kraus


Fonte : Eduardo Kraus http://blog.mxml.com.br/google-lanca-campanha-para-o-fim-do-ie6

Google maps 3D no Flex

Novidade para aqueles que utilizam o Google Maps no Flex. Agora esta disponível a visualização 3D no Flex.

Veja Funcionando

Se você nunca desenvolveu para um exemplo do Google Maps, tem dois itens que tem que ser visto antes de inicia:

Solicitar uma Api Key para seu domínio em http://code.google.com/apis/maps/signup.html;
Baixar a ultima versão do SDK para Flex em http://maps.googleapis.com/maps/flash/release/sdk.zip.
Copie map_flex_1_16.swc para a pasta /libs do seu projeto Flex.
Agora você já começar a brincar. Vou explicar o exemplo Map3DSimple.mxml.

Primeiro defino a variável apikey que é definido no arquivo apiKey.txt. Após são descritas as duas funções principais que definem os principais eventos do mapa. O código esta bem comentado e logo abaixo tem quatro exemplos simples.


Fonte : Eduardo Kraus - http://blog.mxml.com.br/google-maps-3d-no-flex

Outro Video de Flex e PHP usando AMFPHP

Mais um Screencast da utilização do AMFPHP com Flex.
Este vídeo foi feito pelo Marcos,amigo meu.
O blog dele é : http://flex-cast.blogspot.com/

Capture your screen in seconds

Fonte : http://flex-cast.blogspot.com/2009/06/flex-e-php-usando-amfphp.html

Componente para Upload com Barra de Progresso

Fiz um componente para fazer Upload de Arquivo com Barra de Progresso.
Abaixo os arquivos para fazer os testes.

FileUpload.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow
 xmlns:mx="http://www.adobe.com/2006/mxml"
 layout="horizontal"
 title="Selecionar Arquivo"
 showCloseButton="true"
 close="PopUpManager.removePopUp(this);"
 creationComplete="init()">
 
 <mx:NumberFormatter id="numberFormatter" rounding="up"/>
 
 <mx:Form width="100%" height="100%" enabled="{fileUrl.toString()!=''}">
  <mx:FormItem direction="horizontal" width="100%">
   <mx:TextInput id="txt_filename" editable="false" width="160"/>
   <mx:Button id="btn_Localizar" click="localizar();" label="Localizar" icon="@Embed(source='../img/16x16/ico_lupa+.png')" useHandCursor="true" buttonMode="true"/>
   <mx:Button id="btn_enviar" click="enviar();" label="Enviar" icon="@Embed(source='../img/16x16/ico_confirma.png')" useHandCursor="true" buttonMode="true"/>
  </mx:FormItem>  
  <mx:FormItem direction="horizontal" width="100%" visible="{uploadProgresso}" includeInLayout="{uploadProgresso}">
   <mx:ProgressBar id="pgbProgresso" mode="manual" labelPlacement="center" width="100%" label="CARREGANDO {numberFormatter.format(pgbProgresso.percentComplete)}%"/>
  </mx:FormItem>
 </mx:Form>
 
<mx:Script>
 <![CDATA[
  import mx.managers.PopUpManager;
  import mx.controls.Alert;
  
 
  [Bindable] public var fileRef   : FileReference;
  [Bindable] private var uploadProgresso  : Boolean = false;
  [Bindable] private var uploadPorcento  : int = 0;
  
  [Bindable] public var fileUrl    : String;
  [Bindable] public var fileName   : String = "arquivo";  
  [Bindable] public var fileType   : String = "*.*";
  [Bindable] public var fileFilter   : String = "Arquivo";
  [Bindable] public var fileCloseComplete: Boolean = true;
  
  private function init():void
  {
   fileRef = new FileReference();
   fileRef.addEventListener(Event.SELECT, onSelect);
   fileRef.addEventListener(Event.COMPLETE, onUploadComplete);   
   fileRef.addEventListener(ProgressEvent.PROGRESS, progresso);
   fileRef.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA, fimUpload);   
  }
  
  public function localizar():void
  { 
   var tipos:FileFilter = new FileFilter(fileFilter,fileType);
   var tiposArray:Array = new Array(tipos);
   this.fileRef.browse(tiposArray);
  }
  
  
  public function fimUpload(e:DataEvent):void
  {
   uploadProgresso = false
  }
  
  private function progresso(e:ProgressEvent):void
  {
   pgbProgresso.setProgress(e.bytesLoaded,e.bytesTotal);   
   uploadProgresso = true;
  }
  
  private function erro(e:Event):void{
  
  }
 
  private function onSelect(event:Event):void {
   this.txt_filename.text = fileRef.name;
  }
 
  private function onUploadComplete(event:Event):void
  {
   uploadProgresso = false;
   if(fileCloseComplete)
    PopUpManager.removePopUp(this);
  }
 
  public function enviar():void
  {
   if (fileRef == null) return;
  
   var request:URLRequest = new URLRequest(fileUrl); 
   request.method = URLRequestMethod.POST; 
   fileRef.upload(request, fileName);
  }
 
 ]]>
 </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">
 <mx:Script>
  <![CDATA[
   import mx.utils.StringUtil;
   import mx.controls.Alert;
   import mx.managers.PopUpManager;   
   
   private function adicionarArquivo():void
{
 var fileUpload : FileUpload;
 fileUpload = new FileUpload();
 
 fileUpload.fileUrl = "http://www.urldoupload.com.br/upload.php";
 fileUpload.fileType = "*.pdf";
 fileUpload.fileFilter = "Arquivo PDF";
 
 
 PopUpManager.addPopUp(fileUpload,this,true);
 PopUpManager.centerPopUp(fileUpload);
 
 fileUpload.fileRef.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA, fimUpload);
}
   
   public function fimUpload(e:DataEvent):void
   {    
    if(StringUtil.trim(e.data.toString())=="ERRO")
    {
     Alert.show('Erro ao salvar arquivo!','Atenção!')
    }else{
     Alert.show(e.data,'Atenção!')
     
    }    
   }
   
  ]]>
 </mx:Script>
 <mx:Button x="110" y="50" label="Arquivo" click="adicionarArquivo()"/>
</mx:Application>

upload.php

<?php
 $arquivo = $_FILES["arquivo"] ? $_FILES["arquivo"] : false;

 $retorno="ERRO";
 
 if($arquivo)
 {
  $url = "./pastadosarquivos/";
  
  if(@move_uploaded_file($arquivo["tmp_name"],$url."".basename($arquivo["tmp_name"]))){
   $retorno = basename($arquivo["tmp_name"]); 
  }
 } 
 
 echo $retorno;
 
?>