ASP.NET Atlas, o impulso que estávamos esperando - Parte I

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (0)  (0)

Veja nesse artigo de Matt Gibbs, a primeira parte de como trabalhar com o Ajax em aplicações ASP.NET. Acesso exclusivo para Assinantes.

Publicado originalmente na MSDN Magazine USA nr 21.

 

Publicado originalmente na MSDN Magazine USA Ano 21 Número 8.

 

ASP.NET Atlas, o impulso que estávamos esperando para os sites

 

Matt Gibbs

Este artigo foi baseado em uma versão de pré-lançamento do ASP.NET "Atlas". Todas as informações aqui contidas estão sujeitas a mudanças.

 

Em Setembro de 2005, a equipe ASP.NET lançou o primeiro Community Technology Preview (CTP – Pré-estréia de Tecnologia da Comunidade) das novas funcionalidades do ASP.NET codinome "Atlas". Essa extensão para o .NET Framework 2.0 permite aos desenvolvedores, criar mais facilmente Web sites ricos e interativos que tiram proveito tanto das funcionalidades do servidor quanto das do browser.

 

O tipo de desenvolvimento rico que o Atlas permite é mais conhecido como AJAX (Asynchronous JavaScript and XML), que é um acrônimo novo relativo a uma combinação de tecnologias já existentes. Os browsers modernos incluem objetos XMLHttpRequest que podem ser utilizados via JavaScript para fazer call back para o servidor. Isso permite que a página reaja à entrada do usuário e execute operações sem exigir que a página completa seja atualizada. Esse conceito é geralmente simples, porém, as bibliotecas AJAX podem aliviar muito a árdua tarefa de escrever JavaScript do lado cliente para comunicar-se com o servidor e lidar com o XML que é retornado pelo Web Service.

O problema geral que o AJAX tenta resolver, está enraizado no próprio protocolo HTTP. O HTTP é o padrão utilizado por browsers para comunicar-se com servidores Web para recuperar páginas e postar dados para os mesmos. O protocolo é sem estado (stateless), o que significa que a preservação da entrada do usuário entre as atualizações de páginas, fica por conta do código do servidor. Tipicamente, a página inteira é atualizada para carregar as informações de estado para o servidor. A entrada do usuário na página é a seguir restaurada pelo HTML reenviado para o browser.

 

O ASP.NET gerencia esse processo, transportando um campo oculto de formulário (hidden field), conhecido como view state. Mesmo que apenas uma parte da página esteja de fato sendo atualizada, é transmitido o HTML da página inteira e a tela fica em branco momentaneamente. Enquanto essa atualização ocorre, o usuário não consegue interagir com a página até que a nova visão seja recebida e exibida pelo browser.

O AJAX melhora esse processo, utilizando objetos XMLHttpRequest para fazer call back para o servidor e invocar Web Services sem atualizar a página inteira. A parte da página que é atualizada, é a seguir modificada diretamente em JavaScript, com base no XML que é recebido. O usuário pode até nem perceber que uma atualização de página está ocorrendo e pode continuar lendo ou interagindo com a página enquanto o trabalho está acontecendo assincronamente em background.

O que é o Atlas?

O conjunto de funcionalidades do Atlas no ASP.NET não são apenas outra biblioteca de script AJAX para escrever aplicações Web. O Atlas explora o .NET Framework 2.0 e acrescenta suporte para a melhor utilização das capacidades de JavaScript do lado cliente e dos objetos XMLHttpRequest.

Ele inclui funcionalidades baseadas em servidor, que tornam fácil o processo de enriquecer aplicações ASP.NET existentes, além de uma biblioteca de script cliente (client script library), que é utilizada pelos controles e serviços do Atlas.

O diagrama da Figura 1 mostra que a arquitetura do Atlas se estende através do cliente e do servidor e deve ser examinada como um amplo conjunto de tecnologias de desenvolvimento, para criar aplicações Web mais ricas e mais responsivas a múltiplos browsers.

 

 

Figura 1. Arquitetura ASP.NET do Atlas

Os cenários permitidos pelo Atlas não são limitados à atualização das regiões da página com chamadas de JavaScript assíncronas. Podemos também enriquecer a experiência do cliente, o que de outra maneira seria impraticável. Por exemplo, consideremos uma aplicação Web a respeito de dados de filmes. A aplicação poderia permitir que os usuários procurassem um ator específico.

Obviamente não seria prático fornecer uma lista (DropDownList) com todos os nomes de atores para selecionar, portanto a aplicação provavelmente decomporia o problema. Os usuários poderiam selecionar a primeira letra do nome do ator.

A seguir, uma solicitação para o servidor forneceria uma lista que seria um pouco mais manipulável, porém, a experiência de usuário não seria significativamente melhorada. A aplicação pode apresentar ao usuário um TextBox para inserir parte do nome do ator. Assim, o servidor teria ao menos alguns dados que utilizaria para restringir a pesquisa.

