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 " [...] continue lendo...
