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

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.

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.

Passando parametros via post no Flex

Olá, para aqueles que estão acostumados com jsp, php, asp e bastante comum o uso de passagem de parâmetros via post, no caso do Flex  e mais comum o uso de web services, serviços http, e remote object. Estava criando um exemplo simples em Flex e não estava querendo usar o fluorine para integrar com o .net, até porque era uma página so, coisa muito simples, então acabei chegando em uma solução bem simples que lembra um pouco os tempos que eu trabalhava com jsp. Para aqueles que tem uma página que recebe parametros via post com este exemplo poderá usar o flex para realizar este procedimento.

Codigo Flex, chamada de uma página que recebe parametros via post:

private function chamaPaginaPost():void{

    var cabecalho:URLRequestHeader = new URLRequestHeader ("Content-type", "application/octet-stream");

    var url:String = "http://localhost/MinhaPagina.aspx";

    var requisicao:URLRequest = new URLRequest(url);


    var variaveis:URLVariables = new URLVariables();

    variaveis.codigo = 1;

    variaveis.nome = "José da Silva";


    requisicao.requestHeaders.push (cabecalho);

    requisicao.data = variaveis;

    navigateToURL(requisicao, "_blank");

}

Logo abaixo o exemplo da página aspx com C# que receber os parâmetros via post, esta pagina poderia ser em uma php, asp ou outra qualquer.

protected void Page_Load(object sender, EventArgs e)

{

    string codigo;

    string nome;


    try

    {

        codigo = Convert.ToString(Request.Params["codigo"]);

        nome = Convert.ToString(Request.Params["nome"]);


        Response.Write("Código: " + codigo + "<br/>");

        Response.Write("Nome: " + nome);

    }

    catch (Exception ex)

    {

       Response.Write("Erro" + ex.Message);

    }


}

Espero que tenha sido útil, até++.

Power for Rich .NET AJAX Applications

Olá,

Navegando por essa internet a fora, encontrei este projeto no codeplex que me chamou bastante atenção, e por isso gostaria de disponibilizar para os demais.

Developing and deploying rich internet business applications has never been this simple, fast, cost-effective and secure

Visual WebGui is an open source RIA platform, atop standard .NET. Its framework enables
development & deployment of AJAX desktop-like web applications on the server which are then virtualized on a standard
browser with no specific installation.
See Web Design Tools project
See Silverlight extension project

Web Development & UI Design

Visual WebGui RIA platform/framework combines next generation web user & developer experiences which free you to focus on your customer’s satisfaction and delivering solutions with faster ROI. Since Visual WebGui is based on standard, proven technologies it enables you to deliver
flexible, high performing, complex web applications without the steep learning curve and risks involved.
RIA Web Development

Simply and quickly deliver complete RIAs

• Simple Development - drag and drop designers
• Simple Migration & Modernization - based on common APIs
• Simple Adoption - no new learning skills
• Rich UI Design
• Complete Functionality
• Complete Flexibility
• Complete Extensibility

Para ver o projeto no codeplex, acesse -> http://visualwebgui.codeplex.com/

Abraço,

Nelson Borges

Começando…

Olá pessoal eu sou o Vinícius Sandim, meus posts serão voltados ao desenvolvimento web com conceito RIA, notícias, tutoriais, eventos, novidades, etc.

Neste estarei apenas deixando alguns links bacanas para quem quer saber mais sobre este conceito:

Definição
Adobe Flex
Microsoft Silverlight
Igor Costa
Igor Mussardo
Dclick
Meu Blog Pessoal
Alemão e seus convidados
Fábio Vedovelli
FlexExamples (em inglês)

Bom por enquanto é isso, vou ficando por aqui, até breve.