Tudo sobre a linguagem que revolucionou a Internet
Se você nunca ouviu falar de AJAX, pode se considerar uma pessoa altamente desatualizada em termos de tecnologia para desenvolvimento de websites. Nos últimos tempos, o AJAX ganhou força no mercado e seu conhecimento passou a ser pré-requisito para quem deseja criar sites para a Web 2.0, que se atualizam sem a necessidade de carregar novamente a página. Com ele, é possível fazer uma busca por informações no servidor Web usando a própria página carregada. Seus recursos são tantos que hoje os mais modernos sites já usam essa tecnologia, incluindo Google e Amazon, que foram os primeiros megaportais a utilizar AJAX em suas páginas.
CRIAÇÃO DE SITES EM AJAX
Desvendando o AJAX
Herbert Moroni
Criação de sites em
Tudo sobre a linguagem que revolucionou a Internet
Com isso, passou a ser fundamental para programadores Web conhecer o AJAX a fundo para conseguir uma posição de destaque profissional. Neste livro, você conhecerá os principais comandos JavaScript usados no AJAX, saberá como trabalhar com os controles e classes fornecidas, além de aprender a usar o Framework ASP.NET AJAX, e assim, ser oficialmente apresentado à Web 2.0.
> Principais comandos > Framework ASP.NET AJAX > Controles e classes fornecidas > Exemplos práticos > Uso de variáveis, arrays e operadores > Estruturas, funções e eventos E muito mais...
pagrosto ajax.ai
5/4/07
12:58:32 PM
Herbert Moroni
Criação de sites em
Tudo sobre a linguagem que revolucionou a Internet
Edição de Arte e Projeto Gráfico Daniele Fátima Preparação dos originais Ricardo Dino de Freitas
Dados Internacionais de Catalogação na Publicação (CIP) (Câmara Brasileira do Livro, SP, Brasil)
M868c Moroni, Herbert. Criação de sites em AJAX / Herbert Moroni. – São Paulo : Digerati Books, 2007. 128 p. ISBN 978-85-60480-33-1 1. Webdesign. 2. AJAX (Programa de Computadores). I. Título. CDD 005.3
Universo dos Livros Editora Ltda. Rua Tito, 1.609 CEP 05051-001 • São Paulo/SP Telefone: (11) 3648-9090 • Fax: (11) 3648-9083 www.universodoslivros.com.br e-mail: [email protected] Conselho Administrativo: Alessandro Gerardi, Alessio Fon Melozo, Luis Afonso G. Neira, Luis Matos e William Nakamura.
modelo_iniciais.indd 2
8/5/2007 17:33:53
Sumário Pré-requisitos para o curso .........................................4 Capítulo 1 Entendendo o AJAX .....................................................5 O que é o AJAX?.................................................................................. 6 Considerações sobre o uso do AJAX ............................................. 18
Capítulo 2 ASP.NET AJAX ............................................................. 21 Instalando o AJAX ASP.NET ............................................................. 22 Conhecendo o AJAX ASP.NET ......................................................... 26
Capítulo 3 O controle UpdatePanel............................................. 51 Capítulo 4 O controle Timer ........................................................69 Capítulo 5 A classe PageRequestManager ..................................79 Capítulo 6 Usando ASP.NET AJAX em aplicações já existentes ....93 Apêndice JavaScript ......................................................................................... 100 Arquivo externo com extensão .js ................................................ 100 No head – entre as tags e ................................. 101 No body – entre as tags e ................................ 101 Estruturas de controle .................................................................... 106
modelo_iniciais.indd 3
8/5/2007 17:34:05
Pré-requisitos para o curso Para que você possa acompanhar as lições deste curso é necessário que já tenha preenchido os seguintes pré-requisitos: • conhecimento básico do Windows 98, 2000 ou XP, tais como: • criação de pastas e subpastas; • utilização do mouse e do teclado; • operações básicas com arquivos e pastas, usando o Windows Explorer; • conhecer conceitos tais como ícones, área de trabalho, janelas do Windows, uso de menus e outras configurações básicas do Windows. • conhecimento de desenvolvimento em ASP.NET: • criação de páginas e acesso a banco de dados; • conhecimento sobre HTML; • desejável conhecimento básico sobre Javascript.
modelo_iniciais.indd 4
8/5/2007 17:34:05
Capítulo 1 Entendendo o AJAX
capitulo1.indd 5
8/5/2007 17:40:16
Você vai verificar que, durante todo esse livro, vamos trabalhar com vários exemplos passo a passo. Isso facilita a compreensão à memorização é já mostra como você pode na prática aplicar os conhecimentos que está adquirindo. Fique à vontade para me acompanhar nas práticas em seu próprio computador ou apenas estudar os passos no decorrer dos exemplos. Para acompanhar os exemplos você vai precisar ter uma versão do Visual Studio instalada em sua máquina, desde que ela seja na versão 2005 você pode usá-la tranqüilamente, no entanto, estarei usando nos exemplos o Visual Studio Web Developers Express Edition 2005, por ser uma versão gratuita e que pode ser baixada facilmente do site da Microsoft. Usarei também a versão Express do SQL Server 2005 para os exemplos com banco de dados. As ferramentas Express da Microsoft são destinadas a estudantes, entusiastas etc. que querem conhecer e aprender mais sobre suas funcionalidades. São ferramentas com algumas limitações, quando utilizadas para desenvolvimento corporativo, porém, com recursos incríveis e produtivos. É possível desenvolver projetos de todos os portes com as ferramentas Express. Saiba mais sobre elas visitando a url: http://msdn.microsoft.com/vstudio/express/. Quanto à linguagem utilizada nos exemplos, vou alternar entre VB.NET e C#, sempre mostrando como seria nas duas linguagens. Agora que já falamos sobre o nosso ambiente de produção, vamos fazer nosso primeiro exemplo para compreender o que é o AJAX e como utilizá-lo em nossas aplicações ASP.NET.
O que é o AJAX? AJAX é a abreviação de Asynchronous JavaScript And XML. Não é uma tecnologia, e sim uma metodologia, que utiliza vários recursos e tecnologias como Javascript, DOM e XML. O objetivo do AJAX é evitar que a cada solicitação do servidor à página precise ser completamente recarregada. Para isso, usamos o objeto XMLHttpRequest por meio do Javascript para intermediar todas as solicitações ao servidor. Vamos ver como isso funciona.
Criação de sites em AJAX 6
capitulo1.indd 6
8/5/2007 17:40:26
1. Entre no Visual Studio e crie um novo Web Site chamado IntroducaoAjax. Neste primeiro exemplo, eu vou usar a linguagem VB.NET.
Figura 1.1.
Neste nosso primeiro exemplo, vamos criar uma aplicação cliente com Javascript e o objeto XMLHttpRequest que solicita ao servidor uma simples adição de dois valores inteiros. Para isso, teremos duas páginas na nossa aplicação: uma que atuará como o cliente, e outra como servidor, que retornará o valor calculado. 2. Crie um novo formulário para sua aplicação com nome Default2.aspx. Para isso, clique com o botão direito sobre o nome do projeto na janela Solution Explorer e depois clique em Add New Item (Figura 1.2).
Figura 1.2.
Entendendo o AJAX 7
capitulo1.indd 7
8/5/2007 17:40:26
3. Na janela aberta, selecione Web Form, marque a opção Place code in separate file (isso faz com que seja criado um arquivo separado para o código da página) e clique em Add.
Figura 1.3.
4. Na página Default.aspx, adicione três controles HTML do tipo Input (Text), como na imagem a seguir. Note que para adicionar controles HTML usamos a guia HTML na Toolbox.
Figura 1.4.
Criação de sites em AJAX 8
capitulo1.indd 8
8/5/2007 17:40:27
5. Organize os controles como a Figura 1.5:
Figura 1.5.
6. Mude a propriedade Value dos dois primeiros controles (Text1 e Text2) para 0, como mostra a Figura 1.6:
Figura 1.6.
Entendendo o AJAX 9
capitulo1.indd 9
8/5/2007 17:40:27
Vai ficar assim:
Figura 1.7.
7. Ainda na página Default.aspx, clique no botão Source para ir ao código HTML da página. 8. Insira o seguinte código dentro da tag da página: <script language=”javascript”> var ajax; function openAjax() { if (window.ActiveXObject) { ajax = new ActiveXObject(“Microsoft.XMLHTTP”); } else if (window.XMLHttpRequest) { ajax = new XMLHttpRequest(); } } function atualizar() { if (ajax.readyState==4) { document.getElementById(‘Text3’).value = ajax.responseText; } } function total() { url=”Default2.aspx?A=” + document.getElementById(‘Text1’). value +
Não se preocupe se não compreender o código Javascript agora, logo adiante eu vou explicar em detalhes cada uma das funções do código anterior. 9. Adicione o atributo onload=”openAjax();” na tag . Vai ficar assim:
Isso faz com que a função Javascript openAjax()seja executada assim que a página for carregada. 10. Ainda no código HTML, adicione o atributo onkeyup=”total();” nas tags das duas caixas de texto. Elas vão ficar assim:
Isso permite que a função Javascript total()seja executada sempre que o evento onkeyup ocorra em qualquer uma das caixas de texto. Segue o conteúdo em HTML inteiro do arquivo Default.aspx, caso você tenha alguma dúvida: <%@ Page Language=”VB” AutoEventWireup=”false” CodeFile=”Default.aspx.vb” Inherits=” _ Default” %> Untitled Page <script language=”javascript”>
Entendendo o AJAX 11
capitulo1.indd 11
8/5/2007 17:40:28
var ajax; function openAjax() { if (window.ActiveXObject) { ajax = new ActiveXObject(“Microsoft.XMLHTTP”); } else if (window.XMLHttpRequest) { ajax = new XMLHttpRequest(); } } function atualizar() { if (ajax.readyState==4) { document.getElementById(‘Text3’).value = ajax. responseText; } } function total() { url=”Default2.aspx?A=” + document. getElementById(‘Text1’).value + “&B=” + document.getElementById(‘Text2’).value; ajax.open(“GET”,url,true); ajax.onreadystatechange = atualizar; ajax.send(); }
Criação de sites em AJAX 12
capitulo1.indd 12
8/5/2007 17:40:28
11. Agora vamos para o arquivo Default2.aspx. 12. Dê um clique duplo sobre a página em branco para que o evento Page_Load seja criado e digite o seguinte código: Dim a As Integer = 0 Dim b As Integer = 0 If Request.QueryString(“A”) <> Nothing Then a = Convert.ToInt16(Request.QueryString(“A”). ToString()) End If If Request.QueryString(“B”) <> Nothing Then b = Convert.ToInt16(Request.QueryString(“B”). ToString()) End If Response.Write(a + b)
Vai ficar assim:
Figura 1.8.
Esse código é bem simples. Primeiro declaramos duas variáveis do tipo Integer e atribuímos o valor 0 a elas.
Entendendo o AJAX 13
capitulo1.indd 13
8/5/2007 17:40:28
Então, verificamos se existe um parâmetro A com valor. Se sim, atribuímos esse valor à variável. Fazemos o mesmo com o parâmetro B. A última linha escreve a soma dos valores das duas variáveis. Esse texto será recuperado pelo nosso programa AJAX e atribuído à caixa de texto necessária. Se você estiver usando a linguagem C#, segue o código: int a = 0; int b = 0; if (Request.QueryString[“A”] != null){ a = Convert.ToInt16(Request.QueryString[“A”].ToString()); } if (Request.QueryString[“B”] != null){ b = Convert.ToInt16(Request.QueryString[“B”]. ToString()); } Response.Write(a + b);
13. A última modificação. Vá para o código HTML da página Default2.aspx e apague tudo, deixando apenas a primeira linha de código que contém a diretiva Page. Como a imagem a seguir:
Figura 1.9.
Criação de sites em AJAX 14
capitulo1.indd 14
8/5/2007 17:40:28
14. Volte para a página Default.aspx e execute sua aplicação (para isso você pode clicar em F5). A seguinte tela poderá aparecer:
Figura 1.10.
Apenas clique em OK para habilitar o Debug. A seguinte janela se abre:
Figura 1.11.
Digite alguns números nas duas primeiras caixas de texto. Observe que, conforme você digita, o resultado já vai sendo calculado e exibido na terceira caixa de texto sem recarregar nenhuma vez a página, isso é AJAX. Usamos Javascript, o objeto XMLHttpRequest e o DOM para fazer solicitações ao servidor rodando ASP.NET. Vamos agora analisar as três funções Javascript que usamos:
A primeira função function openAjax() { if (window.ActiveXObject) { ajax = new ActiveXObject(“Microsoft.XMLHTTP”); } else if (window.XMLHttpRequest) { ajax = new XMLHttpRequest(); } }
Entendendo o AJAX 15
capitulo1.indd 15
8/5/2007 17:40:29
O objeto XMLHttpRequest foi primeiramente implementado pela Microsoft no Internet Explorer como um objeto ActiveX chamado XMLHTTP. Em seguida, outros navegadores (Mozilla, Safari, entre outros) seguiram o mesmo caminho implementando o XMLHttpRequest em uma classe que suporta as propriedades e os métodos do objeto ActiveX da Microsoft. Só que esses navegadores implementaram o objeto XMLHttpRequest de forma nativa, enquanto a Microsoft o implementou como um objeto ActiveX. Isso significa que precisaremos verificar qual o objeto que o navegador trabalha, XMLHTTP ou XMLHttpRequest. É isso que fazemos nesta primeira função. Se estivermos trabalhando com o Internet Explorer, vamos adicionar o ActiveX XMLHTTP à variável ajax que declaramos antes desta função no Javascript. Se for outro navegador, vamos atribuir o objeto XMLHttpRequest. Eles trabalham de forma idêntica.
A segunda função function atualizar() { if (ajax.readyState==4) { document.getElementById(‘Text3’).value = ajax.responseText; } }
Aqui verificamos se a requisição está completa e então atribuímos o valor retornado por ela à terceira caixa de texto. Fazemos isso por meio da propriedade readyState do objeto XMLHttpRequest. Esta propriedade possui cinco estágios, que vão de 0 a 4. O número 4 indica que a requisição está completa. A seguir, uma descrição completa dos cinco estágios: • • • • •
Você pode utilizar o estágio 1 para exibir uma mensagem de carregando, por exemplo, até que o estágio 4 esteja completo. Uma outra propriedade que usamos nesta função é a responseText. Por meio dela, atribuímos o valor que está sendo retornado à
Criação de sites em AJAX 16
capitulo1.indd 16
8/5/2007 17:40:29
caixa de texto. Essa propriedade sempre retorna uma string com os dados do servidor Web. Mas, ao invés dela, você pode usar a propriedade responseXML, que retorna um documento XML. Este documento pode ser manipulado por você utilizando DOM e Javascript. Temos também a propriedade onreadystatechange que será comentada quando estudarmos a próxima função. O objeto XMLHttpRequest tem mais duas propriedades importantes que podem ser bem úteis em suas páginas. São elas: status e statusText. • status – retorna um número que representa o status HTTP. Por exemplo, pode retornar o número 404 indicando que a página solicitada não pôde ser encontrada; • statusText – retorna um texto associado ao código do status HTTP. Por exemplo, pode retornar “Página não encontrada”. Não vou me aprofundar em exemplos sobre estas propriedades, mas você pode utilizá-las como utilizamos a propriedade readState para enriquecer ainda mais suas aplicações AJAX.
A terceira função function total() { url=”Default2.aspx?A=” + document.getElementById(‘Text1’). value + “&B=” + document.getElementById(‘Text2’).value; ajax.open(“GET”,url,true); ajax.onreadystatechange = atualizar; ajax.send(); }
Esta função pega os valores das duas primeiras caixas de texto e envia para a página Default2.aspx como parâmetro. A página Default2.aspx usará esses valores para efetuar a soma e retornar o resultado. url=”Default2.aspx?A=” + document.getElementById(‘Text1’). value + “&B=” + document.getElementById(‘Text2’).value;
Se os valores digitados nas duas primeiras caixas de texto forem 12 e 11 respectivamente, o código anterior vai atribuir a seguinte string à variável url:
Entendendo o AJAX 17
capitulo1.indd 17
8/5/2007 17:40:29
“Default2.aspx?A=12&B=11”
Nesta função, usamos os métodos open e send. A seguir, a descrição detalhada dos métodos disponíveis no objeto XMLHttpRequest: • open (método, url, síncrono, usuário, senha): inicia uma nova requisição, em que: • método – requisição HTTP, pode ser “GET” ou “POST”; • url – endereço da URL que será requisitada no servidor web; • síncrono – se o método trabalhará de forma síncrona ou assíncrona; o valor padrão é true, que quer dizer assíncrona; • usuário e senha – se o servidor Web necessitar de uma autenticação. • send (dados): envia a requisição. Enviando opcionalmente os dados; • abort(): aborta uma requisição em atividade; • setRequestHeader(nome, valor): informa um cabeçalho (header) para a requisição; • getResponseHeader(nome): retorna o valor do cabeçalho (header) informado; • getAllResponseHeaders(): retorna uma string contendo todos os cabeçalhos (header). Para finalizar, nesta função você conheceu a propriedade onreadystatechange do objeto XMLHttpRequest. Ela indica qual função será executada sempre que o estado do objeto XMLHttpRequest for alterado. No nosso caso, a função atualizar().
Considerações sobre o uso do AJAX Como você percebeu, embora possa criar aplicações com interfaces bem mais ricas, em AJAX isso não é algo simples, principalmente pelo fato dele ser uma tecnologia executada no cliente. E no cliente podemos ter diferentes tipos de navegadores e cada navegador pode ter ainda instalado ou não certos tipos de extensões que podem influenciar na execução do código. Pode acontecer ainda do Javascript simplesmente não estar habilitado no navegador do cliente.
Criação de sites em AJAX 18
capitulo1.indd 18
8/5/2007 17:40:29
Então, você vai precisar escrever código Javascript para cada uma das possibilidades e testá-las. Ainda assim, para os navegadores sem suporte a javascript, será necessário o que chamamos de javascript não-obstrutivo, ou seja, sua página deve rodar sem os recursos do AJAX. Isso porque na Internet cada visitante é um potencial cliente e você não pode eliminar potenciais clientes porque eles não têm os recursos que você precisa para que eles naveguem no seu site. Para programar em Javascript, também não contamos com as ferramentas de Debug (tratamento de erros) e o IntelliSense do Visual Studio que melhoram muito a produtividade de um sistema ou Web site para a Internet. O que eu quero deixar bem claro aqui é que tudo tem seu preço. Com o ganho na interface, temos uma perda de produtividade e isso não é bom. Principalmente para os programadores ASP.NET que têm à sua disposição todos os recursos do Visual Studio. E como você sabe, perda de produtividade representa maior tempo de desenvolvimento, com isso temos um aumento no custo do projeto. É exatamente isso que ninguém quer, principalmente as empresas contratantes que cada vez mais pressionam os projetos para que os custos e prazos sejam reduzidos. Visando dar maior produtividade no desenvolvimento de aplicações ASP.NET foram criados vários Frameworks, ou seja, bibliotecas de código javascript que podemos usar no desenvolvimento com o AJAX. O Google tem um framework desses, mas eles também não ajudam muito para quem desenvolve em ASP.NET usando o Visual Studio .NET pela difícil integração com o mesmo. Através deles, perdemos o poder dos Web Server Controls, como você viu no exemplo que fizemos neste capítulo. Tentando ajudar na produtividade dos programadores .NET, a Microsoft lançou seu próprio Framework integrado ao Visual Studio. Primeiro conhecido como ATLAS e agora chamado de ASP.NET AJAX, ele é o tema principal deste livro. Por meio dele, usaremos os poderosos recursos do AJAX sem uma perda considerável de produtividade. A Microsoft também tem outras iniciativas para melhorar o desenvolvimento com AJAX, principalmente com a versão futura do Visual Studio que deve ajudar na depuração de erros do Javascript.
Entendendo o AJAX 19
capitulo1.indd 19
8/5/2007 17:40:29
capitulo1.indd 20
8/5/2007 17:40:30
Capítulo 2 ASP.NET AJAX
capitulo2.indd 21
8/5/2007 17:35:51
O objetivo deste capítulo é mostrar a você o poder do Framework ASP.NET AJAX em suas aplicações Web, como ele pode melhorar a produtividade e deixar suas aplicações mais interativas.
Instalando o AJAX ASP.NET Vamos agora instalar os recursos que usaremos do AJAX ASP. NET. Se você tiver instalado em sua máquina versões anteriores das que estamos instalando, como a antiga biblioteca ATLAS da Microsoft, o ideal é que as desinstale antes de prosseguir. Vamos precisar fazer o download de um arquivo na Internet para a instalação. Se você estiver conectado à Internet, já pode fazê-lo. Em seguida, siga a instalação passo a passo durante os próximos exemplos. Caso contrário, faça o download do arquivo e depois instale em sua máquina como explicado a seguir. 1. Visite o site a seguir (Figura 2.1): www.asp.net.
Figura 2.1.
2. No menu, clique em AJAX, ou acesse diretamente a url: http://ajax.asp.net 3. Na parte superior, clique em Download.
Criação de sites em AJAX 22
capitulo2.indd 22
8/5/2007 17:36:35
Figura 2.2.
4. Na página que se abre, clique no botão Download ASP.NET AJAX v1.0.
Figura 2.3.
Você vai ser direcionado a uma página de download da Microsoft, como mostra a Figura 2.4:
ASP.NET AJAX 23
capitulo2.indd 23
8/5/2007 17:36:35
Figura 2.4.
5. Clique no botão Download. Você pode salvar este arquivo no seu disco rígido clicando em Salvar, ou executá-lo imediatamente, clicando em Executar.
Figura 2.5.
6. Clique em Executar para iniciar o download e executá-lo imediatamente. Será feito o download e a instalação será iniciada, como mostra a Figura 2.6:
Figura 2.6.
Criação de sites em AJAX 24
capitulo2.indd 24
8/5/2007 17:36:35
7. Clique em Next. 8. Marque a opção I accept the terms in the License Agreement e clique em Next.
Figura 2.7.
9. Clique em Install para continuar (Figura 2.8).
Figura 2.8.
10. Após concluir a instalação, desmarque a opção Display Microsoft ASP.NET 2.0 AJAX Extensions 1.0 Release Notes e clique em Finish (Figura 2.9).
Figura 2.9.
A instalação foi concluída com sucesso.
ASP.NET AJAX 25
capitulo2.indd 25
8/5/2007 17:36:36
Conhecendo o AJAX ASP.NET 1. Entre no Visual Studio 2005 e clique em Create Web Site.
Figura 2.10.
Perceba que, ao criar o novo projeto, foi adicionado um novo Template chamado ASP.NET AJAX-Enabled Web Site. Quando você seleciona este Template, o Visual Studio adiciona automaticamente no arquivo Web.Config as instruções usadas pelos componentes ASP. NET AJAX. Nos próximos tópicos, você vai conhecer essas alterações e aprender a usar o ASP.NET AJAX em aplicações Web já existentes. 2. Selecione o Template ASP.NET AJAX-Enabled Web Site e crie um novo WebSite chamado IntroASPNETAJAX, como mostra a Figura 2.11:
Figura 2.11.
Criação de sites em AJAX 26
capitulo2.indd 26
8/5/2007 17:36:36
Durante a instalação, o Assembly AJAXExtensionToolbox.DLL foi referenciado na ToolBox do Visual Studio. O resultado disso é a nova guia que você tem disponível agora na sua Toolbox, como mostra a Figura 2.12:
Figura 2.12.
No modo Design, na página Default.aspx, você nota mais uma diferença: o controle ScriptManager, como mostra a Figura 2.13:
Figura 2.13.
O controle ScriptManager é responsável por tornar os scripts disponíveis para o navegador do cliente. Por isso, ele é necessário em todas as páginas que você for utilizar ASP.NET AJAX. Ele é a parte central do Framework ASP.NET AJAX e controla todos os recursos AJAX na página. 3. Vamos agora adicionar um banco de dados ao nosso projeto. Para isso, na janela Solution Explorer, clique com o botão direito sobre o nome do projeto e selecione Add New Item (Figura 2.14):
ASP.NET AJAX 27
capitulo2.indd 27
8/5/2007 17:36:36
Figura 2.14.
4. Na janela Add New Item, em Templates, selecione SQL Database. Mude o nome do arquivo para Projetos.mdf e, em seguida, clique em Add, como mostra a Figura 2.15:
Figura 2.15.
5. Você é questionado se deseja adicionar o arquivo de banco de dados em uma pasta especialmente reservada a ele chamada App_ Data (Figura 2.16). Isto é uma boa prática, clique em Sim.
Figura 2.16.
Criação de sites em AJAX 28
capitulo2.indd 28
8/5/2007 17:36:37
Repare que a conexão ao banco de dados que acabamos de criar é exibida na janela Database Explorer, como mostra a Figura 2.17:
Figura 2.17.
6. Vamos adicionar uma tabela no nosso banco de dados. Para isso, na janela Database Explorer, clique com o botão direito sobre Tables e selecione Add New Table.
Figura 2.18.
7. Preencha as colunas Column Name, Data Type e Allow Nulls, como mostra Figura 2.19:
Figura 2.19.
ASP.NET AJAX 29
capitulo2.indd 29
8/5/2007 17:36:37
8. Clique com o botão direito sobre ProjetoId e selecione Set Primary Key, como mostra a próxima figura. Isso torna o campo ProjetoId a chave primária da nossa tabela.
Figura 2.20.
9. Ainda em ProjetoId, na janela Column Properties marque a opção Yes na propriedade (Is Identity), como mostra a Figura 2.21:
Figura 2.21.
10. Clique em Salvar. Surgirá uma caixa de diálogo Choose Name, solicitando o nome para a tabela. Digite Projetos e clique em OK, como mostra a Figura 2.22.
Criação de sites em AJAX 30
capitulo2.indd 30
8/5/2007 17:36:38
Figura 2.22.
11. Vamos adicionar alguns registros na nossa tabela. Para isso, na janela Database Explorer, clique com o botão direito sobre a tabela Projetos e selecione Show Table Data (Figura 2.23).
Figura 2.23.
12. Preencha as colunas Nome e Completa, conforme a próxima imagem. Note que o campo ProjetoId é autonumerável como desejamos quando o tornamos chave primária e marcamos a opção Identity.
Figura 2.24.
ASP.NET AJAX 31
capitulo2.indd 31
8/5/2007 17:36:38
13. Para realizar o acesso aos dados em nossas aplicações, vamos utilizar um Dataset tipado. Há várias técnicas para criar uma camada de acesso a dados, mas o Dataset tipado juntamente com o TableAdapter é uma das formas mais simples de realizar essa tarefa. Para adicionar um Dataset tipado, proceda como fizemos para adicionar um banco de dados, mas, na janela Add New Item, em vez de escolher a opção SQL Database, selecione a opção Dataset. Vamos chamar o nosso Dataset de ProjetosDataset.xsd, como mostra a Figura 2.25:
Figura 2.25.
14. O Dataset, assim como o banco de dados, pode ser adicionado em uma pasta específica. No caso do Dataset, a pasta é App_ Code. Clique em Sim na mensagem ilustrada pela Figura 2.26 para que a pasta seja criada e o Dataset adicionado na mesma.
Figura 2.26.
15. Um Assistente chamado TableAdapter Configuration Wizard é iniciado. Selecione o nome do nosso banco de dados na opção Wich data connection should your application use to connect to the database? e clique em Next >.
Criação de sites em AJAX 32
capitulo2.indd 32
8/5/2007 17:36:39
Figura 2.27.
16. O próximo passo é decidir se deseja que a string de conexão ao banco de dados seja adicionada ao arquivo de configuração. Clique em Yes, save the connection as:, como mostra Figura 2.28, e clique em Next.
Figura 2.28.
17. Podemos fazer o acesso aos dados de duas formas: usando comandos SQL, e por meio de Stored Procedures. Marque a opção Use SQL Statements e clique em Next > (Figura 2.29).
ASP.NET AJAX 33
capitulo2.indd 33
8/5/2007 17:36:39
Figura 2.29.
18. Clique no botão Query Builder.
Figura 2.30.
19. Na janela Add Table, selecione a tabela Projetos, na guia Tables, e clique em Add. Em seguida, clique em Close (Figura 2.31). A tabela Projetos vai ser adicionada na janela Query Builder.
Criação de sites em AJAX 34
capitulo2.indd 34
8/5/2007 17:36:39
Figura 2.31.
20. A janela Query Builder nos ajuda na criação dos comandos SQL. Selecione ProjetoID, Nome e Completa na tabela Projetos e digite a cláusula WHERE, como mostra a Figura 2.32:
Figura 2.32.
21. Clique em OK. 22. A próxima janela exibe o comando SQL criado pelo Query Builder e permite que você faça ajustes se necessário. O comando deve ser igual ao mostrado na próxima figura. Clique em Next > (Figura 2.33).
ASP.NET AJAX 35
capitulo2.indd 35
8/5/2007 17:36:40
Figura 2.33.
Na próxima tela (Figura 2.34), você pode escolher e nomear os métodos que deseja que o assistente crie para manipulação e recuperação dos dados.
Figura 2.34.
23. Para nosso exemplo, não vamos utilizar o método Fill, então desmarque esta opção. 24. Mude o nome do método Return a DataTable para GetProjetosPorStatus, como mostra a Figura 2.35.
Criação de sites em AJAX 36
capitulo2.indd 36
8/5/2007 17:36:40
Figura 2.35.
25. Clique em Next >. A próxima tela (Figura 2.36) resume todas as tarefas que serão realizadas pelo assistente.
Figura 2.36.
26. Clique em Finish. A tabela é adicionada ao Dataset, como mostra a Figura 2.37.
ASP.NET AJAX 37
capitulo2.indd 37
8/5/2007 17:36:40
Figura 2.37.
27. Vamos testar o método GetProjetosPorStatus. Para isso, clique com o botão direito sobre o mesmo e selecione Preview Data (Figura 2.38):
Figura 2.38.
Será exibida a janela Preview Data (Figura 2.39):
Criação de sites em AJAX 38
capitulo2.indd 38
8/5/2007 17:36:40
Figura 2.39.
28. No parâmetro Completa, digite false em Value e clique em Preview (Figura 2.40). Serão exibidos os registros que tiverem o valor false na coluna Completa.
Figura 2.40.
29. Volte ao arquivo Default.aspx e adicione os seguintes controles: • 1 DropDownList • 1 GridView • 1 DetailsView 30. Organize-os como mostra a Figura 2.41:
ASP.NET AJAX 39
capitulo2.indd 39
8/5/2007 17:36:41
Figura 2.41.
31. Na propriedade items controle DropDownList1, adicione o Item Completo com valor true e o item Incompleto com o valor false, como mostram as Figuras 2.42 e 2.43:
Figura 2.42.
Figura 2.43.
Criação de sites em AJAX 40
capitulo2.indd 40
8/5/2007 17:36:41
32. No GridView1, na propriedade DataSourceID, clique em New Data Source. Será iniciado um Assistente. 33. Selecione Object e na opção Where will the application get data from? clique em OK, como mostra a Figura 2.44:
Figura 2.44.
Selecionamos Object na tela anterior porque vamos recuperar nossos dados utilizando o objeto Dataset que criamos. O próximo passo do assistente permite que selecionemos o objeto TableAdapter. O TableAdapter contém o método que criamos para recuperar os dados da nossa tabela. Ele foi criado quando criamos o Dataset. 34. Na tela seguinte, selecione a opção como mostra a Figura 2.45 e, em seguida, clique Next >.
Figura 2.45.
ASP.NET AJAX 41
capitulo2.indd 41
8/5/2007 17:36:42
Você pode agora escolher o método do TableAdapter que deseja. Nós só temos um método, o GetProjetosPorStatus (Figura 2.46).
Figura 2.46.
35. Clique em Next> para continuar. 36. Agora temos um passo importante. O GridView1 exibirá os valores de acordo com a opção escolhida no DropDownList1. Se o valor do DropDownList1 for Completo, ou seja, true serão exibidos apenas os registros que o campo Completa tiverem o valor true. Se o valor do DropDownList1 for Incompleto, ou seja, false serão exibidos apenas os registros que o campo Completa tiverem o valor false. Para isso, em Parameter source selecione Control. Em ControlID, selecione DropDownList1 (Figura 2.47).
Figura 2.47.
37. Clique em Finish. 38. Na Smart Tag do GridView1, marque as opções conforme a Figura 2.48:
Criação de sites em AJAX 42
capitulo2.indd 42
8/5/2007 17:36:42
Figura 2.48.
39. Usaremos o controle DetailsView1 para inserir novos Projetos. Para isso, na Smart Tag do DetailsView1, selecione Enable Inserting e também escolha ObjectDataSource1 em Choose Data Source, como mostra Figura 2.49:
Figura 2.49.
40. Antes de testar nossa aplicação, marque a propriedade AutoPostBack, do controle DropDownList1, como true. Senão, ao selecionarmos uma opção, não será disparado o Post que atualiza o GridView. 41. Execute sua aplicação. Perceba que, cada vez que você muda a opção do DropDownList1, a página é totalmente recarregada (Figura 2.50). Acontece o mesmo se você inserir um novo projeto.
ASP.NET AJAX 43
capitulo2.indd 43
8/5/2007 17:36:42
Figura 2.50.
Vamos agora implementar o AJAX ASP.NET para fazer atualizações parciais da página, sem a necessidade de recarregar a página completamente toda vez que uma opção for selecionada. 42. Adicione um controle UpdatePanel, como mostra a Figura 2.51. Ele está localizado na guia AJAX Extensions na Toolbox.
Figura 2.51.
Criação de sites em AJAX 44
capitulo2.indd 44
8/5/2007 17:36:42
43. Arraste o GridView1 para dentro do UpdatePanel1, como mostra a Figura 2.52:
Figura 2.52.
44. Na janela Properties, localize a propriedade Triggers do UpdatePanel1, e na janela UpdatePanelTrigger Collection Editor clique em Add. Selecione DropDownList1, na propriedade ControlID, e SelectedIndexChanged, para a propriedade EventName. Clique em OK (Figura 2.53).
Figura 2.53.
ASP.NET AJAX 45
capitulo2.indd 45
8/5/2007 17:36:43
Você vai aprender mais sobre a propriedade Trigger no próximo capítulo. 45. Execute a aplicação. 46. Perceba agora que a cada seleção do DropDownList1 apenas o GridView1 é atualizado (Figura 2.54). Não é necessário o recarregamento de toda a página.
Figura 2.54.
Você vai aprender detalhes sobre o UpdatePanel e o uso de Trigger no próximo capítulo. Por enquanto, apenas entenda o seguinte: já que o DropDownList1 está fora do UpdatePanel1 precisamos indicar ao mesmo que o DropDownList1 será o responsável por realizar a chamada da atualização do que está dentro do UpdatePanel1. Para isso, usamos a Trigger. 47. Adicione alguns projetos, como na Figura 2.55:
Figura 2.55.
Criação de sites em AJAX 46
capitulo2.indd 46
8/5/2007 17:36:43
Perceba que, ao inserirmos novos projetos, a página ainda é totalmente recarregada. Vamos resolver isso agora. 48. Pare a aplicação e volte à página Default.aspx. 49. Adicione mais um UpdatePanel1 e mova o DetailsView1 para dentro do mesmo, como mostra a Figura 2.56:
Figura 2.56.
50. Localize a propriedade UpdateMode, do UpdatePanel2, e selecione a opção Conditional (Figura 2.57).
Figura 2.57.
ASP.NET AJAX 47
capitulo2.indd 47
8/5/2007 17:36:43
51. Execute a aplicação (Figura 2.58).
Figura 2.58.
Agora, tanto ao usar o DropDownList1 quanto o DetailsView1 você obtém o recarregamento parcial da página. 52. Para fi nalizar, apenas quero apresentar para você o controle UpdateProgress. Para isso, adicione o mesmo à sua página Default.aspx e digite dentro dele o texto “Atualizando”, como mostra a Figura 2.59:
Figura 2.59.
Criação de sites em AJAX 48
capitulo2.indd 48
8/5/2007 17:36:44
O conteúdo deste controle será exibido enquanto a página recarregar algum dos UpdatePanels. Como nosso exemplo é bem simples e o recarregamento bem rápido, se você executar a página agora não vai conseguir visualizar o texto por ser muito rápida sua apresentação. Para que você possa ver o texto, vamos manipular a Thread no momento de atualização do GridView1, fazendo com que leve ao menos três segundos. Para isso, siga os próximos passos. 53. Selecione o ObjectDataSource1 e, na janela Properties, clique no botão Events. Isso faz com que todos os eventos do ObjectDataSource1 sejam exibidos. Localize o evento Updating e dê um clique duplo sobre o mesmo (Figura 2.60).
Figura 2.60.
Será criado o procedimento do evento no painel de código. 54. Digite dentro do procedimento o seguinte código: System.Threading.Thread.Sleep(3000) Seu painel de código deve ficar como mostra a Figura 2.61:
ASP.NET AJAX 49
capitulo2.indd 49
8/5/2007 17:36:44
Figura 2.61.
55. Vamos testar. Execute a aplicação (F5). 56. Clique em Editar para qualquer projeto; altere o nome, por exemplo, e clique em Atualizar. Deverá aparecer o texto “Atualizando”, conforme a Figura 2.62:
Figura 2.62.
Neste capítulo, você aprendeu como é fácil construir aplicações com o AJAX utilizando o Framework AJAX ASP.NET e conheceu os seus principais controles.
Criação de sites em AJAX 50
capitulo2.indd 50
8/5/2007 17:36:44
Capítulo 3 O controle UpdatePanel
capitulo3.indd 51
8/5/2007 17:37:12
No capítulo anterior, você já utilizou o UpdatePanel e pôde comprovar os benefícios que ele proporciona às suas aplicações. Usando o UpdadePanel, você pode atualizar partes específicas da página, sem a necessidade de usar nenhum código Javascript. Com isso, você tem uma boa redução no tráfico entre navegador, cliente e servidor, diminuindo o uso de banda. Lembre-se: assim como os demais controles, o UpdatePanel trabalha em conjunto com o controle ScriptManager, então o mesmo deve estar ou ser adicionado na página quando você for utilizar o UpdatePanel. Neste capítulo, faremos uma prática em que você aprenderá: • usar triggers; • trabalhar com vários UpdatePanel em uma mesma página; • usar UpdatePanel aninhados; • atualizar e criar UpdatePanel programaticamente; • conhecer os controles que não são compatíveis com o UpdatePanel. 1. Crie uma nova aplicação usando o Template ASP.NET AJAXEnabled Web Site chamada UpdatePanel, como mostra a Figura 3.1. Neste exemplo, usaremos a linguagem C#.
Figura 3.1.
Criação de sites em AJAX 52
capitulo3.indd 52
8/5/2007 17:37:50
2. Adicione dois controles TextBox e um controle Button na página Default.aspx, e organize-os conforme a Figura 3.2:
Figura 3.2.
3. Dê um clique duplo sobre a página Default.aspx e, no painel de código, digite o seguinte código dentro do procedimento do evento Page_Load: TextBox1.Text = DateTime.Now.ToString(); TextBox2.Text = DateTime.Now.ToString();
Para a linguagem Visual Basic, você usar a mesma linguagem só que sem o ponto-e-vírgula. Desta forma: TextBox1.Text = DateTime.Now.ToString() TextBox2.Text = DateTime.Now.ToString()
Esse código tem por objetivo atribuir o valor da data e hora atual nas duas caixas de texto. Seu painel de código deve estar como a Figura 3.3:
O controle UpdatePanel 53
capitulo3.indd 53
8/5/2007 17:37:51
Figura 3.3.
4. Execute e teste sua aplicação. Perceba que, ao clicar no botão, a data e hora atual são exibidas em cada uma das caixas de texto (Figura 3.4).
Figura 3.4.
5. Pare a execução da aplicação. 6. Adicione um controle UpdatePanel na página Default.aspx e mova os controles TextBox2 e Button1 para dentro do mesmo, conforme a Figura 3.5:
Criação de sites em AJAX 54
capitulo3.indd 54
8/5/2007 17:37:51
Figura 3.5.
7. Execute a aplicação. 8. Clique sobre o botão e, perceba que agora, apenas a caixa de texto que está dentro do UpdatePanel é executada. Temos então um carregamento assíncrono dentro do UpdatePanel, usando o AJAX (Figura 3.6).
Figura 3.6.
9. Pare a execução da aplicação. Qualquer controle dentro de um UpdatePanel dispara uma atualização assíncrona, ou seja, uma atualização apenas dentro do UpdatePanel. Se a propriedade ChildrenAsTrigger estiver com valor True, essa propriedade será sempre True por padrão. Se você deixar essa
O controle UpdatePanel 55
capitulo3.indd 55
8/5/2007 17:37:51
propriedade como false, os controles dentro do UpdatePanel não chamarão uma atualização assíncrona. É muito difícil alteramos a propriedade ChildrenAsTrigger porque geralmente pelo menos um dos controles dentro do UpdatePanel é usado para solicitar atualização assíncrona. No entanto, algumas vezes precisamos que um controle específico que está dentro do UpdatePanel não chame uma atualização assíncrona. Você vai ver como fazer isso agora. 10. Clique sobre o UpdatePanel1 para selecioná-lo e, na janela Properties, localize e clique sobre a propriedade Triggers, como mostra a Figura 3.7.:
Figura 3.7.
11. Na janela UpdatePanelTrigger, clique na seta indicando para baixo ao lado do botão Add, como mostra a Figura 3.8:
Figura 3.8.
Criação de sites em AJAX 56
capitulo3.indd 56
8/5/2007 17:37:52
Perceba que são exibidas duas opções: AsyncPostBackTrigger e PostBackTrigger. 12. Clique sobre PostBackTrigger. 13. Em ControlID, selecione o controle Button1, como a mostra a Figura 3.9:
Figura 3.9.
14. Clique em OK. O código HTML referente ao controle UpdatePanel1 deve estar assim:
Note no código anterior que a tag é quem faz refêrencia ao controle que não vai disparar uma atualização assíncrona.
O controle UpdatePanel 57
capitulo3.indd 57
8/5/2007 17:37:52
15. Execute a aplicação. Perceba que, ao clicar no botão, toda a página é atualizada novamente, pois as duas caixas de texto são atualizadas com a data. 16. Pare a execução do programa. 17. Arraste o Button1 para fora do UpdatePanel, como mostra a Figura 3.10:
Figura 3.10.
18. Da mesma forma que você pode usar uma trigger para fazer com que um controle dentro do UpdatePanel não chame uma atualização assíncrona, você pode também usar uma trigger para fazer com que um controle fora do UpdatePanel execute uma atualização assíncrona. Para isso, clique novamente sobre o UpdatePanel1 para selecioná-lo e, na janela Properties, localize e clique sobre a propriedade Triggers. 19. Desta vez, selecione a opção AsyncPostBackTrigger no botão Add, como mostra a Figura 3.11:
Figura 3.11.
Criação de sites em AJAX 58
capitulo3.indd 58
8/5/2007 17:37:52
20. Na propriedade ControlID selecione Button1 e na propriedade EventName selecione Click (Figura 3.12).
Figura 3.12.
Agora, toda vez que o evento Click do Button1 for disparado, será solicitada uma atualização assíncrona. O HTML do UpdatePanel deve estar agora semelhante a esse:
Note no código anterior que a tag é quem faz refêrencia ao controle e ao evento que dispara a atualização assíncrona. 21. Execute e teste sua aplicação. Vamos entender agora a propriedade UpdateMode, usada quando temos mais do que um UpdatePanel na mesma página. 22. Adicione mais um UpdatePanel à página e arraste o controle TextBox1 para dentro do mesmo, como mostra a Figura 3.13:
O controle UpdatePanel 59
capitulo3.indd 59
8/5/2007 17:37:53
Figura 3.13.
23. Execute a aplicação. Perceba que sempre que você clica no Button1 os dois UpdatePanel são atualizados (Figura 3.14).
Figura 3.14.
Criação de sites em AJAX 60
capitulo3.indd 60
8/5/2007 17:37:53
24. Selecione o UpdatePanel2 e mude a propriedade UpdateMode para Conditional, como mostra a Figura 3.15:
Figura 3.15.
Quando a propriedade UpdateMode está definida como always – que, por sinal, é o valor padrão – qualquer controle na página que dispara uma atualização assíncrona atualiza o UpdatePanel em questão. Quando esta mesma propriedade foi definida como Conditional, apenas os controles dentro do mesmo ou com trigger apontada para o mesmo efetuam atualização assíncrona. Não há limite em relação ao número de UpdateControls a serem utilizados em uma página. 25. Execute a aplicação. Agora, ao clicar no botão, apenas o UpdatePanel1 deve ser atualizado (Figura 3.16).
Figura 3.16.
O controle UpdatePanel 61
capitulo3.indd 61
8/5/2007 17:37:53
26. Adicione um Button dentro do UpdatePanel2. 27. Arraste o UpdatePanel2 para dentro do UpdatePanel1, conforme mostra a Figura 3.17:
Figura 3.17.
A regra aqui é simples. Se os dois controles UpdatePanel estiverem com a propriedade UpdateMode com o valor Conditional, ao clicar no botão dentro do UpdatePanel filho, ou seja, aquele que está dentro do outro, apenas ele será atualizado. Já o UpdatePanel pai sempre atualizará ele e todos os UpdatePanel que estiverem dentro dele. 28. Certifique-se que a propriedade UpdateMode dos dois controles UpdatePanel estejam como Conditional. 29. Execute e teste a aplicação. Perceba que, ao clicar no botão dentro do UpdatePanel2, somente o mesmo é atualizado. Já ao clicar no botão que está dentro do UpdatePanel1 é disparada a atualização assíncrona dos dois controles UpdatePanel.
Criação de sites em AJAX 62
capitulo3.indd 62
8/5/2007 17:37:53
Agora vamos aprender a atualizar e criar UpdatePanel programaticamente. 30. Adicione mais um Button à sua aplicação, fora de qualquer UpdatePanel, como mostra a Figura 3.18:
Figura 3.18.
Se você executar sua página agora, esse botão não fará nenhuma solicitação assíncrona. Ao clicar sobre ele, a página é completamente atualizada. 31. Dê um clique duplo sobre o Button que você acabou de adicionar e digite o seguinte código no procedimento de evento do mesmo: UpdatePanel1.Update();
Isso ainda não é o suficiente para realizar uma atualização assíncrona. Precisamos registrar o controle como uma trigger. Fazemos isso adicionando o seguinte código no procedimento de evento Page_Load:
Button3 é o nome ou ID do Button que adicionamos. 32. Execute sua aplicação e teste. Agora, você já é capaz de chamar uma atualização assíncrona programaticamente. 33. Agora, vamos criar um controle UpdateControl programaticamente. Para isso, adicione uma nova página à sua aplicação com o nome de Default2.aspx. 34. Adicione um controle ScriptManager nesta página. 35. Dentro da classe Default2, adicione o seguinte código: UpdatePanel up1 = new UpdatePanel(); Button Button1 = new Button(); TextBox TextBox1 = new TextBox(); protected void Page _ Load(object sender, EventArgs e) { up1.ID = “UpdatePanel1”; up1.UpdateMode = UpdatePanelUpdateMode.Conditional; Button1.ID = “Button1”; Button1.Text = “Button”; Button1.Click += new EventHandler(Button1 _ Click); TextBox1.ID = “TextBox1”; up1.ContentTemplateContainer.Controls.Add(Button1); up1.ContentTemplateContainer.Controls.Add(TextBox1); Page.Form.Controls.Add(up1); } protected void Button1 _ Click(object sender, EventArgs e) { TextBox1.Text = DateTime.Now.ToString(); }
Criação de sites em AJAX 64
capitulo3.indd 64
8/5/2007 17:37:54
Seu painel de código deve estar assim (Figura 3.19):
Figura 3.19.
A seguir, o mesmo código para a linguagem Visual Basic .NET: Dim up1 As New UpdatePanel() Dim Button1 As New Button() Dim TextBox1 As New TextBox() Protected Sub Page _ Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load up1.ID = “UpdatePanel1” up1.UpdateMode = UpdatePanelUpdateMode.Conditional Button1.ID = “Button1” Button1.Text = “Button” AddHandler Button1.Click, AddressOf Button1 _ Click TextBox1.ID = “TextBox1” up1.ContentTemplateContainer.Controls.Add(Button1) up1.ContentTemplateContainer.Controls.Add(TextBox1) Page.Form.Controls.Add(up1) End Sub
O controle UpdatePanel 65
capitulo3.indd 65
8/5/2007 17:37:54
Protected Sub Button _ Click(ByVal Sender As Object, ByVal E As EventArgs) TextBox1.Text = DateTime.Now.ToString() End Sub
36. Execute e teste sua aplicação (Figura 3.20).
Figura 3.20.
Vamos agora compreender o código. Primeiramente, criamos os três objetos que vamos utilizar na nossa página. 1 UpdatePanel; 1 Button; 1 TextBox;
Fizemos isso com o código a seguir: UpdatePanel up1 = new UpdatePanel(); Button Button1 = new Button(); TextBox TextBox1 = new TextBox();
O segundo passo foi atribuir um identificador único para o UpdatePanel que criamos e atribuir o valor Conditional à sua propriedade UpdateMode. Neste exemplo, não precisávamos ter alterado a propriedade UpdateMode para este contexto, mas por motivo didático mostrei como realizar esta tarefa. up1.ID = “UpdatePanel1”; up1.UpdateMode = UpdatePanelUpdateMode.Conditional;
Criação de sites em AJAX 66
capitulo3.indd 66
8/5/2007 17:37:55
Também precisamos atribuir um identificador único para os controles TextBox e Button, já que os criamos programaticamente também. Fizemos isso usando as seguintes linhas de código: Button1.ID = “Button1”; TextBox1.ID = “TextBox1”;
A propriedade Text do Button1 foi modificada para Button apenas para o botão no exemplo não ser exibido em branco. Button1.Text = “Button”;
Depois, criamos um manipulador de evento para o Button1 com a seguinte linha de código, em que Button1_Click é o nome de um procedimento que criamos. Button1.Click += new EventHandler(Button1 _ Click);
O código a seguir mostra o procedimento Button1_Click. É nele que atribuímos o valor da data e hora atual a TextBox1. protected void Button1 _ Click(object sender, EventArgs e) { TextBox1.Text = DateTime.Now.ToString(); }
Nós precisamos vincular os controles TextBox1 e Button1 no UpdatePanel. Fazemos isso adicionando os controles na propriedade ContentTemplateContainer do UpdatePanel usando o seguinte código: up1.ContentTemplateContainer.Controls.Add(Button1); up1.ContentTemplateContainer.Controls.Add(TextBox1);
Para finalizar, vinculamos o nosso UpdateControl à página usando o código: Page.Form.Controls.Add(up1);
Nestes exemplos você já deve ter percebido o poder e o que você será capaz de fazer facilmente utilizando o UpdatePanel. Para finalizar,
O controle UpdatePanel 67
capitulo3.indd 67
8/5/2007 17:37:55
existem alguns controles que não podem ser utilizados dentro do UpdatePanel. Segue uma descrição deles, além de algumas regras a serem seguidas: • TreeView, Menu, Substitution e WebParts; • FileUpload; • GridView e DetaisView, quando estiverem com a propriedade EnableSortingAndPagingCallbacks com o valor true; • os controles Login, PasswordRecovery, ChangePassword e CreateUserWizard só podem ser usados se forem convertidos em Templates; • os controles BaseCompareValidator, BaseValidator, CompareValidator, CustomValidator, RangeValidator, RegularExpressionValidator, RequeredFieldValidator e ValidationSummary só podem ser usados se estiverem com a propriedade EnableClientScript como false.
Criação de sites em AJAX 68
capitulo3.indd 68
8/5/2007 17:37:55
Capítulo 4 O controle Timer
capitulo4.indd 69
8/5/2007 17:38:27
O controle Timer permite a atualização da página em intervalos de tempo definidos. Neste capítulo, faremos uma prática onde você entenderá o que é e como utilizar o controle Timer. 1. Crie uma nova aplicação usando o Template ASP.NET AJAXEnabled Web Site chamada Timer, como mostra Figura 4.1. Neste exemplo, usarei a linguagem C#.
Figura 4.1.
2. Verifique se o controle ScriptManager já está adicionado na página, caso não esteja, adicione o mesmo utilizando a guia AJAX Extensions na Toolbox. 3. Adicione um controle UpdatePanel na página. 4. Dentro deste UpdatePanel adicione um Label e um controle Timer. O controle Timer está localizado na guia AJAX Extensions na Toolbox. Organize-os como na Figura 4.2:
Criação de sites em AJAX 70
capitulo4.indd 70
8/5/2007 17:39:05
Figura 4.2.
5. Dê um clique duplo sobre o controle Timer1 e, no procedimento de evento criado Timer1_Tick, digite o seguinte código: Label1.Text = “Atualizado em: “ + DateTime.Now.ToString();
Em VB.NET o código é quase o mesmo apenas sem o ponto-evírgula, como segue: Label1.Text = “Atualizado em: “ + DateTime.Now.ToString()
Seu painel de código deve estar assim (Figura 4.3):
O controle Timer 71
capitulo4.indd 71
8/5/2007 17:39:05
Figura 4.3.
O evento Tick é executado no servidor sempre que o controle Timer executar uma atualização. Este evento é semelhante ao Click do botão, mas é disparado em intervalos de tempos definidos pela propriedade Interval. 6. Selecione o controle UpdatePanel1 e, na janela Properties, localize a propriedade Interval. Seu valor padrão é 60.000 milissegundos, ou seja, 60 segundos ou 1 minuto. Altere este valor para 3.000 milissegundos (3 segundos), como mostra a Figura 4.4:
Figura 4.4.
Criação de sites em AJAX 72
capitulo4.indd 72
8/5/2007 17:39:06
Observação: quanto menor o intervalo de tempo, mais solicitações o controle efetuará ao servidor, aumentando o tráfego de rede e o consumo de banda. Procure utilizar o maior intervalo de tempo possível para o contexto de suas aplicações. 7. Execute e teste sua aplicação. Perceba que há aproximadamente cada três segundos é atualizada a data e hora no Label1. Quando eu digo “aproximadamente” é isso mesmo, você vai entender por que agora: 8. Adicione o seguinte código dentro do procedimento de evento Timer1_Tick, como mostra a Figura 4.5: System.Threading.Thread.Sleep(3000);
Em VB.NET o código é quase o mesmo apenas sem o ponto-evírgula, como segue: System.Threading.Thread.Sleep(3000)
Figura 4.5.
Este código não é novidade para você nesta altura do livro. Novamente, vamos retardar um pouco o processamento do método por motivos didáticos.
O controle Timer 73
capitulo4.indd 73
8/5/2007 17:39:06
9. Execute sua aplicação. Perceba que a atualização é executada a cada seis segundos e não três como configuramos na propriedade Interval. Isso acontece sempre que o controle Timer estiver dentro do UpdatePanel. A contagem é iniciada sempre que a antiga solicitação é finalizada. Como no nosso exemplo este tempo é de três segundos ele foi somado ao tempo do controle Timer. Mas, em nossas aplicações, dificilmente sabemos o tempo exato que vai levar uma atualização assíncrona, porque ela depende do volume de dados que está sendo trafegado e da utilização de banda. 10. Com o objetivo de realizar a atualização a exatamente cada três segundos, vamos arrastar o controle Timer1 para fora do UpdatePanel, como mostra Figura 4.6:
Figura 4.6.
11. Como um controle qualquer, como um Button, por exemplo, para que o controle Timer efetue uma chamada de atualização assíncrona em um UpdatePanel é necessário associá-los utilizando Trigger. Para isso, selecione o UpdatePanel e clique sobre a propriedade Triggers. Na janela UpdatePanelTrigger, adicione uma AsyncPostBack Trigger para o controle Timer1, e o evento Tick, como mostra a Figura 4.7:
Criação de sites em AJAX 74
capitulo4.indd 74
8/5/2007 17:39:06
Figura 4.7.
12. Execute sua aplicação. Agora sim, a exatamente cada três segundos a atualização é efetuada. Fique atento, visualize a seguinte circunstância: O controle Timer efetua uma atualização assíncrona a cada três segundos. Mas uma das atualizações demora mais do que três segundos para ser finalizada. Então, antes que a atualização acabe é iniciada uma outra. O que acontece com a primeira que não acabou ainda? A resposta é: a primeira atualização, a que não finalizou ainda, é terminada e a nova é iniciada. Segue o código HTML do controle UpdatePanel1. Atente para a propriedade Trigger sendo configurada:
13. Pare a execução da sua aplicação e vamos agora compreender como trabalhar com múltiplos UpdatePanel. 14. Adicione mais um UpdatePanel e um Label dentro do mesmo, como mostra a Figura 4.8:
O controle Timer 75
capitulo4.indd 75
8/5/2007 17:39:07
Figura 4.8.
15. Configure a propriedade UpdateMode dos controles UpdatePanel1 e UpdatePanel2 como Conditional. 16. Para o UpdatePanel2, adicione uma AsyncPostBackTrigger para o controle Timer1 e o evento Tick. 17. Adicione o código a seguir no procedimento Timer1_Tick, como mostra a Figura 4.9. Label2.Text = “Atualizado em: “ + DateTime.Now.ToString();
Figura 4.9.
Criação de sites em AJAX 76
capitulo4.indd 76
8/5/2007 17:39:07
18. Execute sua aplicação. Agora, a cada três segundos ambos UpdatePanel serão atualizados usando apenas um único controle Timer. Mas e se você precisar atualizar cada um dos UpdatePanel em intervalos de tempo diferentes? Para responder essa pergunta, continuamos nosso exemplo. 19. Adicione mais um controle Timer, como mostra a figura a seguir:
Figura 4.10.
20. Modifique a propriedade Trigger do UpdatePanel2 para o controle Timer2, como mostra a Figura 4.11:
Figura 4.11.
O controle Timer 77
capitulo4.indd 77
8/5/2007 17:39:07
21. Dê um clique duplo sobre o controle Timer2. Mova o código que atualiza o Label2 para dentro do mesmo, como mostra a Figura 4.12:
Figura 4.12.
22. Altere a propriedade Interval, do controle Timer2, para 5.000 (5 segundos) (Figura 4.13).
Figura 4.13.
23. Execute sua aplicação. Agora o UpdatePanel1 é atualizado a cada três segundos e o UpdatePanel2 é atualizado a cada cinco segundos. Com este exemplo concluído, você é capaz de utilizar o controle Timer em suas aplicações ASP.NET AJAX.
Criação de sites em AJAX 78
capitulo4.indd 78
8/5/2007 17:39:08
Capítulo 5 A classe PageRequestManager
capitulo5.indd 79
8/5/2007 17:40:56
Até agora em todos os nossos exemplos não usamos Javascript ou DOM, mas eles podem ser necessários nas seguintes circunstâncias: • controlar como múltiplas atualizações assíncronas são processadas. Por padrão, a última atualização se sobrepõe à primeira, mas podemos controlar isso usando Javascript e DOM; • disponibilizar informações sobre a atualização assíncrona que está sendo executada. Isso melhora a experiência do usuário com a página, principalmente quando temos múltiplos controles UpdatePanel; • possibilidade de cancelar uma atualização assíncrona enquanto a mesma é processada; • exibir mensagens de erro customizadas; • enviar para o servidor informações de controles que não estão sendo usados na atualização assíncrona. Um exemplo seria enviar para o servidor o valor de um TextBox que está fora de um UpdatePanel que está sendo processado. Isso permite que o valor do TextBox seja utilizado no código que está sendo processado no servidor e influencie o resultado da atualização assíncrona. A classe PageRequestManager disponibiliza no cliente (por ser uma classe em Javascript) um modelo de eventos semelhante ao modelo de eventos usado no servidor para uma aplicação ASP.NET. Esta classe possui métodos, propriedades e eventos que permitem que você customize a atualização assíncrona utilizando Javascript e DOM. Para conhecer melhor o Javascript e o DOM consulte o Apêndice. Neste capítulo, faremos uma prática que o ensinará a: • trabalhar com os eventos da classe PageRequestManager; • parar uma atualização assíncrona. 1. Crie uma nova aplicação usando o Template ASP.NET AJAXEnabled Web Site chamada PageRequestManager, como mostra imagem a seguir. Neste exemplo, usarei a linguagem C#.
Criação de sites em AJAX 80
capitulo5.indd 80
8/5/2007 17:41:38
Figura 5.1.
2. Verifique se o controle ScriptManager já está adicionado à página, caso não esteja, adicione o mesmo utilizando a guia AJAX Extensions na Toolbox. 3. Adicione um controle UpdatePanel na página. Dentro deste controle, adicione um Label e um Button. 4. Adicione um controle UpdateProgress e dentro dele digite o texto Atualizando... 5. Organize os controles na página como mostra a Figura 5.2:
Figura 5.2.
A Classe PageRequestManager 81
capitulo5.indd 81
8/5/2007 17:41:38
6. Dê um clique duplo sobre o Button1 e digite o seguinte código para o procedimento de evento Button1_Click: System.Threading.Thread.Sleep(3000); Label1.Text = DateTime.Now.ToString();
Em VB.NET o código é diferente apenas por não ter o ponto-evírgula no final. Seu painel de código deve estar assim (Figura 5.3):
Figura 5.3.
7. Execute e teste sua aplicação (Figura 5.4).
Figura 5.4.
Criação de sites em AJAX 82
capitulo5.indd 82
8/5/2007 17:41:38
Até agora, nenhuma novidade. Este é um exemplo semelhante aos que fizemos até aqui. Mas entenda que, como o ciclo de vida de uma página ASP.NET possui uma série de eventos que são executados consecutivamente, nas atualizações assíncronas também temos alguns destes tipos de eventos. Vamos agora conhecer e saber como utilizar esses eventos em nossas aplicações ASP.NET AJAX. 8. Vá até o código HTML da página. Para isso, clique no botão Source. 9. Localize a seguinte tag:
Esta tag representa o controle ScriptManager que está adicionado à nossa página. 10. Logo abaixo da tag do controle ScriptManager digite o seguinte código: <script type=”text/javascript”> Sys.WebForms.PageRequestManager.getInstance().add _ initiali zeRequest(Exibir); function Exibir(){ alert(“InitializeRequest”); }
Seu código HTML deve estar assim (Figura 5.5):
Figura 5.5.
A Classe PageRequestManager 83
capitulo5.indd 83
8/5/2007 17:41:39
Esse é um bloco de código Javascript. A função Exibir() exibe a mensagem “InitializeRequest”, usando o comando Javascript Alert(). A seguinte linha de código recupera uma instância da classe PageRequestManager e adiciona o método Exibir()como manipulador do evento initializeRequest. Sys.WebForms.PageRequestManager.getInstance().add _ initiali zeRequest(Exibir);
Vamos executar nosso exemplo para compreender melhor o que este bloco faz. 11. Execute sua aplicação. Ao clicar no botão, é exibida a seguinte mensagem:
Figura 5.6.
Isso quer dizer que quando a requisição assíncrona foi iniciada, ou seja, quando o evento initializeRequest foi disparado o método Exibir() foi executado. Você pode e deve criar suas próprias funções para fazer uso desse evento nos seus programas. 12. Modifi que o código Javascript criado até agora para o seguinte: <script type=”text/javascript”> var prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add _ initializeRequest(Exibir); function Exibir(){ alert(“InitializeRequest”); }
Criação de sites em AJAX 84
capitulo5.indd 84
8/5/2007 17:41:39
Este código faz a mesma coisa que o anterior, mas separa um pouco melhor o código deixando-o mais claro e legível, facilitando assim a manipulação de outros eventos como faremos a seguir. Nele, criamos uma variável chamada prm e atribuímos a ela a instância da classe PageRequestManager. Para isso, usamos o método getInstance(). Isso facilita o uso dos eventos porque usamos a variável com a instância do método para atribuir o método Exibir() ao evento initializeRequest. Você não pode criar uma instância da classe PageRequestManager diretamente. Esta classe está sempre disponível quando o controle ScriptManager e o UpdatePanel estão na sua página realizando atualização assíncrona. Por isso, sempre que você precisar utilizar essa classe deve recuperar sua instância usando o método getInstance(). Seu código HTML deve estar assim (Figura 5.7):
Figura 5.7.
A Classe PageRequestManager
capitulo5.indd 85
85
10/5/2007 11:10:43
13. Vamos conhecer um outro evento, o beginRequest. Digite o seguinte código dentro do script em Javascript, logo abaixo da função Exibir(): prm.add _ beginRequest(Exibir2); function Exibir2(){ alert(“BeginRequest”); }
Este código é muito semelhante ao outro que acabamos de conhecer, apenas estamos usando outro evento que é executado após o evento initializeRequest. Seu código HTML deve estar assim:
Figura 5.8.
14. Execute e teste sua aplicação. Agora, após o evento initializeRequest, é executado o evento beginRequest, como mostra a Figura 5.9:
Figura 5.9.
Criação de sites em AJAX 86
capitulo5.indd 86
8/5/2007 17:41:39
Os próximos três eventos que são executados sempre que uma solicitação assíncrona é executada são estes: pageLoading, pageLoaded e endRequest. Vamos demonstrá-los: 15. Digite o seguinte código, logo abaixo da função Exibir2(): prm.add _ pageLoading(Exibir3); function Exibir3(){ alert(“PageLoading”); } prm.add _ pageLoaded(Exibir4); function Exibir4(){ alert(“PageLoaded”); } prm.add _ endRequest(Exibir5); function Exibir5(){ alert(“EndRequest”); }
Seu script em Javascript deve estar assim: <script type=”text/javascript”> var prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add _ initializeRequest(Exibir); function Exibir(){ alert(“InitializeRequest”); } prm.add _ beginRequest(Exibir2); function Exibir2(){ alert(“BeginRequest”); } prm.add _ pageLoading(Exibir3); function Exibir3(){ alert(“PageLoading”); } prm.add _ pageLoaded(Exibir4); function Exibir4(){ alert(“PageLoaded”); } prm.add _ endRequest(Exibir5);
A Classe PageRequestManager 87
capitulo5.indd 87
8/5/2007 17:41:40
function Exibir5(){ alert(“EndRequest”); }
16. Execute sua aplicação. Agora, para cada evento, você terá uma mensagem exibida com o nome do mesmo. Isso demonstra claramente a ordem que os eventos são executados e permite que você escolha qual evento será usado em suas aplicações de acordo com a sua necessidade. Você também deve ter notado que o evento pageLoaded foi executado logo que a página foi aberta sem que nenhuma atualização assíncrona tenha sido disparada. Esse é o único evento que é disparado em uma atualização síncrona também. 17. Mude o código da função Exibir() para o seguinte: function Exibir(sender, args){ alert(args.get _ postBackElement().id); }
18. Execute sua aplicação e teste. Perceba que agora, no método initializeRequest, o identificador, ou seja, o ID do botão foi exibido (Figura 5.10). O método get _ postBackElement() permite que você recupere uma instância do objeto que executou uma solicitação assíncrona, e, a partir daí, você poderá usar o DOM e o Javascript para manipulá-lo no lado cliente.
Figura 5.10.
Avalie o seguinte código para a função Exibir(): function Exibir(sender, args){ var obj = args.get _ postBackElement(); alert(obj.id); }
Criação de sites em AJAX 88
capitulo5.indd 88
8/5/2007 17:41:40
Aqui utilizamos o método get _ postBackElement()para recuperar o objeto e atribuir o mesmo à variável obj que facilita o seu uso. Este código faz o mesmo que o anterior só que de forma mais clara e organizada. Vamos agora conhecer o método abortPostBack(), para a execução de uma atualização assíncrona. 19. Localize a guia HTML na barra de ferramentas e adicione um controle Button, dentro do UpdateProgress, como mostra a Figura 5.11:
Figura 5.11.
Foi utilizado um controle HTML porque este botão só vai ser utilizado no lado cliente. 20. Selecione esse Button e mude a sua propriedade Value para Cancelar, como mostra a Figura 5.12:
A Classe PageRequestManager 89
capitulo5.indd 89
8/5/2007 17:41:40
Figura 5.12.
21. Adicione o código a seguir dentro do script em JavaScript, como mostra a próxima imagem: function Cancelar(){ prm.abortPostBack(); }
Figura 5.13.
Este código é simples e demonstra claramente como utilizar o método abortPostBack(). Lembre-se que prm é uma variável que tem uma instância da classe PageRequestManager.
Criação de sites em AJAX 90
capitulo5.indd 90
8/5/2007 17:41:41
22. Ainda no código HTML, localize o código HTML do Button que está dentro do UpdateProgress e modifique-o para o seguinte:
type=”button”
value=”Cancelar”
A modificação foi simples, apenas adicionamos o evento onclick que chama a função Cancelar(). A seguir (Figura 5.14), a modificação no código HTML:
Figura 5.14.
23. Execute e teste sua aplicação. Agora, se você clicar em Cancelar, a atualização é parada imediatamente (Figura 5.15).
Figura 5.15.
A Classe PageRequestManager 91
capitulo5.indd 91
8/5/2007 17:41:41
Para finalizar, quero que você conheça a propriedade isInAsyncPostBack. Ela contém o valor true, se a atualização ou PostBack que está sendo efetuado é assíncrono, e tem o valor false, se a atualização for síncrona. Vamos utilizá-la: 24. Altere o código da função Exibir4() para a seguinte: function Exibir4(){ if (prm.get _ isInAsyncPostBack()){ alert(“PageLoaded”); } }
Aqui, fizemos o uso do método get _ isInSyncPostBack para recuperar o valor da propriedade isInAsyncPostBack da classe PageRequestManager que está sendo referenciada pela variável prm. Então, se o valor for true, a mensagem do método alert() será exibida, se o valor for false, não. 25. Execute e teste sua aplicação novamente. Perceba que agora, ao iniciar a aplicação, a mensagem que estava sendo exibida pelo evento PageLoaded não foi exibida. Isso porque na função Exibir4(), que é utilizada por esse evento, estamos verificando se a atualização é assíncrona e, nesse caso, o valor é false. Já ao usar a atualização assíncrona, a mensagem é exibida normalmente.
Criação de sites em AJAX 92
capitulo5.indd 92
8/5/2007 17:41:41
Capítulo 6 Usando ASP.NET AJAX em aplicações já existentes
capitulo6.indd 93
8/5/2007 17:41:57
Para usar o ASP.NET AJAX em uma aplicação já existente você precisa fazer algumas modificações no arquivo Web.config. Nos passos a seguir, vamos entender melhor na prática quais são essas modificações: 1. Crie uma nova aplicação ASP.NET normal. Utilize o Template ASP.NET Web Site, como mostra Figura 6.1:
Figura 6.1.
2. Abra o arquivo Web.config. 3. Adicione o seguinte código, logo abaixo da tag :
Criação de sites em AJAX 94
Observe, na Figura 6.2, o local exato onde o código deve ser inserido:
Figura 6.2.
Usando ASP.NET AJAX em aplicações já existentes 95
capitulo6.indd 95
8/5/2007 17:42:39
Para não ser necessário digitar todo este texto, crie uma aplicação em branco usando o Template ASP.NET AJAX-Enabled Web Site e copie o código que está no Web.config. Os elementos inseridos dentro da tag criam seções e sub-seções de configuração para a classe SystemWebExtensionsSectionGroup. Você configura as propriedades para estas seções usando o elemento . 4. Adicione o seguinte código, logo abaixo da tag :
Observe, na Figura 6.3, o local exato onde o código deve ser inserido:
Figura 6.3.
Criação de sites em AJAX 96
capitulo6.indd 96
8/5/2007 17:42:40
O elemento registra os namespaces ASP.NET AJAX no assembly System.Web.Extensions e mapeia esses namespaces para serem usados utilizando a tag asp, como neste exemplo em que registramos o controle ScriptManager na página:
5. Adicione o seguinte código, logo abaixo da tag :
O elemento registra o assembly System.Web.Extensions. O elemento adiciona os novos manipuladores de eventos para as requisições via script. O elemento define os módulos HTTP que são utilizados em aplicações ASP.NET AJAX.
Usando ASP.NET AJAX em aplicações já existentes 97
capitulo6.indd 97
8/5/2007 17:42:40
Observe, na Figura 6.4, o local exato onde o código deve ser inserido:
Figura 6.4.
Observe na imagem que no código anterior também temos uma leve mudança na tag . Precisamos retirar a barra que encerra essa tag para inserir a tag . A tag fica assim:
Essas são as modificações necessárias no Web.config. Não é necessária nenhuma outra modificação. Agora, adicione os controles ASP.NET AJAX necessários na sua aplicação. Lembre-se de adicionar o controle ScriptManager em todas as páginas que for utilizar o ASP.NET AJAX.
Criação de sites em AJAX 98
capitulo6.indd 98
8/5/2007 17:42:40
Apêndice
apendiceA.indd 99
8/5/2007 17:52:59
JavaScript Para utilizar o JavaScript em uma página HTML, é usada a tag <script> e com o atributo type definido como: text/javascript. Exemplo: <script type=”text/javascript”> //códigos JavaScript
Assim, o navegador entenderá que no conteúdo dessa tag há comandos Javascript para serem executados. Você pode inserir seu código Javascript em três locais na página HTML, são eles: • Arquivo externo com extensão .js; • No head – entre as tags e ; • No body – entre as tags e . Você pode usar uma combinação desses locais também. Vamos conhecer a peculiaridade de cada uma delas.
Arquivo externo com extensão .js O arquivo externo é chamado desta forma: <script type=”text/javascript” src=”externo.js”>
Ou seja, por meio do atributo src da tag <script>, indicamos a localização do arquivo externo, assim o navegador pode localizá-lo e executá-lo. Em arquivos externos não utilizamos a tag <script>, somente os códigos. Vamos conhecer algumas das vantagens de se trabalhar dessa forma: • Facilidade na manutenção: uma vez que o script está localizado em apenas um arquivo, você tem um local central para edição ou correção dos códigos; • Carregamento mais rápido da página: o arquivo externo é armazenado no cache do navegador. Assim, o navegador não precisa baixá-lo em todas as páginas que fazem referência ao mesmo;
Criação de sites em AJAX 100
apendiceA.indd 100
8/5/2007 17:53:52
• Semântico: o arquivo externo separa a camada de comportamento (Javascript) da camada de conteúdo (HTML).
No head – entre as tags e O script é inserido desta forma: <script type=”text/javascript”> //códigos JavaScript
Os códigos Javascript localizados entre as tags e da página são executados ao serem chamados, ou seja, quando algum evento for provocado, como o evento onclick, onmouseover, onload, entre outros. Nessa forma, o script é carregando antes de alguém utilizá-lo, ou seja, antes do carregamento do conteúdo que está entre as tags e .
No body – entre as tags e O script é inserido desta forma: <script type=”text/javascript”> //códigos JavaScript
Os códigos inseridos entre as tags e da página são inicialmente executados enquanto a página é carregada, mas também podem ser chamados quando algum evento for provocado.
