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

msdn31_capa.jpg

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

Este artigo discute

Este artigo usa as seguintes tecnologias

·        Aplicações ASP.NET;

·        Atlas;

·        Web Services.

 

Visual Studio .NET 2005, SQL Server.

 

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.

 

Controle

Descrição

ScriptManager

Gerencia os componentes Atlas e a renderização parcial de uma página. Em outras palavras, o ScriptManager indica para a página em questão o uso do Atlas.

UpdatePanel

Divide uma página web em regiões que poderão ser atualizadas sem recarregar completamente a página.

TimerControl

Realiza carregamento automático da página num intervalo determinado de tempo.

DragOverlayExtender

Habilita a funcionalidade de drag and drop na página.

ProfileScriptService

Permite a utilização do objeto Profile ASP.NET para salvar atributos dos componentes, principalmente ao utilizar drag and drop.

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”).

 

Nota: Os Panels fazem parte da funcionalidade de drag and drop a ser implementada posteriormente.

 

Dica: Para os componentes DetailsView e GridView, clique com o botão direito do mouse e selecione o item Auto Format. Nessa opção você pode escolher o melhor template visual para seus controles.

 

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.

 

Propriedade

Valor

Finalidade

AllowPaging

True

Habilita a funcionalidade de paginação do GridView.

...
Quer ler esse conteúdo completo? Tenha acesso completo