ajax.pdf

Herbert Moroni

Criao de sites em

Tudo sobre a linguagem querevolucionou a Internet

pagrosto ajax.ai 5/4/07 12:58:32 PMpagrosto ajax.ai 5/4/07 12:58:32 PM

2007 by Digerati BooksTodos os direitos reservados e protegidos pela Lei 9.610 de 19/02/1998. Nenhuma parte deste livro, sem autorizao prvia por escrito da editora, poder ser reproduzida ou transmitida sejam quais forem os meios emprega-dos: eletrnicos, mecnicos, fotogrfi cos, gravao ou quaisquer outros.

Dados Internacionais de Catalogao na Publicao (CIP)(Cmara Brasileira do Livro, SP, Brasil)

Diretor EditorialLuis Matos

Assistncia EditorialMonalisa NevesErika S

Edio de Arte eProjeto Grfi coDaniele Ftima

Preparao dos originaisRicardo Dino de Freitas

RevisoGuilherme Laurito Summa

DiagramaoFabiana Pedrozo

CapaDaniel Brito

Universo dos Livros Editora Ltda.Rua Tito, 1.609CEP 05051-001 So Paulo/SPTelefone: (11) 3648-9090 Fax: (11) 3648-9083www.universodoslivros.com.bre-mail: [email protected]

Conselho Administrativo: Alessandro Gerardi, Alessio Fon Melozo, Luis Afonso G. Neira, Luis Matos e William Nakamura.

M868c Moroni, Herbert.

Criao de sites em AJAX / Herbert Moroni.

So Paulo : Digerati Books, 2007.

128 p.

ISBN 978-85-60480-33-1

1. Webdesign. 2. AJAX (Programa de

Computadores). I. Ttulo.

CDD 005.3

modelo_iniciais.indd 2modelo_iniciais.indd 2 8/5/2007 17:33:538/5/2007 17:33:53

Sumrio

Pr-requisitos para o curso .........................................4

Captulo 1Entendendo o AJAX .....................................................5O que o AJAX? .................................................................................. 6Consideraes sobre o uso do AJAX ............................................. 18

Captulo 2ASP.NET AJAX .............................................................21Instalando o AJAX ASP.NET ............................................................. 22Conhecendo o AJAX ASP.NET ......................................................... 26

Captulo 3O controle UpdatePanel ............................................. 51

Captulo 4O controle Timer ........................................................69

Captulo 5A classe PageRequestManager ..................................79

Captulo 6Usando ASP.NET AJAX em aplicaes j existentes ....93

Apndice JavaScript ......................................................................................... 100Arquivo externo com extenso .js ................................................ 100No head entre as tags e ................................. 101No body entre as tags e ................................ 101Estruturas de controle .................................................................... 106


Pr-requisitos para o curso

Para que voc possa acompanhar as lies deste curso neces-srio que j tenha preenchido os seguintes pr-requisitos:

conhecimento bsico do Windows 98, 2000 ou XP, tais como:

criao de pastas e subpastas; utilizao do mouse e do teclado; operaes bsicas com arquivos e pastas, usando o Windows Explorer; conhecer conceitos tais como cones, rea de trabalho, janelas do Windows, uso de menus e outras confi guraes bsicas do Windows.

conhecimento de desenvolvimento em ASP.NET: criao de pginas e acesso a banco de dados; conhecimento sobre HTML; desejvel conhecimento bsico sobre Javascript.


Captulo 1

Entendendo o AJAX

capitulo1.indd 5capitulo1.indd 5 8/5/2007 17:40:168/5/2007 17:40:16

6Criao de sites em AJAX

Voc vai verifi car que, durante todo esse livro, vamos trabalhar com vrios exemplos passo a passo. Isso facilita a compreenso memorizao j mostra como voc pode na prtica aplicar os co-nhecimentos que est adquirindo. Fique vontade para me acom-panhar nas prticas em seu prprio computador ou apenas estu-dar os passos no decorrer dos exemplos.

Para acompanhar os exemplos voc vai precisar ter uma verso do Visual Studio instalada em sua mquina, desde que ela seja na verso 2005 voc pode us-la tranqilamente, no entanto, estarei usando nos exemplos o Visual Studio Web Developers Express Edition 2005, por ser uma verso gratuita e que pode ser baixada facilmente do site da Microsoft. Usarei tambm a verso Express do SQL Server 2005 para os exemplos com banco de dados.

As ferramentas Express da Microsoft so destinadas a estudan-tes, entusiastas etc. que querem conhecer e aprender mais sobre suas funcionalidades. So ferramentas com algumas limitaes, quando utilizadas para desenvolvimento corporativo, porm, com recursos incrveis e produtivos. possvel 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 produo, va-mos fazer nosso primeiro exemplo para compreender o que o AJAX e como utiliz-lo em nossas aplicaes ASP.NET.

O que o AJAX?

AJAX a abreviao de Asynchronous JavaScript And XML. No uma tecnologia, e sim uma metodologia, que utiliza vrios recur-sos e tecnologias como Javascript, DOM e XML. O objetivo do AJAX evitar que a cada solicitao do servidor pgina precise ser com-pletamente recarregada. Para isso, usamos o objeto XMLHttpRe-quest por meio do Javascript para intermediar todas as solicitaes ao servidor.

Vamos ver como isso funciona.


7Entendendo o AJAX

1. Entre no Visual Studio e crie um novo Web Site chamado Introdu-caoAjax. Neste primeiro exemplo, eu vou usar a linguagem VB.NET.

Neste nosso primeiro exemplo, vamos criar uma aplicao cliente com Javascript e o objeto XMLHttpRequest que solicita ao servidor uma simples adio de dois valores inteiros. Para isso, teremos duas pginas na nossa aplicao: uma que atuar como o cliente, e outra como servidor, que retornar o valor calculado.

2. Crie um novo formulrio para sua aplicao com nome De-fault2.aspx. Para isso, clique com o boto direito sobre o nome do projeto na janela Solution Explorer e depois clique em Add New Item (Figura 1.2).

Figura 1.1.

Figura 1.2.



Figura 1.4.

4. Na pgina Default.aspx, adicione trs controles HTML do tipo Input (Text), como na imagem a seguir. Note que para adicionar con-troles HTML usamos a guia HTML na Toolbox.

3. Na janela aberta, selecione Web Form, marque a opo Place code in separate fi le (isso faz com que seja criado um arquivo sepa-rado para o cdigo da pgina) e clique em Add.

Figura 1.3.


9Entendendo o AJAX

Figura 1.5.

5. Organize os controles como a 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.



Vai fi car assim:

Figura 1.7.

7. Ainda na pgina Default.aspx, clique no boto Source para ir ao cdigo HTML da pgina.

8. Insira o seguinte cdigo dentro da tag da pgina:

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.res-ponseText; } } function total() { url=Default2.aspx?A= + document.getElementById(Text1).value +


11Entendendo o AJAX

&B= + document.getElementById(Text2).value; ajax.open(GET,url,true); ajax.onreadystatechange = atualizar; ajax.send(); }

No se preocupe se no compreender o cdigo Javascript agora, logo adiante eu vou explicar em detalhes cada uma das funes do cdigo anterior.

9. Adicione o atributo onload=openAjax(); na tag . Vai fi car assim:

Isso faz com que a funo Javascript openAjax()seja executada assim que a pgina for carregada.

10. Ainda no cdigo HTML, adicione o atributo onkeyup=total(); nas tags das duas caixas de texto. Elas vo fi car assim:

Isso permite que a funo Javascript total()seja executada sempre que o evento onkeyup ocorra em qualquer uma das caixas de texto.

Segue o contedo em HTML inteiro do arquivo Default.aspx, caso voc tenha alguma dvida:

Untitled Page



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(); }


13Entendendo o AJAX

11. Agora vamos para o arquivo Default2.aspx.

12. D um clique duplo sobre a pgina em branco para que o evento Page_Load seja criado e digite o seguinte cdigo:

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 fi car assim:

Figura 1.8.

Esse cdigo bem simples. Primeiro declaramos duas variveis do tipo Integer e atribumos o valor 0 a elas.



Ento, verifi camos se existe um parmetro A com valor. Se sim, atribumos esse valor varivel. Fazemos o mesmo com o parme-tro B. A ltima linha escreve a soma dos valores das duas variveis. Esse texto ser recuperado pelo nosso programa AJAX e atribudo caixa de texto necessria.

Se voc estiver usando a linguagem C#, segue o cdigo:

int a = 0; int b = 0; if (Request.QueryString[A] != null){ a = Convert.ToInt16(Request.QueryString[A].ToS-tring()); } if (Request.QueryString[B] != null){ b = Convert.ToInt16(Request.QueryString[B].ToString()); } Response.Write(a + b);

13. A ltima modifi cao. V para o cdigo HTML da pgina De-fault2.aspx e apague tudo, deixando apenas a primeira linha de c-digo que contm a diretiva Page. Como a imagem a seguir:

Figura 1.9.


15Entendendo o AJAX

Figura 1.10.

Figura 1.11.

14. Volte para a pgina Default.aspx e execute sua aplicao (para isso voc pode clicar em F5). A seguinte tela poder aparecer:

Digite alguns nmeros nas duas primeiras caixas de texto. Ob-serve que, conforme voc digita, o resultado j vai sendo calculado e exibido na terceira caixa de texto sem recarregar nenhuma vez a pgina, isso AJAX. Usamos Javascript, o objeto XMLHttpRequest e o DOM para fazer solicitaes ao servidor rodando ASP.NET.

Vamos agora analisar as trs funes Javascript que usamos:

A primeira funo

function openAjax() { if (window.ActiveXObject) { ajax = new ActiveXObject(Microsoft.XMLHTTP); } else if (window.XMLHttpRequest) { ajax = new XMLHttpRequest(); } }

Apenas clique em OK para habilitar o Debug.A seguinte janela se abre:



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 XMLHttpRe-quest em uma classe que suporta as propriedades e os mtodos do objeto ActiveX da Microsoft. S que esses navegadores implemen-taram o objeto XMLHttpRequest de forma nativa, enquanto a Micro-soft o implementou como um objeto ActiveX.

Isso signifi ca que precisaremos verifi car qual o objeto que o na-vegador trabalha, XMLHTTP ou XMLHttpRequest. isso que faze-mos nesta primeira funo. Se estivermos trabalhando com o Inter-net Explorer, vamos adicionar o ActiveX XMLHTTP varivel ajax que declaramos antes desta funo no Javascript. Se for outro nave-gador, vamos atribuir o objeto XMLHttpRequest. Eles trabalham de forma idntica.

A segunda funo

function atualizar() { if (ajax.readyState==4) { document.getElementById(Text3).value = ajax.res-ponseText; } }

Aqui verifi camos se a requisio est completa e ento 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 estgios, que vo de 0 a 4. O nmero 4 indica que a requisio est completa. A seguir, uma descrio completa dos cinco estgios:

0 - no inicializado; 1 - carregamento; 2 - carregado; 3 - interativo; 4 - completo.

Voc pode utilizar o estgio 1 para exibir uma mensagem de car-regando, por exemplo, at que o estgio 4 esteja completo.

Uma outra propriedade que usamos nesta funo a response-Text. Por meio dela, atribumos o valor que est sendo retornado


17Entendendo o AJAX

caixa de texto. Essa propriedade sempre retorna uma string com os dados do servidor Web. Mas, ao invs dela, voc pode usar a pro-priedade responseXML, que retorna um documento XML. Este docu-mento pode ser manipulado por voc utilizando DOM e Javascript.

Temos tambm a propriedade onreadystatechange que ser comentada quando estudarmos a prxima funo.

O objeto XMLHttpRequest tem mais duas propriedades impor-tantes que podem ser bem teis em suas pginas. So elas: status e statusText.

status retorna um nmero que representa o status HTTP. Por exemplo, pode retornar o nmero 404 indicando que a pgina solicitada no pde ser encontrada; statusText retorna um texto associado ao cdigo do status HTTP. Por exemplo, pode retornar Pgina no encontrada.

No vou me aprofundar em exemplos sobre estas propriedades, mas voc pode utiliz-las como utilizamos a propriedade readState para enriquecer ainda mais suas aplicaes AJAX.

A terceira funo

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 funo pega os valores das duas primeiras caixas de tex-to e envia para a pgina Default2.aspx como parmetro. A pgina 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 cdigo anterior vai atribuir a seguinte string varivel url:



Default2.aspx?A=12&B=11

Nesta funo, usamos os mtodos open e send. A seguir, a descri-o detalhada dos mtodos disponveis no objeto XMLHttpRequest:

open (mtodo, url, sncrono, usurio, senha): inicia uma nova requisio, em que:

mtodo requisio HTTP, pode ser GET ou POST; url endereo da URL que ser requisitada no servidor web; sncrono se o mtodo trabalhar de forma sncrona ou as-sncrona; o valor padro true, que quer dizer assncrona; usurio e senha se o servidor Web necessitar de uma au-tenticao.

send (dados): envia a requisio. Enviando opcionalmente os dados; abort(): aborta uma requisio em atividade; setRequestHeader(nome, valor): informa um cabealho (hea-der) para a requisio; getResponseHeader(nome): retorna o valor do cabealho (he-ader) informado; getAllResponseHeaders(): retorna uma string contendo todos os cabealhos (header).

Para fi nalizar, nesta funo voc conheceu a propriedade onrea-dystatechange do objeto XMLHttpRequest. Ela indica qual funo ser executada sempre que o estado do objeto XMLHttpRequest for alterado. No nosso caso, a funo atualizar().

Consideraes sobre o uso do AJAX

Como voc percebeu, embora possa criar aplicaes com inter-faces bem mais ricas, em AJAX isso no algo simples, principal-mente pelo fato dele ser uma tecnologia executada no cliente. E no cliente podemos ter diferentes tipos de navegadores e cada nave-gador pode ter ainda instalado ou no certos tipos de extenses que podem infl uenciar na execuo do cdigo. Pode acontecer ain-da do Javascript simplesmente no estar habilitado no navegador do cliente.


19Entendendo o AJAX

Ento, voc vai precisar escrever cdigo Javascript para cada uma das possibilidades e test-las. Ainda assim, para os navega-dores sem suporte a javascript, ser necessrio o que chamamos de javascript no-obstrutivo, ou seja, sua pgina deve rodar sem os recursos do AJAX. Isso porque na Internet cada visitante um po-tencial cliente e voc no pode eliminar potenciais clientes porque eles no tm os recursos que voc precisa para que eles naveguem no seu site.

Para programar em Javascript, tambm no contamos com as ferramentas de Debug (tratamento de erros) e o IntelliSense do Vi-sual 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 preo. Com o ganho na interface, temos uma perda de produtividade e isso no bom. Principalmente para os programadores ASP.NET que tm sua disposio 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 ningum 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 vrios Frameworks, ou seja, bibliotecas de cdigo javascript que podemos usar no desenvolvimento com o AJAX. O Google tem um framework desses, mas eles tambm no ajudam muito para quem desenvolve em ASP.NET usando o Visual Studio .NET pela difcil integrao com o mesmo. Atravs deles, per-demos o poder dos Web Server Controls, como voc viu no exemplo que fi zemos neste captulo.

Tentando ajudar na produtividade dos programadores .NET, a Mi-crosoft lanou seu prprio Framework integrado ao Visual Studio. Pri-meiro 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 considervel de produtividade.

A Microsoft tambm tem outras iniciativas para melhorar o de-senvolvimento com AJAX, principalmente com a verso futura do Visual Studio que deve ajudar na depurao de erros do Javascript.


Captulo 2

ASP.NET AJAX



O objetivo deste captulo mostrar a voc o poder do Framework ASP.NET AJAX em suas aplicaes Web, como ele pode melhorar a produtividade e deixar suas aplicaes mais interativas.

Instalando o AJAX ASP.NET

Vamos agora instalar os recursos que usaremos do AJAX ASP.NET. Se voc tiver instalado em sua mquina verses anteriores das que estamos instalando, como a antiga biblioteca ATLAS da Micro-soft, o ideal que as desinstale antes de prosseguir.

Vamos precisar fazer o download de um arquivo na Internet para a instalao. Se voc estiver conectado Internet, j pode faz-lo. Em seguida, siga a instalao passo a passo durante os prximos exemplos. Caso contrrio, faa o download do arquivo e depois ins-tale em sua mquina 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.


23ASP.NET AJAX

Figura 2.2.

4. Na pgina que se abre, clique no boto Download ASP.NET AJAX v1.0.

Figura 2.3.

Voc vai ser direcionado a uma pgina de download da Microsoft, como mostra a Figura 2.4:



Figura 2.4.

5. Clique no boto Download. Voc pode salvar este arquivo no seu disco rgido clicando em Salvar, ou execut-lo imediatamente, clicando em Executar.

Figura 2.5.

6. Clique em Executar para iniciar o download e execut-lo ime-diatamente. Ser feito o download e a instalao ser iniciada, como mostra a Figura 2.6:

Figura 2.6.


25ASP.NET AJAX

7. Clique em Next.

8. Marque a opo 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. Aps concluir a instalao, desmarque a opo Display Mi-crosoft ASP.NET 2.0 AJAX Extensions 1.0 Release Notes e clique em Finish (Figura 2.9).

Figura 2.9.

A instalao foi concluda com sucesso.



Conhecendo o AJAX ASP.NET

1. Entre no Visual Studio 2005 e clique em Create Web Site.

Perceba que, ao criar o novo projeto, foi adicionado um novo Tem-plate chamado ASP.NET AJAX-Enabled Web Site. Quando voc se-leciona este Template, o Visual Studio adiciona automaticamente no arquivo Web.Confi g as instrues usadas pelos componentes ASP.NET AJAX. Nos prximos tpicos, voc vai conhecer essas alteraes e aprender a usar o ASP.NET AJAX em aplicaes 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.10.

Figura 2.11.


27ASP.NET AJAX

Durante a instalao, o Assembly AJAXExtensionToolbox.DLL foi referenciado na ToolBox do Visual Studio. O resultado disso a nova guia que voc tem disponvel agora na sua Toolbox, como mostra a Figura 2.12:

Figura 2.12.

No modo Design, na pgina Default.aspx, voc nota mais uma diferena: o controle ScriptManager, como mostra a Figura 2.13:

Figura 2.13.

O controle ScriptManager responsvel por tornar os scripts dis-ponveis para o navegador do cliente. Por isso, ele necessrio em todas as pginas que voc for utilizar ASP.NET AJAX. Ele a parte central do Framework ASP.NET AJAX e controla todos os recursos AJAX na pgina.

3. Vamos agora adicionar um banco de dados ao nosso projeto. Para isso, na janela Solution Explorer, clique com o boto direito sobre o nome do projeto e selecione Add New Item (Figura 2.14):



Figura 2.14.

Figura 2.15.

4. Na janela Add New Item, em Templates, selecione SQL Da-tabase. Mude o nome do arquivo para Projetos.mdf e, em seguida, clique em Add, como mostra a Figura 2.15:

Figura 2.16.

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 prtica, clique em Sim.


29ASP.NET AJAX

Figura 2.17.

Repare que a conexo ao banco de dados que acabamos de criar exibida na janela Database Explorer, como mostra a Figura 2.17:

Figura 2.18.

6. Vamos adicionar uma tabela no nosso banco de dados. Para isso, na janela Database Explorer, clique com o boto direito sobre Tables e selecione Add New Table.

7. Preencha as colunas Column Name, Data Type e Allow Nulls, como mostra Figura 2.19:

Figura 2.19.



Figura 2.20.

Figura 2.21.

8. Clique com o boto direito sobre ProjetoId e selecione Set Primary Key, como mostra a prxima fi gura. Isso torna o campo ProjetoId a chave primria da nossa tabela.

9. Ainda em ProjetoId, na janela Column Properties marque a opo Yes na propriedade (Is Identity), como mostra a Figura 2.21:

10. Clique em Salvar. Surgir uma caixa de dilogo Choose Name, solicitando o nome para a tabela. Digite Projetos e clique em OK, como mostra a Figura 2.22.


31ASP.NET AJAX

Figura 2.22.

Figura 2.23.

11. Vamos adicionar alguns registros na nossa tabela. Para isso, na janela Database Explorer, clique com o boto direito sobre a ta-bela Projetos e selecione Show Table Data (Figura 2.23).

12. Preencha as colunas Nome e Completa, conforme a prxima imagem. Note que o campo ProjetoId autonumervel como deseja-mos quando o tornamos chave primria e marcamos a opo Identity.

Figura 2.24.



Figura 2.25.

13. Para realizar o acesso aos dados em nossas aplicaes, va-mos utilizar um Dataset tipado. H vrias tcnicas 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 fi zemos para adi-cionar um banco de dados, mas, na janela Add New Item, em vez de escolher a opo SQL Database, selecione a opo Dataset. Vamos chamar o nosso Dataset de ProjetosDataset.xsd, como mostra a Figura 2.25:

14. O Dataset, assim como o banco de dados, pode ser adicio-nado em uma pasta especfi ca. 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 Confi guration Wizard iniciado. Selecione o nome do nosso banco de dados na opo Wich data connection should your application use to connect to the database? e clique em Next >.


33ASP.NET AJAX

Figura 2.27.

16. O prximo passo decidir se deseja que a string de conexo ao banco de dados seja adicionada ao arquivo de confi gurao. Cli-que 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 opo Use SQL Statements e clique em Next > (Figura 2.29).



Figura 2.29.

18. Clique no boto Query Builder.

Figura 2.30.

19. Na janela Add Table, selecione a tabela Projetos, na guia Ta-bles, e clique em Add. Em seguida, clique em Close (Figura 2.31). A tabela Projetos vai ser adicionada na janela Query Builder.


35ASP.NET AJAX

Figura 2.31.

20. A janela Query Builder nos ajuda na criao dos comandos SQL. Selecione ProjetoID, Nome e Completa na tabela Projetos e digite a clusula WHERE, como mostra a Figura 2.32:

Figura 2.32.

21. Clique em OK.

22. A prxima janela exibe o comando SQL criado pelo Query Builder e permite que voc faa ajustes se necessrio. O comando deve ser igual ao mostrado na prxima fi gura. Clique em Next > (Figura 2.33).



Figura 2.33.

Na prxima tela (Figura 2.34), voc pode escolher e nomear os mtodos que deseja que o assistente crie para manipulao e recu-perao dos dados.

Figura 2.34.

23. Para nosso exemplo, no vamos utilizar o mtodo Fill, ento desmarque esta opo.

24. Mude o nome do mtodo Return a DataTable para GetProje-tosPorStatus, como mostra a Figura 2.35.


37ASP.NET AJAX

Figura 2.35.

25. Clique em Next >.

A prxima tela (Figura 2.36) resume todas as tarefas que sero realizadas pelo assistente.

Figura 2.36.

26. Clique em Finish.A tabela adicionada ao Dataset, como mostra a Figura 2.37.



Figura 2.37.

27. Vamos testar o mtodo GetProjetosPorStatus. Para isso, cli-que com o boto direito sobre o mesmo e selecione Preview Data (Figura 2.38):

Figura 2.38.

Ser exibida a janela Preview Data (Figura 2.39):


39ASP.NET AJAX

Figura 2.39.

28. No parmetro Completa, digite false em Value e clique em Preview (Figura 2.40). Sero exibidos os registros que tiverem o va-lor false na coluna Completa.

Figura 2.40.

29. Volte ao arquivo Default.aspx e adicione os seguintes con-troles:

1 DropDownList 1 GridView 1 DetailsView

30. Organize-os como mostra a Figura 2.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.


41ASP.NET AJAX

32. No GridView1, na propriedade DataSourceID, clique em New Data Source.

Ser iniciado um Assistente.

33. Selecione Object e na opo 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 prximo passo do assistente permite que selecionemos o ob-jeto TableAdapter.

O TableAdapter contm o mtodo que criamos para recuperar os dados da nossa tabela. Ele foi criado quando criamos o Dataset.

34. Na tela seguinte, selecione a opo como mostra a Figura 2.45 e, em seguida, clique Next >.

Figura 2.45.



Voc pode agora escolher o mtodo do TableAdapter que deseja. Ns s temos um mtodo, 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 opo escolhida no DropDownList1. Se o valor do DropDownList1 for Completo, ou seja, true sero exibidos apenas os registros que o campo Completa tiverem o valor true. Se o valor do DropDownList1 for Incompleto, ou seja, false sero exibidos apenas os registros que o campo Completa tiverem o valor false. Para isso, em Parameter source selecione Control. Em Con-trolID, selecione DropDownList1 (Figura 2.47).

Figura 2.47.

37. Clique em Finish.

38. Na Smart Tag do GridView1, marque as opes conforme a Figura 2.48:


43ASP.NET AJAX

Figura 2.48.

39. Usaremos o controle DetailsView1 para inserir novos Pro-jetos. Para isso, na Smart Tag do DetailsView1, selecione Enable Inserting e tambm escolha ObjectDataSource1 em Choose Data Source, como mostra Figura 2.49:

Figura 2.49.

40. Antes de testar nossa aplicao, marque a propriedade Au-toPostBack, do controle DropDownList1, como true. Seno, ao se-lecionarmos uma opo, no ser disparado o Post que atualiza o GridView.

41. Execute sua aplicao.

