Auto complete flex

Olá! Quem já não precisou de um auto complete em uma aplicação. Foi pensando nisto que a Adobe desenvolveu um componente auto complete muito bom, neste exemplo vou mostrar como usá-lo. Segue abaixo o exemplo:

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"

  xmlns:adobe="com.adobe.flex.extras.controls.*">

<mx:XMLList id="xml">

    <usuario>

        <nome>João</nome>

    </usuario>

     <usuario>

        <nome>José</nome>

    </usuario>

    <usuario>

        <nome>Antonio</nome>

    </usuario>

    <usuario>

        <nome>Maria</nome>

    </usuario>

    <usuario>

        <nome>Aparecida</nome>

    </usuario>

</mx:XMLList>

<adobe:AutoComplete labelField="nome" dataProvider="{xml}"

   x="357" y="231" width="453"/>

<mx:DataGrid id="dg" width="453"  height="203" dataProvider="{xml}" x="357" y="261">

  <mx:columns>

    <mx:DataGridColumn dataField="nome" headerText="Nome"/>

  </mx:columns>

</mx:DataGrid>

</mx:Application>

Logo no inicio criamos um lista com XMLList, dentro dele existem vários objetos usuario com o atributo nome, é com este xml que nosso auto complete irá funcionar.  Então vem nosso componente AutoComplete que é disponibilizado pela Adobe. No atributo labelField colocamos o nome do atributo onde será feito a pesquisa.

Em seguida colocamos nossos objetos em um grid para que os mesmos possam ser visualizados.

Fonte do componete:  link

Até a próxima. Abraços.

Mudar cor do DataGridColumn

Olá! Hoje venho falar um pouco sobre o componente DataGridColumn que representa uma coluna do DataGrid. O exemplo abaixo popula um DataGrid e muda a cor de uma coluna com referêrencia no seu status, se for ativo ficar verde, se for inativo fica vermelho.  Segue o exemplo:

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:XMLList id="xml">

    <usuario>

        <nome>João</nome>

        <status>Ativo</status>

    </usuario>

     <usuario>

        <nome>José</nome>

        <status>Ativo</status>

    </usuario>

    <usuario>

        <nome>Antonio</nome>

        <status>Inativo</status>

    </usuario>

</mx:XMLList>

<mx:DataGrid id="dg" width="526" dataProvider="{xml}" x="321" y="169">

  <mx:columns>

    <mx:DataGridColumn dataField="nome" headerText="Nome"/>

    <mx:DataGridColumn paddingLeft="5" dataField="status" headerText="Status" sortable="false">

      <mx:itemRenderer>

        <mx:Component>

          <mx:VBox horizontalScrollPolicy="off">

            <mx:Script>

              <![CDATA[

              ///Retorna uma cor determinada dependendo do status

              public function formataCorStatus(status:String):uint{

                switch(status){

                  case "Ativo":

                    return 0x009900; //cor verde

                  case "Inativo":

                    return 0xFF0000; //cor vermelha

                  default:

                    return 0x000000; //cor preta

                }

              }

              ]]>

            </mx:Script>

            <mx:HBox>

              <mx:Label text="{data.status}" color="{formataCorStatus(data.status)}"/>

            </mx:HBox>

          </mx:VBox>

        </mx:Component>

      </mx:itemRenderer>

    </mx:DataGridColumn>

  </mx:columns>

</mx:DataGrid>

</mx:Application>

A função formataCorStatus que é responsável por pegar  os dados da campo status e verificar se o mesmo é ativo ou inativo, ela retorna um uint que é o valor númerico referente a um cor para ser colocado no atributo color do objeto Label. Repare que a função formataCorStatus está dentro do VBox que fica dentro do Componet, isto é feito para que o objeto Label consiga enxergar a função.

Foi necessário usar um objeto Label para que a cor não fosse atribuida a todas as linhas da coluna, para se colocar um objeto Label em um DataGrid também foi preciso de um itemRenderer. Lembrando que está é somente uma das maneiras de se conseguir este resultado.

Ate++.

Expressões regulares Flex

Olá, hoje vou dar uma dica sobre expressões regulares no flex. É comum acontecer a necessidade de se executar uma substituição em um texto, no caso do flex usamos o replace para fazer isto ex: 

