Revista MSDN Magazine Edição 31 - Paginação, ordenação e barra de progresso com Atlas no ASP.NET

Clique aqui para ler todos os artigos desta edição

Paginação, ordenação e barra de progresso com Atlas no ASP.NET

Alexandre Santos e Marcos Santos

A tecnologia Atlas, embora em desenvolvimento, promete revolucionar não somente as aplicações Web para os usuários, mas também possibilitará ao desenvolvedor grande facilidade de criação de aplicativos robustos e interativos. O objetivo deste artigo é explorar os scripts do framework Atlas ASP.NET que possibilitam paginar e ordenar GridView de forma que não haja postback perceptível ao usuário.

Para isso, criaremos uma página ASP.NET Master/Detail que listará todos os clientes e seus pedidos utilizando o banco de dados Northwind disponível no SQL Server. Outro recurso interessante que veremos é o drag and drop, que permitirá ao usuário customizar o layout da página de acordo com sua preferência.

Atlas ASP.NET

O pré-requisito para desenvolvimento de aplicações Atlas ASP.NET é a instalação do framework. Basta acessar o site atlas.asp.net e baixar o arquivo AtlasSetup.exe. A versão do Atlas utilizada neste artigo é o Atlas ASP.NET CTL Junho/2006.

Nesse release, até o fechamento deste artigo, os controles não estão disponíveis na Toolbox, por isso, a codificação é feita diretamente no código ASPX. Na Tabela 1 estão detalhadas algumas tags do Atlas que serão necessárias neste artigo.

Tabela 1. Descrição de controles Atlas

Desenvolvendo a aplicação

O primeiro passo é criar a aplicação normalmente, sem a adição do Atlas. Dessa forma, você poderá verificar na prática o antes e o depois da utilização do Atlas ASP.NET. Abra o Visual Studio 2005 e acesse o menu File>New>Web Site. Selecione o template “Atlas” Web Site e para o nome do projeto, digite “ArtigoAtlasMSDN”. Escolha em Location a opção HTTP.

Adicione um novo WebForm (menu Website>Add New Item), dando o nome de  “AtlasGridDetailsView.aspx”. A página AtlasGridDetailsView.aspx possui o seguinte funcionamento: toda vez que for carregada atualizará o GridView pai com a lista de clientes.

Quando o usuário selecionar o cliente desejado, serão exibidas informações adicionais em um componente DetailsView e então listados os pedidos correspondentes num GridView filho. O usuário terá a possibilidade de ordenação e paginação da lista de clientes.

Um dos objetivos a ser explorado no Atlas é permitir que a lista de clientes seja atualizada automaticamente a cada 15 segundos, com funcionamento semelhante ao controle Timer de aplicações Windows Form, portanto deverá existir um Label que indique o horário da última atualização.

Por fim, toda consulta ao banco de dados será abstraída a uma segunda camada, através de um WebService. Com isso, pretendemos exemplificar a utilização de Atlas ASP.NET juntamente com arquitetura de camadas de desenvolvimento.

Criando o layout da página AtlasGridDetailsView.aspx

Em modo de design desenhe uma tabela HTML, através do menu Layout>Insert Table, com 1 coluna e 3 linhas. Como sugestão, para cada linha, adicione:

·        Linha 1: Digite o cabeçalho ou título da página;

·        Linha 2: Será adicionada futuramente a barra de progressão de carga da página.

·        Linha 3: Adicione um Panel e altere a propriedade Width para “100%”.

Para organizar a disposição dos controles de visualização de dados, desenhe dentro do Panel, já adicionado, uma nova tabela HTML com 1 coluna e 3 linhas. Para cada linha adicione:

·        Linha 1: Adicione um Label (“lblTimer”), que indicará o horário da última atualização da página. Deixe a propriedade Text em branco;

·        Linha 2: Para listar os clientes, insira um GridView chamado “grvCustomers”.

·        Linha 3: Um layout agradável seria com o DetailsView e o GridView lado a lado. Portanto, insira uma nova tabela HTML com 1 linha e 2 colunas. Na coluna da esquerda adicione um Panel (“pnlCustomersDetails”) e dentro dele um DetailsView (“dtvCustomersDetails”). Na coluna da direita insira um outro Panel (“pnlCustomersOrders”) e dentro dele um GridView (“grvCustomersOrders”).

Para encerrar o layout da página, antes da sua adaptação com o Atlas ASP.NET, altere as propriedades do grvCustomers de acordo com a Tabela 2.