Perceba que, cada vez que voc muda a opo do DropDown-List1, a pgina totalmente recarregada (Figura 2.50). Acontece o mesmo se voc inserir um novo projeto.



Vamos agora implementar o AJAX ASP.NET para fazer atualiza-es parciais da pgina, sem a necessidade de recarregar a pgina completamente toda vez que uma opo for selecionada.

42. Adicione um controle UpdatePanel, como mostra a Figura 2.51. Ele est localizado na guia AJAX Extensions na Toolbox.

Figura 2.50.

Figura 2.51.


45ASP.NET AJAX

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 cli-que em Add. Selecione DropDownList1, na propriedade ControlID, e SelectedIndexChanged, para a propriedade EventName. Clique em OK (Figura 2.53).

Figura 2.53.



Voc vai aprender mais sobre a propriedade Trigger no prximo captulo.

45. Execute a aplicao.

46. Perceba agora que a cada seleo do DropDownList1 apenas o GridView1 atualizado (Figura 2.54). No necessrio o recarre-gamento de toda a pgina.

Figura 2.54.

Voc vai aprender detalhes sobre o UpdatePanel e o uso de Trig-ger no prximo captulo. Por enquanto, apenas entenda o seguinte: j que o DropDownList1 est fora do UpdatePanel1 precisamos in-dicar ao mesmo que o DropDownList1 ser o responsvel por reali-zar a chamada da atualizao do que est dentro do UpdatePanel1. Para isso, usamos a Trigger.

47. Adicione alguns projetos, como na Figura 2.55:

Figura 2.55.


47ASP.NET AJAX

Perceba que, ao inserirmos novos projetos, a pgina ainda total-mente recarregada. Vamos resolver isso agora.

48. Pare a aplicao e volte pgina 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 se-lecione a opo Conditional (Figura 2.57).

Figura 2.57.



51. Execute a aplicao (Figura 2.58).

Figura 2.58.

Agora, tanto ao usar o DropDownList1 quanto o DetailsView1 voc obtm o recarregamento parcial da pgina.

52. Para fi nalizar, apenas quero apresentar para voc o con-trole UpdateProgress. Para isso, adicione o mesmo sua pgi-na Default.aspx e digite dentro dele o texto Atualizando, como mostra a Figura 2.59:

Figura 2.59.


49ASP.NET AJAX

O contedo deste controle ser exibido enquanto a pgina re-carregar algum dos UpdatePanels. Como nosso exemplo bem simples e o recarregamento bem rpido, se voc executar a pgina agora no vai conseguir visualizar o texto por ser muito rpida sua apresentao. Para que voc possa ver o texto, vamos manipular a Thread no momento de atualizao do GridView1, fazendo com que leve ao menos trs segundos. Para isso, siga os prximos passos.

53. Selecione o ObjectDataSource1 e, na janela Properties, clique no boto Events. Isso faz com que todos os eventos do ObjectData-Source1 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 cdigo.

54. Digite dentro do procedimento o seguinte cdigo:

System.Threading.Thread.Sleep(3000)

Seu painel de cdigo deve fi car como mostra a Figura 2.61:



55. Vamos testar. Execute a aplicao (F5).

56. Clique em Editar para qualquer projeto; altere o nome, por exemplo, e clique em Atualizar. Dever aparecer o texto Atualizan-do, conforme a Figura 2.62:

Figura 2.61.

Neste captulo, voc aprendeu como fcil construir aplicaes com o AJAX utilizando o Framework AJAX ASP.NET e conheceu os seus principais controles.

Figura 2.62.


Captulo 3

O controle UpdatePanel



No captulo anterior, voc j utilizou o UpdatePanel e pde com-provar os benefcios que ele proporciona s suas aplicaes.

Usando o UpdadePanel, voc pode atualizar partes especfi cas da pgina, sem a necessidade de usar nenhum cdigo Javascript. Com isso, voc tem uma boa reduo no trfi co entre navegador, cliente e servidor, diminuindo o uso de banda.

Lembre-se: assim como os demais controles, o UpdatePanel tra-balha em conjunto com o controle ScriptManager, ento o mesmo deve estar ou ser adicionado na pgina quando voc for utilizar o UpdatePanel.

Neste captulo, faremos uma prtica em que voc aprender: usar triggers; trabalhar com vrios UpdatePanel em uma mesma pgina; usar UpdatePanel aninhados; atualizar e criar UpdatePanel programaticamente; conhecer os controles que no so compatveis com o UpdatePa-nel.

1. Crie uma nova aplicao usando o Template ASP.NET AJAX-Enabled Web Site chamada UpdatePanel, como mostra a Figura 3.1. Neste exemplo, usaremos a linguagem C#.

Figura 3.1.


53O controle UpdatePanel

2. Adicione dois controles TextBox e um controle Button na pgi-na Default.aspx, e organize-os conforme a Figura 3.2:

Figura 3.2.

3. D um clique duplo sobre a pgina Default.aspx e, no painel de cdigo, digite o seguinte cdigo 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-vrgula. Desta forma:

TextBox1.Text = DateTime.Now.ToString() TextBox2.Text = DateTime.Now.ToString()

Esse cdigo tem por objetivo atribuir o valor da data e hora atual nas duas caixas de texto. Seu painel de cdigo deve estar como a Figura 3.3:



4. Execute e teste sua aplicao.Perceba que, ao clicar no boto, a data e hora atual so exibidas

em cada uma das caixas de texto (Figura 3.4).

Figura 3.3.

Figura 3.4.

5. Pare a execuo da aplicao.

6. Adicione um controle UpdatePanel na pgina Default.aspx e mova os controles TextBox2 e Button1 para dentro do mesmo, con-forme a Figura 3.5:



Figura 3.5.7. Execute a aplicao.

8. Clique sobre o boto e, perceba que agora, apenas a caixa de texto que est dentro do UpdatePanel executada. Temos ento um carregamento assncrono dentro do UpdatePanel, usando o AJAX (Figura 3.6).

Figura 3.6.

9. Pare a execuo da aplicao.

Qualquer controle dentro de um UpdatePanel dispara uma atuali-zao assncrona, ou seja, uma atualizao apenas dentro do Upda-tePanel. Se a propriedade ChildrenAsTrigger estiver com valor True, essa propriedade ser sempre True por padro. Se voc deixar essa



propriedade como false, os controles dentro do UpdatePanel no chamaro uma atualizao assncrona.

muito difcil alteramos a propriedade ChildrenAsTrigger porque geralmente pelo menos um dos controles dentro do UpdatePanel usado para solicitar atualizao assncrona. No entanto, algumas vezes precisamos que um controle especfi co que est dentro do UpdatePanel no chame uma atualizao assncrona. Voc vai ver como fazer isso agora.

10. Clique sobre o UpdatePanel1 para selecion-lo e, na jane-la Properties, localize e clique sobre a propriedade Triggers, como mostra a Figura 3.7.:

Figura 3.7.

Figura 3.8.

11. Na janela UpdatePanelTrigger, clique na seta indicando para baixo ao lado do boto Add, como mostra a Figura 3.8:



Perceba que so exibidas duas opes: 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 cdigo HTML referente ao controle UpdatePanel1 deve estar assim:

Note no cdigo anterior que a tag quem faz refren-cia ao controle que no vai disparar uma atualizao assncrona.



15. Execute a aplicao.

Perceba que, ao clicar no boto, toda a pgina atualizada nova-mente, pois as duas caixas de texto so atualizadas com a data.

16. Pare a execuo 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 no chame uma atua-lizao assncrona, voc pode tambm usar uma trigger para fazer com que um controle fora do UpdatePanel execute uma atualizao assncrona. Para isso, clique novamente sobre o UpdatePanel1 para selecion-lo e, na janela Properties, localize e clique sobre a proprie-dade Triggers.

19. Desta vez, selecione a opo AsyncPostBackTrigger no boto Add, como mostra a Figura 3.11:

Figura 3.11.



20. Na propriedade ControlID selecione Button1 e na proprieda-de EventName selecione Click (Figura 3.12).

Agora, toda vez que o evento Click do Button1 for disparado, ser solicitada uma atualizao assncrona.

O HTML do UpdatePanel deve estar agora semelhante a esse:

Note no cdigo anterior que a tag quem faz refren-cia ao controle e ao evento que dispara a atualizao assncrona.

21. Execute e teste sua aplicao.Vamos entender agora a propriedade UpdateMode, usada quan-

do temos mais do que um UpdatePanel na mesma pgina.

