APLICAÇÕES WEB COM AJAX

FUNDAÇÃO DE ENSINO EURÍPIDES SOARES DA ROCHA CENTRO UNIVERSITÁRIO EURÍPIDES DE MARÍLIA UNIVEM TRABALHO DE CONCLUSÃO DE CURSO NELSON GUIMARÃES RAPHAEL ZANON RODRIGUES APLICAÇÕES WEB COM AJAX MARÍLIA 2007

1 NELSON GUIMARÃES RAPHAEL ZANON RODRIGUES APLICAÇÕES WEB COM AJAX TCC Trabalho de Conclusão de Curso entregue a Fundação Eurípides Soares da Rocha. Sob orientação do Prof. Ms. Elvis Fusco, como requisito parcial para obtenção do título de Bacharel em Administração com habilitação em Análise de Sistemas. MARÍLIA 2007

2 AMARAL, Nelson Guimarães do; RODRIGUES, Raphael Zanon. Aplicações Web com Ajax. / Nelson Guimarães do Amaral; Raphael Zanon Rodrigues; orientador Elvis Fusco. Marília, SP:[s.n.], 2007. 73 f. Dissertação (Bacharelado em Administração com Habilitação em Análise de Sistemas) Centro Universitário Eurípides de Marília, Fundação de Ensino Eurípides Soares da Rocha, Marília, 2007. 1. Conceitos 2. Ajax 3. Estudo de caso. CDD: 004.6783

3

4 AGRADECIMENTOS Agradecemos primeiramente a Deus por ter-nos dado a capacidade suficiente para concluir este trabalho que marca o fim de mais uma fase de nossas vidas. é impossível agradecer a todas as pessoas que nos acompanharam nesta jornada e que certamente estarão nos apoiando a chegar ainda mais longe, mas temos a certeza de que se tivéssemos percorrido todo o caminho sozinhos, certamente teria sido mais difícil, por isso, queremos agradecer a todas as pessoas que por ventura não foram citadas diretamente nas próximas linhas. Gostaríamos de agradecer em segundo lugar às nossas famílias, os responsáveis por nós sermos como somos hoje. Juntamente com eles, Gostaríamos de agradecer às nossas companheiras que nos apoiaram e que desde já estão fazendo sacrifícios pelo nosso futuro profissional e acadêmico. Gostaríamos de agradecer também a todos os nossos grandes professores, que nos incentivam desde o início do colégio até o fim da graduação e agradecemos ainda a nossos amigos que nos entenderam e deram força nos momentos que hesitamos. Por fim, queremos agradecer às mesmas pessoas que citei no início e que não foram citadas aqui, e que ainda teremos muito tempo pra agradecer pessoalmente a cada um de vocês. A todos, nosso muito obrigado de coração.

"Os Problemas não podem ser resolvidos em um mesmo nível de pensamento no qual foram gerados" Albert Einstein 5

6 AMARAL, Nelson Guimarães do; RODRIGUES, Raphael Zanon. Aplicações Web com Ajax. 2007. 73 f. Dissertação (Bacharelado em Administração com Habilitação em Análise de Sistemas) Centro Universitário Eurípides de Marília, Fundação de Ensino Eurípides Soares da Rocha, Marília, 2007. RESUMO Com o crescente aumento da utilização de aplicações web devido à popularização da internet banda larga e o conseqüente aumento na necessidade de recursos cada vez mais avançados como linguagens e técnicas de desenvolvimento, este trabalho apresenta a metodologia de desenvolvimento de uma aplicação web com AJAX, como ela funciona, suas vantagens e desvantagens. São abordadas as características das principais tecnologias que compõem esta metodologia de desenvolvimento como, por exemplo, o HTML, JavaScript, XML, CSS e DOM. A seguir são mostradas as tecnologias que se integram resultando no AJAX, que resumidamente é a apresentação dos dados para o usuário sem a necessidade de recarregar toda a página, com os principais métodos e a forma de utilização deles, além da apresentação de alguns frameworks que auxiliam no desenvolvimento e os conceitos que compõe a Web 2.0. Por fim, é proposto um estudo de caso com base na tecnologia de desenvolvimento.net oferecida pela Microsoft composta pelo ambiente de desenvolvimento Visual Studio 2005, a framework ASP.NET AJAX 2.0 e o banco de dados SQL Server 2005. Esta aplicação é baseada nos conceitos apresentados durante o trabalho em conjunto com o ambiente de desenvolvimento que auxilia no desenvolvimento da aplicação juntamente com o framework ASP.NET AJAX, mostrando as facilidades para o desenvolvimento de aplicações utilizando uma framework. Palavras-Chave: Desenvolvimento Web, AJAX, Framework, Web 2.0.

7 AMARAL, Nelson Guimarães do; RODRIGUES, Raphael Zanon. Aplicações Web com Ajax. 2007. 73 f. Dissertação (Bacharelado em Administração com Habilitação em Análise de Sistemas) Centro Universitário Eurípides de Marília, Fundação de Ensino Eurípides Soares da Rocha, Marília, 2007. ABSTRACT With the increase of the utilization of web applications due to the popularization of the bandwidth internet fallowing as a result of the need of advanced resources, as language and development technique, this research present the development methodology of web application with AJAX, such as, how it works, advantages and disadvantages. Boarding the characteristics of the main technologies that are part of this development methodology, as example, HTML, JavaScript, XML, CSS and DOM. Following is shown how this technologies are integrated resulting AJAX, in other words it is the way how the data is showed to the user even before the full load of the page, with the main methods and how to use them, besides the presentation of some frameworks which assist the development and the concepts that compound the Web 2.0. Lastly, a case study based on the technology.net offered by Microsoft part of the Visual Studio 2005, framework ASP.NET AJAX 2.0 and the database SQL Server 2005. This application is based on the concepts showed during the research combined with the development environment which supports the application development amongst ASP.NET AJAX, showing the facility to develop applications using framework. Keywords: Web development, AJAX, Framework, Web 2.0

8 LISTA DE ILUSTRAÇÕES FIGURA 01 Arquitetura da plataforma.net... 14 FIGURA 02 Acesso a Base de Dados por meio do ADO.NET... 16 FIGURA 03 Funcionamento do ADO.NET... 17 FIGURA 04 Visão geral da arquitetura ASP.NET... 19 FIGURA 05 Modelo de Code-Behind no ASP.NET... 20 FIGURA 06 Modelo tradicional de aplicação web... 27 FIGURA 07 Árvore de um documento HTML simples... 31 FIGURA 08 Conceitos da Web 2.0... 35 FIGURA 09 Tecnologias utilizadas pelo AJAX... 40 FIGURA 10 Apresentação da página Default.aspx sem CSS... 56 FIGURA 11 Apresentação da página Default.aspx com CSS... 59 FIGURA 12 Tabelas do Banco de Dados... 60 FIGURA 13 Modelo de apresentação no Visual Studio... 65 FIGURA 14 Mensagem de progresso sendo apresentada... 68

9 LISTA DE LISTAGENS Listagem 01 Instanciando um objeto e utilizando método OPEN... 47 Listagem 02 Utilizando método SEND... 48 Listagem 03 Retorno XML... 48 Listagem 04 Atribuir Função... 48 Listagem 05 Verificando Estado... 49 Listagem 06 Resposta do Servidor... 49 Listagem 07 Impressão no Navegador... 50 Listagem 08 Exemplo completo de AJAX... 51 Listagem 09 Código da página Default.aspx... 55 Listagem 10 Código CSS... 58 Listagem 11 Código da diretiva @Page... 58 Listagem 12 Consulta de grupos... 61 Listagem 13 Consulta de usuários do grupo... 61 Listagem 14 Tabelas do Banco de Dados... 62 Listagem 15 Vinculação do dado na propriedade Text do rótulo... 63 Listagem 16 Atualização dos dados vinculados aos rótulos... 63 Listagem 17 Posicionamento dos controles UpdatePanel... 64 Listagem 18 Código dos controles UpdateProgress... 67

10 LISTA DE ABREVIATURAS ADO: AJAX: API: ASP: CGI: CLR: CLS: CSS: DHTML: DOM: ECMA: GML: HTML: IIS: JIT: MSIL: OO: SGML: SOAP: W3C: XML: ActiveX Data Objects Asynchronous Javascript And XML Applications Programming Interface Active Server Pages Common Gateway Interface Common Language Runtime Common Language Specification Cascading Style Sheets Dynamic HTML Document Object Model European Computer Manufacturers Association General Markup Language HyperText Markup Language Internet Information Services Just In Time Microsoft Intermediate Language Orientação a Objetos Standard Generalized Markup Language Simple Object Protocol World Wide Web Consortium extensible Markup Language

11 SUMÁRIO INTRODUÇÃO... 11 1. CONCEITOS... 12 1.1. NET... 12 1.1.1. Framework... 17 1.2. ASP.NET... 18 1.3. C#... 21 1.3.1. Orientação a Objetos... 22 1.4. JavaScript... 23 1.5. CSS... 26 1.6. HTML... 28 1.7. DHTML... 28 1.8. DOM... 29 1.9. XML... 31 1.10. WEB 2.0... 33 2. AJAX... 36 2.1. Conceitos... 36 2.2. Aplicações... 37 2.3. Estado da Arte... 38 2.4. Tecnologias Utilizadas Pelo Ajax... 39 2.5. Frameworks... 40 2.6. XMLHttp... 44 2.7. XMLHttpRequest... 45 2.8. Funcionamento... 46 2.9. Exemplos... 47 2.10. Limitações... 51 3. ESTUDO DE CASO... 53 3.1. Resultados obtidos... 68 CONSIDERAÇÕES FINAIS... 70 REFERÊNCIAS... 71

12 INTRODUÇÃO Ao longo do trabalho, busca-se conceituar as tecnologias envolvidas na metodologia AJAX, mostrando como elas funcionam e como elas se integram para atingir um melhor resultado nas aplicações. O termo AJAX significa Asynchronous Javascript And XML, sendo utilizado para especificar a utilização em conjunto de tecnologias que torna possível às aplicações Web serem mais dinâmicas, evitando o reload total da página a cada informação requisitada pelo usuário, atualizando apenas o que for realmente necessário. No primeiro capítulo, temos como objetivo apresentar dos conceitos da plataforma.net e juntamente com o ASP.NET, mostrando seus conceitos e como a plataforma funciona, dando suporte para o desenvolvimento de uma aplicação web. Neste mesmo capítulo, são apresentadas as tecnologias que envolvem o AJAX e a forma com que elas interagem com as requisições realizadas ao servidor da aplicação web, sendo apresentado também o conceito da Web 2.0 que se baseia em aplicações mais dinâmicas, que permitem que os usuários não sejam apenas receptores das informações, mas também, um produtor delas. O objetivo do capítulo seguinte é definir os conceitos do AJAX, apresentando os tipos de aplicações que ele deve ser inserido, alguns frameworks que auxiliam no desenvolvimento, os principais métodos seguidos de exemplos de como utilizá-los e as limitações que o AJAX possui. O último capítulo tem como objetivo demonstrar o desenvolvimento de uma aplicação Web que faz uso das tecnologias descritas anteriormente em conjunto com a metodologia de desenvolvimento AJAX, como também apresentar algumas tecnologias de desenvolvimento que auxiliam nas tarefas do desenvolvedor seguido de uma descrição dos resultados obtidos com o desenvolvimento.