meuTexto.replace (“[“, “”);

O código acima acha o primeiro conchete do texto e substitui por vazio, esta é uma forma de retirar o conchete de um texto. Mas digamos que temos mais de um conchete no nosso texto, então teriamos que repetir o replace várias vezes ? É ai que entra a expressão regular para achar todos os conchetes do texto.

Para criar uma expressão regular usamos a classe RegExp ela recebe um valor ex:

var expressao:RegExp = /\[/g; 

A primeira barra é o inicio da expressão, a barra invertida a seguir é para que a expressão reconheça o conchete como um texto, não como um carecter especial da expressão, logo depois temos o caracter que desejamos retirar no caso o [, e a /g diz a expressão para procurar por todo o texto.

Pronto agora vamos ao exemplo de como utilizar a expressão acima.

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 

  creationComplete="init();">

<mx:Script>

  <![CDATA[

    private function init():void{

      var texto:String = "[teste] [de] [retirada] [de] [conchetes]";

      //Atenção para utilizar o trace rode o projeto em modo debug, 

      //ao fim da execução olhe na janela console, lá estará a impressão do texto

      trace(retiraConchetes(texto));

    }

    private function retiraConchetes(str:String):String{

      //  retira o [  

      var expressao:RegExp = /\[/g;  

      str = str.replace(expressao, "");

      //  retira o ]  

      expressao = /\]/g;  

      str = str.replace(expressao, "");

      return str;

    }

  ]]>

</mx:Script>

</mx:Application>

No exemplo acima usamos a expressão criada no replace para que ela encontre todos os conchetes.

Abraços e até à próxima

Migrar dados de tabelas usando cursor no SQL Server

Olá! Hoje venho com um exemplo para aqueles que já precisaram migrar seus dados de uma tabela para outra. Uma das formas de se fazer isto e usando um cursor, a lógica é simples, ele irá rodar em um tabela e em cada loop do cursor serão inserido os dados em outra tabela. Vamos ao código:

  --declara variaveis para pegar valores dos campos  

  DECLARE @V_Campo1 bigint;

  DECLARE @V_Campo2 nvarchar(80);

  DECLARE @V_Campo3 nvarchar(256);

  --Declara o cursor, é já executa o select para preenche-lo

  DECLARE C_MeuCursor CURSOR FOR

  SELECT

    Campo1,

    Campo2,

    Campo3

  FROM

    MinhaTabelaOrigem;

  --Abre o cursor

  OPEN C_MeuCursor;

  --Pega os dados do select, note que os dados são pegos na mesma ordem do select.

  FETCH NEXT FROM C_MeuCursor INTO

    @V_Campo1,

    @V_Campo2,

    @V_Campo3;

  --Executa o loop enquanto houver registros

  WHILE (@@fetch_status = 0)

    BEGIN

    --em cada loop insere na tabela de destino as variaveis que foram carregadas pelo cursor.

    --Note que aqui deverá ser usado as variaveis que foram declaradas.

    INSERT INTO MinhaTabelaDestino(Codigo, Nome, Endereco)

    VALUES(@V_Campo1, @V_Campo2, @V_Campo3);

    --Caso o campo selecionado permita nulos trate o mesmo com a função ISNULL(@V_Campo1, 0) 

    --para que o processo não pare no meio

    --Depois de executar a operação desejada, passa para o próximo registro.

    FETCH NEXT FROM C_MeuCursor INTO

      @V_Campo1,

      @V_Campo2,

      @V_Campo3;

    END;

  --Fecha o cursor e retira ele da memória

  CLOSE C_MeuCursor;

  DEALLOCATE C_MeuCursor;

Logo no inicio eu declarado o cursor, o select poderá ser em mais de uma tabela so é preciso definir os campos que deseja selecionar, no nosso caso foi executado em uma tabela só. Em seguida temos o loop, dependendo de quantos registros foram encontrados temos quantas vezes o loop irá rodar.

Dentro do loop nos chamamos o insert que irá passar os dados para outra tabela. Usamos as variáveis que carregamos com o cursor. Do mais cada parte do código já está com os comentários. Por hoje e só.

Espero que tenha ajudado. Até++

Passando um método como parâmetro no flex

Olá a todos, novamente venho mostrar uma dica que poderá ser usada em ocasiões específicas. Quem está acostumado a programar sempre usa metódos ou funções com passagens de parâmetros, objetos, string, int, long e por ai vai. Mas além de parâmetros em alguns casos também seria interessante passar o método todo e não somente um objeto, e isto é possivel no flex com as3.  Abaixo segue o código de exemplo:

<?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 mx.controls.Alert;

      private function init():void{

        //Passa um metodo como parametro

        recebeMetodo(meuMetodo);

      }

      private function meuMetodo():void{

        Alert.show("Executou meu metodo");

      }

      private function recebeMetodo(fnc:Function):void{

        //Nesta linha e como se estive sendo chamando meuMetodo();

        fnc();

      }

    ]]>

  </mx:Script>

</mx:Application>

No exemplo à cima logo no inicio chamamos o método “recebeMetodo” ele recebe como parâmetro uma Function, no nosso caso foi passo “meuMetodo” que simplemente joga uma mensagem na tela, mais poderia realizar qualquer operação tal com atualizar toda a tela.

Para efeito prático, imagine duas telas onde uma telas precisa chamar o método que esta na outra.

Por hoje e só, até à próxima.

Encontrando domínio do email AS3

Olá a todos!  Por estes dias estive trabalhando com servidores de email, e surgiu a necessidade de buscar o domínio do email, então desenvolvi uma função para realizar este trabalho. Achei interessante postar aqui como uma breve dica espero que seja útil.

private function buscaDominio(email:String):String{

  var array:Array = email.split("@");

  if(array[1] != null){

    return array[1]

  }

  else{

    return "";

  }

}

Abraços, e até a próxima.

Web Services com Flex

Olá a todos. Neste post vou fala um pouco sobre umas das formas que o flex usa para comunicação com outras linguagens de programação, os web services. Irei mostrar somente como e feita a chamada pelo flex, usando o objeto WebService para realizar esta operação. Segue o codigo para análise:

<?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;

      import mx.rpc.events.FaultEvent;

      import mx.rpc.events.ResultEvent;

      private function clickBotao():void{

        //chamada da operação do web service

        webService.getOperation("OperacaoWebService").send();

      }

      private function retornaWebService(evt:ResultEvent):void{

        //O retorno do seu web service deve ser tratado aqui

        trace(evt.result);  

      }

      private function erroWebService(erro:FaultEvent):void{

        Alert.show("Ocorreu um erro!");

      }

    ]]>

  </mx:Script>

  <mx:Button x="430" y="66" label="Botão" click="clickBotao();"/>

  <mx:WebService id="webService" wsdl="http://meudominio.com.br/MeuWebService.asmx?wsdl">

    <mx:operation name="OperacaoWebService" result="retornaWebService(event)" fault="erroWebService(event)"/> 

  </mx:WebService>