22. Adicione mais um UpdatePanel pgina e arraste o controle TextBox1 para dentro do mesmo, como mostra a Figura 3.13:

Figura 3.12.



23. Execute a aplicao. Perceba que sempre que voc clica no Button1 os dois UpdatePanel so atualizados (Figura 3.14).

Figura 3.13.

Figura 3.14.



24. Selecione o UpdatePanel2 e mude a propriedade UpdateMo-de para Conditional, como mostra a Figura 3.15:

Figura 3.15.

Quando a propriedade UpdateMode est defi nida como always que, por sinal, o valor padro qualquer controle na pgina que dispara uma atualizao assncrona atualiza o UpdatePanel em ques-to. Quando esta mesma propriedade foi defi nida como Conditio-nal, apenas os controles dentro do mesmo ou com trigger apontada para o mesmo efetuam atualizao assncrona.

No h limite em relao ao nmero de UpdateControls a serem utilizados em uma pgina.

25. Execute a aplicao. Agora, ao clicar no boto, apenas o UpdatePanel1 deve ser atualizado (Figura 3.16).

Figura 3.16.



Figura 3.17.

A regra aqui simples. Se os dois controles UpdatePanel estiverem com a propriedade UpdateMode com o valor Conditional, ao clicar no boto dentro do UpdatePanel fi lho, ou seja, aquele que est dentro do outro, apenas ele ser atualizado. J o UpdatePanel pai sempre atuali-zar ele e todos os UpdatePanel que estiverem dentro dele.

28. Certifi que-se que a propriedade UpdateMode dos dois con-troles UpdatePanel estejam como Conditional.

29. Execute e teste a aplicao.Perceba que, ao clicar no boto dentro do UpdatePanel2, somen-

te o mesmo atualizado. J ao clicar no boto que est dentro do UpdatePanel1 disparada a atualizao assncrona dos dois contro-les UpdatePanel.

26. Adicione um Button dentro do UpdatePanel2.

27. Arraste o UpdatePanel2 para dentro do UpdatePanel1, con-forme mostra a Figura 3.17:



Figura 3.18.

Agora vamos aprender a atualizar e criar UpdatePanel progra-maticamente.

30. Adicione mais um Button sua aplicao, fora de qualquer UpdatePanel, como mostra a Figura 3.18:

Se voc executar sua pgina agora, esse boto no far nenhuma solicitao assncrona. Ao clicar sobre ele, a pgina completamen-te atualizada.

31. D um clique duplo sobre o Button que voc acabou de adicio-nar e digite o seguinte cdigo no procedimento de evento do mesmo:

UpdatePanel1.Update();

Isso ainda no o sufi ciente para realizar uma atualizao as-sncrona. Precisamos registrar o controle como uma trigger. Faze-mos isso adicionando o seguinte cdigo no procedimento de evento Page_Load:



ScriptManager1.RegisterAsyncPostBackControl(Button3);

Button3 o nome ou ID do Button que adicionamos.

32. Execute sua aplicao e teste. Agora, voc j capaz de cha-mar uma atualizao assncrona programaticamente.

33. Agora, vamos criar um controle UpdateControl programati-camente. Para isso, adicione uma nova pgina sua aplicao com o nome de Default2.aspx.

34. Adicione um controle ScriptManager nesta pgina.

35. Dentro da classe Default2, adicione o seguinte cdigo:

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(); }



Figura 3.19.

Seu painel de cdigo deve estar assim (Figura 3.19):

A seguir, o mesmo cdigo 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



Protected Sub Button _ Click(ByVal Sender As Object, ByVal E As EventArgs) TextBox1.Text = DateTime.Now.ToString() End Sub

36. Execute e teste sua aplicao (Figura 3.20).

Figura 3.20.

Vamos agora compreender o cdigo.Primeiramente, criamos os trs objetos que vamos utilizar na

nossa pgina.

1 UpdatePanel;1 Button;1 TextBox;

Fizemos isso com o cdigo a seguir:

UpdatePanel up1 = new UpdatePanel(); Button Button1 = new Button(); TextBox TextBox1 = new TextBox();

O segundo passo foi atribuir um identifi cador nico para o Upda-tePanel que criamos e atribuir o valor Conditional sua propriedade UpdateMode. Neste exemplo, no precisvamos ter alterado a pro-priedade UpdateMode para este contexto, mas por motivo didtico mostrei como realizar esta tarefa.

up1.ID = UpdatePanel1; up1.UpdateMode = UpdatePanelUpdateMode.Conditional;



Tambm precisamos atribuir um identifi cador nico para os con-troles TextBox e Button, j que os criamos programaticamente tam-bm. Fizemos isso usando as seguintes linhas de cdigo:

Button1.ID = Button1;TextBox1.ID = TextBox1;

A propriedade Text do Button1 foi modifi cada para Button ape-nas para o boto no exemplo no ser exibido em branco.

Button1.Text = Button;

Depois, criamos um manipulador de evento para o Button1 com a seguinte linha de cdigo, em que Button1_Click o nome de um procedimento que criamos.

Button1.Click += new EventHandler(Button1 _ Click);

O cdigo a seguir mostra o procedimento Button1_Click. nele que atribumos o valor da data e hora atual a TextBox1.

protected void Button1 _ Click(object sender, EventArgs e) { TextBox1.Text = DateTime.Now.ToString(); }

Ns precisamos vincular os controles TextBox1 e Button1 no UpdatePanel. Fazemos isso adicionando os controles na proprieda-de ContentTemplateContainer do UpdatePanel usando o seguinte cdigo:

up1.ContentTemplateContainer.Controls.Add(Button1); up1.ContentTemplateContainer.Controls.Add(TextBox1);

Para fi nalizar, vinculamos o nosso UpdateControl pgina usan-do o cdigo:

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 fi nalizar,



existem alguns controles que no podem ser utilizados dentro do UpdatePanel. Segue uma descrio deles, alm 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, CompareVali-dator, CustomValidator, RangeValidator, RegularExpressionValidator, RequeredFieldValidator e ValidationSummary s podem ser usados se estiverem com a propriedade EnableClientScript como false.


Captulo 4

O controle Timer



O controle Timer permite a atualizao da pgina em intervalos de tempo defi nidos.

Neste captulo, faremos uma prtica onde voc entender o que e como utilizar o controle Timer.

1. Crie uma nova aplicao usando o Template ASP.NET AJAX-Enabled Web Site chamada Timer, como mostra Figura 4.1. Neste exemplo, usarei a linguagem C#.

Figura 4.1.

2. Verifi que se o controle ScriptManager j est adicionado na pgina, caso no esteja, adicione o mesmo utilizando a guia AJAX Extensions na Toolbox.

3. Adicione um controle UpdatePanel na pgina.

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:


71O controle Timer

Figura 4.2.

5. D um clique duplo sobre o controle Timer1 e, no procedimen-to de evento criado Timer1_Tick, digite o seguinte cdigo:

Label1.Text = Atualizado em: + DateTime.Now.ToString();

Em VB.NET o cdigo quase o mesmo apenas sem o ponto-e-vrgula, como segue:

Label1.Text = Atualizado em: + DateTime.Now.ToString()




O evento Tick executado no servidor sempre que o controle Timer executar uma atualizao. Este evento semelhante ao Click do boto, mas disparado em intervalos de tempos defi nidos pela propriedade Interval.

6. Selecione o controle UpdatePanel1 e, na janela Properties, lo-calize a propriedade Interval. Seu valor padro 60.000 milissegun-dos, ou seja, 60 segundos ou 1 minuto. Altere este valor para 3.000 milissegundos (3 segundos), como mostra a Figura 4.4:

Figura 4.3.

Figura 4.4.


73O controle Timer

Observao: quanto menor o intervalo de tempo, mais solicita-es o controle efetuar ao servidor, aumentando o trfego de rede e o consumo de banda. Procure utilizar o maior intervalo de tempo possvel para o contexto de suas aplicaes.

7. Execute e teste sua aplicao. Perceba que h aproximada-mente cada trs segundos atualizada a data e hora no Label1.

Quando eu digo aproximadamente isso mesmo, voc vai en-tender por que agora:

8. Adicione o seguinte cdigo dentro do procedimento de evento Timer1_Tick, como mostra a Figura 4.5:

System.Threading.Thread.Sleep(3000);

Em VB.NET o cdigo quase o mesmo apenas sem o ponto-e-vrgula, como segue:

System.Threading.Thread.Sleep(3000)

Figura 4.5.

Este cdigo no novidade para voc nesta altura do livro. Nova-mente, vamos retardar um pouco o processamento do mtodo por motivos didticos.