13 1. CONCEITOS Neste capítulo serão apresentados conceitos das tecnologias básicas para o desenvolvimento de uma aplicação Web utilizando a metodologia de desenvolvimento AJAX. 1.1. NET A plataforma.net é uma tecnologia de desenvolvimento da Microsoft, representando uma significativa evolução nos pensamentos da empresa, sendo considerada uma melhoria significativa sobre as tecnologias anteriormente desenvolvidas. De acordo com Turtschi et al (2004, p.2), A plataforma.net é a fundação sobre a qual a próxima geração de softwares será construída. Para completar, o Turtschi et al (2004, p.2) diz que A plataforma.net é muito mais de que uma linguagem, um kit de programação ou mesmo um sistema operacional. Ela oferece novos e poderosos recursos, não sendo possível usar eficientemente essas novas ferramentas sem um forte conhecimento da plataforma. O desenvolvimento da plataforma.net teve alguns objetivos como segurança, redimensionabilidade, confiabilidade, flexibilidade e interoperabilidade, tendo como objetivo tornar a plataforma.net pronta para a empresa e amigável para o programador, tornando única para o desenvolvimento e a execução de sistemas e aplicações, sendo invocadas através dela todas as funções necessárias ao funcionamento dos programas rodando independentemente do sistema operacional. A plataforma.net é executada sobre uma aplicação similar a uma maquina virtual chamada de Common Language Runtime (CLR). Segundo Turtschi et al (2004, p.2), a CLR é Um ambiente de execução gerenciado que manipula alocação de memória, detecção de erro e

14 interação com os serviços do sistema operacional, sendo encarregada da execução das aplicações, para isso a CLR interage com uma coleção de bibliotecas unificadas formando o framework.net que possui numerosos serviços que servem para facilitar o desenvolvimento e a manutenção das aplicações. Suportando tecnologias como: modelo de programação simples (procedural), programação orientada a objetos e a coleta de lixo. Devido a coleção de bibliotecas da CLR, a Microsoft e terceiros estão desenvolvendo versões adaptadas à.net, permitindo utilizar uma grande variedade de diferentes linguagens de programação tais como: Fortran, Pascal, C++, Perl, C#, Python, COBOL, Microsoft JScript, SmallTalk, Oz, Microsoft Visual Basic, Delphi, Eiffel, Java, Ruby e outras. Com isso, qualquer código compilado para.net pode ser executado em qualquer dispositivo ou plataforma que contenha o framework.net, assim, o programador não escreve mais os códigos para um dispositivo ou um sistema específico, mas agora, ele escreve os códigos para a plataforma.net, eliminando assim o problema de compatibilidade entre Dynamic Link Libraries (DLL), tão conhecido e enfrentado em outras plataformas de desenvolvimento da Microsoft. A base da arquitetura da plataforma.net é o CLR. Ele foi baseado na utilização de compiladores Just In Time (JIT), onde executa um código intermediário chamado de Microsoft Intermediate Language (MSIL) escrito em qualquer das linguagens de programação suportadas pela Common Language Specification (CLS). De acordo com o Turtschi et al (2004, p.10) Como todo código visando a plataforma.net roda com o ambiente CLR, ele é chamado de código gerenciado., isso porque a compilação e o comportamento definido nos metadados do código é gerenciado pelo CLR. Os metadados são um recurso mantido durante a compilação e consultado em runtime pelo CLR permitindo que o mesmo saiba detalhes de como instanciar os objetos, chamar seus métodos e acessar suas propriedades. Segundo Turtschi et al (2004, p.12), As aplicações.net são distribuídas como

15 assemblies, que podem ser um único executável ou uma coleção de componentes.. Ao criar uma aplicação.net em uma linguagem escolhida é gerado um arquivo chamado de Assembly que nada mais é do que um padrão de bits, ou seja, a linguagem de máquina que se torna legível pela substituição dos valores por símbolos de acordo com o tipo do projeto com informações da versão, outros assemblies referenciados por este e suas respectivas versões, os tipos contidos no assembly, permissões de segurança e qualquer outro atributo personalizado. Já na execução do programa, esse arquivo é novamente compilado por meio do CLR de acordo com o ambiente de utilização do programa. O fato de esta arquitetura utilizar a MSIL gera uma possibilidade pouco desejada entre os criadores de software que é a de fazer a "engenharia reversa", ou seja, recuperar o código original a partir de um código compilado. Esta não é uma idéia agradável para as empresas que sobrevivem da venda de softwares produzidos na plataforma.net. Devido a esta característica, existem ferramentas que ofuscam este código MSIL, trocando nomes de variáveis, métodos, interfaces e outros para dificultar o trabalho de quem tentar uma engenharia reversa num código compilado MSIL. Figura 01 Arquitetura da plataforma.net Como é possível ver na Figura 01, todas a linguagens da plataforma.net são

16 compiladas gerando um código MSIL de acordo com a sua respectiva CLS. No próximo nível estão os dois tipos principais de desenvolvimento de aplicação, sendo eles os Web Services e os Windows Forms. Essas aplicações se comunicam usando o XML e o Simple Object Protocol (SOAP) que obtém suas funcionalidades da Base Class Library e rodam no ambiente CLR. Ao lado, é mostrado o Visual Studio.NET que não é necessário para o desenvolvimento de uma aplicação.net, porém, sua arquitetura o torna uma escolha ideal para o desenvolvimento de software nesta plataforma. Outro ponto bastante forte da plataforma.net é o gerenciamento automático de memória mais conhecido como coleta de lixo. No desenvolvimento em C e outras linguagens que não possuíam esse recurso, os desenvolvedores despendiam muito tempo procurando por falhas de memória em seus códigos. Segundo Turtschi et al (2004, p.13), a coleta de lixo é executada quando sua aplicação está aparentemente fora de memória livre ou simplesmente quando ela é chamada, ou seja, quando a aplicação solicita mais memória e não existe mais memória disponível, a coleta de lixo é chamada. Para que o coletor possa liberar espaço na memória, ele sai verificando todos os objetos que a aplicação faz referências, logo após ele realoca esses objetos na memória e atualiza as referências da aplicação para apontarem para a nova posição dos objetos na memória. Depois de feito esse processo de realocação e atualização das referências, o coletor de lixo move a posição o ponteiro da memória para logo após o último objeto referenciado determinando para começar a alocar a memória a partir desse ponto. Para acesso a base de dados, a Microsoft desenvolveu o ADO.NET, sendo este o sucessor do ActiveX Data Objects (ADO) clássico. De acordo com Turtschi at al (2004), a Microsoft está posicionado o ADO.NET para ser a principal ferramenta de acesso a dados do.net Framework, Turtschi et al (2004, p.256) diz ainda que Isso irá garantir que a arquitetura de acesso a dados será madura e robusta, já que todas as linguagens do Common Language

17 Runtime (CLR) estarão usando o ADO.NET como principal meio de comunicação com os provedores de dados. A Figura 02 mostra a interação de aplicações desenvolvidas para algumas plataformas diferentes interagindo com o ADO.NET que realiza o acesso à base de dados. Figura 02 Acesso a Base de Dados por meio do ADO.NET O desenvolvimento do ADO.NET foi baseado na estrutura do extensible Markup Language (XML) o que proporciona um rico suporte para tais documentos. Os objetos do ADO.NET são coerentes com a especificação do XML, o que torna possível abrir um documento XML simples, alterar os dados e salvá-lo, sendo muito útil para a persistência. O ADO.NET possui duas novas formas que trabalham juntas para servir os dados, são elas. A primeira é o DataSet que segundo Turtschi et al (2004) pode ser considerado um banco de dados relacional que fica alocado na memória do computador, porém, desconectado da base de dados e não sabe de onde vieram os dados. O DataSet possui provisões para tarefas múltiplas, relações, chaves primárias, visualizações, classificações entre outros. A segunda forma de servir os dados é com o DataReader onde este é uma estrutura que possui um único sentido, não é atualizável e segue apenas para a frente, sendo utilizado para realizar acessos de leitura a dados.

18 Figura 03 Funcionamento do ADO.NET Quando citado anteriormente, as ferramentas DataSet e o DataReader trabalham juntas, isso porque o DataSet não é conectado diretamente à fonte de dados, o que torna necessária a utilização de um DataAdapter que representa a conexão com a base e é onde ficam guardados os comandos para preencher o DataSet, como mostra a Figura 03. É nesse momento que entra o DataReader, pois o DataAdapter utiliza um DataReader para ir até a base de dados e realizar a busca para preencher o DataSet com os dados requisitados. 1.1.1. Framework No desenvolvimento do software, um framework é uma estrutura de suporte definida em que outro projeto de software pode ser organizado e desenvolvido. De acordo com Gonçalves (2006, p. 351), Um framework é um conjunto de melhores práticas resolvidas sobre os problemas mais comum encontrados em um mesmo lugar.. Um framework pode incluir programas de suporte, bibliotecas de código, linguagens de script e outros softwares para ajudar a

19 desenvolver e juntar diferentes componentes de um projeto de software, sendo projetadas com a intenção de facilitar o desenvolvimento de software. Um Framework se diferencia de um simples toolkit (biblioteca), pois este se concentra apenas em oferecer implementações de funcionalidades sem definir a reutilização de uma solução de arquitetura. 1.2. ASP.NET ASP.NET é uma tecnologia de processamento de solicitação HyperText Transfer Protocol (HTTP) da Microsoft utilizado para transferências de dados pela internet, que evoluiu durante os últimos anos, tornando-se segundo Shepherd (2006) uma das tecnologias mais consistentes, estáveis e ricas com vários recursos disponibilizados para gerenciar as solicitações HTTP. De acordo com Turtschi et al (2004) O ASP.NET é a atualização da Microsoft para o Active Server Pages (ASP).. Devido a uma mudança na maneira de desenvolver partindo do ASP clássico que praticamente não tinha ferramentas próprias e ganhando um ambiente completo, conseguindo assim um aumento no desempenho, flexibilidade e redução no trabalho de codificação, podendo escrever páginas ASP.NET em qualquer uma das linguagens suportadas pelo CLR e tendo um aumento significativo no desempenho, pois os códigos são compilados, o que traz mais rapidez e confiabilidade ao código fonte. O ASP.NET é um componente do Internet Information Services (IIS) - servidor web desenvolvido pela Microsoft para seus sistemas operacionais de servidores que segundo Shepherd (2006, p. 37), o IIS intercepta a solicitação e busca o recurso identificado pelo URL retornando a resposta para o navegador que fez a solicitação. O IIS permite através de uma linguagem de programação integrada na.net Framework criar páginas dinâmicas, ou seja, sempre que uma página é requisitada pelo navegador, ela será executada pelo servidor e a partir daí serão gerados