</mx:Application>

Logo a cima temos a classe WebService com uma operação chamada de “OperacaoWebService”, este nome será substituido pelo nome do web service desenvolvido. No exemplo não existe passagem de parâmetros, e o mesmo pode existir retorno ou não.

Neste exemplo é usado um web service asp net mas poderia ser usado um em php, jsp e outros. A implementação do web service não aparece no exemplo, ficando livre para futuras implementações.

Na prática ele servirá para buscar uma lista de objetos, retonar uma string ou mesmo chamar um procedimento simples sem parâmetros.

Tanto o erro quanto o retorno são tratados no objeto operation, e neste objeto também que podemos passar parâmetros caso necessário. Na hora da chamada do web service  basta colocar os dados no send. Segue o exemplo:

webService.getOperation("OperacaoWebService").send(“Nome”, “Endereco”, “CEP”);

Por hoje e só. Ate++

Upload de arquivos em Flex

Olá a todos, hoje venho falar um pouco sobre upload de arquivos no flex. O exemplo trata da primeira parte do trabalho, que e a captura do arquivo na maquina do cliente e o envio do arquivo através de uma requisição GET. No flex e necessário que uma outra página capture este arquivo e trate o mesmo, ela pode ser um pagina, jsp, php, aspx, ou alguma outra tecnologia que trabalhe com gerenciamento de arquivos WEB. Então vamos o código

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Script>

<![CDATA[

  private var arquivo:FileReference = new FileReference();

  private function onSelect(evt:Event):void {

    txtNomeArquivo.text = arquivo.name;

  }

  private function onUploadIoError(evt:IOErrorEvent):void {

    //Para erros no upload do arquivo tratar aqui.

  }

  private function onUploadSecurityError(evt:SecurityErrorEvent):void {

    //Para erros de segurança tratar aqui.

  }

]]>