9. Execute sua aplicao. Perceba que a atualizao executada a cada seis segundos e no trs como confi guramos na propriedade Interval.

Isso acontece sempre que o controle Timer estiver dentro do UpdatePanel. A contagem iniciada sempre que a antiga solicitao fi nalizada. Como no nosso exemplo este tempo de trs segundos ele foi somado ao tempo do controle Timer. Mas, em nossas aplica-es, difi cilmente sabemos o tempo exato que vai levar uma atuali-zao assncrona, porque ela depende do volume de dados que est sendo trafegado e da utilizao de banda.

10. Com o objetivo de realizar a atualizao a exatamente cada trs segundos, vamos arrastar o controle Timer1 para fora do Upda-tePanel, 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 atualizao assn-crona em um UpdatePanel necessrio associ-los utilizando Trig-ger. Para isso, selecione o UpdatePanel e clique sobre a propriedade Triggers. Na janela UpdatePanelTrigger, adicione uma AsyncPost-Back Trigger para o controle Timer1, e o evento Tick, como mostra a Figura 4.7:


75O controle Timer

Figura 4.7.

12. Execute sua aplicao. Agora sim, a exatamente cada trs segundos a atualizao efetuada. Fique atento, visualize a seguinte circunstncia:

O controle Timer efetua uma atualizao assncrona a cada trs segundos. Mas uma das atualizaes demora mais do que trs se-gundos para ser fi nalizada. Ento, antes que a atualizao acabe iniciada uma outra. O que acontece com a primeira que no acabou ainda? A resposta : a primeira atualizao, a que no fi nalizou ain-da, terminada e a nova iniciada.

Segue o cdigo HTML do controle UpdatePanel1. Atente para a propriedade Trigger sendo confi gurada:

13. Pare a execuo da sua aplicao e vamos agora compreen-der como trabalhar com mltiplos UpdatePanel.

14. Adicione mais um UpdatePanel e um Label dentro do mes-mo, como mostra a Figura 4.8:



Figura 4.8.

15. Confi gure a propriedade UpdateMode dos controles Update-Panel1 e UpdatePanel2 como Conditional.

16. Para o UpdatePanel2, adicione uma AsyncPostBackTrigger para o controle Timer1 e o evento Tick.

17. Adicione o cdigo a seguir no procedimento Timer1_Tick, como mostra a Figura 4.9.

Label2.Text = Atualizado em: + DateTime.Now.ToString();

Figura 4.9.


77O controle Timer

18. Execute sua aplicao. Agora, a cada trs segundos ambos UpdatePanel sero 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, con-tinuamos nosso exemplo.

19. Adicione mais um controle Timer, como mostra a fi gura a seguir:

Figura 4.10.

20. Modifi que a propriedade Trigger do UpdatePanel2 para o controle Timer2, como mostra a Figura 4.11:

Figura 4.11.



21. D um clique duplo sobre o controle Timer2. Mova o cdigo 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 aplicao. Agora o UpdatePanel1 atualizado a cada trs segundos e o UpdatePanel2 atualizado a cada cinco segundos.

Com este exemplo concludo, voc capaz de utilizar o controle Timer em suas aplicaes ASP.NET AJAX.


Captulo 5

A classe PageRequestManager



At agora em todos os nossos exemplos no usamos Javascript ou DOM, mas eles podem ser necessrios nas seguintes circunstncias:

controlar como mltiplas atualizaes assncronas so proces-sadas. Por padro, a ltima atualizao se sobrepe primeira, mas podemos controlar isso usando Javascript e DOM; disponibilizar informaes sobre a atualizao assncrona que est sendo executada. Isso melhora a experincia do usurio com a pgina, principalmente quando temos mltiplos controles UpdatePanel; possibilidade de cancelar uma atualizao assncrona enquan-to a mesma processada; exibir mensagens de erro customizadas; enviar para o servidor informaes de controles que no esto sendo usados na atualizao assncrona. Um exemplo seria en-viar para o servidor o valor de um TextBox que est fora de um UpdatePanel que est sendo processado. Isso permite que o va-lor do TextBox seja utilizado no cdigo que est sendo processa-do no servidor e infl uencie o resultado da atualizao assncrona.

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 aplicao ASP.NET. Esta classe possui mtodos, propriedades e eventos que permitem que voc customize a atualizao assncrona utilizando Javascript e DOM. Para conhecer melhor o Javascript e o DOM consulte o Apn-dice.

Neste captulo, faremos uma prtica que o ensinar a: trabalhar com os eventos da classe PageRequestManager; parar uma atualizao assncrona.

1. Crie uma nova aplicao usando o Template ASP.NET AJAX-Enabled Web Site chamada PageRequestManager, como mostra imagem a seguir. Neste exemplo, usarei a linguagem C#.


81A Classe PageRequestManager

Figura 5.1.

2. Verifi que se o controle ScriptManager j est adicionado pgina, caso no esteja, adicione o mesmo utilizando a guia AJAX Extensions na Toolbox.

3. Adicione um controle UpdatePanel na pgina. 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 pgina como mostra a Figura 5.2:

Figura 5.2.



6. D um clique duplo sobre o Button1 e digite o seguinte cdigo para o procedimento de evento Button1_Click:

System.Threading.Thread.Sleep(3000); Label1.Text = DateTime.Now.ToString();

Em VB.NET o cdigo diferente apenas por no ter o ponto-e-vrgula no fi nal.


Figura 5.3.

7. Execute e teste sua aplicao (Figura 5.4).

Figura 5.4.



At agora, nenhuma novidade. Este um exemplo semelhante aos que fi zemos at aqui. Mas entenda que, como o ciclo de vida de uma pgina ASP.NET possui uma srie de eventos que so execu-tados consecutivamente, nas atualizaes assncronas tambm te-mos alguns destes tipos de eventos. Vamos agora conhecer e saber como utilizar esses eventos em nossas aplicaes ASP.NET AJAX.

8. V at o cdigo HTML da pgina. Para isso, clique no boto Source.

9. Localize a seguinte tag:

Esta tag representa o controle ScriptManager que est adiciona-do nossa pgina.

10. Logo abaixo da tag do controle ScriptManager digite o se-guinte cdigo:

Sys.WebForms.PageRequestManager.getInstance().add _ initializeRequest(Exibir); function Exibir(){ alert(InitializeRequest); }

Seu cdigo HTML deve estar assim (Figura 5.5):

Figura 5.5.



Esse um bloco de cdigo Javascript. A funo Exibir() exibe a mensagem InitializeRequest,

usando o comando Javascript Alert(). A seguinte linha de cdigo recupera uma instncia da classe Pa-

geRequestManager e adiciona o mtodo Exibir()como manipula-dor do evento initializeRequest.

Sys.WebForms.PageRequestManager.getInstance().add _ initializeRequest(Exibir);

Vamos executar nosso exemplo para compreender melhor o que este bloco faz.

11. Execute sua aplicao. Ao clicar no boto, exibida a se-guinte mensagem:

Figura 5.6.

Isso quer dizer que quando a requisio assncrona foi iniciada, ou seja, quando o evento initializeRequest foi disparado o mtodo Exibir() foi executado. Voc pode e deve criar suas prprias fun-es para fazer uso desse evento nos seus programas.

12. Modifi que o cdigo Javascript criado at agora para o se-guinte:

var prm = Sys.WebForms.PageRequestManager.ge-tInstance(); prm.add _ initializeRequest(Exibir); function Exibir(){ alert(InitializeRequest); }



Este cdigo faz a mesma coisa que o anterior, mas separa um pouco melhor o cdigo deixando-o mais claro e legvel, facilitando assim a manipulao de outros eventos como faremos a seguir. Nele, criamos uma varivel chamada prm e atribumos a ela a instncia da classe PageRequestManager. Para isso, usamos o mtodo getIns-tance(). Isso facilita o uso dos eventos porque usamos a varivel com a instncia do mtodo para atribuir o mtodo Exibir() ao evento initializeRequest.

Voc no pode criar uma instncia da classe PageRequestMa-nager diretamente. Esta classe est sempre disponvel quando o controle ScriptManager e o UpdatePanel esto na sua pgina rea-lizando atualizao assncrona. Por isso, sempre que voc precisar utilizar essa classe deve recuperar sua instncia usando o mtodo getInstance().

Seu cdigo HTML deve estar assim (Figura 5.7):

Figura 5.7.

capitulo5.indd 85 10/5/2007 11:10:43


13. Vamos conhecer um outro evento, o beginRequest. Digite o seguinte cdigo dentro do script em Javascript, logo abaixo da funo Exibir():