20 códigos em HTML com o resultado dos processos que será enviado para o navegador que o solicitou como mostra a Figura 04. Figura 04 Visão geral da arquitetura ASP.NET Uma das melhorias para o desenvolvedor é na hora de alterar algum código ou o layout da pagina. Antes do ASP.NET era necessário alterar dentro do código HTML existente, o que se tornava complicado e dificultava a manutenção. No ASP.NET existem dois arquivos separados, um de layout e outro com o código, sendo que existe uma linha que vincula os arquivos, isso se chama Code Behind. O modelo code-behind vincula um arquivo somente de código ao arquivo ASPX que contém marcas de apresentação. Portanto, o design pode ser feito sem nenhum problema, inclusive as alterações. Em paralelo o programador pode desenvolver o código, mas também é possível o desenvolver ir inserindo o código dentro da página de design. A Figura 05 mostra como a aplicação em ASP.NET é compilada antes da implantação da aplicação, onde é gerado um arquivo em Assembly que contém todos os arquivos code-behind compilados, por outro lado, a pagina ASPX é compilada em tempo de execução na primeira solicitação em conjuntos de módulo, o que o torna vantajoso pois as próximas requisições serão

21 carregadas a partido dos módulos. Figura 05 Modelo de Code-Behind no ASP.NET Como o ASP.NET foi projetado como uma estrutura aberta, muitos módulos e componentes que constituem o ASP.NET podem ser estendidos, por exemplo, uma aplicação para web desenvolvida em ASP.NET pode reutilizar código de qualquer outro projeto escrito para a plataforma.net, mesmo que em linguagem diferente. Uma página ASP.NET escrita em VB.NET pode chamar componentes escritos em C# ou Web Services escritos em C++, por exemplo. Ao contrário da tecnologia ASP, as aplicações ASP.NET são compiladas antes da execução, trazendo um sensível ganho de desempenho. As aplicações Web ASP.NET necessitam do framework.net e do servidor IIS para executar, pelo menos na plataforma Windows. Existem alguns projetos que estão se esforçando para permitir que aplicações ASP.NET possam ser executadas em outras plataformas, como por exemplo, o projeto Mono para o Linux.

22 1.3. C# O CSharp (C# pronuncia-se "cê chárp" em português ou "cí charp" em inglês) é uma linguagem de programação orientada a objetos criada pela Microsoft junto com a arquitetura.net, e que teve como base para o desenvolvimento do C# a linguagem C++ e Java. De acordo com Turtschi et al (2004, p. 22) A C# é uma linguagem moderna. Ela suporta o conceito de tipos de dados, fluxo de instruções de controle, operadores, arrays, propriedades e exceções., ele ainda diz que o C# é uma linguagem orientada a objetos e que suporta o conceito de classes e toda a natureza orientada a objetos, incluindo encapsulamento, a herança e o polimorfismo. O C# está altamente vinculada ao.net framework suportando interfaces como a coleta de lixo do CLR sendo, a partir deste vinculo que ele obtém suas classes e/ou funções para a execução da aplicação. O código em C# é organizado em um conjunto de namespaces (NameSpaces são, ao "pé-da-letra", Espaços para Nome, ou seja, é possível atribuir um nome para um elemento, criando assim o seu próprio elemento) que agrupam as classes com funções similares para sistemas diferentes. Embora tenham várias outras linguagens que suportam a tecnologia.net, o C# é considerada a linguagem principal dessa arquitetura, isso se deve ao fato dela ter algumas vantagens como: Foi totalmente desenvolvida para rodar na nova plataforma da Microsoft, sendo assim, não apresenta problemas de compatibilidade; O compilador do C# foi o primeiro a ser desenvolvido, tornando-se base para os demais; A maior parte das classes desse framework foi desenvolvida na linguagem C#; As estruturas de dados primitivas do C# são objetos que correspondem a tipos em.net.

23 A desalocação automática de memória pelo coletor de lixo além de várias de suas abstrações tais como classes, interfaces, delegados e exceções são nada mais que a exposição explicita dos recursos do ambiente.net. Muitos dos produtos e iniciativas da Microsoft geram polêmica no campo político e a criação e desenho da C# não foi exceção. Devido à natureza fechada do C# com uma instituição comercial, a discussão política continua em relação à legitimidade da sua normalização, a sua semelhança com Java, o seu futuro como uma linguagem para uso generalizado e outros assuntos. Alguns peritos em segurança encontram-se cépticos em relação à eficácia do mecanismo de segurança do CLR e criticam a sua complexidade. Ao contrário de linguagens proprietárias, tal como o Visual Basic, a Microsoft optou por submeter a C# a um processo de normalização. No entanto, a Microsoft continua a ser a principal força a induzir mudanças e inovação na linguagem. Além disso, a Microsoft tornou bem claro que a C#, tal como outras linguagens.net, é uma parte importante da sua estratégia de software, tanto para uso interno e para consumo externo. A Microsoft se encarrega ativamente do papel de publicitar a linguagem como uma componente da sua estratégia global de negócios. 1.3.1. Orientação a Objetos A orientação a objetos (OO), ou também conhecida como programação orientada a objetos (POO) ou ainda em inglês Object-Oriented Programming (OOP) é um paradigma de análise, projeto e programação de sistemas baseado na composição e interação entre os dados chamados de objetos. De acordo com Gonçalves (2006, p. 14), Um objeto é uma entidade tida por nós como sólida. Um computador, um carro, um cachorro, por exemplo, são objetos do mundo físico., tais objetos possuem propriedades e métodos. Por meio das propriedades, é

24 possível modificar os objetos e a mesma propriedade pode ser aplicada a diferentes objetos. Os métodos indicam quais ações os objetos podem realizar. As classes são unidades de programação que contêm propriedades e conjuntos de métodos que manipulam os dados e é a partir da classe que os objetos são instanciados, ou seja, criados em algum momento para realizar alguma tarefa. Com base em Deitel et al (2003), na programação orientada a objetos, são determinadas um conjunto de classes necessárias para implementar o sistema, as propriedades e os métodos necessários definem como um objeto de cada classe colabora para atingir os objetivos do sistema, ou seja, cada classe encapsula o comportamento e estados possíveis de seus objetos por meio dos métodos e atributos respectivamente, como também o relacionamento com outros objetos sendo eles amarrados entre si. Segundo Deitel et al (2003, p.373), embora os objetos possam saber como se comunicar uns com os outros por meio de interfaces bem definidas, os objetos não tem permissão para conhecer como os outros objetos são implementados, tais detalhes referentes à implementação, ficam restritos dentro dos próprios objetos. As linguagens de programação mais importantes com suporte a orientação a objetos são: Smalltalk, Perl, Python, Ruby, Php, ColdFusion, C++, Object Pascal, Java, JavaScript, ActionScript e C#. 1.4. JavaScript Com base em Gonçalves (2006), o JavaScript é uma linguagem de programação desenvolvida por Brendan Eich da Netscape no ano de 1995 e se trata da primeira linguagem de script da web a ser introduzida e é a mais popular por ser quase tão fácil como o HTML. A princípio se chamava LiveScript, e pretendia atender algumas necessidades que surgiram de

25 acordo com a evolução da web que se tornava mais dinâmica e tinha a necessidade de ter maior interação com o usuário como por exemplo a validação de formulários no lado cliente, tomar decisões e realizar outras validações simples que não eram possíveis de serem feitos utilizando a linguagem de marcação de texto simples como o HTML. As linguagens de script são mais simples por possuir uma sintaxe fácil de aprender, além de permitirem combinar script com HTML para criar páginas da Web interativas. De acordo com Flanagam (2004, p. 19) JavaScript é uma linguagem de programação leve, interpretada e com recursos de orientação a objetos. Por ser uma linguagem interpretada o navegador executa cada linha de script como as recebe, por isso é importante saber que o JavaScript é sensível ao tipo de letra em sua sintaxe. Portanto, é necessário que seja obedecida a forma de escrever os comandos, caso contrario o JavaScript interpretará, por exemplo, o que seria um comando, como sendo o nome de uma variável. Esses pontos são o que diferem o JavaScript de outras linguagens de programação que devem ser compiladas ou traduzidas em código de máquina antes de serem executadas. O JavaScript não tem quase nenhuma semelhante com o Java a não ser pelo nome e a sintaxe de ambas as linguagens que têm por base as linguagens C e C++. De acordo com Gonçalves (2006, p. 13), Enquanto Java é uma linguagem de programação avançada e poderosa[...] o JavaScript é uma linguagem de scripts[...] e que depende de um programa que a interprete. O que os torna totalmente diferente no conceito e no uso, como por exemplo, a tipagem dinâmica onde os tipos das variáveis não são definidos, é uma linguagem interpretada e não compilada, oferece um bom suporte a expressões regulares e possui ótimas ferramentas padrão para listagens, sendo as duas últimas, características das linguagens de script. Utilizando o JavaScript é possível realizar tarefas diversas como adicionar mensagens que rolam na tela, alterar as mensagens na linha de status do navegador, validar os conteúdos de

26 um formulário, fazer cálculos, exibir mensagens para o usuário, tanto como parte de um pagina da web como em caixas de alertas, fazer animações de imagens ou criar imagens que mudam quando você move o mouse sobre elas, detectar o navegador em utilização e exibir conteúdo diferente para navegadores diferentes, detectar plug-ins instalados e notificar o usuário se um plug-ins foi exigido. A partir do JavaScript foi desenvolvido um padrão conhecido como European Computer Manufacturers Association (ECMA) que é o responsável pela padronização de grande parte das tecnologias que já utilizamos ou que ainda utilizaremos. O ECMA define apenas características intrínsecas da linguagem e seu compilador (no caso do JavaScript, interpretador), tais como: Sintaxe, Convenções léxicas, Tipos e Conversões, operadores e expressões aritméticas e booleanas, funções e objetos nativos, estruturas de controle e várias outras definições). Assim como o HTML, o JavaScript exige um navegador da web para ser exibido e navegadores diferentes podem exibi-lo de forma diferente. Diferente do HTML, os resultados de incompatibilidade de navegador com o JavaScript são mais drásticos como: em vez de exibir seu texto incorretamente o script absolutamente pode não executar, exibir uma mensagem de erro ou até derrubar o navegador. O Common Gateway Interface (CGI) é uma especificação que permite aos programas serem executados em um servidor da Web e não uma linguagem de programação, podendo ser escritos em C, Visual Basic ou outras linguagens de programação. Os programas utilizando CGI são muito utilizados na Web, muito provavelmente, se você já digitou uma informação num formulário e pressionou o botão para enviá-las para um site da Web, elas foram enviadas para um aplicativo de CGI. O JavaScript, diferentemente do CGI, é executado no cliente, ou seja, no navegador Web, enquanto o CGI é executado no servidor, sendo esta, a principal desvantagem do CGI

