:
Master Page
Deve ficar como mostra a Figura 9.4: capítulo
9
Figura 9.4. Aprofundando no uso do controle UpdatePanel 135
Esse texto serve apenas para colocarmos algum conteúdo na Master Page de forma que durante o exemplo fique claro que algum conteúdo da página está sendo recuperado da página Master Page. É claro que, em suas aplicações, a Master Page terá bem mais conteúdo, como imagens e até mesmo controles de menu etc. 6. Vá para o modo Design na Master Page, o conteúdo das páginas serão executados em lugar do ContentPlaceHolder, como mostra a Figura 9.5:
Figura 9.5.
7. Vamos agora excluir a página Default.aspx porque ela não faz referência à Master Page. Para isto, clique com o botão direito sobre a página Default.aspx na janela Solution Explorer e selecione Delete, como mostra a Figura 9.6 a seguir:
136 Universidade AJAX
Figura 9.6.
Você pode adicionar a referência à página Master Page, no código HTML de uma página ASP.NET sem precisar excluir o arquivo caso seja necessário. Para isto, você deve adicionar o atributo MasterPageFile=”~/MasterPage.master” à diretiva @Page da página em questão e colocar o conteúdo da página dentro da tag Content. Para simplificar, no exemplo apenas excluímos a página. Vamos agora adicionar uma nova com referência à Master Page. 8. Clique com o botão direito sobre o nome do projeto e selecione Add New Item. 9. Em Templates, selecione Web Form. O nome do arquivo deve ser Default.aspx e devem estar marcadas as opções Place code in separate file e Select master page, como mostra a Figura 9.7:
Aprofundando no uso do controle UpdatePanel 137
capítulo
9
Figura 9.7.
A opção Select master page faz com que uma nova caixa de diálogo seja exibida após o clique no botão Add, permitindo a escolha de uma Master Page. 10. Clique em Add. 11. Na janela Select a Master page, selecione MasterPage.master e clique em OK, como mostra a Figura 9.8:
Figura 9.8.
Você pode ter mais do que uma Master Page em sua aplicação. A janela Select a Master Page permite que você escolha qual Master Page será associada à página 138 Universidade AJAX
que você está criando. Como no nosso exemplo o objetivo é mostrar como utilizar o UpdatePanel em aplicações com Master Page, apenas a criação de uma será o suficiente. A página Default.aspx deve estar semelhante à Figura 9.9 a seguir:
Figura 9.9.
O conteúdo acinzentado deixa claro que o mesmo é proveniente da Master Page. O conteúdo desta página deve ser adicionado dentro do Content que em tempo de execução substitui o ContentPlaceHolder da Master Page. 12. Volte para a Master Page e arraste um controle ScriptManager na página utilizando a guia AJAX Extensions na Toolbox, como mostra a Figura 9.10:
capítulo
9
Figura 9.10. Aprofundando no uso do controle UpdatePanel 139
Você pode adicionar o controle ScriptManager diretamente na Master Page ou dentro do Content apenas na página que for utilizar AJAX. Durante o exemplo, vamos trabalhar das duas formas. Quando você adiciona o ScriptManager na Master Page, todas as páginas que o tiverem referenciado poderão utilizar o AJAX ASP.NET sem que você precise arrastar o controle novamente dentro delas. Ou seja, o controle estará disponível em todas as páginas referenciadas. Neste caso, se você desejar que alguma das páginas “filhas” não possa usar, o controle precisará fazer isso programaticamente. Caso você adicione o controle ScriptManager apenas na página, dentro do Content, nenhuma outra página poderá utilizar o AJAX ASP.NET; a menos, é claro, que você também adicione um controle ScriptManager dentro da página em questão. 13. Na página Default.aspx, adicione um UpdatePanel e dentro dele adicione os seguintes controles: 2 TextBox; 1 Label; 1 Button. 14. Altere a propriedade Text do Button1 para Resultado. 15. Organize os controles, como mostra a Figura 9.11 a seguir:
Figura 9.11. 140 Universidade AJAX
16. Dê um clique duplo sobre o Button1 e digite o seguinte código dentro do seu procedimento de evento: int a = Int32.Parse(TextBox1.Text); int b = Int32.Parse(TextBox2.Text); int res = a / b; Label1.Text = res.ToString();
Em VB.NET: Dim a As Integer = TextBox1.Text Dim b As Integer = TextBox2.Text Dim res As Integer = a / b Label1.Text = res.ToString()
Seu painel de código deve estar assim:
capítulo
9
Figura 9.12.
17. Execute sua aplicação e teste. O resultado deve ser obtido de maneira assíncrona, como se o controle ScriptManager estivesse diretamente na página Default. aspx. Aprofundando no uso do controle UpdatePanel 141
Veja na Figura 9.13 o resultado da aplicação:
Figura 9.13.
Se você desejar desabilitar a atualização assíncrona apenas em uma página, será necessário usar o evento Page_Init da página em questão para iniciar uma instância do ScriptManager e mudar sua propriedade EnablePartialRendering para false. Para isso: 18. Adicione o seguinte código dentro da classe da página Default.aspx: protected void Page _ Init(object sender, EventArgs e) { ScriptManager sm = ScriptManager.GetCurrent(Page); sm.EnablePartialRendering = false; }
Em VB.NET: Protected Sub Page _ Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init Dim sm As ScriptManager = ScriptManager.GetCurrent(Page) sm.EnablePartialRendering = False End Sub
Seu painel de código deve estar como na Figura 9.14:
142 Universidade AJAX
Figura 9.14.
19. Execute e teste sua aplicação. Agora a atualização não deve ser assíncrona e a página deve ser atualizada completamente a cada clique no botão. 20. Remova o procedimento Page_Init ou comente o mesmo para que possamos utilizar a atualização assíncrona novamente na página Default.aspx. 21. Remova o controle ScriptManager da Master Page e adicione o mesmo na página Default.aspx, como mostra a Figura 9.15 a seguir: capítulo
9
Figura 9.15. Aprofundando no uso do controle UpdatePanel 143
22. Execute e teste sua aplicação. Ela deve funcionar normalmente.
Figura 9.16.
Vamos agora compreender um pouco melhor como customizar erros em nossas aplicações AJAX ASP.NET. 23. Para gerar erro em nossa aplicação, basta solicitar uma divisão por zero, como mostra a Figura 9.17:
Figura 9.17.
Uma exceção (erro) é gerada, como mostra a seguinte mensagem (Figura 9.18):
144 Universidade AJAX
Figura 9.18.
24. Agora, execute a aplicação sem o Debug para que o mesmo não intercepte e faça a manipulação do erro. Para isto, você pode clicar em Ctrl + F5 ou, no menu Debug, selecionar Start Without Debugging. 25. Faça novamente uma divisão por zero. O AJAX ASP.NET intercepta e trata o erro, mas a mensagem (Figura 9.19) é genérica e pode não ser agradável ao usuário final do seu projeto.
Figura 9.19.
Vamos agora personalizar essa mensagem. capítulo
26. Altere o código do procedimento de evento Button1_Click para o seguinte: try {
int a = Int32.Parse(TextBox1.Text); int b = Int32.Parse(TextBox2.Text); int res = a / b; Label1.Text = res.ToString();
} catch (DivideByZeroException) { throw new Exception(“Você não pode efetuar uma divisão de “ + TextBox1.Text + “ por “ + TextBox2.Text); }
Aprofundando no uso do controle UpdatePanel 145
9
Em VB.NET: Try Dim a As Integer = TextBox1.Text Dim b As Integer = TextBox2.Text Dim res As Integer = a / b Label1.Text = res.ToString() Catch ex As Exception Throw New Exception(“Você não pode efetuar uma divisão de “ & TextBox1.Text & “ por “ & TextBox2.Text) End Try
Seu painel de código deve estar como na Figura 9.20:
Figura 9.20.
Apenas adicionamos o bloco de tratamento de erros Try...Catch...Finally com o objetivo de verificar qual erro está ocorrendo e emitir assim, a mensagem de erro adequada. Você pode ter vários catch (como você já deve fazer em suas aplicações ASP.NET) em seus blocos de tratamento de erros verificando as possibilidades de erros e tratando-os de forma adequada. 27. Agora, novamente execute a aplicação sem o Debug para que o mesmo não intercepte e faça a manipulação do erro. Para isto, você pode teclar Ctrl + F5 ou no menu Debug selecionar Start Without Debugging.
146 Universidade AJAX
28. Tente novamente fazer uma divisão por zero. A seguinte mensagem personalizada deve ser exibida:
Figura 9.21.
29. Clique em OK e pare a execução do projeto. Agora você já sabe como criar mensagens de erros personalizadas para suas aplicações. Você pode usar todo o poder do bloco de tratamento de erros Try...Cath... Finally como usa atualmente em suas aplicações ASP.NET. Para finalizar, neste Capítulo vamos estudar o uso de Web User Controls em nossas aplicações AJAX ASP.NET. 30. Clique com o botão direito sobre o nome do projeto e selecione Add New Item. 31. Agora, em Templates, selecione Web User Control. Mude o nome do controle para calendario.ascx. Certifique-se que esteja marcada a opção Place code in separate file e clique em Add. capítulo
9
Figura 9.22. Aprofundando no uso do controle UpdatePanel 147
32. Na Toolbox, localize o controle calendar e adicione o mesmo dentro do Web User Control calendario.aspx, como mostra a Figura 9.23:
Figura 9.23.
33. Adicione um UpdatePanel na página Default.aspx e arraste o Web User Control calendario.aspx para dentro dele, como mostra a Figura 9.24:
Figura 9.24.
148 Universidade AJAX
34. Execute sua aplicação.
Figura 9.25.
Ao clicar no calendário, os dias são alterados assincronamente sem que a página seja completamente atualizada. Para utilizar um Web User Control com o AJAX ASP.NET em sua aplicação, você pode adicionar o mesmo dentro de um UpdatePanel, como acabamos de fazer, ou já adicionar o UpdatePanel dentro do controle. Vamos criar um novo Web User Control para mostrarmos como funciona a segunda opção. 35. Adicione um segundo Web User Control ao projeto chamado ExibirData.ascx, como mostra a Figura 9.26:
Figura 9.26. Aprofundando no uso do controle UpdatePanel 149
capítulo
9
36. Dentro deste Web User Control, adicione um UpdatePanel com um Label dentro do mesmo, como mostra a Figura 9.27:
Figura 9.27.
37. No procedimento de evento Page_Load do Web User Control ExibirData. ascx adicione o seguinte código: Label1.Text = DateTime.Now.ToLongTimeString();
Em VB.NET: Label1.Text = DateTime.Now.ToLongTimeString()
Veja na Figura 9.28 como deve ficar o código:
150 Universidade AJAX
Figura 9.28.
38. Adicione o Web User Control que acabamos de criar à página Default.aspx, como mostra a Figura 9.29:
capítulo
9
Figura 9.29.
Aprofundando no uso do controle UpdatePanel 151
39. Execute e teste a aplicação.
Figura 9.30.
A hora é exibida no Label como especificamos no controle. Vamos agora colocar um botão na página Default.aspx que, ao ser clicado, atualiza assincronamente a hora do controle ExibirData.ascx. 39. Adicione um Button na página Default.aspx, como mostra a Figura 9.31:
Figura 9.31.
40. Volte para o Web User Control ExibirData.ascx e adicione o seguinte código dentro da classe: 152 Universidade AJAX
public UpdatePanelUpdateMode UpdateMode { get { return this.UpdatePanel1.UpdateMode; } set { this.UpdatePanel1.UpdateMode = value; } } public void Update() { this.UpdatePanel1.Update(); }
Em VB.NET: Public Property UpdateMode() As UpdatePanelUpdateMode Get Return Me.UpdatePanel1.UpdateMode End Get Set(ByVal value As UpdatePanelUpdateMode) Me.UpdatePanel1.UpdateMode = value End Set End Property Public Sub Update() Me.UpdatePanel1.Update() End Sub
O painel de código do Web User Control deve ficar assim (Figura 9.32):
capítulo
9
Figura 9.32.
Aprofundando no uso do controle UpdatePanel 153
O código anterior torna acessível publicamente por meio do modificador public a propriedade UpdateMode do controle UpdatePanel1 que está no Web User Control e o método Update do mesmo controle. 41. Novamente na página default.aspx, selecione o Web User Control ExibirData. ascx e, na janela Properties, localize a propriedade UpdateMode. 42. Mude a propriedade UpdateMode para Conditional, como mostra a Figura 9.33:
Figura 9.33.
Esta propriedade só está disponível aqui porque deixamo-la pública no Web User Control. 43. Dê um clique duplo sobre o Button2 e adicione o seguinte código no procedimento de evento Button2_click: this.ExibirData1.Update();
Em VB.NET: me.ExibirData1.Update()
Veja na Figura 9.34 como deve ficar o código:
154 Universidade AJAX
Figura 9.34.
Este método também só está disponível porque o tornamos público no Web User Control. 44. Execute e teste sua aplicação. A cada clique no botão, o controle ExibirData. ascx é atualizado, mas a página é completamente atualizada. Isso acontece porque o controle Button2 é um Server Control e força uma atualização síncrona através de Post. Para resolver isto, basta adicionar este Button dentro de um UpdatePanel que esteja na página ou arrastar mais um UpdatePanel para a mesma e o colocar dentro dela. 45. Adicione um UpdatePanel dentro da página Default.aspx e arraste o Button2 para dentro do mesmo, como mostra a Figura 9.35:
Aprofundando no uso do controle UpdatePanel 155
capítulo
9
Figura 9.35.
46. Execute e teste sua aplicação. Agora, temos uma atualização AJAX, ou seja, assíncrona sempre que o button2 é clicado, fazendo uma atualização em um Web User Control.
156 Universidade AJAX
Capítulo 10 Aprofundando no uso de Web Services e no desenvolvimento voltado para o navegador (Cliente-Centric)
Este capítulo é muito importante para quem deseja criar uma aplicação voltada para o navegador (Client-Centric). Nele, você aprenderá: • recuperar e enviar dados em forma de tipos complexos, como objetos, por exemplo, através de Web Services; • usar um arquivo separado de código Javascript, centralizando o código no mesmo, melhorando assim a clareza e facilitando a manutenção; • conhecer e usar o controle ScriptManagerProxy; • usar métodos da classe da própria página para comunicação em XML como em um Web Service; • conhecer ainda mais profundamente sobre a manipulação de erros em chamadas a Web Services. Vamos compreender os conceitos propostos na prática como de costume. Para isso: 1. Crie uma nova aplicação usando o Template ASP.NET AJAX - Enabled Web Site chamada WebServiceAvancado, como mostra a Figura 10.1 a seguir. Neste exemplo, usarei a linguagem C#.
Figura 10.1.
Primeiramente, vamos criar uma Master Page visando futuramente apresentar o controle ScriptManagerProxy.
158 Universidade AJAX
2. Na janela Solution Explorer, clique com o botão direito sobre o nome do projeto e selecione Add New Item. 3. Em Templates, selecione Master Page, certifique-se que a opção Place code in separate file, na parte inferior esteja selecionada, como mostra a Figura 10.2:
Figura 10.2.
4. Clique em Add. 5. Arraste um controle ScriptManager na página Master Page utilizando a guia AJAX Extensions na Toolbox. OBSERVAÇÃO
capítulo
Quando você adiciona o ScriptManager na Master Page, todas as páginas que a tiverem referenciado poderão utilizar o AJAX ASP.NET sem que você precise arrastar o controle novamente dentro delas. Ou seja, o controle estará disponível para todas as páginas referenciadas. Quando você adiciona o controle ScriptManager apenas na página dentro do Content, nenhuma outra página poderá utilizar o AJAX ASP.NET; a menos, é claro, que você também adicione um controle ScriptManager dentro da página em questão.
Aprofundando no uso de Web Services ... 159
10
6. No código HTML da Master Page, digite o seguinte código logo a seguir da tag de fechamento do controle ScriptManager, como ilustra a Figura 10.3:
Master Page
Figura 10.3.
Este texto serve apenas se colocarmos algum conteúdo na Master Page, de forma que, durante o exemplo, fique claro que algum conteúdo está sendo recuperado da página Master Page. 7. Vamos agora excluir a página Default.aspx criada automaticamente pelo Visual Studio porque ela não faz referência à Master Page. Para isto, clique com o botão direito sobre a página Default.aspx na janela Solution Explorer e selecione Delete. Você pode adicionar a referência à página Master Page no código HTML de uma página ASP.NET sem precisar excluir o arquivo caso seja necessário. Para simplificar nosso exemplo, apenas excluímos a página. Vamos agora adicionar uma nova página com referência à Master Page. 160 Universidade AJAX
8. Clique com o botão direito sobre o nome do projeto e selecione Add New Item. 9. Em Templates selecione Web Form, o nome do arquivo deve ser Default.aspx e devem estar marcadas as opções Place code in separate file e Select master page, como mostra a Figura 10.4:
Figura 10.4.
OBSERVAÇÃO Você pode ter mais do que uma Master Page em sua aplicação. A janela Select a Master Page permite que você escolha qual Master Page será associada à página que você está criando. A opção Select master page faz com que uma nova caixa de diálogo seja exibida após o clique no botão Add, permitindo a escolha de uma Master Page. 10. Clique em Add. 11. Na janela Select a Master page selecione MasterPage.master e clique em OK como mostra a Figura 10.5:
Aprofundando no uso de Web Services ... 161
capítulo
10
Figura 10.5.
A nova página Default.aspx é criada. O próximo passo é adicionar um Web Service à nossa aplicação. 12. Na janela Solution Explorer clique com o botão direito sobre o nome do projeto e selecione Add New Item. 13. Em Templates, selecione Web Service. Certifique-se que a opção Place code in separate file esteja selecionada, como mostra a Figura 10.6:
Figura 10.6.
162 Universidade AJAX
14. Clique em Add. Para que você possa compreender como transmitir e usar um tipo complexo em suas aplicações, vamos criar uma classe simples chamada Produto, antes de programarmos o código em nosso Web Service. No nosso exemplo vamos transmitir um objeto produto por meio do nosso Web Service. Para isso: 15. Novamente, clique com o botão direito sobre o nome do projeto e selecione Add New Item. 16. Em Templates, selecione Class e nomeie a nova classe como Produto.cs, como mostra a Figura 10.7: Se a linguagem utilizada for VB.NET, o nome da classe será Produto.vb.
Figura 10.7. capítulo
10
17. Clique em Add. 18. Você então é questionado se deseja adicionar o arquivo da classe em uma pasta especialmente reservada a ele chamada App_Code. Isto é uma boa prática, clique em Sim.
Figura 10.8.
Aprofundando no uso de Web Services ... 163
19. Digite o seguinte código dentro da classe Produto: private String _ nome; private String _ descricao; private int _ quantidade; public String Nome { get { return _ nome; } set { _ nome = value; } } public String Descricao { get { return _ descricao; } set { _ descricao = value; } } public int Quantidade { get { return _ quantidade; } set { _ quantidade = value; } }
Em VB.NET: Private _ nome As String Private _ descricao As String Private _ quantidade As Integer Public Property Nome() As String Get Return _ nome End Get Set(ByVal value As String) _ nome = value End Set End Property Public Property Descricao() As String Get Return _ descricao End Get Set(ByVal value As String) _ descricao = value End Set End Property Public Property Quantidade() As Integer Get Return _ quantidade 164 Universidade AJAX
End Get Set(ByVal value As Integer) _ quantidade = value End Set End Property
Seu painel de código deve estar semelhante ao da Figura 10.9:
Figura 10.9.
Vamos agora implementar o código do Web Service. Para permitir que o Web Service seja acessado via Script você precisa adicionar o atributo ScriptServiceAttribute à classe do mesmo. Este atributo está no namespace System.Web.Script.Services. 20. Importe o namespace System.Web.Script.Services usando o seguinte código: using System.Web.Script.Services;
Em VB.NET: Imports System.Web.Script.Services
Aprofundando no uso de Web Services ... 165
capítulo
10
21. Adicione a referência ao atributo logo acima da declaração da classe com o código: [ScriptService]
Em VB.NET:
_
Se você desejar, poderá fazer a referência completa explicitamente, usando o seguinte código: [System.Web.Script.Services.ScriptService]
Em VB.NET: _
Dessa forma, você não precisa fazer referência ao namespace no topo da classe. 22. Adicione o método RecuperaProduto dentro da classe do Web Service, usando o seguinte código: [WebMethod] public Produto RecuperaProduto() { Produto p = new Produto(); p.Nome = “Produto1”; p.Descricao = “Descricao”; p.Quantidade = 30; return p; }
Em VB.NET: _ Public Function RecuperaProduto() As Produto Dim p As New Produto p.Nome = “Produto1” p.Descricao = “Descricao” p.Quantidade = 30 Return p End Function 166 Universidade AJAX
Seu painel de código deve estar semelhante à Figura 10.10:
Figura 10.10.
Este é um método simples que retorna um objeto do tipo Produto ao molde da classe que criamos. No código, apenas criamos um objeto Produto chamado p, com a linha a seguir: Produto p = new Produto();
Em VB.NET:
capítulo
10
Dim p As New Produto
Depois, atribuímos um valor a cada uma de suas propriedades: p.Nome = “Produto1”; p.Descricao = “Descricao”; p.Quantidade = 30;
Em VB.NET: p.Nome = “Produto1” Aprofundando no uso de Web Services ... 167
p.Descricao = “Descricao” p.Quantidade = 30
E finalmente, retornamos o objeto utilizando o código a seguir: return p;
Em VB.NET: Return p
Para que você compreenda como centralizar seu código Javascript em um arquivo separado vamos criar agora um arquivo com a extensão .js. 23. Novamente, clique com o botão direito sobre o nome do projeto e selecione Add New Item. 24. Em Templates, selecione JScript File e nomeie o arquivo como JScript.js como mostra a Figura 10.11:
Figura 10.11.
25. Clique em Add. 26. Dentro do arquivo JScript.js, digite o seguinte código Javascript: 168 Universidade AJAX
function Button1 _ onclick() { WebService.RecuperaProduto(QuandoCompleta); } function QuandoCompleta (args) { var nome = args.Nome; var descricao = args.Descricao; var quantidade = args.Quantidade; document.getElementById(‘ctl00 _ ContentPlaceHolder1 _ TextBox1’). innerText = nome; document.getElementById(‘ctl00 _ ContentPlaceHolder1 _ TextBox2’). innerText = descricao; document.getElementById(‘ctl00 _ ContentPlaceHolder1 _ TextBox3’). innerText = quantidade; }
O arquivo JScript.js deve estar semelhante ao que aparece na Figura 10.12:
capítulo
10
Figura 10.12.
A maior parte deste código não é novidade para você, entretanto, caso tenha dúvidas, consulte o Capítulo 8. Apenas fique atento ao parâmetro args que agora é um objeto do tipo Produto que tem as mesmas propriedades que criamos no nosso Web Service. Para recuperá-los, fazemos de forma idêntica a que estamos acostumados em nossas aplicações ASP.NET, mas dessa vez em Javascript. Veja o código: Aprofundando no uso de Web Services ... 169
var nome = args.Nome; var descricao = args.Descricao; var quantidade = args.Quantidade;
27. Na página Default.aspx, adicione os seguintes controles: • 3 TextBox; • 1 Input (Button) – este controle é encontrado na guia HTML da Toolbox. 28. Mude a propriedade Value do Button1 para Atualizar e organize os controles, conforme a Figura 10.13:
Figura 10.13.
Como você viu no Capítulo 8, para utilizarmos um Web Service em nossa página precisamos fazer referência ao mesmo. Isto faz com que o AJAX ASP.NET 2.0 gere o código necessário para que usemos a classe e os métodos do nosso Web Service em nossas aplicações AJAX. Para isso: 29. Na Master Page, clique sobre o controle ScriptManager e, na janela Properties, localize a propriedade Services. 30. Clique sobre as reticências (...) na propriedade Services para exibir a janela ServiceReference Collection Editor e adicione o nome do arquivo do Web Service em Path, como mostra a Figura 10.14: 170 Universidade AJAX
Figura 10.14.
Para utilizarmos um arquivo de script Javascript (arquivo com extensão .js) em nossa página, também precisamos fazer referência ao mesmo utilizando o controle ScriptManager. Para isto: 31. Clique sobre o controle ScriptManager para selecioná-lo e na janela Properties localize a propriedade Scripts, como mostra a Figura 10.15:
capítulo
10
Figura 10.15.
32. Clique sobre as reticências (...) na propriedade Scripts para exibir a janela ScriptReference e adicione o nome do arquivo de script, como mostra a Figura 10.16:
Aprofundando no uso de Web Services ... 171
Figura 10.16.
Se você verificar o código HTML da sua Master Page o controle ScriptManager agora tem uma nova tag chamada Scripts com referência para o arquivo JScript.js como mostra o código a seguir:
33. Antes de executar a aplicação, você precisa alterar o código HTML do Button1 adicionando o evento onclick com referência à função Javascript Button1_onclick que está no arquivo de script. Segue como deve ficar o código HTML do Button1:
34. Execute sua aplicação. Clique no botão Atualizar. O nome do produto, descrição e quantidade devem preencher as caixas de texto, como mostra a Figura 10.17:
172 Universidade AJAX
Figura 10.17.
Você acaba de utilizar um tipo complexo em Javascript de forma simples, utilizando o Web Service. Vamos agora conhecer o controle ScriptManagerProxy. 35. Volte para a página Master Page e apague as referências tanto para o Web Service quanto para o arquivo de script do controle ScriptManager. O código HTML do seu controle ScritpManager deve ficar assim:
36. Na página Default.aspx, adicione um controle ScriptManagerProxy utilizando a guia AJAX Extensions na Toolbox, como mostra a Figura 10.18:
capítulo
10
Figura 10.18. Aprofundando no uso de Web Services ... 173
37. Clique no controle ScriptManagerProxy1 para selecioná-lo e na janela Properties localize as propriedade Scripts e Services, como mostra a Figura 10.19:
Figura 10.19.
38. Adicione as referências ao Web Service e ao arquivo JScript.js ao ScriptManagerProxy, como você faz com o controle ScriptManager. O código HTML do ScriptManagerProxy deve ficar assim:
Como mostra a Figura 10.20:
Figura 10.20. 174 Universidade AJAX
39. Execute e teste sua aplicação. Ela funciona normalmente. O controle ScriptManagerProxy deve ser usado em conjunto com Master Page quando você precisa fazer uso de um Web Service e/ou um arquivo de script apenas para a página em questão. Se você deixar a referência ao Web Service no controle ScriptManager na Master Page, todas as páginas que fizerem referência a ela poderão usar o Web Service em questão. Mas quando você quer que apenas uma das páginas consiga acessar um determinado Web Service você adiciona um ScriptManagerProxy dentro da própria página que faz a referência. O controle ScriptManagerProxy não substitui o controle ScriptManager. Você ainda precisa ter o ScriptManager na página por meio da Master Page, como usamos no nosso exemplo. Também pode ser útil em suas aplicações o uso do controle ScriptManagerProxy associado a Web User Control. Você pode usar um método da própria página ASP.NET como um WebMethod. Neste caso, você não precisa criar um arquivo separado para o Web Service com extesão .asmx. Para isso: 40. Na página Default.aspx, importe o namespace System.Web.Services usando o seguinte código: using System.Web.Services;
Em VB.NET: Imports System.Web.Services
Isso permite que você adicione o atributo WebMethod em um método da própria página ASP.NET. 41. Dentro do procedimento de evento Page_Load da página Default.aspx, digite o seguinte código: H t t p C o n t e x t.C u r r e n t.S e s s i o n.A d d ( “ a g o r a ”, ToLongTimeString());
D a t e T i m e.N o w.
Em VB.NET: HttpContext.Current.Session.Add(“agora”, ToLongTimeString())
DateTi me.Now.
Aprofundando no uso de Web Services ... 175
capítulo
10
Esse código apenas adiciona na seção a hora em que a página foi executada. Este valor será recuperado em AJAX usando um método da própria página, que criaremos a seguir: 42. Adicione o método RecuperarHoraLoad dentro da classe da página Default. aspx, usando o seguinte código: [WebMethod] public static String RecuperarHoraLoad() { return (string)HttpContext.Current.Session[“agora”]; }
Em VB.NET: _ Public Shared Function RecuperarHoraLoad() As String Return HttpContext.Current.Session(“agora”).ToString End Function
O atributo WebMethod torna este método acessível a clientes remotos de forma semelhante ao Web Service. Em C# o método precisa ter o modificador static e em VB.NET o modificador Shared como mostra a Figura 10.21 e o código a seguir:
Figura 10.21. 176 Universidade AJAX
43. Adicione as seguintes funções Javascript no arquivo JScript.js: function RecuperarValorSessao() { PageMethods.RecuperarHoraLoad(QuandoCompleta2,QuantoErro,QuandoTi meOut); } function QuandoCompleta2(args) { alert(args) } function QuantoErro(args) { alert(“Houve um erro na chamada.”); } function QuandoTimeOut(args) { alert(“A chamada ao serviço excedeu o tempo limite.”); }
A Figura 10.22 ilustra o arquivo JScript.js após a inclusão das novas funções:
capítulo
10
Figura 10.22.
Aprofundando no uso de Web Services ... 177
Quando vamos chamar um método da própria página, usamos o PageMethod seguido do nome do método e seus respectivos parâmetros, como mostra o código em Javascript a seguir: PageMethods.RecuperarHoraLoad(QuandoCompleta2,QuantoErro,QuandoTi meOut);
44. Na Master Page selecione o controle ScriptManager e na janela Properties localize a propriedade EnablePageMethods. Marque esta propriedade como true como mostra a Figura 10.23:
Figura 10.23.
Essa propriedade torna possível o uso de WebMethods da própria página em nossas aplicações. 45. Adicione mais um controle HTML do tipo Input (Button) na página Default. aspx, como mostra a Figura 10.24:
Figura 10.24. 178 Universidade AJAX
Esse botão será responsável por chamar a função que recupera a hora do início da sessão utilizando o método RecuperarHoraLoad da própria página Default.aspx, que está com o atributo WebMethod. Para isto: 46. Altere o código HTML do Button2 adicionando o evento onclick com referência à função Javascript RecuperarValorSessao que está no arquivo de script. Segue como deve ficar o código HTML do Button2:
47. Execute sua aplicação. Clique no Button2. A hora de início da seção é exibida, como mostra a Figura 10.25:
capítulo
10
Figura 10.25.
Agora para finalizar, vamos apresentar alguns métodos que ajudam na manipulação de erros em chamadas a Web Service. 48. No arquivo JScript.js altere o conteúdo da função QuantoErro para o seguinte: var stackTrace = args.get _ stackTrace(); var message = args.get _ message(); var statusCode = args.get _ statusCode(); Aprofundando no uso de Web Services ... 179
var exceptionType = args.get _ exceptionType(); var timedout = args.get _ timedOut(); alert(stackTrace); alert(message); alert(statusCode); alert(exceptionType); alert(timedout);
Veja, na Figura 10.26, como deve ficar a função após a alteração:
Figura 10.26.
49. No painel de código da página Default.aspx vamos criar um erro usando o seguinte código. throw new Exception(“Houve um erro”); Em VB.NET: Throw New Exception(“Houve um erro”)
180 Universidade AJAX
Veja, na Figura 10.27, em que local deve ser adicionado o código:
Figura 10.27.
50. Execute sua aplicação. As seguintes mensagens de erro são exibidas como solicitamos no código Javascript da função que trata o erro: Para o método get _ stackTrace() (Figura 10.28):
capítulo
10
Figura 10.28.
Para o método get _ message() (Figura 10.29):
Aprofundando no uso de Web Services ... 181
Figura 10.29.
Para o método get _ statusCode() (Figura 10.30):
Figura 10.30.
Para o método get _ exceptionType() (Figura 10.31):
Figura 10.31.
Para o método get _ timedOut() (Figura 10.32):
Figura 10.32.
182 Universidade AJAX
Capítulo 11 AJAX Control Toolkit
O AJAX Control Toolkit é um conjunto de componentes prontos para você utilizar em suas aplicações AJAX ASP.NET . Além disso, ele disponibiliza um framework que torna fácil para você desenvolver novos componentes de acordo com a sua necessidade. O código fonte do AJAX Control Toolkit é aberto e pode ser encontrado no portal www.codeplex.com. Ele faz parte de uma iniciativa da Microsoft em open source (código fonte aberto). O AJAX Control Toolkit é construído usando como base o AJAX ASP.NET, que você conheceu a fundo nos Capítulos anteriores. No AJAX Control Toolkit você conta hoje (até o fechamento deste livro) com 34 controles, sendo que o objetivo é ultrapassar os 50. Usando o AJAX Control Toolkit, você melhora a interface e apresentação da suas aplicações sem precisar de um conhecimento profundo em Javascript.
Instalando o AJAX Control Toolkit 1. Acesse o site http://ajax.asp.net (Figura 11.1).
Figura 11.1.
2. Localize o botão Download the Control Toolkit, como mostra a Figura 11.2:
184 Universidade AJAX
Figura 11.2.
Você deve ser direcionado à página do AJAX Control Toolkit no Portal CodePlex. 3. Localize e clique no link para download o arquivo AjaxControlToolkit.zip, como mostra a Figura 11.3:
capítulo
11
Figura 11.3.
AJAX Control Toolkit 185
Você pode optar por fazer o download do AJAX Control Toolkit sem o códigofonte, como foi mostrado na Figura 11.3. 4. Serão exibidos os termos de licença e uso, como mostra a Figura 11.4 a seguir:
Figura 11.4.
5. Clique em I Agree. Será exibida a janela de download (Figura 11.5):
Figura 11.5.
6. Clique em Salvar e escolha o local no seu computador onde o arquivo deve ser salvo.
186 Universidade AJAX
Como o arquivo está compactado no formato .zip, você vai precisar descompactá-lo. Você pode fazer isso no local de sua preferência; no meu caso, prefiro colocar os arquivos descompactados do AJAX Control Toolkit na pasta C:\Arquivos de programas\Microsoft ASP.NET juntamente com os arquivos do AJAX ASP.NET, como mostra a Figura 11.6:
Figura 11.6.
Se você entrar na pasta ASP.NET 2.0 AJAX Extensions, vai localizar os arquivos do AJAX ASP.NET, incluindo suas dlls, como mostra a Figura 11.7 a seguir:
capítulo
11
Figura 11.7.
Para descompactar o arquivo, vou usar o Assistente para extração do próprio Windows XP SP2. No entanto, você pode usar o WinZIP ou WinRAR, como preferir.
AJAX Control Toolkit 187
7. Para usar o Assistente para extração, você clica com o botão direito no arquivo AjaxControlToolkit.zip em seu computador e seleciona Extrair tudo. Será aberta a seguinte janela (Figura 11.8):
Figura 11.8.
8. Clique em Avançar. 9. Como eu disse anteriormente, você pode descompactar os arquivos onde preferir; a minha preferência pessoal é no caminho: C:\Arquivos de programas\Microsoft ASP.NET\Ajax Control Toolkit, como mostra a Figura 11.9:
Figura 11.9.
10. Clique em Avançar. Os arquivos vão sendo descompactados, como mostra a Figura 11.10 a seguir: 188 Universidade AJAX
Figura 11.10.
11. Ao final, clique em Concluir para exibir os arquivos (Figura 11.11):
Figura 11.11.
A Figura 11.12 mostra os arquivos que foram descompactados:
capítulo
11
Figura 11.12. AJAX Control Toolkit 189
A pasta AjaxControlExtender contém um instalador que será usado logo a seguir para instalar templates na sua máquina que facilitam a criação de aplicações usando o AJAX Control Toolkit no Visual Studio .NET 2005. A pasta AjaxControlToolkit contém o código-fonte dos controles. A pasta SampleWebSite tem um site que demonstra como você pode usar os controles. Você pode acessá-lo na url http://ajax.asp.net/ajaxtoolkit/. Lá você encontrará muitas informações inportantes sobre como usar os controles do AJAX Control Toolkit, além de ser uma referência importante. A pasta TemplateVSI contém os arquivos do projeto, que por sua vez gerará a instalação do software que está na pasta AjaxControlExtender. Na pasta ToolkitTests, você encontrará testes automatizados para cada um dos controles. Estes testes são úteis principalmente se você quiser colaborar com a comunidade no CodePlex ou fizer alterações nos controles. Você pode abrir a solução clicando em AjaxControlToolkit.sln. No entanto, a solução não pode ser aberta no Visual Studio Express 2005 Web Developer. 12. Entre na pasta AjaxControlExtender e execute o arquivo AjaxControlExtender.vsi (Figura 11.13).
Figura 11.13.
É iniciado um instalador, como mostra a Figura 11.14:
190 Universidade AJAX
Figura 11.14.
13. Clique em Next. Você vai receber a seguinte mensagem (Figura 11.15):
Figura 11.15.
14. Clique em Yes.
capítulo
11
15. Então, clique em Finish (Figura 11.16).
AJAX Control Toolkit 191
Figura 11.16.
A instalação vai ser executada. 16. Clique em Close (Figura 11.17).
Figura 11.17.
A instalação está concluída. 192 Universidade AJAX
Conhecendo o AJAX Control Toolkit 1. Crie uma nova aplicação, mas, desta vez, ao invés de usar o Template ASP. NET AJAX - Enabled Web Site, selecione o template AJAX Control Toolkit Web Site, como mostra a Figura 11.18:
Figura 11.18.
Este template foi adicionado ao Visual Studio na instalação do AjaxControlExtender.vsi. O nome usado para a nova aplicação foi IntroAJAXControlTookit. Neste exemplo, usarei a linguagem VB.NET. Após clicar em OK, a aplicação é criada, como mostra a Figura 11.19:
capítulo
11
Figura 11.19. AJAX Control Toolkit 193
2. Abra a página Default.aspx, como mostra a Figura 11.20:
Figura 11.20.
3. Na parte final da Toolbar, clique com o botão direito sobre a mesma selecionando a opção Add Tab, como mostra a Figura 11.21:
Figura 11.21.
194 Universidade AJAX
4. Dê o nome de AJAX Control Toolkit para a nova guia, como mostra a Figura 11.22:
Figura 11.22.
5. Clique com o botão direito na guia que acabamos de criar e selecione a opção Choose Items (Figura 11.23).
capítulo
11
Figura 11.23.
AJAX Control Toolkit 195
6. Na janela Choose Toolbox Items, clique em Browse (Figura 11.24).
Figura 11.24.
7. Localize o arquivo AjaxControlToolkit.dll. Ele está na pasta C:\Arquivos de programas\Microsoft ASP.NET\Ajax Control Toolkit\SampleWebSite\Bin (Figura 11.25).
Figura 11.25.
8. Clique em Open. 9. Clique em OK na janela Choose Toolbox Items (Figura 11.26).
196 Universidade AJAX
Figura 11.26.
Nós precisamos adicionar os controles manualmente porque o AJAX Control Toolkit vem em um arquivo compactado sem instalador. A instalação que executamos usando o arquivo AjaxControlExtender.vsi apenas criou o template para as aplicações. Já o processo de instalação que fizemos no ASP.NET adiciona a guia AJAX Extensions automaticamente, diferente do que precisamos fazer aqui. Todos os controles do AJAX Control Toolkit são adicionados à guia. A Figura 11.27 a seguir mostra alguns deles:
capítulo
11
Figura 11.27. AJAX Control Toolkit 197
Muitos desses controles, como você pôde perceber, possuem o sufixo Extender (palavra Extender em seus nomes). Esses controles adicionam funcionalidades aos controles já existentes do ASP.NET. Um exemplo é o ConfirmButtonExtender, que usaremos neste exemplo. 10. Arraste um Label e um Button à página Default.aspx, como mostra a Figura 11.28:
Figura 11.28.
Para usar o AJAX Control Toolkit você precisa ter o controle ScriptManager na página porque utiliza a base do AJAX ASP.NET para seus controles, como mostra a Figura anterior (Figura 11.28). 11. Dê um clique duplo sobre o Button1 e digite o seguinte código no procedimento de evento Button1_Click do mesmo: Label1.Text = DateTime.Now.ToLongTimeString()
Em C#: 198 Universidade AJAX
Label1.Text = DateTime.Now.ToLongTimeString();
Seu painel de código deve ficar assim (Figura 11.29):
Figura 11.29.
12. Localize o controle ConfirmButtonExtender na guia AJAX Control Toolkit da Toolbox e adicione-o na página Default.aspx. Para utilizar o AJAX Control Toolkit você não precisa necessariamente criar sua aplicação usando o template AJAX Control Toolkit Web Site. Ao arrastar um controle para a página, as dlls necessárias são adicionadas à pasta BIN do seu projeto automaticamente. 13. A seguinte mensagem é exibida porque você criou o projeto usando o template AJAX Control Toolkit Web Site. Quando você usa o template, a dll já é adicionada ao projeto na criação do mesmo. Selecione Apply to all items e clique em Yes (Figura 11.30).
Figura 11.30. AJAX Control Toolkit 199
capítulo
11
O controle é adicionado ao formulário, como mostra a Figura 11.31 a seguir:
Figura 11.31.
14. Selecione o controle ConfirmButtonExtender1 e, na janela Properties, localize a propriedade TargetControlId. Selecione Button1, como mostra a Figura 11.32:
Figura 11.32.
Somente os controles que podem ser extendidos usando o ConfirmButtonExtender (no caso, o Button) aparecem na lista de seleção da propriedade TargetControlID. Se tivessem mais botões em nossa página, eles seriam listados. 200 Universidade AJAX
O que um controle Extender faz é acrescentar funcionalidades a um controle ASP. NET comum. Por isso, precisamos associar um controle a ele, sempre utilizando a propriedade TargetControlID. A maior parte dos controles do AJAX Control Toolkit são Extenders que aumentam as funcionalidades dos controles para o cliente (navegador), assim como estamos fazendo com o Button1 até agora no nosso exemplo. 15. Selecione o Button1 e na janela Properties localize a guia Extenders. As novas propriedades que o controle ConfirmButtonExtender adicionou ao Button1 são exibidas, como mostra a Figura 11.33:
Figura 11.33.
Como você relacionou o Button1 com o ConfirmButtonExtender, ele agora tem novas propriedades. Neste caso, uma destas propriedades é a ConfirmText. 16. Digite “Você tem certeza?” na propriedade ConfirmText do Button1, como mostra a Figura 11.34 a seguir:
capítulo
11
Figura 11.34. AJAX Control Toolkit 201
17. Execute sua aplicação e clique no botão. É exibida uma mensagem de confirmação, como mostra a Figura 11.35:
Figura 11.35.
Se você clicar em Cancelar nada vai acontecer. Mas, ao clicar em OK, a ação definida no evento Click do Button1 é executada, como mostra a Figura 11.36:
Figura 11.36.
18. Pare a execução do programa. Vamos conhecer mais um controle. 202 Universidade AJAX
19. Adicione um controle ASP.NET Panel na página Default.aspx e arraste os controles da página dentro do mesmo, como mostra a Figura 11.37:
Figura 11.37.
20. Arraste para a página o controle AlwaysVisibleControlExtender da guia AJAX Control Toolkit na Toolbox, como na Figura 11.38:
capítulo
11
Figura 11.38.
AJAX Control Toolkit 203
21. Selecione o controle AlwaysVisibleControlExtender e, na janela Properties, selecione Panel1 para a propriedade TargetControlID (Figura 11.39).
Figura 11.39.
22. Agora localize as novas propriedades do Panel1 na guia Extenders, como mostra a Figura 11.40:
Figura 11.40.
23. Selecione Right para a propriedade HorizontalSide. 24. Teste sua aplicação (Figura 11.41).
204 Universidade AJAX
Figura 11.41.
No nosso exemplo não temos conteúdo na página que permita o uso da barra de rolagem, mas você já pode ver o painel posicionado no canto superior direito. Apenas coloquei uma borda no painel para facilitar a visualização. A Figura 11.42 mostra o painel alinhado na parte inferior:
capítulo
11
Figura 11.42.
AJAX Control Toolkit 205
Agora você já conhece o AJAX Control Toolkit e é capaz de utilizá-lo em suas aplicações. A seguir, uma apresentação dos controles. Para visualizar os controles em ação, acesse o site: http://ajax.asp.net/ajaxtoolkit/. • Controle Accordion: este controle permite que você crie múltiplos painéis e exiba um deles de cada vez bastando clicar no título do mesmo (Figura 11.43);
Figura 11.43.
• Controle AlwaysVisibleControlExtender: permite deixar um controle ASP.NET sempre visível na página. Veja, a seguir, as posições disponíveis: • topo esquerdo; • centralizado no topo; • topo direito; • ao meio esquerdo; • ao meio e ao topo; • ao meio direito; • embaixo à esquerda; • embaixo ao centro; • embaixo à direita. No exemplo a seguir (Figura 11.44), a hora está sendo exibida no topo direito da página. Não importa o conteúdo da página ou a rolagem da mesma, a hora vai ficar sempre na mesma posição.
206 Universidade AJAX
Figura 11.44.
• Controle Animation: adiciona efeitos e animações à sua página; • Controle AutoCompleteExtender: através do uso de Web Service, você pode recuperar informações que o ajudem a autocompletar um controle TextBox de acordo com a digitação do usuário (Figura 11.45);
Figura 11.45.
• Controle CalendarExtender: pode ser usado em conjunto com o TextBox para que, quando o usuário clique no mesmo, seja exibido um calendário para facilitar a digitação/entrada de dados no formato de data (Figura 11.46); capítulo
11
Figura 11.46. AJAX Control Toolkit 207
• Controle CascadingDropDown: pode ser referenciado a um controle DropDownList para automaticamente pular os dados de um outro controle DropDownList conforme a escolha do anterior (Figura 11.47);
Figura 11.47.
• Controle CollapsiblePanelExtender: permite que você facilmente adicione seções que podem ser ocultadas/exibidas em sua página. Por exemplo, um painel pode ser exibido ao clicar no sinal (+), ou ocultado ao clicar no sinal (-) (Figura 11.48);
Figura 11.48.
• Controle ConfirmButtonExtender: permite que seja exibida uma caixa de confirmação antes do evento do botão ser executado. Se o usuário clicar em cancelar, o evento não será disparado (Figura 11.49);
Figura 11.49.
• Controle DragPanelExtender: permite que um controle seja “arrastado”, ou seja, movimentado pelo usuário pela página como se movimenta uma janela no Windows (Figura 11.50);
208 Universidade AJAX
Figura 11.50.
• Controle DropDownExtender: pode ser relacionado aos mais populares controles ASP.NET e permite que seja exibido um menu drop-down para selecionar o valor do controle, como mostra a Figura 11.51;
Figura 11.51.
• Controle DropShadowExtender: permite a exibição de uma sombra em um controle Panel. Você pode especificar várias opções para personalizar esta sombra (Figura 11.52);
Figura 11.52.
• Controle DynamicPopulateExtender: modifica o conteúdo de um controle ASP. NET com o resultado de uma chamada a um Web Service; • Controle FilteredTextBoxExtender: ajuda a prevenir a entrada de dados inválidos de usuários em controles TextBox. Por exemplo, usando este controle você pode restringir a digitação em apenas números, apenas letras minúsculas etc.;
AJAX Control Toolkit 209
capítulo
11
• Controle HoverMenuExtender: pode ser relacionado a qualquer controle ASP. NET incluindo o gridView, de forma que seja exibido um painel pop-up de acordo com o conteúdo em que ponteiro do mouse vai passando por cima; • Controle ListSearchExtender: permite que você localize informações em um ListBox ou DropDownList, de acordo com o que vai digitando. Muito útil quando há muitos itens nestes controles; • Controle MaskedEditExtender: formata a entrada de dados em um controle TextBox (Figura 11.53). Este controle foi criado pelo brasileiro Fernando Cerqueira. Parabéns Cerqueira!;
Figura 11.53.
• Controle ModalPopupExtender: exibe uma janela que quando ativa somente seu conteúdo pode ser usado (Figura 11.54);
Figura 11.54.
• Controle MutuallyExclusiveCheckBoxExtender: usado com o controle CheckBox. Neste controle, você pode indicar um segundo CheckBox usando a propriedade KEY do controle MutuallyExclusiveCheckBoxExtender. Os dois controles CheckBox não poderão selecionar a mesma linha de opção. Este controle é útil 210 Universidade AJAX
quando temos dois controles CheckBox em que podem ser selecionadas várias opções em cada um deles, mas não podem ser selecionadas opções iguais entre os controles; • Controle NoBot: previne bot/spam usando CAPTCHA para distinguir computadores de humanos; • Controle NumericDropDownExtender: pode ser relacionado a um TextBox de forma a exibir dois botões, um para cima e outro para baixo, de modo que, ao clicar nos botões, os valores vão sendo modificados. Você pode usar os botões para incrementar e decrementar o valor do TextBox de forma aritmética simples, como +1 ou -1; também pode exibir um a partir de uma lista de valores, como meses ou anos; além disso, pode recuparar um valor a partir de um Web Service (Figura 11.55); Figura 11.55.
• Controle PagingBulletedListExtender: pode ser relacionado a um controle BulletedList, promovendo paginação; • Controle PasswordStrength: avalia o conteúdo de um TextBox determinando o nível de complexidade do dado para ser uma senha (Figura 11.56);
Figura 11.56.
• Controle PopupControlExtender: pode ser relacionado a qualquer controle ASP. NET com o objetivo de exibir uma janela pop-up com informações adicionais que ajudam a preencher o controle ASP.NET (Figura 11.57);
capítulo
11
Figura 11.57.
• Controle Rating: permite que os usuários selecionem um número de estrelas, que possibilitará avaliar determinado conteúdo. Muito útil em tutoriais, blogs e fóruns (Figura 11.58);
AJAX Control Toolkit 211
Figura 11.58.
• Controle ReorderList: permite reordenar uma lista de itens interativamente; • Controle ResizableControlExtender: permite o redimensionamento pelo usuário de um elemento da página; • Controle RoundedCornersExtender: permite arredondar os cantos de um elemento na página. Você pode escolher quais cantos deseja arredondar, angulação e borda; • Controle SliderExtender: exibe uma barra de rolagem que pemite ao usuário escolher um valor dentro de uma faixa definida. Pode ser usado na horizontal e vertical (Figura 11.59);
Figura 11.59.
• Controle SliderShowExtender: disponibiliza botões para navegação em uma galeria de fotos. Você pode configurar o controle para exibir as imagens uma a uma automaticamente por meio dos botões Play e Stop (Figura 11.60);
Figura 11.60. 212 Universidade AJAX
• Controle Tabs: cria uma série de guias que podem ser utilizadas para organizar o conteúdo da página (Figura 11.61);
Figura 11.61.
• Controle TextBoxWatermarkExtender: exibe uma marca d’água dentro do controle para especificar o que deve ser digitado dentro do mesmo, por exemplo (Figura 11.62);
Figura 11.62.
• Controle ToggleButtonExtender: usado com o controle CheckBox, permite exibir imagens customizadas para a propriedade Checked (Figura 11.63);
Figura 11.63.
• Controle UpdatePanelAnimationExtender: usado para animar o controle UpdatePanel quando estiver sendo atualizado e quando é terminada a atualização assíncrona; • Controle ValidatorCalloutExtender: aumenta a funcionalidade dos controles de validação do ASP.NET, permitindo a exibição de uma janela com informações detalhadas sobre o preenchimento do campo, incluindo um ícone (Figura 11.64).
Figura 11.64.
AJAX Control Toolkit 213
capítulo
11
Apêndice A
Javascript Para utilizar o Javascript em uma página HTML, é usada a tag <script> e 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 deles.
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; • Semântico: o arquivo externo separa a camada de comportamento (Javascript) da camada de conteúdo (HTML).
216 Universidade AJAX
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.
A tag A tag nos permite disponibilizar um conteúdo alternativo ao disposto via script. Isso significa que dentro desta tag disponibilizamos conteúdo para o usuário que não tiver suporte ao Javascript em seu navegador. Veja um exemplo:
Apêndice A 217
apêndice
A
<script type=”text/javascript”> alert(“Olá fulano.”); Olá fulano.
No exemplo anterior, será exibida a mensagem “Olá fulano”, através do alert() – uma função do Javascript que exibe uma mensagem através de um popup box – para quem tem suporte ao Javascript. Caso contrário, a mesma mensagem aparecerá para quem não tem suporte ao Javascript, porém, através da tag na forma de texto.
Comentários em Javascript Tudo que estiver englobado pelos comentários é ignorado pelo interpretador do Javascript. Há dois tipos de comentários, são eles: // e /* */. O primeiro é o comentário de somente uma linha, enquanto o segundo suporta várias linhas e é conhecido como comentário de bloco. Observe os exemplos: <script type=”text/javascript”> // Comentário de uma linha. /* Comentário de várias linhas, o interpretador ignora todo esse conteúdo. O que nos permite a criação de notas e lembretes em nossos códigos. */
Ainda sobre comentários em Javascript, observe que os navegadores que não o suportam irão exibi-lo como se fosse parte do conteúdo da página. Para prevenir esta prática, utilizamos o comentário em HTML associado ao código Javascript. <script type=”text/javascript”>
218 Universidade AJAX
As duas barras (//) antes do fechamento do comentário previnem que o interpretador do Javascript as interpretem.
Case Sensitive Javascript é uma linguagem Case Sensitive, ou seja, diferencia minúsculas de maiúsculas. Meu é diferente de meu em Javascript. Então, tenha atenção ao digitar os comandos e usar as variáveis Javascript em suas aplicações.
Ponto-e-vírgula (;) no final das declarações Uma boa prática ao programar utilizando Javascript é sempre usar o ; (ponto-e -vírgula) no final das suas declarações, mas seu uso não é obrigatório. Você precisa utilizar o ponto-e-vírgula se usar algum compressor de Javascript, para reduzir o tamanho do arquivo. Como os compressores distribuem os códigos em uma única linha, sem eles será impossível determinar onde começa e termina uma instrução, ocasionando erro.
Variáveis Vejamos um exemplo de como declarar uma variável: var nomeVariavel = “valorVariavel”; ou nomeVariavel = “valorVariavel”; Você pode criar uma variável com ou sem a declaração var, mas é aconselhável utilizá-la. Quando criamos uma variável dentro de uma função, a tornamos local, ou seja, acessível somente dentro da função em que foi criada. Já as variáveis globais, são declaradas fora das funções e ficam acessíveis a toda e qualquer função na página em que a variável esteja. Exemplo de como atribuir um valor a uma variável: apêndice
A
numeroFuncionario = 23;
Entendemos pelo sinal de igual como recebe. Assim, numeroFuncionario recebe 23. Apêndice A 219
Operadores Operadores são usados para representar expressões de cálculo, comparação, condição e atribuição. Portanto, temos os seguintes tipos de operadores:
Operadores aritméticos Operador
Representação em Javascript Exemplo
Multiplicação Divisão Módulo Adição Subtração Incremento Decremento
* / % + ++ --
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 divisão de a por b. a + b Soma de a e b. a – b Subtração de a com b. a ++ Neste caso, é somado 1 ao valor de a. a -- Neste caso, é subtraído 1 do valor de a.
Tabela Ap. A.1: Operadores aritméticos.
Operadores de relacionais Operador
Representação em Javascript
Maior
Exemplo
>
a > b Se o valor de a for maior que o valor de b, então o resultado desta expressão é verdadeiro, senão é falso.
>=
a >= b Se o valor de a for maior ou igual o valor de b, então o resultado desta expressão é verdadeiro, senão é falso.
<
a < b Se o valor de a for menor que o valor de b, então o resultado desta expressão é verdadeiro, senão é falso.
Menor ou igual
<=
a <= b Se o valor de a for menor ou igual que o valor de b, então o resultado dessa expressão é verdadeiro, senão é falso.
Igual a
==
a == b Se o valor de a for igual ao valor de b, então o resultado dessa expressão é verdadeiro, senão é falso.
===
a === b Se o valor e o tipo de dado de a for igual a b, então o resultado desta expressão é verdadeiro, senão é falso.
Maior ou igual
Menor
Igual a (compara o valor e o tipo) Diferente de
!=
a != b Se o valor de a for diferente do valor de b, então o resultado desta expressão é verdadeiro, senão é falso. Tabela Ap. A.2: Operadores de relacionais.
220 Universidade AJAX
Operadores lógicos Operador Representação Exemplo em Javascript E
&&
a == 5 && b > 9 Caso o valor de a seja igual a cinco e o valor de b maior que nove, o resultado é verdadeiro, senão é falso.
Ou
||
a == 5 || b > 9 Se o resultado de a for igual a cinco ou o valor de b for maior que nove, então o resultado é verdadeiro. O resultado só será falso se as duas expressões retornarem falso.
Não
!
! a == 5 Se o resultado de a for igual a 5, então o resultado será falso. O operador não inverte o resultado da expressão. Tabela Ap. A.3: Operadores lógicos.
Operadores de atribuição Operador
Exemplo É o mesmo que
= += -= *= /= %=
x=y x+=y x-=y x*=y x/=y x%=Y
x=y x=x+y x=x-y x=x*y x=x/y x=x%y
Tabela Ap. A.4: Operadores de atribuição.
Operador condicional Operador condicional é aquele que atribui um valor a uma determinada variável com base em uma condição, ou seja, se a condição for verdadeira, teremos um valor x, caso contrário, um valor y. Conheça a sintaxe desse tipo de condição: nomeDaVariável = (condição) ? valorSeVerdadeiro : valorSeFalso;
Agora, observe um exemplo para uma melhor compreensão: var nota = 65; var resposta = (nota >= 60) ? “Aprovado.” : “Reprovado.”;
No exemplo anterior fizemos o seguinte processo: inicialmente temos uma variável denominada nota com o valor 65. Em seguida, a variável resposta com um valor Apêndice A 221
apêndice
A
condicional, ou seja, se o valor da variável nota for maior ou igual a 60, teremos o valor Aprovado, caso contrário, teremos Reprovado.
Estruturas de controle Como o próprio nome diz, as estruturas de controle servem para controlar a execução dos nossos programas. Elas são dividas em:
Estruturas de decisão Em Javascript temos as seguintes estruturas de decisão:
Declaração if Sintaxe: if (condição) { //código a ser executado quando a condição for verdadeira. }
Exemplo: var idade = 19; if(idade >= 18) { alert(“Você pode ter sua carteira de motorista”); }
No exemplo anterior, a declaração if verifica se a variável idade é maior ou igual a 18. Como a condição é verdadeira, ou seja, a variável idade tem o valor 18, será exibido o texto Você pode ter sua carteira de motorista.
Declaração if...else Sintaxe: if (condição) { //código a ser executado quando a condição for verdadeira. } else { //código a ser executado quando a condição for falsa. }
Exemplo:
222 Universidade AJAX
var sexo = “feminino”; if(sexo == “masculino”) { alert(“Homem!”); } else { alert(“Mulher!”); }
No exemplo anterior, a declaração if verifica se a variável sexo é igual a masculino. Como a condição é falsa, ou seja, a variável sexo não tem o valor masculino e, sim, feminino, será exibido o texto Mulher.
Declaração if...else if...else Sintaxe: if (condição) { //código a ser executado quando a condição for verdadeira. } else if (2º condição) { //código a ser executado quando a 2º condição for verdadeira. } else { //código a ser executado quando a primeira e a segunda condição forem falsas. }
Exemplo: var moeda = “Dólar”; if(moeda == “Real”) { alert(“Você precisa usar o Real!”); } else if(moeda == “Dólar”) { alert(“Você precisa usar o Dólar!”); } else { alert(“Você não pode usar nem o dólar nem o real!”); }
No exemplo acima, realizamos duas verificações: perguntamos se a variável moeda tem o valor Real (a primeira). Caso seja verdadeiro, exibirá o texto Você precisa usar o Real; e perguntamos se a mesma variável tem o valor Dólar (a segunda). Neste caso, exibirá o texto Você precisa usar o Dólar! Caso a variável não tenha nenhum dos dois valores – Real ou Dólar –, exibirá o texto Você não pode usar nem o dólar nem o real. apêndice
A
Declaração switch Sintaxe:
Apêndice A 223
switch(expressão) { case valor 1: //código a ser executado se a expressão = valor 1; break case valor 2: //código a ser executado se a expressão = valor 2; break default: //código a ser executado se a expressão 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 São Paulo.”); break case “SC”: alert(“Você mora em Santa Catarina.”); break default: alert(“Em que estado você mora?”); }
Temos a variável estado com o valor PR. Iniciamos nossa declaração condicional com o switch, passando a ele como parâmetro a expressão (variável) estado. Então, utilizamos o case. Para isto, é necessário verificar o seguinte: se o valor da variável for PR, exibimos um texto; se for SP, exibimos outro, e assim por diante; se o valor da variável não coincidir com nenhum dos valores nos cases, exibimos um texto padrão (default). O valor da expressão é comparado com os valores de cada case da estrutura. Caso ocorra um valor semelhante, o código a ele associado é executado. O break previne que o próximo case seja executado automaticamente.
Estruturas de Repetição Em Javascript temos as seguintes estruturas de repetição:
224 Universidade AJAX
Loop For Sintaxe: for (var = valorInicial; var <= valorFinal; var = var + incremento) { //código a ser executado. }
Exemplo: var numero = 1; for (numero = 1; numero <= 10; numero++) { alert(“Numero atual: “ + numero); }
No exemplo anterior, temos a variável numero que inicia com 1 e, em seguida, um loop for que funciona da seguinte maneira: temos o valor inicial (1) e o valor final (10) para a variável numero, seguido de um incremento (++). Isso significa dizer que o loop iniciará com a variável numero com o valor 1 e finalizará quando ela alcançar um valor maior que 10. O código a ser executado será uma mensagem de alerta dizendo ao usuário o número atual do looping. Resumindo: enquanto a variável numero for menor ou igual 10, o código será executado.
Loop while Sintaxe: while (var <= valorFinal) { //código a ser executado. }
Exemplo: var numero = 1; while (numero <= 10) { alert(“Numero atual: “ + numero); numero = numero + 1; }
Conforme você pode ver no exemplo do loop while, o código é executado enquanto a condição for verdadeira.
Loop do...while Sintaxe: Apêndice A 225
apêndice
A
do { //código a ser executado. } while (var <= valorFinal);
Exemplo: var numero = 1; do { alert(“Número atual: “ + numero); numero = numero + 1; } while (numero < 1).
Essa estrutura é igual ao While, só que a condição é verificada no final do bloco de código. Por isso, mesmo que o valor da condição seja falso ele vai executar o código associado pelo menos uma vez.
Break O comando break interrompe a execução do loop. Exemplo: var numero = 15; for (numero = 15; numero < 20; numero++) { if(numero == 17) { break; } alert(“Número: “ + numero); }
Utilizamos a condição if para detectar quando a variável numero estiver no número 17. Quando isto ocorrer, utilizamos o comando break para interromper o loop, assim, chegaremos somente até o número 17.
Continue O comando continue interrompe o loop em um determinado momento e continua com o mesmo: var idade = 24; for (idade = 24; idade <= 34; idade++) { if(idade == 30) { continue; } alert(“Você tem “ + idade + “ anos ?”); }
226 Universidade AJAX
No exemplo anterior, o loop for deveria rodar do número 24 até o 34, porém, o comando continue interrompe a exibição do número 30.
Pop-up boxes Existem três tipos de Pop-up boxes com Javascript. São elas:
Alert Exemplo: alert(“Você esta usando o ALERT”);
No navegador à aparecerá como mostra a Figura Ap. A.1.
Figura Ap. A.1.
Confirm Exemplo: confirm(“Você esta usando o CONFIRM”);
A figura a seguir ilustra nosso exemplo:
Figura Ap. A.2.
Prompt Exemplo: prompt(“Você esta usando o PROMPT”,””);
apêndice
A
Veja, na Figura Ap. A.3, como o navegador se comportará:
Apêndice A 227
Figura Ap. A.3.
No comando prompt você pode sugerir uma resposta (Figura Ap. A.4). Exemplo: prompt(“Você esta usando o PROMPT”,”E sugerindo uma resposta”);
Figura Ap. A.4.
Funções Função é um conjunto de códigos a serem executados para uma determinada finalidade. Quando você estiver escrevendo seus programas, vai notar que muitos códigos digitados são iguais, ou seja, que você precisa digitá-los em vários locais. As funções auxiliam nisso. Você pode criar funções e depois chamá-las em seu programa sempre que for necessário. Você pode chamar uma função de qualquer lugar da página ou até mesmo de outras páginas, contanto que o script esteja em um arquivo externo (.js). As funções podem conter parâmetros ou não; quando eles existem, são informados à função quando a chamamos.
Questões importantes sobre o uso de funções • a palavra function sempre deve ser escrita com letras minúsculas; • o nome da função pode conter letras minúsculas e/ou maiúsculas; • as chaves { } indicam o início e o término da função; • mesmo que uma função não contenha parâmetros, os parentêses ( ) devem ser incluídos após o nome da função.
228 Universidade AJAX
Sintaxe – sem parâmetros function nomeDaFuncao() { //códigos referente à função. }
Exemplo: function HelloWorld() { alert(“Olá mundo.”); } // Exemplo para chamá-la. Chamar a Função
Sintaxe – com parâmetros function nomeDaFuncao(varivel 1, variavel 2, ...) { //códigos referente à função. }
Exemplo: function HelloWorld(nome) { alert(“Olá “ + nome); } // Exemplo para chamá-la. Chamar a Função
Esta mensagem pode ser personalizada uma vez que o parâmetro passado a ela é o nome de algum usuário. Quando queremos que uma função retorne algum valor, utilizamos a declaração return, que tem o papel de especificar o valor retornado pela função. Exemplo: function calculo(valor1,valor2) { total = valor1 * valor2; return total; } // Chamando a função através do alert(). alert(calculo(23,5));
apêndice
A
Apêndice A 229
No exemplo anterior, chamamos a função calculo fornecendo a ela dois parâmetros: valor1 (23) e valor2 (5). Nesta função, temos a variável total que multiplica os dois parâmetros informados e retorna o valor utilizando o return.
Eventos Podemos definir um evento como uma ocorrência ou algum acontecimento realizado por uma página, uma ação do mouse, teclado, entre outros. Esses eventos podem ser detectados pelo Javascript e disparar código associado aos mesmos. Em muitos dos casos, os eventos são utilizados em combinação com as funções. Isso significa dizer que a função não será executada até que o evento ocorra. Vamos conhecer os principais eventos: • onclick O evento onclick ocorre quando o usuário clica sobre algum elemento da página, por exemplo: um link, uma imagem, um botão entre outros. Exemplo: onclick=”javascript:nomeDaFuncao(parametroSeHouver);”
• onload e onunload O evento onload é executado quando uma página HTML é carregada por completo, incluindo as imagens. Já o evento onunload ocorre quando o usuário sai de uma página. Eles são opostos entre si. Exemplo:
• onmouseover e onmouseout Enquanto o evento onmouseover é acionado quando o mouse se localiza na área de um elemento, o onmouseout é executado quando o mouse sai dessa área. Exemplo: onmouseover=”funcaoParaMouseOver();” onmouseout=”funcaoParaMouseOut();”
• onsubmit
230 Universidade AJAX
Para realizarmos a validação de um formulário utilizamos o evento onsubmit, o que significa dizer: ao enviar os dados do formulário. Este evento trabalha em conjunto com uma função da seguinte forma: associamos ao formulário a chamada de uma função, e esta tem por objetivo validar os dados submetidos e retornar um valor verdadeiro (true) ou falso (false). Se o valor retornado for verdadeiro, o formulário é enviado, caso contrário, o envio é bloqueado até que os dados sejam preenchidos como desejamos. Exemplo: onsubmit=”return confereFormulario();”
O evento onclick também pode chamar uma função para validar um formulário, assim como outros eventos. • onfocus, onblur e onchange Esses três eventos são utilizados na maioria das vezes em associação com algum elemento de formulário. O evento onfocus ocorre quando o usuário clica em um link ou em um campo de texto e o foco é mantido até que outro elemento o ganhe. Já o onblur é executado quando o elemento perde o foco. O exemplo mais clássico para o evento onchange (ao trocar/mudar) é quando alteramos uma opção na lista de um combobox. Nesta ação, ocorre o onchange. Exemplos: onfocus=”funcaoParaFocus();” onblur=”funcaoParaBlur();”
• onkeydown, onkeypress e onkeyup Esses três eventos são utilizados em associação com o teclado. Com eles, podemos contar os caracteres de uma textarea, realizar o preview de algum texto, efetuar uma busca instantânea, entre outras opções. Os eventos onkeydown e onkeypress são semelhantes e ocorrem quando uma tecla é pressionada pelo usuário em seu teclado. Já o onkeyup é executado quando a tecla é liberada, ou seja, quando for pressionada e em seguida liberada. Exemplos: apêndice
onkeydown=”funcaoParaKeyDown();” onkeypress=”funcaoParaKeyPress();” ... onkeyup=”funcaoParaKeyUp();” ...
A
Apêndice A 231
Arrays O Array possibilita armazenarmos diversos valores em uma única variável. Dessa forma, seria uma variável com vários valores e esses valores são armazenados e acessados por meio de uma ordem. Como exemplo, imagine uma variável com o nome escalacaoBrasil. Para ela, precisaremos armazenar onze valores, uma vez que o time tem onze jogadores. Veja o exemplo a seguir. O objeto Array é definido pela palavra-chave new. var escalacaoBrasil = new Array(); var escalacaoBrasil = new Array(11);
Ambos os exemplos anteriores estão corretos. A diferença entre eles é que o segundo informa o tamanho (valor total) que o Array terá através do número inteiro (integer) 11 (onze). Agora, vamos conhecer duas formas para criarmos um Array. var escalacaoBrasil = new Array(); escalacaoBrasil [0] = “Gomes”; escalacaoBrasil [1] = “Cicinho”; escalacaoBrasil [2] = “Gilberto”; escalacaoBrasil [3] = “Lucio”; escalacaoBrasil [4] = “Juan”; escalacaoBrasil [5] = “Gilberto Silva”; escalacaoBrasil [6] = “Mineiro”; escalacaoBrasil [7] = “Kaka”; escalacaoBrasil [8] = “Ronaldinho Gaucho”; escalacaoBrasil [9] = “Robinho”; escalacaoBrasil [10] = “Fred”; var escalacaoBrasil = new Array(“Gomes”, “Cicinho”, “Gilberto”, “Lucio”, “Juan”, “Gilberto Silva”, “Mineiro”, “Kaka”, “Ronaldinho Gaucho”, “Robinho”, “Fred”);
Os valores podem ser acessados assim: alert(diasDaSemana[4]); // Exibirá: Juan.
Portanto, para referenciarmos um valor dentro de um Array, basta indicarmos o nome do Array e o índice numérico do valor. É importante lembrar que o índice numérico se inicia com 0 (zero).
232 Universidade AJAX
Se você especificar algum número ou os valores true/false (verdadeiro/falso) como o valor de um Array, o tipo da variável será numérica e Booleana, respectivamente, ao invés de string.
Os métodos mais utilizados do objeto Array() Método
Descrição
join()
Coloca todos os elementos de um Array em uma string e os separam por um delimitador especificado.
shift()
Retorna o primeiro valor de um Array e remove os demais.
pop()
Retorna o último elemento de um Array e remove os demais.
reverse()
Inverte a ordem dos elementos de um Array.
slice()
Retorna os elementos selecionados de um Array.
sort()
Ordena os elementos de um Array. Tabela Ap. A.5: Métodos mais utilizados do objeto Array().
Data Para trabalharmos com datas e horários em Javascript fazemos uso do objeto Date(). Exemplo: var dataAtual = new Date(); alert(dataAtual);
No exemplo anterior, teremos a data e o horário atual, ou seja, o exato momento em que o script foi executado. O resultado aparecerá no formato a seguir: Mon Jun 26 2006 15:29:13 GMT-0300 (Hora oficial do Brasil)
Para manipular esse resultado, existem várias práticas eficientes. Veja um novo exemplo adaptado ao nosso formato dd/mm/aaaa. var data = new Date();
apêndice
A
var mes = new Array(12) mes[0] = “Janeiro”; mes[1] = “Fevereiro”; mes[2] = “Março”; Apêndice A 233
mes[3] = “Abril”; mes[4] = “Maio”; mes[5] = “Junho”; mes[6] = “Julho”; mes[7] = “Agosto”; mes[8] = “Setembro”; mes[9] = “Outubro”; mes[10] = “Novembro”; mes[11] = “Dezembro”; alert(data.getDate() + “/” + mes[data.getMonth()] + “/” + data. getFullYear());
No exemplo anterior, utilizamos o objeto Date e três de seus métodos: getDate(), getMonth() e getFullYear(). O primeiro retorna o dia do mês (de 1 a 31), o segundo o mês (de 0 a 11) e o último o ano, com quatro dígitos. O diferencial neste último está na utilização do Array para o mês, uma vez que o método getMonth() retorna números de 0 (zero) a 11 (onze) e, assim, o número 4 (quatro) representaria o mês de maio. Diferentemente de nossa representação usual, onde esse mês é representado pelo algarismo 5 (cinco). Assim, utilizamos um Array para atribuirmos o nome do mês (pode ser algarismos também) de acordo com o número retornado pelo método.
Os métodos mais utilizados do objeto Date() Método
Descrição
Date() getDate() getDay() getMonth() getFullYear() getHours() getMinutes() getSeconds() getMilliseconds() getTimezoneOffset()
Retorna a data e o horário atual. Retorna o dia do mês (1-31). Retorna o dia da semana (0-6). Retorna o mês (0-11). Retorna o ano com quatro dígitos. Retorna a hora (0-23). Retorna os minutos (0-59). Retorna os segundos (0-59). Retorna os milissegundos (0-999). Retorna a diferença em minutos entre o tempo local e o do Meridiano de Greenwich (GMT).
Tabela Ap. A.6: Métodos mais utilizados do objeto Date().
Os métodos na tabela anterior precisam atuar em conjunto com o objeto Date() porque que são métodos desse objeto. Sua utilização é da seguinte forma:
234 Universidade AJAX
// Uma forma new Date().nomeDoMetodo(); // Outra forma var data = new Date(); data.nomeDoMetodo();
String O objeto string é utilizado para manipular um texto armazenado em uma variável. É importante ressaltar que, além do objeto string, há a string literal. Quando utilizamos alguns dos métodos do objeto string na string literal, essa última é convertida automaticamente e temporariamente em um objeto string. Por exemplo, o método length retorna a quantidade de caracteres em uma string. Isto porque a string literal não é um objeto, então não pode conter métodos, fazendo-se necessária a conversão da mesma para um objeto. Veja a utilização desse método abaixo em ambos os casos: var texto1 = “AJAX”; var texto2 = new String(“AJAX “); alert(“A variável texto1 contém: “ + texto1.length + “ caracteres.”); alert(“A variável texto2 contém: “ + texto2.length + “ caracteres.”);
No exemplo anterior, teremos o valor três nos dois casos (string literal – texto1; objeto string – texto2) porque três é o total de caracteres contido em AJAX.
Os métodos mais utilizados do objeto String() Método
Descrição
indexOf()
Retorna a posição da primeira ocorrência de um valor especificado em uma string. Retorna a posição da última ocorrência de um valor especificado em uma string. Procura por um valor específico em uma string. Se encontrado, ele (valor) é retornado, caso contrário, retorna null. Substitue alguns caracteres por outros caracteres em uma string. Exibe os caracteres da string em minúsculos. Exibe os caracteres da string em maiúsculos. Extrai uma quantidade específica de caracteres de uma string a partir de um índice inicial. Extrai os caracteres de uma string entre dois índices.
lastIndexOf() match() replace() toLowerCase() toUpperCase() substr() substring()
Tabela Ap. A.7: Métodos mais utilizados do objeto String(). Apêndice A 235
apêndice
A
Math O objeto Math disponibiliza diversos valores e funções para nos ajudar na realização de operações matemáticas. A seguir uma relação dos valores matemáticos que podem ser acessados pelo objeto Math. Math
Nome
Math.E E Math.PI PI Math.SQRT2 square root of 2 Math.SQRT1 _ 2 square root of 1/2 Math.LN2 natural log of 2 Math.LN10 natural log of 10 Math.LOG2E base-2 log of E Math.LOG10E base-10 log of E
Valor 2.718281828459045 3.141592653589793 1.4142135623730951 0.7071067811865476 0.6931471805599453 2.302585092994046 1.4426950408889634 0.4342944819032518
Tabela Ap. A.8: Métodos mais utilizados do objeto Math.
Métodos (funções) matemáticas • ceil() Arredonda o valor informado para cima até o número inteiro mais próximo. Exemplo: var numero = 6.1; alert(Math.ceil(numero)); // Exibirá o valor 7.
• floor() Arredonda o valor informado para baixo até número inteiro mais próximo. Exemplo: var numero = 6.1; alert(Math.floor(numero)); // Exibirá o valor 6.
• max() Retorna o número de maior valor entre dois números especificados. var numero1 = 6.7; var numero2 = 3.8; alert(Math.max(numero1,numero2)); // Exibirá o valor 6.7
236 Universidade AJAX
• min() Retorna o número de menor valor entre dois números especificados. var numero1 = 6.7; var numero2 = 3.8; alert(Math.min(numero1,numero2)); // Exibirá o valor 3.8
• random() Retorna um número entre 0 e 1. alert(Math.random()); alert(Math.random()*59); // Exibirá números aleatórios entre 0 e 59 - Exemplo: 58.92792655560298
• round() Arredonda o valor informado para o número inteiro mais próximo, seja positivo ou negativo. var numero1 = 6.7; alert(Math.round(numero1)); // Exibirá o valor 7 var numero2 = -3.8; alert(Math.round(numero2)); // Exibirá o valor -4
apêndice
A
Apêndice A 237
Apêndice B
DHTML e DOM DHTML e DOM são utilizados em conjunto com o Javascript e nos oferecem a possibilidade de desenvolvermos aplicativos mais eficientes e criativos para nossos projetos. • DHTML – Dynamic Hyper Text Markup Language: é a possibilidade de tornar as páginas HTML mais dinâmicas e interativas do trabalho, em conjunto de três tecnologias: HTML, CSS e JavaScript; • DOM – Document Object Model: é uma plataforma e uma interface de linguagem-neutra que possibilita aos programas e scripts acessar e atualizar dinamicamente o conteúdo e o estilo de um documento. O DOM é um padrão W3C, ou seja, é um padrão da Web (web standards), e todos os navegadores atuais vêm utilizando esses padrões, mas ainda podem existir exceções. O DOM nos fornece a representação estrutural de documentos HTML e XML, definindo a forma como a estrutura que pode ser acessada por programas e scripts, possibilitando-nos a modificação na estrutura do documento, do estilo e do conteúdo. A representação do documento ocorre por meio de uma árvore de nós (tree of node) em que cada objeto possui sua propriedade e método. Vejamos a imagem a seguir representando uma “tree of node”:
Figura Ap. B.1.
Na figura anterior temos a estrutura de um documento HTML que foi representado pelo DOM. Podemos encará-la como uma árvore genealógica. As duas tags são filhas do mesmo parent (pai). Então, a tag e são siblings (irmãs). A tag está localizada dentro da tag
, assim a tag é filha dessa última. Na nomenclatura do DOM a chamaremos de child node (tag
) ou child. 240 Universidade AJAX
Cada tag na marcação HTML representa uma linha e terá a mesma localização na árvore do DOM (DOM tree). Diferentemente do Javascript, o DOM não é uma linguagem, ele concede a estrutura de um documento e seus elementos. Então, utilizamos o DOM associado ao Javascript. O DOM é utilizado para termos acesso à estrutura, estilo e conteúdo de um documento, enquanto que o Javascript, para manipulá-los. O DOM foi desenvolvido para ser independente de qualquer linguagem de programação, então, diversas linguagens o utilizam para ter acesso ao documento, mas a linguagem Javascript é a mais comum. Já o termo DHTML é uma combinação de tecnologias (XHTML, CSS e Javascript) e partiu de uma estratégia de marketing da Netscape e da Microsoft para descrever a nova tecnologia suportada pela quarta geração (4.x) de seus navegadores. Essa tecnologia não é um padrão do W3C. Então, precisamos desenvolver um DHTML crossbrowser, ou seja, um DHTML que funcione em diversos navegadores não só nos da Microsoft e Netscape. Por isso, utilizaremos o DOM do W3C que tem o suporte em todos os navegadores atuais. Exemplo de DHTML JavaScript: <script type=”text/javascript”> function modificarClasse(nomeClasse) { var obj = document.getElementById(“conteudo”); obj.className = nomeClasse; }
HTML:
CSS: #conteudo { width: 500px; padding: 15px; line-height: 1.5em; } .destaque { background-color: #666666;
apêndice
B
Apêndice B 241
border: 1px solid #fc6c6c; } .nodestaque { background-color: #ffffff; border: 1px solid #000000; }
Nos códigos anteriores, utilizamos três tecnologias (HTML, CSS e Javascript). No link Altere minha aparência, adicionamos o evento onclick que chama a função changeClass, passando a ela o nome da nova classe, nodestaque. A função JavaScript changeClass recebe o parâmetro nodestaque passado a ela e o utiliza para adicionar ao objeto desejado conteudo uma nova classe CSS. Os elementos getElementById e className do DOM são discutidos adiante.
Os métodos GetElementById e GetElementByTagName O método getElementById do DOM simplesmente retorna o elemento cujo atributo ID foi especificado. Caso o elemento não exista ou o ID informado seja incorreto, ele retornará null. Atenção: não podem existir dois objetos em uma página com o mesmo valor de um atributo ID. Considere o seguinte campo de um formulário:
Para acessarmos o valor digitado nesse campo de texto em Javascript procederemos assim: document.nomeDoFormulario.Telefone.value
Ou seja, precisamos declarar document mais o nome do formulário em que o campo se localiza e seu nome espeficado no atributo name. Se utilizarmos o método getElementById, podemos acessá-lo assim: document.getElementById(‘Telefone’).value
Ao invés de informarmos toda a localização do objeto, dizemos apenas o seu atributo ID ao método getElementById.
242 Universidade AJAX
Já o método getElementsByTagName retorna diversos objetos com a tag específicada no método. Portanto, ao invés de informarmos um atributo e termos como retorno um único objeto, informarmos uma tag e temos todas aquelas que constam na página em questão. Para entender melhor, vamos a um exemplo: function ModificarEstiloLink() { var links = document.getElementsByTagName(‘a’); for(var x = 1; x < links.length; x++) { var link = links[x]; link.style.textDecoration = ‘underline’; } }
Esta função utiliza o método getElementsByTagName para recuperar todos os objetos “a” da página, ou seja, todos os links da página. Adicionamos esta coleção de objetos em um Array, depois varremos o mesmo utilizando o loop for atribuindo o estilo underline para cada um deles. Observe que a propriedade text-decoration das CSS é representado por textDecoration. Sempre que desejar utilizar uma propriedade CSS e esta conter a estrutura nome-outronome, retire o hífen e coloque em maiúscula a primeira letra do segundo nome.
Os métodos Style e ClassName O método style, como seu próprio nome já diz, é utilizado para alterar o estilo de um objeto. Ele é usado de forma idêntica ao atributo style do HTML, só que, ao invés de ser atribuído na marcação HTML, é usado um script. Exemplo: function Ocultar(id) { var obj = document.getElementById(id); obj.style.display = “none”; }
A função Ocultar(id) recebe o id do objeto que será o alvo do script. Este id é atribuído à variável obj usando método getElementById. Em seguida, usamos o método style para alterar a propriedade display do objeto em questão para none. Semelhante ao método style, o método className tem a função de alterar o estilo de um objeto, só que este deve ser definido por uma classe CSS.
apêndice
B
Apêndice B 243
A vantagem do método className é que podemos alterar as propriedades do estilo na folha de estilo vinculada à página, ou seja, não precisamos alterar o script quando desejarmos alterar o estilo e, sim, as propriedades da classe CSS. Exemplo: function Ocultar(id) { var obj = document.getElementById(id); obj.className = “OcultarObj”; }
O script anterior altera a propriedade class do objeto recuperado pelo método getElementById. Então, o código CSS que estiver nesta classe será usado a partir deste momento por este objeto. A seguir, a classe OcultarObj: .OcultarObj { display: none; }
O método className é mais vantajoso do que o style porque nos possibilita alterar o estilo sem alterar o script, ou seja, basta modificarmos as propriedades da classe utilizada. Ao invés de ocultar e exibir o objeto utilizando a propriedade display, podemos utilizar a propriedade visibility. Para isto, simplesmente alteramos a propriedade da classe OcultarObj, assim: .OcultarObj { visibility: hidden; }
O método innerHtml Para alterarmos ou inserirmos conteúdo ou uma marcação HTML em um objeto, utilizamos o método innerHTML. Imaginemos uma tag em sua marcação HTML e que essa tag esteja com o atributo ID definido como menu. Podemos utilizar o método getElementById para acessá-la e o método innerHTML para manipular seu conteúdo ou marcação HTML. Exemplo de como alterar o conteúdo de uma tag: var obj = document.getElementById(“menu”); obj.innerHTML = “Novo conteúdo.”;
244 Universidade AJAX
Utilizando o operador de atribuição += podemos acrescentar conteúdo ao já existente de uma tag como marcação HTML. var obj = document.getElementById(“menu”); obj.innerHTML += “Novo conteúdo.”;
Os métodos appendChild e createElement O método appendChild adiciona um nó (node, “filho”) ao final da lista de filhos (children) de um elemento pai (parent node). Exemplo: var novoElemento = document.createElement(“hr”); document.getElementById(“menu”).appendChild(novoElemento);
Em primeiro lugar, definimos qual será o novo elemento ou a nova tag a ser criada, nesse caso, a tag hr. Na segunda linha, fizemos referência ao atributo ID de uma tag e esta será o pai do novo elemento que será adicionado. Em seguida, utilizamos o método appendChild informando a ele a tag que criamos na variável novoElemento. Para concluir, a tag hr foi adicionada como filho do elemento cujo atributo ID é igual a menu. O método createElement é a solução quando você necessita criar um novo elemento em sua marcação HTML, mas não há possibilidades de alterar a marcação já existente e o novo elemento deve ser inserido mediante algum evento ocorrido na página ou ocasionado pelo usuário. Vejamos como utilizá-lo: function novaTag(nTag) { var conteudo = document.getElementById(“menu”); var novoElemento = document.createElement(nTag); novoElemento.appendChild(document.createTextNode(“Teste”)); conteudo.appendChild(novoElemento); }
Primeiro referenciamos ao atributo ID de uma tag para que possamos utilizá-la como referência: var conteudo = document.getElementById(“menu”);
apêndice
B
Apêndice B 245
Definimos qual será a nova tag a ser criada. Observe que essa informação é oriunda de um parâmetro (nTag) da função em questão: var novoElemento = document.createElement(nTag); Fornecemos um novo conteúdo ao elemento criado utilizando o appendChild e o createTextNode. Finalizamos inserindo o novo elemento criado através do appenChild. Assim, esse novo elemento foi criado como um novo filho do elemento referenciado na variável conteudo.
Os métodos insertBefore e insertAfter O método insertBefore é usado quando precisamos inserir algum elemento em um local específico e não como o método appendChild, que insere o objeto sempre como o último filho (child) de um elemeto pai (parent). Exemplo: <script type=”text/javascript”>
Primeiramente, informamos qual elemento será criado. Esse elemento é informado utilizando o parâmetro nTag da função. Em seguida, inserimos conteúdo ao elemento criado. Fazemos referência a um elemento por meio do getElementById na variável referencia. Criamos a variável parentTag, concedendo-a o valor referencia.parentNode, ou seja, o nosso elemento como referência, e especificando que ele será um nó pai (parentNode). Para concluir, utilizamos o método insertBefore anexado à variável parentTag. Os atributos desse método são os seguintes: novoElemento (o elemento que 246 Universidade AJAX
será criado) e referencia (para sabermos onde inserir o novo elemento, ou seja, anterior a qual elemento). O método insertAfter não existe, apenas se em certos momentos precisarmos inserir algum elemento posterior a um elemento específico. Para isto, utilizamos o método insertBefore, também da seguinte forma: Marcação HTML:
Script utilizado: <script type=”text/javascript”>
Primeiro, informamos qual elemento será criado. Esse elemento é informado através do parâmetro (nTag) da função. Em seguida, inserimos conteúdo ao elemento criado. Usamos o método getElementById para fazer referência ao elemento na variável referencia. Criamos a variável parentTag, dando a ela o valor referencia.parentNode, ou seja, o nosso elemento como referência e especificando que ele será um nó pai (parentNode). Para concluir, utilizamos o método insertBefore anexado à variável parentTag. Os atributos desse método são os seguintes: novoElemento (o elemento que será criado) e referencia.nextSibling (next = próximo; Sibling = irmão). Aqui está a diferença. Esses atributos informam que o novo elemento será o próximo irmão da tag referenciada na variável referencia. Se a nova tag será o próximo irmão, quer dizer que ela será inserida posteriormente à tag informada como referência. apêndice
B
Apêndice B 247
Os métodos setAttribute e getAttribute O método setAttribute tem a finalidade de inserir ou modificar um atributo em um elemento existente. A sintaxe do método compreende no seguinte: setAttribute(‘nomeDoAtributo’,’valorDoAtributo’); Exemplo: <script type=”text/javascript”>
No exemplo anterior, criamos os atributos id e class e definimos respectivamente os seguintes valores: titulo e destaque. O método getAttibute é usado para recuperar um atributo a fim de manipulá-lo. Sintaxe: getAttribute(‘nomeDoAtributo’); Exemplo: <script type=”text/javascript”>
248 Universidade AJAX
Apêndice C
Instalando o Visual Studio Web Developers Express Edition 2005 e o SQL Server 2005 Express Edition Para baixar e instalar os softwares Visual Studio Web Developers Express Edition 2005 e o SQL Server 2005 Express Edition siga os procedimentos: 1. Primeiramente, é necessário fazer o download do instalador. Para isto, acesse o site: http://msdn.microsoft.com/vstudio/express/vwd/download/ Neste site você encontrará informações sobre os requisitos necessários para instalar a aplicação. 2. Após ter baixado os arquivos, execute o arquivo vwdsetup.exe. A instalação é iniciada. 3. Na janela Visual Web Developers 2005 Express Edition Setup clique em Next > para continuar o processo de instalação, como mostra a Figura Ap.C.1.
Figura Ap. C.1.
4. Na próxima janela, selecione I accept the terms of the License Agreement e clique em Next > para continuar (Figura Ap.C.2).
250 Universidade AJAX
Figura Ap. C.2.
5. Em seguida, surgirá uma tela solicitando sobre o que deseja instalar. Deixe marcada a opção Microsoft SQL Server 2005 Express Edition x86 (Download Size: 55 MB) para instalar o mesmo. Eu aconselho a instalação da documentação também. Para isto, selecione a opção Microsoft MSDN 2005 Express Edition (Download Size: 248 MB), como mostra a Figura Ap.C.3.
Figura Ap. C.3. Apêndice C 251 apêndice
C
6. Clique em Next > para continuar. 7. A tela seguinte (Figura Ap.C.4) exibe a pasta na qual será instalado o software e também o espaço disponível no disco. Clique em Install > para iniciar a instalação.
Figura Ap. C.4.
Será feito o download dos arquivos selecionados e a instalação dos produtos, como mostra a Figura Ap.C.5:
Figura Ap. C.5.
252 Universidade AJAX
Depois de concluído, você pode utilizar o produto por 30 dias sem registro. Para período acima de 30 dias é necessário o registro, que é gratuito. Para isto, clique em Register Now na tela de encerramento (Figura Ap.C.6).
Figura Ap. C.6.
8. Clique em Exit para finalizar a instalação.
Apêndice C 253 apêndice
C