</mx:Script>

<mx:Label x="337" y="136" text="Arquivo"/>

<mx:TextInput id="txtNomeArquivo" x="391" y="134" width="322"/>

<mx:Button x="391" y="164" label="Browser">

  <mx:click>

    <![CDATA[

      //Abre o browser para seleção do arquivo desejado.

      arquivo.addEventListener(Event.SELECT, onSelect);

      arquivo.addEventListener(IOErrorEvent.IO_ERROR, onUploadIoError);

      arquivo.addEventListener(SecurityErrorEvent.SECURITY_ERROR, onUploadSecurityError);

      var filtros:FileFilter = new FileFilter("Arquivos de Retorno *.txt; *.doc; *.docx; *.xls; *.xlsx",

                                              "*.txt; *.doc; *.docx; *.xls; *.xlsx");

      var array:Array = new Array(filtros);

      arquivo.browse(array);

    ]]>

  </mx:click>

</mx:Button>

<mx:Button x="472" y="164" label="Enviar">

  <mx:click>

    <![CDATA[

      //Envia o arquivo para Upload

       var sendVars:URLVariables = new URLVariables();

      sendVars.action = "upload";

      //aqui no sendVars poder ser passado mais de um variavel. 

      //Ex: sendVars.minhavariavel = "teste";

      //objeto usado para setar a pagina que receberá o arquivo

      var request:URLRequest = new URLRequest();

      request.data = sendVars;

      //e necessario uma pagina para receber o arquivo, ex: .php; .jsp; .aspx.

      //No caso foi usado um pagina de aspx .net.

      //A pagina deve receber o arquivo e tratá-lo.

      request.url = "http://meudominio.com.br/PaginaUpload.ashx";

      request.method = URLRequestMethod.GET; //requisição do tipo get

      //Aqui o objeto FileReference "arquivo" envia o arquivo que foi carregado 

                //com o nome de "NomeArquivo"

      //A pagina que reberá o arquivo deve este mesmo nome para manipula-lo

      arquivo.upload(request, "NomeArquivo");

    ]]>

  </mx:click>

</mx:Button>

</mx:Application>

No caso o trabalho de tramento do arquivo pode ser feito em uma tecnlogia de sua escolha, mas isto e tema para um outro post, por enquanto é só.

Ate++. Abraço a todos.

Image – Efeito de transição

Olá! Hoje vou falar um pouco sobre objetos personalizados, para quem já precisou de um menu feito de imagens ai vai o exemplo de um componente que pode ajudar.  Ao colocar uma imagem como menu uma das coisas que vem a cabeça seria, “quando eu passo o mouse sobre ele continua estatica”, não seria melhor se eu pudesse trocar a imagem e de quebra produzir um efeito de transição. Este foi o meu problema por estes dias, então achei um exemplo na net e fiz um adaptação nele.

O código abaixo e do componente que eu chamei de ImageMenu, com o efeito de transição já personalizado, ele trabalha com os states do Flex o que neste caso ajuda muito, este componente também usa o glow para criar um segundo efeito ao clicar na imagem. Para o glow, pode trocar a cor usada conforme a necessidade.

<?xml version="1.0" encoding="utf-8"?>

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"

 creationComplete="init()" creationPolicy="all" >


 <mx:Script>

 <![CDATA[

public var upImage:String; //Imagem padrão

 [Bindable]

public var overImage:String; //Imagem para efeito do mouse

public var fncClick:Function; //Função usada para o click do mouse

public var boEfeitoClick:Boolean = true;  //Flag para controle do efeito glow do click do mouse

private function init():void{

    up.source = upImage; //Coloca a imagem padrão 


    //Adicioniona os eventos a imagem

    addEventListener(MouseEvent.ROLL_OVER, mouseRollOver);

    addEventListener(MouseEvent.ROLL_OUT, mouseRollOut);

    addEventListener(MouseEvent.CLICK, mouseClick);


    //Executa o efeito ao iniciar.

    mouseRollOver(null);

    mouseRollOut(null);

}

private function mouseRollOver(e:MouseEvent):void{

 if(boEfeitoClick)

     currentState = 'overState';

    else

     currentState = 'overState2';

}

  private function mouseRollOut(e:MouseEvent):void{

    currentState = '';

}


private function mouseClick(e:MouseEvent):void{

 if(fncClick != null)

     fncClick();

}

 ]]>