27 frente ao JavaScript pois, como os dados devem ser enviados para o servidor e retornados ao navegador Web, o tempo de resposta pode ser lento. Por outro lado, o CGI pode enviar um arquivo para o servidor, funcionalidade que o JavaScript não suporta, ou seja, o JavaScript apenas manipulas as informações, ele não armazena dados. O JavaScript trata suas estruturas básicas, propriedades do navegador e os elementos de uma página HTML como objetos (entidades com propriedades e comportamentos) e permite que sejam manipulados através de eventos do usuário programáveis, operadores e expressões. Ele oferece também recursos interativos que faltam no HTML e permite a criação de páginas interativas e dinâmicas, que são interpretadas localmente pelo navegador, sem precisar recorrer a execução remota de programas no servidor. 1.5. CSS Cascading Style Sheets (CSS) ou simplesmente folha de estilos, é uma página que contém definições ou especificações de diferentes estilos que são utilizados para definir a apresentação de documentos HTML ou XML. Com base em Gonçalves(2006), o CSS teve seu inicio com Hakon Wium Lie e Bert Bos no ano de 1994. De acordo com Flanagam (2004, p. 272) A capacidade de criar script com estilos de CSS permite alterar dinamicamente cores, fontes e assim por diante. Acima de tudo, permite configurar e alterar a posição dos elementos e até ocultar e mostrar elementos. O principal benefício do CSS é prover a separação entre o formato e o conteúdo de um documento, oferecendo ao web designer (pessoa responsável pelo desenvolvimento da camada de apresentação da aplicação) novas ferramentas que dá, segundo Gonçalves(2006) algumas vantagens como: - Reutilização dos estilos, onde define a mesma forma de apresentação de todo o

28 documento HTML ou em apenas parte dele é padronizado; - Etiquetas para a utilização, podendo definir vários estilos para uma mesma etiqueta; - Reutilização do código; - Simplicidade do código HTML, reutilizando os códigos do CSS para tarefas como colocar elementos na página com maior precisão, distância entre as linhas do documento, visibilidade dos elementos, margens, sublinhados, etc.; Porém, essa tecnologia deve ser utilizada com cuidado, pois como ela é relativamente nova, tendo sido lançada oficialmente pelo World Wide Web Consortium (W3C) que é uma entidade responsável pela definição da área gráfica da internet, o CSS1 é a primeira versão e foi lançado oficialmente em 1996 e a segunda versão chamada de CSS2 foi lançada em 1998. Os navegadores modernos garantem a sua utilização, mas alguns navegadores como versões anteriores ao Netscape 4 ou Internet Explorer 3 por exemplo, não suportam a sua utilização ou não implementam as mesmas funções de folhas de estilo, sendo assim, os documentos podem se apresentar de maneiras diferentes dependendo da versão do browser. Figura 06 Modelo tradicional de aplicação web A Figura 06 mostra o modelo tradicional das aplicações web, onde o navegador do cliente realiza uma requisição via HTTP ao servidor web e este acessa a base dados em busca dos dados requisitados, devolvendo para o navegador um código em HTML com o que o cliente requisitou, juntamente com parametrizações em JavaScript e/ou CSS referentes à página.

29 1.6. HTML HyperText Markup Language ou apenas HTML, significa Linguagem de Marcação de Hipertexto, foi criada em 1990 pelo cientista Tim Berners-Lee. A sua finalidade era apenas tornar possível o acesso e a troca de informações e documentações de pesquisas entre os cientistas de diversas universidades. Segundo Lemay (1998, p. 47), o HTML se baseia na SGML (Standard Generalized Markup Language), que consiste em um sistema de processamento de documentos bem maior.. Lemay (1998) cita ainda que para desenvolver páginas em HTML, não é necessário conhecer mais do que uma das principais características da SGML que ela não descreve a estrutura geral do conteúdo do documento e não a apresentação desse documento para o usuário. O HTML devido a sua herança do SGML é uma linguagem de marcação utilizada para a construção de páginas web que inicialmente limitava-se a apenas exibir informações contidas nos documentos, tendo a idéia de que os documentos possuem elementos em comum como, por exemplo, cabeçalhos, títulos, parágrafos, listas e tabelas. Devido ao fato de que os documentos HTML eram apenas para exibir informação, eles são interpretados pelos navegadores, ou seja, os navegadores reproduzem exatamente como eles foram escritos, linha a linha. Devido à constante evolução da Web em geral, a linguagem passou a ter a necessidade de ter uma maior flexibilidade para manipular visualmente os conteúdos e, juntamente com a evolução da linguagem e com a introdução gradativa de novas tags, atributos e aplicações específicas, o HTML tornou-se padrão mundial de apresentação de páginas de conteúdo na Web. 1.7. DHTML A utilização do JavaScript em conjunto com o Cascading Style Sheets (CSS), permite tornar os sites mais interativos para os usuários dando mais movimento, dinamismo e o HTML

30 simples fica conhecido como Dynamic HTML. O Dynamic HTML ou simplesmente DHTML é, de acordo com Gonçalves (2006, p. 04) a união das tecnologias HTML, JavaScript e a CSS aliada ao Document Object Model (DOM), para permitir que uma página Web seja modificada dinamicamente na própria máquina cliente, sem a necessidade de novos acessos aos servidor Web que permite que a pagina web seja modificada na máquina que fez a requisição não tendo a necessidade de realizar novos acessos ao servidor web. O DHTML é uma nova tecnologia da web que deixa os elementos de uma página como textos, imagens, posição dos elementos e estilos de páginas mais dinâmicos, ou seja, tudo pode ser mudado dinamicamente. Segundo Lemay (1998), o Dynamic HTML foi projetado para melhorar a capacidade do projetista de controlar a aparência do documento no navegador do usuário, proporcionando um controle preciso em relação ao posicionamento exato de elementos em uma página, ou seja, é graças ao DHTML que hoje é possível desfrutar de interatividades semelhantes às encontradas em sistemas para desktop. Para tornar os sites mais interativos, o DHTML utiliza scripts, embora seja possível a utilização de várias linguagens para escrever os scripts, as mais popularmente utilizadas são JavaScript e o VBscript. 1.8. DOM O Document Object Model (DOM) ou traduzido para o português como Modelo de Objeto de Documentos é, segundo Flanagam (2004, p.240) é uma interface de programação de aplicativos (API Applications Programming Interface) para representar um documento (como um documento HTML) e acessar e manipular os vários elementos (como marcas HTML e strings de texto) que compõe esse documento. De acordo com Gonçalves (2006, p.72), O DOM é uma plataforma e uma linguagem

31 de interface neutra que permitirá programas e scripts acessar dinamicamente e atualizar o conteúdo, estrutura e estilos de documentos, ou seja, ele é um mecanismo que permite a programação DHTML sendo um modelo de objetos expostos pelo navegador que permite através do Event Model (Modelo de Evento) acessar eventos do usuário e torná-los acessíveis por uma linguagem de script como o JavaScript. O Event Model permite que o documento HTML reaja a ações (eventos) do usuário como, por exemplo, pressionar uma tecla ou arrastar o ponteiro do mouse sobre um elemento. Como os scripts que contém a programação para essas ações são executados no navegador do usuário, existe um grande ganho de desempenho e velocidade com que são executadas as ações. O DOM foi definido pela W3C em cinco categorias de acordo com Gonçalves (2006) que são descritas a seguir: DOM Core é a especificação de um modelo genérico, onde é possível ver e manipular os documentos em estilo de árvore. DOM HTML essa especificação é uma extensão do DOM Core, porém com a capacidade de manipular todos os elementos de um documento HTML. Ele utiliza uma sintaxe de programação bem semelhante ao JavaScript. DOM CSS é a especificação das interfaces necessárias para manipular as regras do CSS. DOM Events essa especificação adiciona eventos de controle ao DOM que variam desde eventos de interface como cliques de mouse até eventos que são mais específicos, disparados quando é modificada alguma parte da árvore do documento. DOM XML essa especificação é uma extensão do DOM Core para ser utilizada com XML onde ela capta necessidades particulares do XML. O DOM vê o documento como uma estrutura de dados caracterizados por uma relação

32 de hierarquia entre os elementos que fazem parte dele montando uma estrutura semelhante a uma árvore. Com base em Gonçalves (2006), é possível representar qualquer documento HTML ou XML como uma árvore, sendo necessário apenas que este documento esteja bem formatado. A figura 07 a seguir ilustra a representação em árvore de um documento HTML com suas tags básicas em forma de árvore. Figura 07 Árvore de um documento HTML simples Como é possível observar na Figura 07, o elemento <HTML> contém os elementos <HEAD> e <BODY>. Apenas o elemento <BODY> contem outros elementos que são <H1> e o <P>. O elemento <H1> contém uma string Texto, já o elemento <P> contém a string Paragrafo. 1.9. XML Estimulado pela insatisfação com os formatos existentes (padronizados ou não), o W3C começou a trabalhar em meados da década de 1990 em uma linguagem de marcação que combinasse flexibilidade com a simplicidade da HTML. O principio do projeto era criar uma linguagem que pudesse ser lida por software, e integrar-se com as demais linguagens.

33 Segundo Gonçalves (2006, p. 127) XML significa extensible Markup Language (Linguagem Extensível de Marcação) e tem como característica sua semelhança em tags e atributos com o HTML. O XML é considerado uma grande evolução das linguagens para a Web que teve como base a General Markup Language (GML), desenvolvida pela IBM nos anos 70. XML é uma linguagem que foi desenvolvida para superar as limitações do HTML, sendo definida como o formato universal para dados estruturados na Web, consistindo em tabelas, desenhos, parâmetros de configurações, entre outros, ou seja, a linguagem define as regras que permitem escrever documentos de forma que sejam adequadamente visíveis ao computador, não tratando da apresentação das informações, mas apenas do conteúdo a ser apresentado, tendo assim um papel importante na globalização e na compatibilidade entre os sistemas, pois, o seu propósito principal é a facilidade de compartilhamento de informações com segurança, confiabilidade e facilidade através da Internet. O XML é um formato para a criação de documentos com dados organizados de forma hierárquica, como se pode ver freqüentemente em documentos de texto formatados, imagens vetoriais (imagem gerada a partir de descrições geométricas de formas, diferente das imagens chamadas mapa de bits, que são geradas a partir de pontos minúsculos diferenciados por suas cores) ou bancos de dados (são conjuntos de dados com uma estrutura regular que organizam informação). Como se trata de um formato texto-puro, XML pode ser criado e editado em qualquer dos mais recentes editores de textos. Conhecendo-se a sintaxe de XML, é possível escrever documentos "na mão" tão válidos quanto os gerados por programas automatizados. A extensibilidade do XML é tanta, que muitas corporações vêm adicionando funções XML em seus produtos, como a Microsoft, Oracle, IBM, Google e Sun. É uma linguagem que tende a alcançar um sucesso cada vez maior, não só no segmento de comércio eletrônico, como vem acontecendo, mas em praticamente todas as áreas da Web.

