artigo .net Magazine 45 - Mini-curso de AJAX – Parte 4

Mini-Curso

Mini-curso de AJAX – Parte 4

ASP.NET AJAX Control Toolkit

Este é o quarto artigo de uma série de seis do mini-curso de ASP.NET AJAX. No primeiro artigo, foram apresentados os bastidores do AJAX, no segundo foi mostrado como instalar e usar controles das extensões AJAX 1.0 da Microsoft ao ASP.NET 2.0 e no terceiro foi detalhada a instalação do ASP.NET AJAX Control Toolkit com explicações do uso dos seguintes extenders: UpdatePanelAnimationExtender, ValidadotCalloutExtender, CalendarExtender, MaskedEditExtender e ConfirmButtonExtender.

Além disso, no terceiro artigo também foram apresentadas informações sobre o framework de animações do AJAX Control Toolkit, bem como resolver o problema de validação dentro de um controle UpdatePanel. O objetivo deste quarto artigo é apresentar alguns outros extenders e controles do ASP.NET AJAX Control Toolkit.

Nos próximos artigos serão mostradas técnicas para criar extenders e controles personalizados para o ASP.NET AJAX e as novas características planejadas de extensão da plataforma ASP.NET AJAX 1.0, como a plataforma Silverlight versão 1.0 final, que foi recém-lançada, e a versão 1.1 que está planejada para ser lançada até o final do ano, além do Script#, dentre outras novidades.

O ASP.NET AJAX Control Toolkit

O ASP.NET AJAX Control Toolkit fornece um conjunto de controles e extenders que facilitam o acréscimo de funcionalidades ricas no desenvolvimento Web com o ASP.NET 2.0. O Toolkit funciona sobre a infra-estrutura do ASP.NET 2.0 AJAX Extensions 1.0.

Desse modo, o pacote ASPAJAXExtSetup.msi de instalação das extensões 1.0 do AJAX ao ASP.NET 2.0 deve ser baixado e instalado antes do Toolkit. Após instalar o ASP.NET 2.0 AJAX Extensions 1.0, o Toolkit deve ser baixado e configurado para utilização no Visual Studio 2005 (mostrado nos artigos anteriores dessa série) ou no Visual Studio 2008 Beta 2.

Pré-requisitos da aplicação de demonstração

Durante a apresentação teórica do artigo, uma aplicação Web será desenvolvida para ilustrar as facilidades oferecidas por diversos controles e extenders do ASP.NET AJAX Control Toolkit. A interface será desenvolvida com XHTML 1.1, controles Web do servidor do ASP.NET 2.0, controles das extensões ASP.NET AJAX 1.0, controles do ASP.NET AJAX Control Toolkit e uso de CSS 2 para formatação da interface. A demonstração será desenvolvida com a linguagem C# 2.0 do lado do servidor, porém uma versão com a linguagem Visual Basic 2005 estará disponível para download.

Com o objetivo de tornar o artigo acessível a um número maior de desenvolvedores da plataforma .NET, na elaboração do exemplo serão utilizados somente softwares e recursos disponíveis gratuitamente. Porém, as versões comerciais também podem ser usadas.

·          Browsers: IE 5.0 ou superior, Firefox 1.0 ou superior, Opera 8.0 ou superior, Netscape 7.0 ou superior, Apple Safari 1.2 ou superior, dentre outros;

·          Servidor de banco de dados: SQL Server 2005 Express Edition SP2;

·          Banco de dados: AdventureWorks;

·          IDE para desenvolvimento: Visual Web Developer 2005 Express Edition SP1 (se o IDE estiver instalado no Windows Vista, então também se deve instalar o Visual Studio 2005 Service Pack 1 Update for Windows Vista) ou Visual Studio 2005;

·          Suporte às extensões AJAX 1.0 ao ASP.NET 2.0: ASP.NET 2.0 AJAX Extensions 1.0;

·          Suporte aos controles e extenders do Toolkit: ASP.NET AJAX Control Toolkit.

Os endereços para baixar os softwares e o banco de dados estão colocados no final do artigo.

Criando a aplicação Web de demonstração

Uma aplicação Web para consulta de produtos, da empresa fictícia AdventureWorks, será desenvolvida durante as explicações teóricas do uso de alguns extenders e controles do AJAX Control Toolkit.