Isso é melhor, porém, ainda poder ser melhorado. Com o Atlas poderíamos fornecer um TextBox que reage dinamicamente enquanto o usuário digita para ajudar a restringir a pesquisa, sem esperar que o browser faça a atualização completa da página. A Figura 2 mostra como poderíamos utilizar o Atlas para acrescentar comportamento de auto-completar que fornece a realimentação a medida que o usuário digita.

 

 

Figura 2. Filtrando o Combobox

O Atlas CTP está disponível para download em atlas.asp.net. Quando instalado, acrescenta um modelo de Web Site para o C# e para o VB .NET no Visual Web Developer e Visual Studio 2005. Quando criamos um novo projeto de Web site no Visual Web Developer (clicando em File>New>Web Site), aparecerá o diálogo mostrado na Figura 3.

 

 

Figura 3. Criando um Web Site Atlas

O Web site do Atlas inclui o Microsoft.Web.Atlas.dll e um arquivo web.config atualizado que configura a aplicação Web para que possa utilizar as funcionalidades baseadas no Atlas ASP.NET. Na distribuição atual, o Microsoft.Web.Atlas.dll é colocado no diretório bin da aplicação, como um assembly local disponível em todas as partes da aplicação.

As aplicações baseadas em Atlas podem ser facilmente distribuídas copiando os arquivos de uma máquina de desenvolvimento para um servidor com ASP.NET 2.0, sem se preocupar em instalar o Atlas separadamente. A instalação é em nível de aplicação em vez de em nível de máquina.

Assim que liberações subseqüentes do CTP ficarem disponíveis, as mesmas poderão ser utilizadas em uma máquina com versões mais antigas do Atlas, mesmo que novas funcionalidades tenham sido desenvolvidas ou antigas tenham sido modificadas. Isso provê mais flexibilidade na migração para versões mais novas, do que se a instalação fosse em nível de sistema.

A Arquitetura do Atlas

A primeira coisa que deve ser notada a respeito o diagrama de arquitetura do Atlas mostrado na Figura 1, é que esse abrange tanto o cliente quanto o servidor. O ASP.NET 2.0 acrescentou algumas funcionalidades cliente adicionais porém, não na extensão completa do Atlas.

No lado direito do diagrama de arquitetura, notamos que as funcionalidades de servidor do Atlas são construídas sobre o ASP.NET 2.0 e estendem as suas capacidades. O Atlas inclui um novo conjunto de controles servidor bem como novas funcionalidades direcionadas ao acesso de dados baseados em servidor e de serviços do browser.

À esquerda vemos uma biblioteca de script cliente abrangente (client script library), que pode ser utilizada independentemente das funcionalidades de servidor para escrever JavaScript centrado em cliente.

É a fundação no cliente que é utilizada pesadamente pelas novas funcionalidades do Atlas, para permitir o desenvolvimento de aplicações mais ricas com interações cliente/servidor melhoradas.

Na Figura 4 podemos ver as interações cliente/servidor típicas de aplicações Web. Primeiro, a página é solicitada pelo browser e o usuário interage com ele. Quando alguma ação do usuário requer dados do servidor, ocorre uma atualização de página completa, para atualizar parte da página com base na entrada. Infelizmente, esse comportamento não permite que o usuário continue interagindo com página. Ao invés disso, o usuário é continuamente obrigado a pausar enquanto está trabalhando com a aplicação Web.

 

 

Figura 4. Interação Cliente/Servidor típica

A Figura 5 mostra que a interação cliente/servidor com o Atlas, elimina a atualização completa da página. Em lugar disso, o HTML inicial é recuperado e chamadas ao servidor, obtém dados atualizados em XML, JavaScript Object Notation (JSON), ou em fragmentos de HTML, para atualizar a página incrementalmente.

As chamadas em background assíncronas podem invocar Web Services ou recuperar modificações da página, evitando que os usuários sintam que houve uma pausa. Essas chamadas assíncronas gerenciam as informações sobre viewstate, de modo que, quando for necessária uma atualização completa da página, o estado exato da mesma é transportado para o servidor.

 

 

Figura 5. Interação Cliente/Servidor com o Atlas

A Client Script Core Library

A biblioteca de script cliente (client script core Library) do Atlas é enviada ao browser em várias partes separadas. O núcleo do script compreende as camadas mais profundas, nas quais o resto da biblioteca é construída. Na base está a camada de compatibilidade do browser. Uma característica chave do Atlas, é que rodará nos browsers modernos é que suporta os elementos chave do AJAX. Nos builds do CTP, está incluído o suporte ao Mozilla Firefox, ao Apple Safari e ao Internet Explorer.

A camada de compatibilidade do browser é uma abstração que permite escrever scripts com menos preocupação. Ela oculta os detalhes em que as implementações de browser diferem. Também permite que o suporte ao Atlas seja facilmente aumentado à medida que os browsers se desenvolvem e que as novas versões são lançadas.