34 O XML é basicamente um formato de texto unicode bastante simples que representa dados de forma semi-estruturados que podem ser considerados como uma combinação de texto e estrutura que no caso da XML é fornecida pelas tags que carregam o valor e outras informações que descrevem o dado tornando um documento auto-explicativo. 1.10. WEB 2.0 O termo Web 2.0 faz referência a uma nova fase da Web que dá ênfase a ferramentas e plataformas que permitam ao usuário não ser apenas um receptor de informações, mas também um produtor delas. Porém, este termo tem gerado muita discussão, pois alguns defendem que esta atual fase da Web é uma evolução, o que não utilizaria o termo Web 2.0 e os que defendem que esta nova fase é uma inovação e que por isso defendem o termo Web 2.0. Como cita Tim O Reilly (2005): Web 2.0 é a mudança para uma internet como plataforma, e um entendimento das regras para obter sucesso nesta nova plataforma. Entre outras, a regra mais importante é desenvolver aplicativos que aproveitem os efeitos de rede para se tornarem melhores quanto mais são usados pelas pessoas, aproveitando a inteligência coletiva. Para a realização deste trabalho, foi seguida a linha de raciocínio de Tim O`Reilly, que foi quem iniciou o pensamento da Web 2.0 que se diferencia do modelo anterior (Web 1.0) com seus sites estáticos e com conteúdo pré-programado para aparecer pro usuário. Atualmente alguns fatores contribuem para o avanço e melhorias da Web 2.0, tais como: o aumento de pessoas usando a internet devido a popularização da banda larga e a popularização de tecnologias que possibilitam os sites serem desenvolvidos implementando as características da Web 2.0 citadas abaixo:

35 Participação: mais pessoas utilizando a internet e com liberdade para alterar o conteúdo, gerando uma Inteligência Coletiva (exemplo: Wikipedia); Cooperação: não existência do controle dos dados dos sites por meio de pessoas responsáveis pelo seu desenvolvimento, possibilitando assim a utilização e constante melhoria dos serviços já criados (exemplo: Google Maps); Usabilidade: facilitação no uso, tornando os sites mais intuitivos, onde os testes são realizados com grande freqüência e com uma grande quantidade de usuários. Confiança no conteúdo: os usuários estão constantemente avaliando, corrigindo e sugerindo, assim, as informações erradas são rapidamente denunciadas; Experiência rica para o usuário: as páginas estão cada vez mais leves, rápidas e interativas, ficando cada vez mais com seu formato próximo aos aplicativos para Desktop; Personalização: os usuários têm a possibilidade de escolher o próprio conteúdo; Além das características citadas acima, são necessários também alguns elementos cruciais para que um site seja considerado integrante da família Web 2.0, sendo eles: Usuário: principal objetivo dos sites, sendo eles os responsáveis por criar, avaliar, editar, organizar, compartilhar e escolhendo como e o que deseja ver; Conteúdo: a preocupação nessa nova versão da Web não está mais em publicar o conteúdo, mas sim em criar alternativas que ajudem a selecioná-lo, organizá-lo e distribuí-lo; Organização: utilização da Folksonomia, que é a criação de tags pelo usuário para que ele possa definir qual a categoria de um determinado site (exemplo http://del.icio.us); Avaliação: denuncia de erros e abusos, com um estímulo à avaliação; Distribuição: disponibilização do conteúdo por meio do bom uso de vários dispositivos;

36 Designer: estimular o usuário a fazer parte da web permitindo autonomia, facilidade e simplicidade na busca por informação e colaboração para o desenvolvimento desta; Com essas características e elementos citados acima, os sites que fazem parte da família Web 2.0, permitem aos seus desenvolvedores construir novos serviços em cima de serviços disponibilizados por sites já existentes, sendo construídos e disponibilizados em cima de arquiteturas de Web Services, transformando as aplicações em provedores de serviços e a web em plataforma para estes serviços. Para isso, os desenvolvedores devem seguir algumas tendências como: layout simples, projeção do conteúdo e não da página, utilização de espaços em branco, textos grandes com cores fortes e contrastantes. Figura 08 Conceitos da Web 2.0 A Figura 08 fez um resumo do que é necessário para se ter um site dentro dos padrões da Web 2.0 mostrando as tecnologias que a implementam, os serviços disponibilizados, o modelo utilizado pela Web 2.0 e a Filosofia na qual se baseiam os conceitos da Web 2.0. O`Reilly (2005) diz ainda que Pode-se ter certeza de que, se um site ou produto depende de publicidade para se tornar conhecido, não é Web 2.0.

37 2. AJAX AJAX significa Asynchronous Javascript And XML e segundo Gonçalves (2006), o termo AJAX foi lançado por Jesse James Garrett em um artigo on-line publicado em fevereiro de 2005 e pode ser lido na íntegra em http://www.adaptivepath.com/publications/essays/archives/000385.php. A técnica do AJAX consiste em utilizar tecnologias incorporadas que tem como as principais o JavaScript e o XML. A utilização em conjunto dessas tecnologias, torna possível a criação de páginas que executam códigos e os apresentam para o usuário sem a necessidade de recarregar a página por completo. 2.1. Conceitos AJAX é o uso de tecnologias como Javascript e XML fazendo com que o navegador carregue conteúdo do servidor sem recarregar a página atual, o que torna o navegador mais interativo, transformando as páginas semelhantes às aplicações Desktop. AJAX não é uma tecnologia, são algumas tecnologias trabalhando juntas, onde cada uma faz a sua parte, não sendo somente um novo modelo, é também uma iniciativa na construção de aplicações web mais dinâmicas e criativas oferecendo assim, novas funcionalidades. O modelo clássico de aplicação web trabalha de forma que a maioria das ações do usuário na interface dispara uma solicitação para o servidor web, o servidor realiza o processamento recuperando dados, realizando cálculos, conversando com outros sistemas e então retorna a solicitação para o usuário. Enquanto o servidor está fazendo seu trabalho, o usuário está esperando, e a cada etapa em uma tarefa, o usuário aguarda mais uma vez. Com base em Gonçalves (2006), a idéia do AJAX é tornar esse processamento do servidor mais simples, ou seja, se o usuário já está com a página carregada, ele carrega apenas os conteúdos solicitados,

38 reduzindo o tempo de processamento do servidor e o tráfego na rede. De acordo com esse conceito, Gonçalves (2006, p. 5), O AJAX contém um mecanismo que na realidade é um conjunto de funções escritas em JavaScript que são chamadas sempre que uma informação precisa ser pedida ou enviada ao servidor.. Sendo assim, a maior vantagem das aplicações AJAX é que elas rodam no próprio navegador então, para estar hábil a executar aplicações com AJAX, é necessário apenas possuir algum dos navegadores modernos que já oferecem suporte às tecnologias utilizadas pelo AJAX, sendo os mais populares o Mozilla Firefox, Internet Explorer, Opera, Konqueror e Safari. 2.2. Aplicações O principal problema resolvido com AJAX é a substituição da conhecida tela escondida que era implementado como única solução para a realização de requisições ao banco, submissão de formulários, validações, enfim tudo que fosse necessário para não realizar um refresh da página sem recarregar toda a página atual. A utilização do hidden frame apresentava alguns problemas como: Páginas com vários quadros; Quando ocorriam erros na página escondida, estes não eram rastreados com facilidade; Dificuldade de manutenção; O desenvolvedor, ao ver uma já implementada, tinha bastante receio em adicionar ou modificar alguma funcionalidade dela, pois poderiam ocorrer erros em outros locais; Não se tinha um local que centralizasse e controlasse todas as requisições; AJAX resolve este problema, possibilitando, através de um único método, realizar request e receber responses com ilimitadas respostas, ou seja, a comunicação cliente-servidor fica

