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

Criando uma janela modal para validação de erros com ASP.NET

A introdução do AJAX Control toolkit abriu muitas possibilidades interessantes para desenvolvimento de interfaces de usuário mais ricas em ASP.NET. Adicione a isso uma IDE maravilhosa como o Visual Studio, e obtemos resultados estonteantes, sem muito esforço.

Callouts para cada validator

Modal exibindo os erros ao clicar no botão

Neste artigo, veremos como melhorar as validações client-side usando o AJAX Control Toolkit. Abaixo estão screen shots do que nós estamos tentando conseguir. O propósito disto é melhorar a experiência do usuário com muito pouco trabalho.

Criando um form simples

Usando o Visual Studio (ou o Visual Web Developer) crie um novo “ASP.NET Web Application“ (File>>New>> Project>>Visual C#>>Web>>ASP.NET Web Application). Eu criei um simples formulário, como esse abaixo:

Um formulário ASP.NET simples.

Como podemos ver, ele se parece com qualquer outro formulário em ASP.NET. Ele tem alguns textboxes, e labels correspondentes. Eu adicionei alguns validators para cada textbox. Name e email são obrigatórios, definidos pelo “RequiredFieldValidator”. A idade deve estar entre 18 e 100, garantida pelo “RangeValidator”. Existem “RegularExpressionValidator”s para email, e podemos usar validators feitos por nós mesmos para definir o CEP. E por último, um botão “Submit”, ou seja: Uma página ASP.NET simples.

Adicionando os callouts dos validadores

Primeiro, colocamos um controle “ValidationSummary” na página. Agora, todos os nossos erros serão exibidos em um único lugar. Isto será útil para implementar a janela modal na próxima sessão. Note que coloquei a propriedade “Text” dos validators para “*”, pois desejamos que as verdadeiras mensagens de erro sejam exibidos no validation summary.

Os callouts são efetuados usando o “ValidatorCalloutExtender” do AJAX Control Toolkit. Arraste um “ValidatorCalloutExtender” do toolbox para a tela. Defina o “TargetControlID” deste extender para o ID do nosso validator. Coloquei cinco validators na minha página, então utilizei o mesmo número de controles “ValidatorCalloutExtender”, um para cada validator. Modifique o “TargetControlID” de cada extender para que aponte para um validator.

Por incrível que pareça, isso é tudo o que precisamos para fazer callouts com um efeito bonito. Execute sua página e clique no botão “Submit” sem digitar nada nas textboxes. Você verá essas callouts. Tente digitar informações erradas em qualquer uma das textboxes, um callout aparecerá perto dele, exibindo a mensagem de erro da validação que falhou.

Criando a janela modal (E desabilitando o background!)

A melhor parte do nosso modal é que ele desabilita a janela completamente. Ela adiciona uma camada translucida sobre o background, deixando a tela limpa. Novamente, o AJAX Control Toolkit vem para nos auxiliar. O “ModalPopupExtender” é perfeito para isso.Arraste um controle desse tipo para a tela. Depois disso, criamos uma DIV que vai agir como popup para nós, conforme o código abaixo:

<ajaxToolkit:ModalPopupExtender ID=”ModalExtnd1″

runat=”server” TargetControlID=”lblHidden”

PopupControlID=”SummaryDiv” BackgroundCssClass=”popupbg” >

</ajaxToolkit:ModalPopupExtender>

<div id=”SummaryDiv” class=”popupdiv”>

<table width=”100%” style=”font-family: “Trebuchet MS”, Tahoma, Verdana”>

<tr><td bgcolor=”skyblue”>

Errors on this page !

</td></tr>

<tr><td>

<asp:ValidationSummary id=”ValSum1″ runat=”server” Font-Names=”Arail”>

</asp:ValidationSummary>

</td></tr>

<tr><td align=”center”>

<input type=”button” value=”OK” onclick=”$find(“ModalExtnd1”).hide();”/>

</td></tr>

</table>

</div>

<asp:Label ID=”lblHidden” runat=”server” Text=”hidden” CssClass=”hidelbl”>

</asp:Label>

Nós definimos a propriedade “PopupControlID” do “ ModalPopupExtender”, para que aponte para “SummaryDiv”, o id da <div> recém criada. A propriedade “TargetControlID” do ModalPopupExtender, precisa ser definida. No nosso caso nós iremos definí-la apontando para um label escondido. Faremos isto por que queremos suprimir a funcionalidade “show/hide” deste extender. Nossa <div> consiste em um botão HTML, no qual a janela modal é escondida quando clicamos. Note também que movemos o validation summary para dentro da nossa <div>.

Form depois da adição do ModalPopupExtender e da

Vejamos agora o CSS para o nosso exemplo:

<style type=”text/css”>

.popupdiv{background-color:ivory;border:solid 1px skyblue;width:250px;display:block}

.popupbg{background-color:gray; filter: alpha(opacity=60); opacity:0.60}

.hidelbl{display:none;}

</style>

Existem três classes definidas aqui. A classe “popupbg” está atribuída à propriedade “BackgroundCssClass” do ModalPopupExtender. Perceba que definimos no código a opacidade do background na janela modal.

Agora, um pouco de javascript. Esta página contém uma função de javascript que é chamada para exibir ou esconder a janela modal, no evento “OnClick” do botão”submit”. Esta função deve ser inteligente o suficiente para exibir a janela modal somente em caso de falha da validação:

<script type=”text/javascript”>

function ShowModalDialog()

{var x= $find(”ModalExtnd1″);

Page_ClientValidate();

if(!Page_IsValid)

x.show();

}

function init()

{document.getElementById(“SummaryDiv”).style.display=“none”;}

</script>

Aqui nós utilizamos a API de validação client-side do “ASP.NET”. Uma chamada ao “Page_ClientValidate” ativa todos os validators. Se algo falhar, a variável global do javascript “Page_IsValid” é definida como falsa. Agora para exibir ou esconder a janela modal dialog box, anexaremos um handler ao botão submit com o seguinte código Server-side:

protected void Page_PreRender(object sender, EventArgs e)

{

btnSubmit.Attributes.Add(”onmouseup”, “ShowModalDialog();”);

}

Execute o exemplo, com alguns dados inválidos. Veremos a exibição da janela modal.

Janela Modal exibindo erros ao clicar no botão submit. Repare que o callout está visível por trás do background translúcido.

Mas há um pequeno problema que eu encontrei aqui. Se a propriedade “display” da <div> estiver definida como “none” ela não será exibida, embora o background seja desabilitado. Então eu tive que definir esta propriedade com o valor “block”. Porém, isto nos traz outro problema: A <div> fica visível por uma fração de segundo, quando a página carrega. Para resolver isto, eu tive que adotar uma solução um tanto quanto deselegante, mas funcional. Defina no código da página:

<body onload=”init();”>

Execute o exemplo novamente. Desta vez a <div> não vai piscar quando a página carregar!

Quaisquer sugestões, comentários e críticas são sempre bem-vindos. Abraços e keep coding!

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.