O tipo do browser que faz a solicitação determina automaticamente que partes específicas da camada de compatibilidade do browser serão utilizadas. O código de mais alto nível foi escrito para a camada de abstração, portanto não precisamos codificar para as diversas variações das implementações dos browsers.

 

Por cima da camada de compatibilidade, encontra-se o núcleo do sistema de tipos (core type system). O sistema de tipos permite uma abordagem orientada por objetos para o desenvolvimento em JavaScript. Ele provê para o desenvolvedor que trabalha com JavaScript, a possibilidade de criar namespaces e acrescentar-lhes classes. Também simula a herança de objeto. Existe suporte para interfaces, delegates e enumerações, o que facilita a alternância entre o código desenvolvido no servidor em uma linguagem de programação Orientada por Objeto como o C# e a escrita em código JavaScript no cliente.

A classe base da camada de bibliotecas construída por cima do sistema de tipos completa o núcleo da client script library. O conceito é emprestado do .NET Framework e expõe alguns tipos familiares. Temos o Event que suporta multicasting de eventos para o JavaScript de uma maneira natural. Há também StringBuilder, bem como suporte a serialização de objetos, inclusive suporte a dados XML e JSON. A classe base da biblioteca também inclui as classes WebRequest e WebResponse, que fornecem uma abstração para objetos XMLHttpRequest do browser, semelhante à encontrada no namespace System.Net do Framework .NET.

O código na Listagem 1, demonstra a criação de dois tipos simples em JavaScript, utilizando o núcleo de script do Atlas. O tipo Movie; que é criado primeiro; expõe as propriedades do título do filme e do seu gênero, bem como um método toString. O tipo Drama a seguir, estende o tipo Movie e sobrepõe o método toString.

 

Listagem 1. Utilizando o sistema de tipo do Atlas

Type.registerNamespace('AtlasSample');

 

AtlasSample.Movie = function(title, genre) {

    var _title = title;

    var _genre = genre;

       

    this.get_title = function() {

        return _title;

    }

    this.get_genre = function() {

        return _genre;

    }

    this.toString = function() {

        return this.get_title() + " : " + this.get_genre();

    }

    AtlasSample.Movie.registerBaseMethod(this, 'toString');

}   

AtlasSample.Movie.registerClass('AtlasSample.Movie');

 

AtlasSample.Drama = function(title, year) {

  AtlasSample.Drama.initializeBase(this, [title,

   'drama']);

   

    var _year = year;

   

    this.get_year = function() {

        return _year;

    }

    this.toString = function() {       

        return AtlasSample.Drama.callBaseMethod(this,

        'toString') +

            ' : ' + this.get_year();

    }

    AtlasSample.Drama.registerBaseMethod(this,

      'toString');

}

AtlasSample.Drama.registerClass('AtlasSample.Drama',

  AtlasSample.Movie);

 

A página que utiliza os tipos Movie e Drama é mostrada na Listagem 2.

 

Listagem 2. Demonstração de herança

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head id="Head1" runat="server">

    <title>Atlas Type Systemtitle>

head>

<body>

    <form id="form1" runat="server">

        <atlas:ScriptManager runat="server" ID="scriptManager">

            <Scripts>

                <atlas:ScriptReference Path="drama.js"

                     ScriptName="Custom" />

            Scripts>

        atlas:ScriptManager>

        <div>

            <input id="btn1" value="Show Movie Data" type="button"

             onclick="return Click_ShowMovie()" />

            <input id="btn2" value="Show Drama Data" type="button"

             onclick="return Click_ShowDrama()" />

        div>   

    form>

    <script type="text/JavaScript" language="JavaScript">

        function Click_ShowMovie() {

            var aMovie = new AtlasSample.Movie('Ray', 'drama');

            alert(aMovie.toString());

        }

        function Click_ShowDrama() {

            var aDrama = new AtlasSample.Drama('Ray', '2005');

            alert(aDrama.toString());       

        }

    script>

body>

html>

 

Primeiro faz referência ao arquivo JS, onde os tipos são definidos em um controle Atlas ScriptManager. A seguir, nos manipuladores do click, a página cria instâncias dos tipos Movie e Drama e chama os seus métodos toString. O comportamento de herança é aquele que esperamos ver em qualquer linguagem de programação orientada por objetos, porém, o código que será rodando será um JavaScript dinâmico.

Outro aspecto interessante da instalação do Atlas, é que contém versões de depuração da biblioteca de script cliente (client script library), para tornar mais fácil a depuração e a localização de erros. A depuração do JavaScript sempre foi enfadonha e isso poderá tornar o processo menos penoso.

 

Matt Gibbs é o Gerente de Desenvolvimento da equipe ASP.NET da Microsoft. É co-autor de vários livros em ASP, Mobile Controls e ASP.NET. Pode ser contatado em mattgi@microsoft.com.

 

Continua....

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?