</mx:Script>

<mx:Glow id="glowImage" duration="400"

    alphaFrom="1.0" alphaTo="0.3"

    blurXFrom="0.0" blurXTo="50.0"

    blurYFrom="0.0" blurYTo="50.0"

    color="0x8b9094"/>

<mx:Glow id="unglowImage" duration="400"

    alphaFrom="0.3" alphaTo="0.0"

    blurXFrom="50.0" blurXTo="0.0"

    blurYFrom="50.0" blurYTo="0.0"

    color="0x8b9094"/>

<mx:states>

 <!--O primeiro estado usa o efeito glow para o click no mouse-->

    <mx:State name="overState">

        <mx:RemoveChild target="{up}"/>

        <mx:AddChild relativeTo="{this}">

         <mx:Image source="{overImage}" id="imgOver"

           mouseDownEffect="{glowImage}"

           mouseUpEffect="{unglowImage}"/>

        </mx:AddChild>

    </mx:State>

    <!--No estado 2 não usa o efeito glow, o flag boEfeitoClick é que controla -->

    <mx:State name="overState2">

        <mx:RemoveChild target="{up}"/>

        <mx:AddChild relativeTo="{this}">

         <mx:Image source="{overImage}" id="imgOver2"/>

        </mx:AddChild>

    </mx:State>

</mx:states>

<!--Ao mudar de um estado para o outro executa o efeito de transição-->

<mx:transitions>

    <mx:Transition fromState="*" toState="overState">

     <mx:Fade duration="500" alphaFrom="0" alphaTo="1" target="{imgOver}"/>

    </mx:Transition>

    <mx:Transition fromState="overState" toState="*">

     <mx:Fade duration="200" alphaFrom="0" alphaTo="1" target="{up}"/>

    </mx:Transition>

     <mx:Transition fromState="*" toState="overState2">

     <mx:Fade duration="500" alphaFrom="0" alphaTo="1" target="{imgOver2}"/>

    </mx:Transition>

    <mx:Transition fromState="overState2" toState="*">

     <mx:Fade duration="200" alphaFrom="0" alphaTo="1" target="{up}"/>

    </mx:Transition>

 </mx:transitions>

  <!--Imagem usada para troca-->

<mx:Image id="up"/>

</mx:Canvas>

O código abaixo é um exemplo de como utilizar o componente:

<componentes:ImagemMenu id="imgNome" upImage="../imagens/ImagemPadrao.png"

     overImage="../imagens/ImagemMouseOver.png"

     fncClick="{imgNome_click}"/>

Por enquanto e só, até++.

Flex Builder 3 para Flash Builder 4 e Flex 4 SDK

Olá, para aqueles que ainda não tiveram a oportunidade de ver a ferramenta que é usada para desenvolver em Flex SDK, é o Flex Builder 3 e já está mudando de nome, agora irá se chamar Flash Builder 4 (codinome gumbo) já saiu o beta 1 do Flash Builder 4.

Hoje você que já desenvolve em Flex pode escolher usar Flex Builder 3 plugin no Eclipse ou o proprio console que trabalha em cima do Flex SDK 3 . A partir de agora o Flash Builder 4 poderá ser usado com plugin do Eclipse também e como console isolado trabalhando em cima do Flex 4 SDK, tudo parece uma jogada de marketing da Adobe, que quer promover o nome Flash Builder para o lado comercial ou seja este é pago, enquanto que o Flex 4 SDK continua a ser gratuito. Bem marketing a parte parece que a nova ferramenta tem bastante integração com outras ferramentas da Adobe, tal como o Flash, mais em especial o Flash Catalyst que e uma ferramenta para design de interfaces, o que parece ser um grande passo para separar designers de programadores.

Para aqueles que já usam o Flex Builder 3 como eu, já podem ir testando o Flash Builder Beta 1 é dar sua opinião para melhorá-lo, vou pesquisar um pouco mais e depois posto mais novidades, segue abaixo o link do projeto para exemplos, tutoriais e downloads:

http://labs.adobe.com/technologies/flashbuilder4/tutorials/