prm.add _ beginRequest(Exibir2); function Exibir2(){ alert(BeginRequest); }

Este cdigo muito semelhante ao outro que acabamos de co-nhecer, apenas estamos usando outro evento que executado aps o evento initializeRequest.

Seu cdigo HTML deve estar assim:

Figura 5.8.

14. Execute e teste sua aplicao. Agora, aps o evento initialize-Request, executado o evento beginRequest, como mostra a Figura 5.9:

Figura 5.9.



Os prximos trs eventos que so executados sempre que uma solicitao assncrona executada so estes: pageLoading, page-Loaded e endRequest. Vamos demonstr-los:

15. Digite o seguinte cdigo, logo abaixo da funo 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:

var prm = Sys.WebForms.PageRequestManager.ge-tInstance(); 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);



Figura 5.11.

Aqui utilizamos o mtodo get _ postBackElement()para recu-perar o objeto e atribuir o mesmo varivel obj que facilita o seu uso. Este cdigo faz o mesmo que o anterior s que de forma mais clara e organizada.

Vamos agora conhecer o mtodo abortPostBack(), para a exe-cuo de uma atualizao assncrona.

19. Localize a guia HTML na barra de ferramentas e adicione um con-trole Button, dentro do UpdateProgress, como mostra a Figura 5.11:

Foi utilizado um controle HTML porque este boto s vai ser uti-lizado no lado cliente.

20. Selecione esse Button e mude a sua propriedade Value para Cancelar, como mostra a Figura 5.12:



21. Adicione o cdigo a seguir dentro do script em JavaScript, como mostra a prxima imagem:

function Cancelar(){ prm.abortPostBack(); }

Figura 5.12.

Este cdigo simples e demonstra claramente como utilizar o mtodo abortPostBack(). Lembre-se que prm uma varivel que tem uma instncia da classe PageRequestManager.

Figura 5.13.



22. Ainda no cdigo HTML, localize o cdigo HTML do Button que est dentro do UpdateProgress e modifi que-o para o seguinte:

A modifi cao foi simples, apenas adicionamos o evento onclick que chama a funo Cancelar().

A seguir (Figura 5.14), a modifi cao no cdigo HTML:

Figura 5.14.

23. Execute e teste sua aplicao. Agora, se voc clicar em Can-celar, a atualizao parada imediatamente (Figura 5.15).

Figura 5.15.



Para fi nalizar, quero que voc conhea a propriedade isInAsync-PostBack. Ela contm o valor true, se a atualizao ou PostBack que est sendo efetuado assncrono, e tem o valor false, se a atualizao for sncrona. Vamos utiliz-la:

24. Altere o cdigo da funo Exibir4() para a seguinte:

function Exibir4(){ if (prm.get _ isInAsyncPostBack()){ alert(PageLoaded); } }

Aqui, fi zemos o uso do mtodo get _ isInSyncPostBack para recuperar o valor da propriedade isInAsyncPostBack da classe Pa-geRequestManager que est sendo referenciada pela varivel prm. Ento, se o valor for true, a mensagem do mtodo alert() ser exibida, se o valor for false, no.

25. Execute e teste sua aplicao novamente.Perceba que agora, ao iniciar a aplicao, a mensagem que es-

tava sendo exibida pelo evento PageLoaded no foi exibida. Isso porque na funo Exibir4(), que utilizada por esse evento, esta-mos verifi cando se a atualizao assncrona e, nesse caso, o valor false. J ao usar a atualizao assncrona, a mensagem exibida normalmente.


Captulo 6

Usando ASP.NET AJAX em aplicaes j existentes



Para usar o ASP.NET AJAX em uma aplicao j existente voc precisa fazer algumas modifi caes no arquivo Web.confi g.

Nos passos a seguir, vamos entender melhor na prtica quais so essas modifi caes:

1. Crie uma nova aplicao ASP.NET normal. Utilize o Template ASP.NET Web Site, como mostra Figura 6.1:

2. Abra o arquivo Web.confi g.

3. Adicione o seguinte cdigo, logo abaixo da tag :

95Usando ASP.NET AJAX em aplicaes j existentes

PublicKeyToken=31bf3856ad364e35 requirePermission=false allowDefi nition=MachineToApplication/>

Observe, na Figura 6.2, o local exato onde o cdigo deve ser in-serido:

Figura 6.2.



Para no ser necessrio digitar todo este texto, crie uma aplica-o em branco usando o Template ASP.NET AJAX-Enabled Web Site e copie o cdigo que est no Web.confi g.

Os elementos inseridos dentro da tag criam sees e sub-sees de confi gurao para a classe SystemWebEx-tensionsSectionGroup. Voc confi gura as propriedades para estas sees usando o elemento .



Figura 6.3.


97Usando ASP.NET AJAX em aplicaes j existentes

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 pgina:


O elemento registra o assembly System.Web.Ex-tensions. O elemento adiciona os novos manipu-ladores de eventos para as requisies via script. O elemento defi ne os mdulos HTTP que so utilizados em aplica-es ASP.NET AJAX.




Figura 6.4.

Observe na imagem que no cdigo anterior tambm temos uma leve mudana na tag . Precisamos retirar a barra que encerra essa tag para inserir a tag . A tag fi ca assim:

Essas so as modifi caes necessrias no Web.confi g. No ne-cessria nenhuma outra modifi cao.

Agora, adicione os controles ASP.NET AJAX necessrios na sua aplicao. Lembre-se de adicionar o controle ScriptManager em to-das as pginas que for utilizar o ASP.NET AJAX.


Apndice

apendiceA.indd 99apendiceA.indd 99 8/5/2007 17:52:598/5/2007 17:52:59


JavaScript

Para utilizar o JavaScript em uma pgina HTML, usada a tag e com o atributo type defi nido como: text/javascript. Exemplo:

//cdigos JavaScript

Assim, o navegador entender que no contedo dessa tag h co-mandos Javascript para serem executados.

Voc pode inserir seu cdigo Javascript em trs locais na pgina HTML, so eles:

Arquivo externo com extenso .js; No head entre as tags e ; No body entre as tags e .

Voc pode usar uma combinao desses locais tambm.Vamos conhecer a peculiaridade de cada uma delas.

Arquivo externo com extenso .js

O arquivo externo chamado desta forma:

Ou seja, por meio do atributo src da tag , indicamos a localizao do arquivo externo, assim o navegador pode localiz-lo e execut-lo.

Em arquivos externos no utilizamos a tag , somente os cdigos.

Vamos conhecer algumas das vantagens de se trabalhar dessa forma:

Facilidade na manuteno: uma vez que o script est localiza-do em apenas um arquivo, voc tem um local central para edio ou correo dos cdigos; Carregamento mais rpido da pgina: o arquivo externo arma-zenado no cache do navegador. Assim, o navegador no precisa baix-lo em todas as pginas que fazem referncia ao mesmo;


101Apndice

Semntico: o arquivo externo separa a camada de comporta-mento (Javascript) da camada de contedo (HTML).

No head entre as tags e

O script inserido desta forma:

//cdigos JavaScript

Os cdigos Javascript localizados entre as tags e da pgina so executados ao serem chamados, ou seja, quando al-gum evento for provocado, como o evento onclick, onmouseo-ver, onload, entre outros.

Nessa forma, o script carregando antes de algum utiliz-lo, ou seja, antes do carregamento do contedo que est entre as tags e .

No body entre as tags e

O script inserido desta forma:

//cdigos JavaScript

Os cdigos inseridos entre as tags e da pgi-na so inicialmente executados enquanto a pgina carregada, mas tambm podem ser chamados quando algum evento for provocado.

A tag

A tag nos permite disponibilizar um contedo al-ternativo ao disposto via script. Isso signifi ca que dentro desta tag disponibilizamos contedo para o usurio que no tiver suporte ao Javascript em seu navegador.



Veja um exemplo:

alert(Ol fulano.);

Ol fulano.

No exemplo anterior ser exibida a mensagem Ol fulano, atra-vs do alert() uma funo do JavaScript que exibe uma mensa-gem atravs de um popup box para quem tem suporte ao JavaS-cript. Caso contrrio, a mesma mensagem aparecer para quem no tem suporte ao JavaScript, porm, atravs da tag na forma de texto.

Comentrios em Javascript

Tudo que estiver englobado pelos comentrios ignorado pelo interpretador do JavaScript.

H dois tipos de comentrios, so eles: // e /* */. O primeiro o comentrio de uma linha somente, enquanto o segundo suporta vrias linha e conhecido como comentrio de bloco.