39 transparente, fazendo com que sem nenhuma dificuldade o desenvolvedor possa acessar métodos do servidor quase como se fosse um método JavaScript. - Validação em tempo real: São validações que não podem ser feitas no navegador do cliente, pois dependem de informações que estão no servidor, como, por exemplo, verificar se um usuário já está cadastrado ou se a data informada é anterior à data atual; - Auto Complete: permite que ao mesmo tempo em que o usuário for digitando, uma lista de possíveis respostas é apresentada para que o usuário possa escolher alguma resposta. Como exemplo, existe Google Suggest (http://www.google.com/webhp?complete=1&hl=en); - Atualização apenas da informação solicitada: permite carregar apenas as informações solicitadas pelo usuário, ao invés de carregar todos os dados na tela novamente ou então necessitar de janelas auxiliares podendo montar a lista de itens-pai e dependendo da escolha, montar os detalhes do item. Esse tipo de atualização permite o desenvolvimento de chats (http://www.qwadchat.com), notícias (http://digg.com/spy) ou aplicações que tem a necessidade de serem atualizadas constantemente; - Interface de usuário sofisticada: são controles dinâmicos como árvore de diretórios, menus, barras de progresso, apresentando uma interface rica semelhante às aplicações desktop ou implementar jogos sem necessidade de refresh. Um exemplo de interface rica pode ser visualizado no site Flickr (http://flickr.com/), onde o usuário pode organizar uma coleção de fotos com diversos recursos, como por exemplo, com utilização de drag n drop; 2.3. Estado da Arte AJAX não é exatamente uma tecnologia, mas um termo que define uma nova abordagem um conjunto de tecnologias existentes para formar uma ferramenta de criação de

40 aplicações web onde, segundo Gonçalves (2006), o AJAX é composto pelas seguintes tecnologias: Apresentação visual baseada nos padrões HTML/XHTML e CSS; Exposição e interação dinâmica com o usuário através do DOM; Intercâmbio e manipulação de dados utilizando XML; Recuperação de dados de forma assíncrona com XMLHttpRequest; JavaScript responsável por unir as tecnologias acima do lado do usuário; Combinando estas tecnologias as aplicações web são capazes de fazer atualizações incrementais e rápidas na interface do utilizador sem ser preciso recarregar novamente toda a página. Com isto, se obtém uma maior velocidade nas respostas às ações do usuário, pois não é preciso recarregar informações que não serão atualizadas, assim podendo criar aplicações web mais parecidas com aplicações desktop. 2.4. Tecnologias Utilizadas pelo AJAX Como se pode ver na Figura 09, o AJAX é uma combinação de várias tecnologias que foram apresentadas nos capítulos anteriores como JavaScript, CSS, DHTML e XML. Além das tecnologias já apresentadas, o AJAX faz uso também de outras tecnologias que serão mais bem apresentadas a seguir, como o XMLHttp e XMLHttpRequest.

41 Figura 09 Tecnologias utilizadas pelo AJAX A Figura 09 expõe bem como são integradas as tecnologias para a utilização dos recursos da metodologia AJAX onde são utilizados os conceitos de cada uma das tecnologias e que no conjunto, forma o AJAX. 2.5. AJAX Frameworks Para facilitar o desenvolvimento de aplicações Web, pode-se utilizar um Framework, que irá agilizar, descomplicar e padronizar as aplicações Web. A grande vantagem dos frameworks é que eles geram o código pronto de muitas operações básicas e com isso os desenvolvedores de aplicações Web ficam com mais tempo disponível para implementar as tarefas mais difíceis dos sites, pois das mais comuns, os frameworks já se encarregam. Entre as tarefas que os frameworks implementam estão os recursos em AJAX, como a utilização do objeto XMLHttpRequest. Com isso, é possível que boa parte da implementação

42 necessária para que os módulos interajam com o envio de solicitações entre o cliente e o servidor possa ser implementada e gerenciada pelos frameworks. Existem dezenas de frameworks para AJAX. Abaixo estão selecionados alguns dos Frameworks Web que implementam os recursos do AJAX: AJAXLIB É uma classe escrita em JavaScript e que pode ser utilizada em conjunto com várias linguagens, como PHP, PERL e JSP. É uma ferramenta simples e indicada para aplicações que não requerem muitos recursos. Esse produto possui código aberto. (AJAXLIB, 2007) ASP.NET AJAX É um framework da Microsoft que vem integrado ao ASP.NET. Com uma biblioteca que contém vários componentes prontos, ele permite facilmente incorporar no site funções de dragand-drop, menus dinâmicos, popup com informações temporárias (Exemplo: calendário), controle de painéis na página, blocos sempre visíveis mesmo com rolagem da página, controle de campos drop-down em cascata (alterando um campo atualiza os demais), controle de animações, etc. No site do produto, é possível ver todos os componentes disponíveis para o ASP.NET AJAX e exemplos interessantes para sua utilização. (ATLAS, 2007) DOJO O Dojo é um toolkit DHTML escrito em Javascript e independente de plataforma. Seu foco está no desempenho, por isso é recomendado se o uso de JavaScript for intenso. Possui uma API complexa e sua documentação não é muito completa. É um dos frameworks mais antigos, seu desenvolvimento foi iniciado em setembro de 2004 e hoje é considerado um dos produtos mais maduros. Um recurso que diferencia o Dojo é seu suporte aos botões Voltar e Avançar, possibilitando registrar um método de retorno de chamada que será acionado se o usuário clicar no botão Voltar ou Avançar. Esse produto possui código aberto (DOJO, 2007).

43 DWR O Direct Web Remoting (DWR) é um framework Java para rodar aplicações AJAX. DWR é um dos mais conceituados frameworks AJAX disponíveis para a plataforma Java. Tudo funciona de maneira simples e é de fácil aprendizado. A estrutura do código fonte Java fica acessível ao cliente via JavaScript, não existindo uma distinção entre lado cliente e servidor do ponto de vista do desenvolvedor. Tudo é feito de forma transparente, pois o DWR cuida de todo processo de criação e manipulação do XMLHttpRequest. Esse produto possui código aberto (DWR, 2007). ECHO2 Echo2 é um framework desenvolvido em Java que cria a interface baseada em templates HTML, não necessitando que o desenvolvedor saiba HTML ou JavaScript, apenas tenha conhecimento em Java. O desenvolvimento fica muito parecido com o feito utilizando o Swing. Esse produto possui código aberto (ECHO2, 2007). GWT Com o Google Web Toolkit (GWT), é possível transformar uma aplicação feita em Java em aplicações Web com AJAX integrado ao HTML, CSS e JavaScript. A aplicação já fica pronta para rodar em qualquer navegador da maneira mais leve possível. Além disso, o GWT oferece bibliotecas prontas para que qualquer um possa colocar os recursos de AJAX facilmente em seu site sem precisar maiores conhecimentos de programação. O GWT foi utilizado pela Google para desenvolver os sites Google Maps e Gmail. Pode ser integrado com qualquer IDE Java. Existem versões do GWT para Linux e Windows (GWT, 2007).

44 MOCHIKIT O Mochikit extrai algumas funcionalidades do Python para sua API. A biblioteca também é distribuída com a versão do framework do Python para Web, chamada de TurboGears. O código do Mochikit é muito limpo e fácil de utilizar. Sua estrutura de log é muito boa (MOCHIKIT, 2007). PROTOTYPE O Prototype Implementa um conjunto inteiro de efeitos visuais, assim como o drag-anddrop e alguns componentes de interface com o usuário. O suporte ao AJAX é razoavelmente direto e bem desenvolvido, uma vez que foi desenvolvido para Ruby on Rails. O Prototype é um dos framework mais utilizado. O que contribui para isso é a facilidade de uso de suas funções e sua documentação bem detalhada. Seu código é todo escrito em JavaScript. Esse produto possui código aberto (PROTOTYPE, 2007). SAJAX O SAJAX (Simple AJAX Toolkit) é um framework para AJAX com implementações do lado do servidor. Possui implementações para PHP, ASP, ColdFusion, Perl, Python, Ruby entre outros. Esse produto possui código aberto. (SAJAX, 2007) SYMFONY É um Framework desenvolvido em PHP e traz como características a geração de código tableless e opção de internacionalização. Utiliza o modelo MVC para separação do código gerado. Esse produto possui código aberto (SYMFONY, 2007). XAJAX XAJAX é uma biblioteca de funções em PHP para facilitar o uso de AJAX. São bibliotecas desenvolvidas como software livre. Os Frameworks SAJAX e XAJAX possuem uma diferença básica, enquanto no SAJAX o retorno é tratado em uma função JavaScript, no XAJAX

45 o retorno é feito em uma função do PHP, assim como os comandos e eventos adicionados são feitos no PHP, resguardando o código JavaScript. O XAJAX também tem a vantagem de funcionar muito bem nos três principais navegadores: Internet Explorer, Firefox e Opera (XAJAX, 2007). XOAD É um framework desenvolvido em PHP e baseado nos recursos do AJAX. Tem como característica principal ser orientado a objetos. Utiliza JSON e objetos PHP para fazer a comunicação entre cliente e servidor. Possui uma documentação bem completa, descrevendo todas as suas classes, métodos e variáveis. No site oficial, podem ser encontrados vários exemplos de utilizam deste framework. Esse produto possui código aberto (XOAD, 2007). Yahoo! UI A biblioteca Yahoo! UI (YUI) foi desenvolvida pelo Yahoo! para desenvolvimento dos seus sites e teve seu código aberto junto com uma gama de recursos excelentes para desenvolvedores. O YUI é mais uma coleção distinta de "utilidades" do que uma biblioteca, com cinco scripts principais que tratam de: animação, AJAX, manipulação DOM, drag-and-drop, tratamento de eventos. Existem seis controles, chamados de: Calendar, Slider, Menu, AutoComplete, TreeView, Container classes (com o qual é possível executar janelas no estilo de widgets). Todos esses controles possuem exemplos no site do Yahoo para serem baixados. É um framework voltado para aplicações menores, pois não possui muitos recursos (DEVELOPER, 2007). 2.6. XMLHttp Segundo cita Gonçalves (2006), o XMLHttp foi desenvolvido pela Microsoft em 2001

46 como um objeto ActiveX (objetos de programação proprietários da Microsoft) lançado junto com a biblioteca que suportava o XML para o navegador Internet Explorer, o objeto XMLHttp foi incluído com a intenção de nada além de manipular objetos XML. Com a propriedade de manipular objetos XML através de um objeto trabalhando em conjunto com o JavaScript, tornouse possível realizar buscas no servidor ser ter a necessidade de recarregar a página. Como o XMLHttp é um objeto ActiveX proprietário da Microsoft, outros navegadores não conseguiam utilizá-lo nativamente. Ao invés do Mozilla permitir acesso aos objetos ActiveX, eles desenvolveram o seu próprio objeto que segundo Gonçalves (2006, p. 5) [...] reproduziram os métodos principais do objeto e propriedades em um objectxmlhttprequest do seu browser nativo possibilitando que esse objeto se tornasse portável para outros sistemas operacionais. 2.7. XMLHttpRequest XMLHttpRequest é biblioteca permite que requisições HTTP sejam feitas via GET ou POST sem que haja a necessidade de um refresh na página. E o resultado pode ser obtido como texto simples (objetoxmlhttprequest.responsetext) ou como objeto DOM que retorna em formato de XML (objetoxmlhttprequest.responsexml). Segundo Gonçalves (2006), requisições realizadas no servidor de aplicação web para trazer dados via método GET, são requisições feitas através da URL como, por exemplo: cadastrousuario.aspx/?id_usuario=4, como é possível verificar na URL de exemplo, inicialmente está o nome do programa a ser utilizado, seguida por um caractere de interrogação?, o nome da variável, um sinal de igual que indica a atribuição de valor para a variável e o valor a ser atribuído na variável. As requisições via método POST são, de acordo com Gonçalves (2006, p.107), [...]

47 muito similar ao pedido via GET, mas se diferencia pela quantidade de que podem ser transmitidas por essa forma, porém, utilizado para o envio de dados ao servidor. Um exemplo pode ser visto da seguinte forma: buscausuario.aspx/?id_usuario=4&nome=jose. Como se pode notar existe o caractere especial & e-comercial que é o separador padrão para o envio de mais de uma variável. Existem algumas outras propriedades existentes no objeto XMLHttpRequest que serão apresentados nos exemplos a seguir. São eles: open, send, onreadstatechange, readstate, setheader, getresponseheader, getallresponseheaders e abort. Segundo Gonçalves (2006), o método open inicia a comunicação com o servidor, o método setheader define o nome da propriedade e o seu valor para o envio do cabeçalho do documento. O método getresponseheader retorna o valor de uma propriedade em específico do cabeçalho, existem ainda o método getallresponseheaders que retorna não apenas uma propriedade conforme o método getresponseheader, mas todas as propriedades existentes no cabeçalho. Por fim, existe o método abort, que serve para interromper a requisição atual. 2.8. Funcionamento Para capturar respostas de páginas dinâmicas, o AJAX utiliza os métodos responsetext e responsexml. Com base em Gonçalves (2006), utilizando a tecnologia JavaScript inserido na página HTML, o navegador do cliente realiza uma chamada assíncrona por um objeto XMLHttpRequest que pode retornar ao servidor web para buscar documentos XML. Após obter este documento XML, se utiliza JavaScript para atualizar o DOM (modelo de objeto) da pagina. Com isto o usuário obtém a atualização da página sem precisar recarregá-la totalmente.

48 2.9. Exemplos Será apresentada a estrutura básica de um código em AJAX, começando com a inicialização do componente até a apresentação na tela do usuário baseados em Gonçalves (2006). Para iniciar um código em AJAX, é necessário instanciar o objeto XMLHttpRequest, conforme é demonstrado na Listagem 01. Após o objeto ter sido instanciado, o próximo passo é iniciar a comunicação com o servidor, sendo nesta fase que se é utilizado o método OPEN do objeto criado permitindo abrir um documento, passar argumentos e receber uma resposta. objxmlhttprequest = new XMLHttpRequest(); objxmlhttprequest.open( GET, /informacoes.xml ) ; Listagem 01 Instanciando um objeto e utilizando método OPEN Analisando o código da Listagem 01, é possível perceber na segunda linha que a página informacoes.xml está sendo aberta no segundo par6ametro por meio do método GET passado no primeiro parâmetro da segunda linha, sendo esses dois parâmetros obrigatórios. É possível também utilizar o método POST nesse momento, porém ele é mais utilizado quando existem muitos parâmetros a serem passados à próxima página. É possível ainda, passar outros três parâmetros opcionais definindo assim o tipo de sincronização (síncrona ou assíncrona) e o nome de usuário e senha, caso a intenção seja acessar uma página protegida. Nesse momento é acionado o método SEND que envia de fato os dados ativando a conexão e fazendo a requisição de informações ao documento aberto pelo método OPEN, aceitando apenas um único argumento, que é uma string para o envio. Caso não haja um envio, é necessário que seja passado o valor null que é o mesmo que passar um valor em branco como pode ser visto na Listagem 02.

49 objxmlhttprequest.send(null); Listagem 02 Utilizando método SEND Neste momento, já se tem pronto o processo de comunicação restando apenas receber o retorno das informações, que podem ser efetuados pelas propriedades responsetext e responsexml. Como visto anteriormente, a propriedade responsetext recebe o retorno de informações no modo de um texto, enquanto que a propriedade responsexml retorna um objeto DOM para que posteriormente possam ser trabalhadas estas informações. Este retorno das informações pode ser visto na Listagem 03. resposta = objxmlhttprequest.responsexml; Listagem 03 Retorno XML Até o momento, foi apresentada a sequência padrão para a utilização do AJAX, porém, como a comunicação é feita de forma assíncrona, ou seja, os dados não necessariamente são carregados ao mesmo tempo em que a página web é apresentada, é necessário verificar em que momento os dados requisitados estão prontos para serem mostrados na tela do usuário. Para essa verificação, é utilizada a propriedade onreadstatechange que permite atribuir uma função que é chamada de acordo com a mudança de estado do documento. Esta atribuição de função pode ser vista na Listagem 04. objxmlhttprequest.onreadstatechange = processadormudancaestado; Listagem 04 Atribuir Função Conforme Listagem 04 mostra, a função processadormudancaestado será chamada sempre que houver uma mudança no estado do documento que é verificada através da propriedade readstate do objeto XMLHttpRequest. De acordo com Gonçalves(2006), a propriedade readstate possui os seguintes valores:

50 0 Não iniciado: O Objeto foi criado, mas o método Open() ainda não foi chamado; 1 Carregando: O método open() foi chamado mas o pedido ainda não foi enviado; 2 Carregado: O pedido foi enviado; 3 Interativo: Uma parte da resposta foi recebida; 4 Completado: Todos os dados foram recebidos e a conexão está fechada; Segundo Gonçalves (2006, p. 117), Toda vez que a propriedade do readstate muda de um valor para outro, o evento de readstatechange dispara e o manipulador de evento onreadstatechange é chamado, executando a função atribuída na Listagem 04. Com estes valores, é possível verificar cada iteração que ocorre no documento, mas o valor mais utilizado é o 4, quando o processo está completado, pois neste momento se pode saber se a comunicação foi realizada, como pode ser visto na Listagem 05. estadoobj = objxmlhttprequest.readstate; Listagem 05 Verificando Estado Porém, se faz necessário ainda se assegurar que o resultado da resposta é 200, pois mesmo recebendo um retorno de documento completado, não é possível ter a certeza que este retorno é o esperado ou não, pois, a propriedade status informa, dentre outros códigos, o 404 e o 200, que significam respectivamente, Documento Não Encontrado e OK. A Listagem 06 mostra um exemplo na de como é utilizada esta propriedade. estadoservidor = objxmlhttprequest.status; Listagem 06 Resposta do Servidor Com os exemplos apresentados até o momento, já é possível abrir uma conexão com o servidor, enviar parâmetros para processamento, receber o retorno das informações fornecidas pelo servidor e saber qual o momento certo para mostrar o retorno para o usuário. O próximo passo é mostrar as informações no navegador do usuário que está acessando a página. Esse

51 processo pode ser realizado por meio da propriedade innerhtml do JavaScript conforme pode ser observado na Listagem 07. document.getelementbyid( div_conteudo ).innerhtml = objxmlhttprequest.responsetext; Listagem 07 Impressão no Navegador Neste momento foram apresentados todos os elementos básicos, mas completos para processar um programa AJAX. Juntando todos os exemplos citados anteriormente, a Listagem 08 mostra como ficaria um programa completo para utilizar o AJAX. var objxmlhttprequest = null; function pegaconteudo() { try { objxmlhttprequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { objxmlhttprequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (E) { objxmlhttprequest = false; } } if (!objxmlhttprequest && typeof XMLHttpRequest!= 'undefined' ) { try { objxmlhttprequest = new XMLHttpRequest(); } catch (e) { objxmlhttprequest = false ; } } if (objxmlhttprequest) { objxmlhttprequest.onreadystatechange = processadormudancaestado; objxmlhttprequest.open("get", "/dados.html"); objxmlhttprequest.setrequestheader('content-type','text/xml'); objxmlhttprequest.setrequestheader('encoding','iso-8859-1'); objxmlhttprequest.send(null); } } ( )

52 ( ) function processadormudancaestado () { if (objxmlhttprequest.readystate == 4) { // Completo if (objxmlhttprequest.status == 200) { // resposta do servidor OK document.getelementbyid ( "div_conteudo"). innerhtml = objxmlhttprequest.responsetext ; } else { alert( "Problema: " + objxmlhttprequest.statustext ); } } } } Listagem 08 Exemplo completo de AJAX No exemplo apresentado na Listagem 08, é possível observar que foram utilizados todos os objetos do XMLHttpRequest citados no início do tópico. 2.10. Limitações Do mesmo modo que o uso do AJAX tem muitos benefícios conforme citado anteriormente, ele também tem algumas desvantagens. Um dos problemas no uso de AJAX que pode ser facilmente verificado é a questão de a navegação do usuário não fica no histórico do navegador, com isso, se o mesmo desejar usar o botão voltar do navegador, poderá não ter o resultado esperado. Conforme cita Asleson 2006: [...] diferentemente dos IFRAMES e quadros ocultos, fazer uma solicitação através do XMLHttpRequest não alterará a pilha do histórico de seu navegador. Em muitos casos, isso não importará (quantas vezes você clicou em Voltar só para descobrir que nada mudou?), mas se seus usuários estiverem esperando que o botão Voltar funcione, você terá alguns problemas. Outra desvantagem encontrada é de não ser modificada a barra de endereço, desta forma, fica mais complicada a tarefa de colocar um botão do tipo, Recomende esta notícia, ou ainda, salvar nos favoritos um conteúdo do site visitado. Existe ainda uma desvantagem no uso do AJAX que está diretamente ligada na utilização do JavaScript.

53 Segundo Asleson 2006: É importante não se exceder com o AJAX. Lembre-se que o código JavaScript está sendo executado no navegador de seu cliente e ter milhares de linhas de JavaScript pode tornar muito lenta as experiências de seus usuários. Scripts malcodificados podem sair rapidamente de controle, principalmente conforme o volume aumentar. Neste caso, o que principalmente acontece é que, como você cria vários códigos JavaScript para validações, atualizações, etc., estes códigos vão todos para o navegador do usuário, e se este JavaScript for muito grande, o tempo de transferência de todo este código, pode se tornar um problema. Outra questão que pode gerar confusões é de o usuário não estar preparado ou familiarizado com AJAX, ou seja, estar esperando por uma reação do navegador enquanto acontece outra. No caso de uma mudança de página, o usuário pode estar esperando que toda a página faça o refresh e, com o AJAX, somente o conteúdo necessário altera. Desta forma, pode acontecer de o usuário não perceber que o conteúdo já alterou e ficar aguardando muito para continuar sua navegação. Para que esse tipo de situação não aconteça, é necessário fazer alguma ação para que o usuário perceba que algo mudou, como por exemplo, no caso do Gmail do Google, onde para cada mudança de página, ele apresenta a mensagem Carregando.... Isto faz com que o usuário saiba quando a página está sendo alterada em seu navegador.

54 3. ESTUDO DE CASO Para o estudo de caso foi desenvolvida uma aplicação utilizando a infra-estrutura fornecida pelas extensões AJAX 1.0 da Microsoft ao ASP.NET 2.0. Esta aplicação faz acesso ao banco de dados SQL Server é utilizada a IDE de desenvolvimento Visual Studio 2005 juntamente com a biblioteca ASP.NET AJAX 2.0, para a visualização será utilizado o navegador Firefox. Depois de instaladas as ferramentas citadas anteriormente, é possível verificar todas dos componentes de bibliotecas das classes.net que oferecem suporte do lado do servidor e os arquivos JavaScript que dão suporte do lado do cliente do ASP.NET 2.0 AJAX Extencions 1.0 que por padrão estão em C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extencions\v1.0.61025. No Visual Studio é incluída no Toolbox apresentada quando escolhida para desenvolvimento, um projeto de Web Site a nova aba AJAX Extencions que contém componentes utilizados para o desenvolvimento de aplicações com AJAX. Este estudo de caso mostrará a facilidade que um framework fornece para adicionar algumas funcionalidades AJAX em uma aplicação ASP.NET 2.0. Criando a nova aplicação Web Para iniciar com a aplicação, deve-se abrir o Visual Studio e selecionar um novo projeto escolhendo New Web Site. Na caixa de diálogo, deve ser escolhida a opção ASP.NET AJAX Enabled Web Site e a linguagem Visual C#. Construindo a interface Para o desenvolvimento da interface da aplicação, um arquivo CSS será criado para padronizar o posicionamento e a formatação dos elementos utilizando a técnica Tableless Layout

55 que é a utilização de tabelas para ajudar no posicionamento dos elementos. Abaixo pode ser vista a Listagem 09 que contém todo o código correspondente à interface da aplicação Web que deve estar inserido na página Default.aspx. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"%> <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="head1" runat="server"> <title>aplicações Web com AJAX</title> </head> <body>

56 <asp:gridview ID="GridViewUsuarios" CssClass="info" runat="server"> <Columns> <asp:boundfield DataField="Codigo" HeaderText="Código"> <ItemStyle HorizontalAlign="Center" /> </asp:boundfield> <asp:boundfield DataField="nome" HeaderText="Nome"> <ItemStyle HorizontalAlign="Center" /> </asp:boundfield> <asp:boundfield DataField="rua" HeaderText="Rua"> <ItemStyle HorizontalAlign="Center" /> </asp:boundfield> Listagem 09 Código da página Default.aspx É possível verificar no código que ele faz referências a pseudo-classes que serão definidas do documento CSS mais adiante. A Figura 10 mostra como é a apresentação da página Default.aspx no navegador Firefox sem a aplicação do arquivo de CSS.

57 Figura 10 Apresentação da página Default.aspx sem CSS Para definir um arquivo CSS com os padrões de formatação e posicionamento como disposto anteriormente, dentro do Visual Studio, na janela onde fica definida a estrutura do projeto, a Solution Explorer deve-se clickar com o botão direito e selecionar a opção Add ASP.NET Folder e o subitem Theme. Será criada uma pasta com o nome Theme que servirá para definir um padrão, deve ser modificada para Padrao e nesta pasta deverá ser configurado o padrão para a aplicação. Para adicionar uma folha de estilos, deve ser adicionado um novo Web Site e ser renomeado para Estilos.css. Dentro de Estilos.css deve ser adicionado o código que consta na Listagem 10.

58 body, select { background-color:white; font-family: Verdana, Arial, Helvetica, Sans-Serif; font-size: 9pt; } select { border: solid 1px #00460A; }

59 table.dados { border: solid 1px #00460A; border-collapse: collapse; width: 100%; } table.dados tr th. table.dados tr td { border: solid 1px #00460A; padding: 3px; } table.dados tr th { border: solid 1px #00460A; color: White; } table.dados tr.alt. td { background-color: #B7D5AB; } Listagem 10 Código CSS Mesmo depois de criado o arquivo CSS com o código acima, se a aplicação for executada, os padrões definidos no CSS não serão apresentados. Isso ocorre porque a folha de estilos ainda não foi vinculada com a página Default.aspx, para que esses padrões sejam utilizados pela aplicação, deve ser inserido dentro da diretiva @Page da página Default.aspx o atributo StylessheetTheme que é o atributo responsável pelo vínculo da folha de estilos CSS com a página Default.asp, ficando semelhante à Listagem 11. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" StylesheetTheme="Padrao"%> Listagem 11 Código da diretiva @Page A Figura 11 mostra como vai ficar a página dinâmica Default.aspx depois de aplicada a folha de estilo Estilos.css.

60 Figura 11 Apresentação da página Default.aspx com CSS Desenvolvendo as funcionalidades em AJAX Serão apresentadas as funcionalidades de acesso a banco de dados para preencher com dados do banco de dados os objetos incluídos na página. Para isso, serão utilizados os assistentes disponibilizados pelo Visual Studio, não havendo a necessidade de escrever uma única linha de código. Para carregar o DropDownListGrupos com os Grupos de usuários que existem na base de dados, deve-se clicar no Smart tag do DropDownListGrupos e marcar a opção Enable AutoPostBack. Feito isso, para abrir o assistente para conectar no banco de dado, deve-se clicar em Choose Data Source que aparecerá a janela Configuration Wizard. Na lista Select a data source, escolhendo a opção New data source, aparecerá a tela Choose a Data Source Type. Deve-

61 se escolher a opção Database e digitar SqlDataSourceGrupos, depois deve-se clickar em OK. Será apresentada a tela Choose Your Data Source Connection, deve-se clickar em New Connection. Nesse momento, surgirá a janela Add Connection é necessário colocar as informações para estabelecer uma conexão com o banco de dados. Para essa aplicação foi desenvolvido o banco de dados Usuarios no SQL Server 2005 com apenas duas tabelas, sendo uma para armazenamento dos grupos de usuários e a outra para o armazenamento do cadastro dos usuários como está apresentado na Figura 12. Figura 12 Tabelas do Banco de Dados As informações para a conexão com o banco de dados devem ser informadas e acertadas até que apareça a mensagem Teste connection succeeded ao clickar no botão Test Connection. Após isso aparecerá uma mensagem perguntando se aceita salvar a string de conexão no arquivo Web.config, é necessário confirmar e clickar em Next. A tela de Configure the Select Statement, deve-se escolher a opção Specify a custom SQL statement os stored procedure e clickar em Next. A próxima tela que irá aparecer é a Define Custom Statements or Stored Procedures, a opção SQL Statement deve estar marcada e no campo destinado deve-se digitar a instrução SQL que está definida na Listagem 12 que retorna os grupos e seus códigos. Depois, deve-se clickar em Test Query para testar a consulta que deve apresentar um Grid com as colunas id_grupo e descrição. Feito isso, deve-se clickar em Finish para terminar a configuração da fonte de dados

62 que será utilizada. A tela Choose a Data Source será mostrada novamente, porém, a lista Select a data source estará preenchida com a fonte de dados SqlDataSourceGrupos. Na lista Select a data Field to display in the DropDownList, o campo descricao deve ser selecionado e na lista Select a data Field for the value of the DropDownList deve-se escolher o campo código. Feito isso, devese clickar em OK para finalizar o assistente. Para testar se tudo foi configurado da maneira correta, basta executar a aplicação e verificar se o DropDownListGrupos vem preenchido com os Grupos. SELECT id_grupo, descricao FROM grupo Listagem 12 Consulta de grupos Para carregar o DropDownListUsuarios deve-se seguir os mesmos passos informados, alterando apenas o nome do componente DataSource para SqlDataSourceUsuarios e utilizar o código da Listagem 13, que é uma instrução que retorna os Usuários pertencentes ao Grupo selecionado. SELECT id_usuario, nome FROM usuario WHERE id_grupo = @id_grupo Listagem 13 Consulta de usuários do grupo Pode-se notar na Listagem 13 que está possui um parâmetro chamado @id_grupo que será utilizado para informar o código do grupo que está sendo realizada a busca. Por existir este parâmetro a ser passado, será apresentada a janela Define Parameters onde deve ser selecionado o parâmetro id_grupo para se definir que o valor do parâmetro deve se obtido por meio do valor selecionado no DropDownListGrupos, para isso, na opção Control da lista Parameter source e a opção DropDownListGrupos em ControlID. Feito isso, deve-se clickar em Next e depois em Test Query para testar a consulta parametrizada. A janela Parameter Values Editor deve ser apresentada para que seja informado um valor para o parâmetro na coluna Value para realizar um teste de consulta que deve apresentar um Grid com as colunas id_usuario e nome.

63 Para carregar os dados do usuário na GridViewUsuarios é necessário seguir os passos descritos acimas mudando apenas o nome do DataSource para SqlDataSourceDadosUsuario. Na tela Define Custom Statements or Stored Procedures deve-se informar o código da Listagem 14 que corresponde a uma busca que retorna o Codigo, Nome, Rua, Numero, Cidade, Estado, Email, Usuario. Porém, esta consulta possui dois parâmetros que são @id_usuario e @id_grupo que servem para informar o id do usuário e o id do grupo. SELECT id_usuario AS Codigo, nome AS Nome, rua AS Rua, numero AS Numero, cidade AS Cidade, estado AS Estado, email AS Email, usuario AS Usuario FROM usuario WHERE id_usuario = @id_usuario AND id_grupo = @id_grupo Listagem 14 Tabelas do Banco de Dados Como essa consulta possui parâmetros, novamente a janela Define Parameters será apresentada para serem definidos os parâmetros. Para o parâmetro id_grupo, deve ser defino a opção Control em Parameter Source e na opção ControlID o DropDownListGrupos e para o parâmetro id_usuario, deve ser escolhida novamente a opção Control e o DropDownListUsuarios para a opção ControlID. Para testar, basta executar a aplicação Web e verificar as novas funcionalidades selecionando o Grupo e vendo que as opções da segunda lista é alterada. Apresentação das informações nos rótulos Até o momento foram utilizados apenas os assistentes do Visual Studio para inserção das funcionalidades, não sendo necessário escrever uma linha de código para isso. Serão adicionadas algumas linhas de código para que a LabelUsuario seja atualizada do lado do servidor com o nome do usuário escolhido. Nos códigos da página Default.aspx, é necessário acrescentar a propriedade Text ao rótulo com o valor definido do lado do servidor tal

64 como o código apresentado na Listagem 15. <asp:label ID="LabelUsuario" CssClass="info" runat="server" Text="<%# DropDownListUsuarios.SelectedItem.Text.ToUpper() %>"><br/> </asp:label> Aos eventos DataBound e SelectedIndexChanged do controle DropDownListUsuarios deve ser adicionado o código da Listagem 16 para que exista a atualização do dado vinculado ao rótulo. Listagem 15 Vinculação do dado na propriedade Text do rótulo protected void DropDownListUsuario_DataBound(object sender, EventArgs e) { LabelUsuario.DataBind(); } protected void DropDownListUsuarios_SelectedIndexChanged(object sender, EventArgs e) { LabelUsuario.DataBind(); } Listagem 16 Atualização dos dados vinculados aos rótulos Adicionando as Funcionalidades do AJAX na aplicação Web Para adicionar as funcionalidades do AJAX na aplicação Web, devem ser inseridos os controles ScriptManager e UpdatePanel que são partes fundamentais para o funcionamento do ASP.NET AJAX. O ScriptManager é uma das principais partes do ASP.NET AJAX 2.0 Extensions 1.0, sendo responsável por gerenciar os recursos do AJAX na página ASP.NET, tais como baixar o JavaScript da biblioteca AJAX e coordenar as atualizações parciais nas páginas que são habilitadas com o uso do UpdatePanel, sendo muito importante que o ScriptManager seja colocado na página ASPX antes de qualquer outro controle que necessite dele como o UpdatePanel que provoca um retorno ao servidor web (postback) que são automaticamente configurados como disparadores (trigger) do controle, ou seja, provoca a atualização do conteúdo

65 desse painel. Os UpdatePanel são utilizados em conjunto com o ScriptManager para permitir a atualização parcial da página que melhora a experiência do usuário por motivos como a diminuição do volume de informações trocadas entre o navegador e o servidor web, redução do efeito de piscar em relação a uma atualização completa do conteúdo e a interface não é posicionada no início da pagina em cada retorno ao servidor web. Para adicionar o ScriptManager na página deve-se arrastar o componente ScriptManager que fica na aba AJAX Extencions do ToolBox para a parte inicial da página. Feito isso, o componente UpdatePanel deve ser utilizado para delimitar a região de atualização parcial da página. Na aplicação web Default.aspx, foram utilizados dois UpdatePanel, sendo o primeiro com o nome de UpdatePanelUsuariosGrupo delimitando o DropDownListUsuario e o segundo chamado de UpdatePanelUsuario delimitando desde a LabelUsuario até o final da GridViewUsuarios conforme mostra a Listagem 17. <asp:updatepanel ID="UpdatePanelUsuariosGrupo" runat="server"> <ContentTemplate> Selecione o Usuário do Grupo: <br />... </asp:dropdownlist> </ContentTemplate> </asp:updatepanel> <asp:updatepanel ID="UpdatePanelUsuario" runat="server" > <ContentTemplate> <div class="titulo"> Informações do Usuário: <asp:label ID="LabelUsuario" </asp:gridview> </ContentTemplate> </asp:updatepanel> Listagem 17 Posicionamento dos controles UpdatePanel No modo de edição visual da página Default.aspx (designer), devem ser alteradas de ambos os UpdatePanel as propriedades ChildrenAsTrigger para False o que não permitirá que

66 seja realizado um retorno ao servidor web pelo controle que está dentro dele, alterar a propriedade UpdateMode para o valor Conditional que indica que o controle deve ser atualizado apenas quando solicitado e na propriedade Triggers deve ser adicionado um disparados de retorno assíncrono (AsyncPostBackTrigger) por meio do botão.... No UpdatePanel UpdatePanelUsuariosGrupo, a propriedade ControlID deve ser escolhido o DropDownListGrupos e na propriedade EventName deve ser escolhido o evento SelectedIndexChanged. Para o UpdatePanel UpdatePanelUsuario a propriedade ControlID deve estar o DropDownListUuarios e na propriedade EventName deve estar definido o mesmo evento SelectedIndexChanged. A Figura 13 mostra como deve ficar a página Defaul.aspx no modelo de apresentação Designer da IDE Visual Studio. Figura 13 Modelo de apresentação no Visual Studio