{tecnologia, conceitos, negócios, idéias, práticas, .NET, ruby, osx, ios e algo mais}
26/02/2010
Asp.Net Ajax Library é uma nova biblioteca JavaScript que nos permite criar aplicações orientadas a dados de forma simples e prática.Ela difere do Ajax Control Toolkit no sentido de que todos os seus controles e funcionalidades rodam inteiramente no client, ou seja, é possível utilizar o Ajax Library em páginas 100% html, nenhum code behind, nenhum arquivo .aspx e nenhum arquivo .cs (é possível trabalhar com .aspx e codebehind, só não é obrigatório).Para realizarmos este exemplo vamos fazer o download da biblioteca no CodePlex neste link: http://ajax.codeplex.com/Neste exemplo veremos como gerar uma tabela de dados contendo o nome de algumas bandas e suas respectivas fotos.Não utilizaremos ainda acesso a webservices, trabalharemos com dados locais.Para isso criaremos um projeto Asp.Net WebSite vazio, e adicionaremos um arquivo html, chamado Default.htm (Sim, nossa aplicação toda executará em um arquivo .htm).Vamos adicionar ao projeto os arquivos .js que fazem parte da biblioteca, como mostra a imagem abaixo:[Adicionando arquivos js Asp.Net Ajax Library 4.0](http://viniciusquaiato.com/images_posts/Adicionando-arquivos-js1-300x229.jpg "Adicionando arquivos js Asp.Net Ajax Library 4.0")
Feito isso adicionarei os trechos de código abaixo na página Default.html. Separei em dois blocos para mostrar primeiro o código JavaScript e depois o código HTML, no final colocarei o código completo da página.
Sys.require([Sys.components.dataView], function () {
var bandas = [ { Nome: 'Metallica', Foto: 'metallica.jpg' }
, { Nome: 'The Smiths', Foto: 'smiths.jpg' }
, { Nome: 'Depeche Mode', Foto: 'depeche.jpg' }
, { Nome: 'Los hermanos', Foto: 'hermanos.jpg' }
];
Sys.create.dataView("#corpo",{
ata: bandas}
);
}
);
</script>
Como pode ser visto na linha 1 estou adicionando uma referência para o arquivo Start.js, que faz parte do Asp.Net Ajax Library, e adicionamos no nosso projeto.Na linha 3 começa a acontecer a "mágica". Chamamos o método require que recebe neste caso dois parâmetros. O primeiro é uma biblioteca a ser carregada, neste caso o Sys.components.dataView. o segundo parâmetro é uma função a ser executada depois que a biblioteca foi carregada, ou seja, seus recursos já estão disponíveis.Um dos principais recursos para a exibição de dados é o DataView. DataView é basicamente um template, criamos marcações HTML e então pedimos para o Ajax Library transformar em um dataview.Da linha 5 até linha 10 eu crio um objeto utilizando notação JSON, contendo o nome de uma banda, e o nome de um arquivo com a imagem da banda, bastante simples. Este objeto será nossa fonte de dados.Na linha 11 ocorre o bind dos dados. Utilizando o Sys.create.dataView passamos como primeiro parâmetro o id de um elemento HTML onde deve ser criado o dataview. E como segundo parâmetro dizemos que o objeto bandas deve ser usado como fonte de dados.Bastante simples.Abaixo está o código HTML, onde definimos o elemento que será o dataView:
<tr> <td> <span>{
Nome}
}
</span> </td> <td> ![]() </td> </tr> </tbody></table>
Apenas criamos uma table, simples. Na linha 8 está um detalhe importante pois utilizamos uma class chamada sys-template. Esta class é necessária para que o Ajax Library reconheça este elemento como um template com o qual ele poderá trabalhar.Na linha 11 criamos um span e como valor do span utilizamos a marcação { Nome} } que diz para o Ajax Library que ali deve ser colocado o campo Nome da fonte de dados que passamos para ele.Na linha 14 fazemos quase a mesma coisa, a diferença é que ao invés de utilizarmos o atributo src do elemento img, utilizamos sys-src, pois o valor deste atributo { Foto} }
está entre as aspas, e é com o sys-src que o Ajax Library consegue fazer o bind corretamente.Pronto! Agora temos nossa aplicação funcionando, realizando o bind da nossa fonte de dados, e exibindo tudo da maneira desejada. Como mostra a figura abaixo:[Página usando Asp.Net Ajax Library](http://viniciusquaiato.com/images_posts/Pagina-usando-Asp.Net-Ajax-Library-247x300.jpg "Página usando Asp.Net Ajax Library")
O código completo da página Default.html está aqui:
Sys.require([Sys.components.dataView], function () {
var bandas = [ { Nome: 'Metallica', Foto: 'metallica.jpg' }
, { Nome: 'The Smiths', Foto: 'smiths.jpg' }
, { Nome: 'Depeche Mode', Foto: 'depeche.jpg' }
, { Nome: 'Los hermanos', Foto: 'hermanos.jpg' }
];
Sys.create.dataView("#corpo", { data: bandas }
);
}
);
</script> </head> <body> <table> <thead> <tr> <th>Banda</th> <th>Foto</th> </tr> </thead> <tbody id="corpo" class="sys-template"> <tr> <td> <span>{
Nome}
}
</span> </td> <td> ![]() </td> </tr> </tbody> </table> </body></html>
Bom pessoal, por hoje é isso. O Asp.Net Ajax Library possui uma série de recursos e controles incríveis. São 3 tipos diferentes de bindings, e os bindings podem ser feitos de maneiras variadas.Pretendo ir dando mais detalhes e informações por aqui, na medida do possível.Alguns How To podem ser vistos aqui.Comentário, críticas e sugestões são bem vindos.
Att, Vinicius Quaiato.