Observe os exemplos:

// Comentrio de uma linha.

/* Comentrio de vrias linhas, o interpretador ignora todo esse contedo. O que nos permite a criao de notas e lembretes em nossos cdigos. */

Ainda sobre comentrios em JavaScript, observe que os navega-dores que no o suportam iro exibi-lo como se fosse parte do con-tedo da pgina. Para prevenir essa prtica, utilizamos o comentrio em HTML associado ao cdigo JavaScript.


103Apndice

As duas barras (//), antes do fechamento do comentrio, previ-nem que o interpretador do JavaScript as interpretem.

Case Sensitive

Javascript uma linguagem Case Sensitive, ou seja, diferencia minsculas de maisculas. Meu diferente de meu em Javascript. Ento, tenha ateno ao digitar os comandos e usar as variveis Ja-vascript em suas aplicaes.

Ponto-e-vrgula (;) no final das declaraes

Uma boa prtica ao programar utilizando JavaScript sempre usar o ; (ponto-e-vrgula) no fi nal das suas declaraes, mas seu uso no obrigatrio.

Voc precisa utilizar o ponto-e-vrgula se utilizar algum compres-sor de JavaScript para reduzir o tamanho do arquivo. Como os com-pressores distribuem os cdigos em uma nica linha, sem eles ser impossvel determinar onde comea e termina uma instruo, oca-sionando erro.

Variveis

Vejamos um exemplo de como declarar uma varivel:

var nomeVariavel = valorVariavel;

ounomeVariavel = valorVariavel;

Voc pode criar uma varivel com ou sem a declarao var, mas aconselhvel utiliz-la.

Quando criamos uma varivel dentro de uma funo, a tornamos local, ou seja, acessvel somente dentro da funo em que foi criada. J as variveis globais, so declaradas fora das funes e fi cam aces-sveis a toda e qualquer funo na pgina em que a varivel esteja.

Exemplo de como atribuir um valor a uma varivel:

numeroFuncionario = 23;



Entendemos pelo sinal de igual como recebe. Assim, numero-Funcionario recebe 23.

Operadores

Operadores so usados para representar expresses de clculo, comparao, condio e atribuio. Portanto, temos os seguintes tipos de operadores:

Operadores aritmticos

Operador

MultiplicaoDivisoMduloAdioSubtraoIncrementoDecremento

Representaoem Javascript

*/%+-++--

Exemplo

a * b Multiplica-se o valor de a por b.a / b Divide-se o valor de a por b.a % b Retorna o resto da diviso de a por b.a + b Soma de a e b.a b Subtrao de a com b.a ++ Neste caso, somado 1 ao valor de a.a -- Neste caso, subtrado 1 do valor de a.

Operadores de relacionais

Tabela Ap. 1: Operadores aritmticos.

Operador

Maior

Maior ou igual

Menor

Representao em Javascript

>

>=

b Se o valor de a for maior que o valor de b, ento o resultado dessa expresso verdadeiro, seno fal-so.

a >= b Se o valor de a for maior ou igual que o valor de b, ento o resul-tado dessa expresso verdadeiro, seno falso.

a < b Se o valor de a for menor que ovalor de b, ento o resultado dessa ex-presso verdadeiro, seno falso.


105Apndice

Tabela Ap. 2: Operadores de relacionais.

Menor ou igual

Igual a

Igual a (compara o valor e o tipo)

Diferente de

9 Se o resultado de a for igual a cinco ou o valor de b for maior que nove, ento o resultado verdadei-ro. O resultado s ser falso se as duas expresses retornarem falso.

! a == 5 Se o resultado de a for igual a 5 ,ento o resultado ser falso. O operador no inverte o resultado da expresso.

Tabela Ap. 3: Operadores lgicos.



Operadores de atribuio

Tabela Ap. 4: Operadores de atribuio.

Operador

=+=-=*=/=%=

Exemplo

x=yx+=yx-=yx*=yx/=yx%=Y

o mesmo que

x=yx=x+yx=x-yx=x*yx=x/yx=x%y

Operador condicional

Operador condicional aquele que atribui um valor a uma deter-minada varivel com base em uma condio, ou seja, se a condio for verdadeira, teremos um valor x, caso contrrio, um valor y.

Conhea a sintaxe desse tipo de condio:

nomeDaVarivel = (condio) ? valorSeVerdadeiro : valorSe-Falso;

Agora, observe um exemplo para uma melhor compreenso:

var nota = 65;var resposta = (nota >= 60) ? Aprovado. : Reprovado.;

No exemplo anterior, fi zemos o seguinte processo: inicialmente temos uma varivel denominada nota com o valor 65. Em seguida, a varivel resposta com um valor condicional, ou seja, se o valor da varivel nota for maior ou igual a 60, teremos o valor Aprovado, caso contrrio, teremos Reprovado.

Estruturas de controle

Como o prprio nome diz, as estruturas de controle servem para controlar a execuo dos nossos programas. Elas so dividas em:


107Apndice

Estruturas de deciso

Em Javascript temos as seguintes estruturas de deciso:

Declarao if

Sintaxe:

if (condio) { //cdigo a ser executado quando a condio for verdadeira.}

Exemplo:

var idade = 19;if(idade >= 18) { alert(Voc pode ter sua carteira de motorista);}

No exemplo anterior, a declarao if verifi ca se a varivel idade maior ou igual a 18. Como a condio verdadeira, ou seja, a va-rivel idade tem o valor 18, ser exibido o texto Voc pode ter sua carteira de motorista.

Declarao if...else

Sintaxe:

if (condio) { //cdigo a ser executado quando a condio for verdadei-ra.} else { //cdigo a ser executado quando a condio for falsa.}

Exemplo:

var sexo = feminino;if(sexo == masculino) { alert(Homem!);} else { alert(Mulher!);}



No exemplo anterior, a declarao if verifi ca se a varivel sexo igual a masculino. Como a condio falsa, ou seja, a varivel sexo no tem o valor masculino, e sim, feminino, ser exibido o texto Mulher.

Declarao if...else if...else

Sintaxe:

if (condio) { //cdigo a ser executado quando a condio for verdadeira.} else if (2 condio) { //cdigo a ser executado quando a 2 condio for verda-deira.} else { //cdigo a ser executado quando a primeira e a segunda condio forem falsas.}

Exemplo:

var moeda = Dlar;if(moeda == Real) { alert(Voc precisa usar o Real!);} else if(moeda == Dlar) { alert(Voc precisa usar o Dlar!);} else { alert(Voc no pode usar nem o dlar nem o real!);}

No exemplo acima, realizamos duas verifi caes: perguntamos se a varivel moeda tem o valor Real (a primeira). Caso seja verda-deiro, exibir o texto Voc precisa usar o Real!; e perguntamos se a mesma varivel tem o valor Dlar (a segunda). Neste caso, exibir o texto Voc precisa usar o Dlar!

Caso a varivel no tenha nenhum dos dois valores Real ou D-lar exibir o texto Voc no pode usar nem o dlar nem o real!.

Declarao switch

Sintaxe:

switch(expresso) { case valor 1: //cdigo a ser executado se a expresso = valor 1;


109Apndice

break case valor 2: //cdigo a ser executado se a expresso = valor 2; break default: //cdigo a ser executado se a expresso for diferente do valor 1 e valor 2;}

Exemplo:

var estado = PR;switch(estado) { case PR: alert(Voc mora no Paran.); break case SP: alert(Voc mora em So Paulo.); break case SC: alert(Voc mora em Santa Catarina.); break default: alert(Em que estado voc mora?);}

Temos a varivel estado com o valor PR. Iniciamos nossa decla-rao condicional com o switch, passando a ele como parmetro a expresso (varivel) estado.

Ento, utilizamos o case. Para isso, necessrio verifi car o seguin-te: se o valor da varivel for PR exibimos um texto, se for SP exibimos outro, e assim por diante; se o valor da varivel no coincidir com nenhum dos valores nos cases, exibimos um texto padro (default).

O valor da expresso comparado com os valores de cada case da estrutura. Caso ocorra um valor semelhante, o cdigo a ele asso-ciado executado;

O break previne que o prximo case seja executado automati-camente;

Estruturas de Repetio

Em Javascript temos as seguintes estruturas de repetio:



Loop For

Sintaxe:

for (var = valorInicial; var

111Apndice

Loop do...while

Sintaxe:

do { //cdigo a

ajax.pdf

Documents

aspnet ajax

ajax aspnet

uso do ajax

sites em ajax herbert

ajax programa de computadores

windows explorer

janelas do windows

seguintes prrequisitos