O AJAX (Asynchronous Javascript and XML) não é uma tecnologia, mas sim um conjunto de técnicas que provê uma melhor e mais rica experiência de uso de aplicações Web. O AJAX faz uso de algumas características do JavaScript, da flexibilidade e mobilidade do padrão XML e de recursos de chamadas assíncronas presentes nos navegadores, evitando os refresh pages (atualização de páginas).
O AJAX está baseado em chamadas XMLHTTP e usa o protocolo HTTP somente para transporte. O mais interessante do AJAX é que diminui o tráfego de rede e aumenta a interatividade com o usuário. O que era impossível ou muito complicado de ser feito em ambiente Web, se tornou um procedimento simples com AJAX, pois ele traz as características de aplicações Windows para Web. Há grande sites que já usam o AJAX, como BackBase, Google Maps, Gmail e HotMail.
ATLAS é um framework gratuito baseado no AJAX para criação de aplicações Web em conjunto ao ASP.NET 2.0, com interfaces ricas, interativas e personalizadas. É baseado em padrões abertos e é totalmente integrado com o Visual Studio 2005. Não há preocupação com o navegador utilizado no lado cliente, tornando-o totalmente transparente. O ATLAS faz o trabalho pesado requerido pelo AJAX, como gerar código JavaScript.
Existem outros frameworks que implementam o AJAX para uso no ASP.NET , como o MagicAjax e o AJAX.NET, sendo que o mais utilizado e que tende a evoluir ainda mais é o ATLAS.
Com ATLAS podemos criar Chats, caixa de textos (TextBox) com auto completar de dados oriundos de Web Services ou banco, carrinhos de compras drag and drop, filtragem de controles levando em consideração as condições de outros controles. Ou seja, temos muito mais recursos em nossas aplicações Web, sem a necessidade de nenhum código JavaScript direto (tudo é feito internamente). Veja na Figura 1 o diagrama da arquitetura do ATLAS.
O diagrama de arquitetura mostra que o ATLAS é divido em ATLAS Cliente(roda no cliente) e ATLAS Servidor(roda no servidor).
No lado do cliente formando a Atlas Client Script Library:
- Browser Compat Layer – Faz a abstração das diferenças entre os browsers, os famosos if..else..., o que possibilita a execução em quase todos os browsers(FireFox, Internet Explorer, etc) disponíveis no mercado.
- Script Core – Nessa camada são incluídos os arquivos JavaScript, tal como classes, namespaces, handling de eventos, tipos de dados e serialização de objetos.
- Base Class Library– Incluem o componente String Builders, debuggers, timers e tracing.
- Component Model and UI Framework– Basicamente componentes da Interface do Usuário.
- Controls and Components – São os controles específicos do ATLAS, rodando no lado do cliente, um controle exemplo mostrado nesse artigo é o auto-completar em textbox que usa o controle AutoCompleteExtender1.
No lado do servidor:
- Web services – Totalmente integrado com aplicações ATLAS.
- Server Controls – São os controles do ASP.NET(textbox, buttons e labels) geram comportamentos em JavaScript no lado cliente.
Instalando o ATLAS Framework
Vamos instalar o ATLAS no Visual Studio 2005. Para isso, vamos usar o instalador com a versão de Junho, que pode ser baixado aqui.
Nesse link também temos a documentação e exemplos para estudo. Após o download, use o famoso Next, Next e Finish e pronto, você já tem instalado o ATLAS. Abra o Visual Studio 2005 e crie um Web Site (File>New>Web Site), note que em My Templates temos um template chamado “Atlas” Web Site (Figura 2).
Configure a localização ou deixe o valor padrão e clique em OK. O projeto criado tem algumas diferenças em relação a um projeto ASP.NET normal, como a adição de um ScriptManager, que é o gerenciador de scripts do ATLAS, e o arquivo Web.config que possui algumas tags a mais, fundamentais para o funcionamento do ATLAS.
Por padrão, os controles do ATLAS não são instalados. Para isso, é necessário instalar o arquivo Microsoft.Web.Atlas.dll que está no diretório de instalação do framework (por padrão em C:\Arquivos de programas\Microsoft ASP.NET\Atlas\v2.0.50727\Atlas).
Para instalar na Toolbox, clique com o botão direito na mesma e escolha a opção Choose Items. Será aberta uma janela com os controles instalados, clique em Browse e localize o arquivo Microsoft.Web.Atlas.dll, depois clique em OK. Os controles serão mostrados na Toolbox e a instalação é feita uma única vez, o Visual Studio fica configurado para os próximos projetos ATLAS (Figura 3).
Os projetos de exemplo com ATLAS
Vamos colocar em prática todo o conceito que vimos até agora, mostrarei dois exemplos práticos:
- O primeiro é o uso de um GridView com paginação, edição e exclusão, acessando um banco de dados Access, tudo isso sem atualizar página inteira;
- O segundo é o TextBox fazendo uso de um auto completar com dados oriundos de um Web Service. Vamos também carregar um DropDownList com parâmetros de outro DropDownList, onde carregaremos as cidades de um determinado estado sem atualizar a página.
O primeiro controle que devemos conhecer é o ScriptManager (gerenciador de scripts), que é responsável por gerenciar os componentes do ATLAS, a renderização parcial das páginas, as requisições do cliente e as respostas do servidor às páginas ASP.NET, onde cada página pode ter um único ScriptManager.
O segundo controle é o painel atualizável (UpdatePanel) do ATLAS, permitindo postbacks baseados no protocolo XMLHttpRequest. Todos os controles ASP.NET dentro desse painel podem fazer esse tipo de postback, com chamadas assíncronas, não ocorrendo assim a atualização de página.
Podemos ter vários UpdatePanels em cada página. Entretanto, devemos ter em mente que eles não se comunicam entre si. O que ocorre realmente nos UpdatePanels:
- ATLAS intercepta as ações de submit da página;
- Usa XMLHttp para disparar o postback ao servidor;
- O postback ocorre normalmente no servidor, o que não ocorre são as atualizações de página;
- Apenas o conteúdo dos UpdatePanels são retornados;
- As regiões alteradas do UpdatePanel são atualizadas;
- Todos os postbacks gerados dentro do UpdatePanel são tratados como postbacks do Ajax, com atualizações incrementais de página;
- Postbacks para controles fora do UpdatePanel serão efetuadas de forma normal, podendo ter postbacks Ajax dentro de UpdatePanel e postbacks normais fora de UpdatePanels, renderizando a página inteira.
Exemplo do GridView
Com o projeto já está criado, vamos usar o banco de dados de exemplo (disponível para download no portal da WebMobile). Clique no item App_Data do Solution Explorer, com o botão direito e escolha Add Existing Item. Localize o banco de dados de exemplo (dados.mdb).
Feito isto, coloque um UpdatePanel na página, dentro do controle, adicione um AccessDataSource e um GridView e altere as propriedade conforme a Tabela 1. O resultado das alterações das propriedades dos componentes está ilustrado na Figura 4.
| Componente | Propriedade/Descrição | Valor |
|---|---|---|
| AccessDataSource1 | DataFile {Caminho do Arquivo Access} | ~/App_Data/dados.mdb |
| AccessDataSource1 | SelectQuery {Comando SQL para seleção dos dados} | SELECT * FROM [Produtos] |
| AccessDataSource1 | UpdateQuery {Comando SQL para atualização dos dados} | UPDATE [Produtos] SET [Nome] = ?, [Referencia] = ?, [Unidade] = ?, [PrecoAv] = ?, [PrecoAp] = ? WHERE [Codigo] = ? |
| AccessDataSource1 | DeleteQuery {Comando SQL para exclusão dos dados} | DELETE FROM [Produtos] WHERE [Codigo] = ? |
| GridView1 | DataSourceID {Especifica de onde virão os dados} | AcessDataSource1 |
| GridView1 | AllowPaging {Referente à paginação} | True |
| GridView1 | AutoGenerateDeleteButton {Geração do botão de Deletar automático} | True |
| GridView1 | AutoGenerateEditButton {Geração do botão de Edição automático} | True |
| GridView1 | PageSize {Quantidade de registros por página, levando em consideração que AllowPaging = True} | “5” |
Compile e execute o projeto (F5). Faça algumas edições e paginação, você deve estar notando que as atualizações de páginas ainda estão ocorrendo. Para isso não ocorrer, é necessário alterar a propriedade EnablePartialRendering do ScriptManager para True. Essa propriedade habilita a renderização parcial da página, onde os controles que estão dentro dos UpdatePanels serão atualizados sem a necessidade de atualizar a página. Compile, execute novamente e veja o resultado.
Exemplo do TextBox e Web Service
Esse exemplo demonstra como implementar a função de auto completar em um TextBox com informações de um Web Service (que pode capturar a informação de um banco de dados). Crie um projeto Web Site Atlas como no primeiro exemplo. O Web Service terá um WebMethod retornando os nomes dos produtos do banco de dados de exemplo.
Como no exemplo anterior, adicione o banco de dados no projeto. Vamos criar um Web Service na mesma solução, para isso, no Solution Explorer clique com o botão direito e escolha Add New Item. Selecione Web Service e deixe o nome padrão (Figura 5).
O Web Service terá um método chamado “RetornaNomeProdutos” que retornará um array do tipo string com todos os produtos que iniciarem pelo parâmetro prefixText. Veja o código do Web Service na Listagem 1.
...
using System.Data;
using System.Data.OleDb;
using System.Collections.Generic;
...
[WebMethod]
public string[] RetornaNomeProdutos(string prefixText,
int count)
{
List<string> resultados = new List<string>();
// conexão com o banco de dados
OleDbConnection conn = new OleDbConnection(String.Concat(
"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=",
Server.MapPath("~/App_Data/dados.mdb"), ";Persist Security Info=True"));
OleDbDataAdapter adp = new OleDbDataAdapter(String.Concat(
"SELECT * FROM PRODUTOS WHERE NOME LIKE '",
prefixText, "%'") , conn);
DataSet ds = new DataSet();
conn.Open();
adp.Fill(ds); //preenche o DataSet
//carrega a lista com os valores do campo nome
//da tabela produtos
for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
{
resultados.Add(ds.Tables[0].Rows[i][1].ToString());
}
return resultados.ToArray();
}
}
Com o Web Service criado, vamos implementar a função de auto completar no TextBox. Volte ao projeto Atlas e na página Default.aspx, adicione um Label, um TextBox e um AutoCompleteExtender. Altere as propriedades conforme a Tabela 2.
| Componente | Propriedade | Valor |
|---|---|---|
| Label1 | Text | “Nome do Produto” |
| AutoCompleteExtender1 | MinimunPrefixLength | “1” |
| AutoCompleteExtender1 | ID | “Extender1” |
Agora falta referenciar o TextBox ao Web Service e ao WebMethod, através das tags com os seus parâmetros, como mostra a Listagem 2.
<atlas:AutoCompleteExtender ID="Extender1"
runat="server" MinimumPrefixLength="1">
<atlas:AutoCompleteProperties Enabled="True"
TargetControlID="TextBox1"
ServiceMethod="RetornaNomeProdutos"
ServicePath="WebService.asmx" />
atlas:AutoCompleteExtender>
Execute o projeto e veja o resultado. Pesquisando por “Le”, será exibida uma caixa de auto completar como mostra a Figura 7.
Note que para usar essa funcionalidade na página Default.aspx, incluímos apenas a tag AutoCompleteProperties (pouco código para um resultado tão interessante do ATLAS). Continuando esse exemplo, vamos usar dois DropDownLists, um com alguns estados do Brasil, que quando selecionado, carregará as cidades, sem gerar nenhuma atualização de página. Adicione um UpdatePanel e dentro do controle coloque dois Labels e dois DropDownLists. Veja as propriedades a serem alteradas na Tabela 3.
| Componente | Propriedade | Valor |
|---|---|---|
| Label1 | Text | “Estado” |
| Label2 | Text | “Cidades” |
| DropDownList1 | AutoPostBack | "True" |
| DropDownList1 | Items (um valor para cada) | “-”, “SP”, “PR”, “SC” |
| DropDownList1 | ID | “ddlEstado” |
| DropDownList2 | ID | “ddlCidades” |
As cidades são carregadas no dllCidades quando o evento SelectedIndexChanged do dllEstado é invocado, isso ocorre quando mudamos o item do dllEstado. O código da Listagem 3 contém a implementação do procedimento carrega_cidades que recebe dois DropDownLists como parâmetro, um contendo os estados e o outro onde serão carregadas as cidades referentes àquele estado. Na listagem temos também a implementação do evento SelectedIndexChanged do ddlEstado.
void carrega_cidades(
DropDownList pEstados, DropDownList pCidades)
{
if (pEstados.SelectedItem.Text == "-")
pCidades.Items.Clear();
else if (pEstados.SelectedItem.Text == "SP")
{
pCidades.Items.Clear();
pCidades.Items.Add("São Paulo");
pCidades.Items.Add("Santos");
pCidades.Items.Add("São Caetano");
pCidades.Items.Add("Campinas");
}
else if (pEstados.SelectedItem.Value == "PR")
{
pCidades.Items.Clear();
pCidades.Items.Add("Curitiba");
pCidades.Items.Add("Maringá");
pCidades.Items.Add("Londrina");
pCidades.Items.Add("Cascavel");
pCidades.Items.Add("Cafelândia");
}
else if (pEstados.SelectedItem.Value == "SC")
{
pCidades.Items.Clear();
pCidades.Items.Add("Florianópolis");
pCidades.Items.Add("Joinville");
pCidades.Items.Add("Joaçaba");
pCidades.Items.Add("Itapoá");
pCidades.Items.Add("Itapema");
}
}
protected void ddlEstados_SelectedIndexChanged(
object sender, EventArgs e)
{
carrega_cidades(ddlEstado, ddlCidades);
}
Finalizando o último exemplo deste artigo, compile o projeto e alterne entre os estados. Perceba que a lista de cidades é carregada, sem gerar a atualização de página.
Conclusões
O ATLAS é o framework que tende a crescer ainda mais e proporcionar muito mais recursos incríveis, grátis e totalmente compatíveis com o ASP.NET. O que antes em um simples GridView gerava uma quantidade imensa de atualizações de páginas, com AJAX não gera nenhuma atualização total. Sejam bem vindos ao ATLAS Framework.
