DataBind na Web    

Para quem é programador WindowsForm, o conceito de DataBind é comum. Caso você não saiba muito do que estou falando, o conceito é bem simples:

Você define um DataSource em um Formulário, e com isso consegue atrelar um campo da fonte de dado a um campo do Formulário, fazendo que qualquer alteração que aconteça em uma das pontas, reflita na outra.

Isso pode ser muito útil, pois ajuda muito no tempo de desenvolvimento, visto que não é necessário codificar dois códigos, um para atribuir informações da fonte de dados aos campos da tela, e depois o caminho contrário.

Na Web esse tipo de conceito não é muito comum, mesmo que em WebForm você consiga adicionar DataSources a uma página, e utilizar DataBinders nos campos, o conceito é consideravelmente diferente, visto que a direção dos dados é apenas de Fonte de Dados para campos, e o caminho inverso deve ser feito manualmente.

Como adicionar DataBinders na Web

Bom, quem me conhece sabe que dificilmente eu iria  elogiar Windows Forms e criticar a Web desta forma. De fato, na minha opinião, o que a Web ainda tem que não é tão bom é a banda da internet, que é um problema que logo mais será resolvido no mundo. Quanto experiência do usuário, ou experiência de desenvolvimento, cada vez mais eu percebo que a Web não deixa nada a desejar, e tem ficado cada vez melhor, com HTML5, CSS 3, ou mesmo plugins como SilverLight ou Flash.

Mas o que quero falar aqui é da sensação dos últimos anos: JQuery, que pode ser baixada clicando aqui.

JQuery, segundo definição do próprio site, é uma biblioteca JavaScript que simplifica a transformação de HTML, manuseio de eventos da página, animação e interações de Ajax para desenvolvimento rápido para Web. JQuery é projetado para mudar a forma que você escreve JavaScript

Bela definição, e de fato JQuery é uma biblioteca poderosa que ajuda muito a controlar o comportamento de uma página Web. JQuery é uma biblioteca tão popular hoje em dia, que a própria Microsoft teve que abraçar, e agora ela já vem embutida nos projetos web do Visual Studio 2010.

A Microsoft, inclusive, tem incentivado o seu time de desenvolvimento a contribuir com o JQuery, e eles têm feito grandes feitos a pelo menos dois anos.

Hoje vou falar de uma das contribuições: Data Linking

Utilizando JQuery Data Linking para realizar Data Bind na Web

Data Linking é a forma que a Microsoft achou para realizar databing na Web, e o funcionando é extremamente satisfatório. Como no Windows Form, o funcionamento é bidirecional (fonte de dados para campos e vice-versa).

Seu funcionamento é simples, no padrão do JQuery: a partir de um objeto JSON, que pode ser retornado de um PageMethod, nós fazemos os binds com apenas uma linha de código.

Abaixo segue o código de uma página utilizando esse plugin:

 

<pre><script type=" src="jquery-1.4.2.js" javascript?="javascript?" text="text"></script>
<script type="text/javascript" src="jQuery.datalink.js"></script>

    <h2>
        Data Linking
    </h2>
    <p>
        Nome: <input id="txtNome" />
    </p>
    <p>
        Idade: <input id="txtIdade" />
    </p>
    <input id="btnClick" value="Ler" type="button" />
    <input id="btnScript" value="Alterar Via Script" type="button" /></pre>

<script type="text/javascript">

    var pessoa = { Nome: "Frederico", Idade: 24 };

    $("#btnClick").click(ler);

    $("#btnScript").click(function () {
        //Alterando programaticamente
        $(pessoa).attr("Nome", "Frederico Emídio");
    });

    function preencher() {
        //Definindo o bind.
        $(pessoa).linkBoth("Nome", "#txtNome", "val")
                .linkBoth("Idade", "#txtIdade", "val");
    }

    function ler() {
        alert(pessoa.Nome + ' - ' + pessoa.Idade);
    }

    preencher();
</script>

Os três parâmetros do método linkBoth são óbvios: Nome da propriedade do DataSource, nome do Controle, e método que deve ser usado para a realização do bind. (Obs.: Caso você queira apenas o bind na direção da fonte de dados para os controles, você poderia usar o método linkFrom, utilizando os mesmos parâmetros).

O resultado da página pode ser visto aqui. Neste exemplo você pode ver que as alterações, tanto feitas no código como nos campos são refletidas em ambos os locais.

Uma outra função também existe neste plugin, que é a de formatação das informações ao atribuir os valores nos campos, mas para o intuito deste post, o que foi mostrado já é o suficiente.

Clique aqui para baixar o plugin Data Link “beta”

Até o próximo post!


  
     
  
14. setembro 2010 09:50 by Frederico | Comments (1) | Permalink

Comments

Rafael
E viva ao WinForms e WPF, hehe! =P

Brincadeiras à parte, gostei muito desse tópico. Essa é uma das grandes barreiras que enfrentamos quando desenvolvemos para web, ainda mais quem tem origem no WinForms, como eu.
Isso vai ajudar muita gente, como já me ajudou! =)

Parabéns!

Abraços e até amanhã no último dia do TechEd 2010! 0/
15/09/2010 09:25:02 #
Comments are closed

Sobre mim

Minha Imagem

Meu nome é Frederico Batista Emídio, trabalho com desenvolvimento de sistemas profissionalmente a oito anos, porém, já faço sites pessoais a pelo menos dez anos.

Para saber mais clique aqui.

Páginas

Calendário

<<  novembro 2018  >>
seteququsedo
2930311234
567891011
12131415161718
19202122232425
262728293012
3456789

Visualizar posts em um Calendário
Sigua @fredemidio

MCP Asp.NET