No Visual Studio 2005, crie um novo Web Site selecionando o menu File>New Web Site. Selecione o item ASP.NET AJAX-Enabled Web Site, em Location selecione File System e uma localização para os arquivos do Web Site e em Language selecione Visual C#.

Por uma questão de espaço, o artigo apresenta todo o código do lado do servidor somente na linguagem C# 2.0. Porém, a versão em Visual Basic 2005 ficará disponível para download juntamente com a versão em C# 2.0, sendo que o Web Site desenvolvido em VB estará na pasta ProdutosAdvWorksVB e o desenvolvido em C# 2.0 na pasta ProdutosAdvWorksCS.

Construindo a interface da aplicação

Com o objetivo de simplificar a construção da aplicação Web e focar na utilização de recursos de controles e extenders do AJAX Control Toolkit, a interface será construída no modo design com estilos simples definidos numa folha de estilo externa e ajuda do recurso de formatação automática (Auto Format) dos controles Web do servidor.

No Visual Studio 2005, clique com o botão direito do mouse no projeto da aplicação Web e selecione o item Add ASP.NET Folder>Theme. Então, digite “Dourado” no lugar de Theme1. Clique com o botão direito do mouse na pasta Dourado e selecione o item Add New Item. Selecione o item Style Sheet nomeando-o como “Principal.css” e clique no botão Add. Edite a folha de estilo Principal.css de acordo com o código apresentado na Listagem 1.

Listagem 1. Folha de estilo Principal.css

body, table, input, select {

  font-family: Verdana,Arial,Helvetica,sans-serif;

  font-size: 11px;

}

h1 {

  font-size: 16px; color: #A00000;

}

h2 {

  font-size: 13px; font-style: italic; color: #C00000;

}

a {

  color: #A00000;

}

a:visited {

  color: #800000;

}

Para vincular a folha de estilo do tema Dourado à página Default.aspx, coloque a página no modo design e apresente a janela de propriedades. No quadro de listagem, na parte superior da janela de propriedades, selecione o item DOCUMENT. Na propriedade StyleSheetTheme, selecione o Dourado.

Depois do ScriptManager no arquivo ASPX, digite o texto “Produtos AdventureWorks” e formate-o como Heading 1 <h1>. Abaixo desse título, digite o subtítulo “Pesquisa de produtos por:” e formate-o como Heading 2 <h2>.

TabContainer e TabPanel do AJAX Control Toolkit

O TabContainer é um controle que permite a criação de um conjunto de abas que podem ser usadas para organizar o conteúdo da página Web. O TabContainer hospeda TabPanels que representam as abas.

Cada TabPanel permite a definição do conteúdo da aba por meio da seção HeaderTemplate e do seu conteúdo por meio da seção ContentTemplate. A aba selecionada é mantida durante os retornos ao servidor (postbacks).

No modo design da Default.aspx, arraste um TabContainer da aba AJAX Control Toolkit para baixo do subtítulo Pesquisa de produtos por: nomeando-o como “TabContainerPesquisarProdutosPor”. Clique com o botão direito do mouse no controle e selecione o item Add Tab Panel no menu de contexto para acrescentar uma nova aba dando o título de “Nome”.

Acrescente mais quatro abas dando os títulos de “Número”, “Subcategoria”, “Estilo” e “Dias para fabricar” de modo que o código do <ajaxToolkit:TabContainer> fique como apresentado na Listagem 2 (veja que será necessário alterar o ID dos TabPanel).

Listagem 2. Código do <ajaxToolkit:TabContainer> na página Default.aspx

<%@ Register Assembly="AjaxControlToolkit"

  Namespace="AjaxControlToolkit"

  TagPrefix="ajaxToolkit" %>

...

<ajaxToolkit:TabContainer

  ID="TabContainerPesquisarProdutosPor"

  runat="server"

  ActiveTabIndex="0">

  <ajaxToolkit:TabPanel ID="TabPanelNome"

     runat="server" HeaderText="Nome">

    <HeaderTemplate>

      Nome

    </HeaderTemplate>

  </ajaxToolkit:TabPanel>

  <ajaxToolkit:TabPanel ID="TabPanelNumero"

     runat="server" HeaderText="Número">

    <HeaderTemplate>

      Número

    </HeaderTemplate>

  </ajaxToolkit:TabPanel> ...