UNIVERSIDADE FEDERAL DE SANTA CATARINA DEPARTAMENTO DE INFORMTICA E ESTATSTICA CURSO DE CINCIAS DA COMPUTAO

DIEGO LUIZ MARAFON

INTEGRAO JAVASERVER FACES E AJAXESTUDO DA INTEGRAO ENTRE AS TECNOLOGIAS JSF E AJAX

FLORIANPOLIS, 2006

UNIVERSIDADE FEDERAL DE SANTA CATARINA DEPARTAMENTO DE INFORMTICA E ESTATSTICA CURSO DE CINCIAS DA COMPUTAO

DIEGO LUIZ MARAFON

INTEGRAO JAVASERVER FACES E AJAXESTUDO DA INTEGRAO ENTRE AS TECNOLOGIAS JSF E AJAX

Trabalho de concluso de curso apresentado como parte dos requisitos para obteno do grau de Bacharel em Cincias da Computao.

Orientador: Prof. Dr. Leandro Jos Komosinski Membros da Banca: Prof. Dr. Joo Candido Dovicchi Profa. Dra. Patrcia VilainFLORIANPOLIS, 2006

Diego Luiz Marafon

INTEGRAO JAVASERVER FACES E AJAXESTUDO DA INTEGRAO ENTRE AS TECNOLOGIAS JSF E AJAX

Trabalho de concluso de curso apresentado como parte dos requisitos para obteno do grau de Bacharel em Cincias da Computao.

Orientador: _______________________________________ Prof. Dr. Leandro Jos Komosinski

Banca examinadora

_______________________________________ Prof. Dr. Joo Candido Dovicchi

_______________________________________ Profa. Dra. Patrcia Vilain

minha famlia.

Agradecimentos

Agradeo minha famlia, especialmente ao meu pai Moacir Antnio Marafon, minha me Isabel Silva Marafon e meu irmo Thiago Antnio Marafon, os responsveis por muitos ensinamentos e conquistas obtidas ao longo da minha vida. Aos meus amigos e colegas de trabalho que sempre me incentivaram e auxiliaram, ajudando-me a crescer pessoal e profissionalmente. Ana Christina da Silva Floro pelas suas valiosas dicas na reviso deste trabalho. Gostaria de agradecer tambm ao orientador deste trabalho, o professor Leandro Jos Komosinski, pelo apoio, incentivo e ensinamentos, fundamentais para a realizao deste trabalho.

ResumoO desenvolvimento de aplicativos Web vem crescendo cada vez mais principalmente com a consolidao da utilizao da linguagem de programao Java com o padro J2EE. Com o uso constante desta linguagem de programao muitos investimentos foram realizados em projetos e tecnologias a fim de aprimorar e padronizar o processo de desenvolvimento de sistemas que trabalham na rede mundial de computadores. Um desses projetos que conta com grande destaque atualmente o framework JavaServer Faces(JSF), o qual atua principalmente nas camadas de Viso e Controle do modelo MVC e possui como principais caractersticas facilitar o desenvolvimento de componentes personalizados e adotar um modelo de programao orientada a eventos, tentando se assemelhar ao desenvolvimento desktop. Uma outra caracterstica do JSF a utilizao apenas de requisies sncronas, ou seja, a cada evento invocado pelo cliente criada uma requisio que segue at o servidor para realizar algum processamento. Em seguida uma nova pgina totalmente construda, mesmo que esta seja igual anterior, e exibida no browser do cliente, que por sua vez espera por todas essas aes sem poder interagir com o sistema. Um outro projeto que vem obtendo igual sucesso o que desenvolve uma tecnologia, chamada AJAX, e que utiliza principalmente JavaScript. O uso do AJAX proporciona significativos benefcios visto que permite que o sistema possa alterar alguns dos dados exibidos aos usurios sem a necessidade de reconstruo de toda a pgina novamente, sendo modificado apenas o contedo dos campos alterados, tornando os sistemas mais dinmicos, interativos e atraentes aos seus usurios. Este trabalho dedica-se a estudar as duas tecnologias comentadas e suas formas de integrao, tomando como base idias de alguns desenvolvedores reconhecidos mundialmente (e citados neste estudo) e bibliotecas de componentes j existentes.

PALAVRAS-CHAVE: Java, J2EE, JavaServer Faces, AJAX, MVC, JavaScript, aplicativos Web.

AbstractThe web development has been increasing a lot in the last years. Many investments have been applied in projects and technologies to improve the development of applications that run on the internet, especially the ones that use the Java programming language and the platform J2EE. One of these projects is the JavaServer Faces framework, that acts mainly in the View and Control in the MVC design pattern and has the followings objectives: facilitate components development and use event-oriented programming like in desktop systems development. Another project that is making a lot of success is the one that develop a technology that uses Javascript named AJAX. One of the benefits that AJAX brings is that the application can change some data that are showed to the user without rebuilding the whole page. Using AJAX, the application becomes more dynamic, because the interface that is showed to the user doesnt have to blink every time that the system changes a data. Since both technologies could be integrated, this work is going to show: the ways that both could work together, some projects that are working with this objective and study if in the future these can be totally integrated.

KEYWORDS: Java, J2EE, JavaServer Faces, AJAX, MVC, JavaScript, Web applications.

ndice de figurasIlustrao 1Funcionamento do protocolo HTTP. Fonte: THE WEB DESIGNER 5 HTTP PRIMER, 2006].................................................................................................................. 17 Ilustrao 2 - DOM - rvore que contm os dados de uma pgina HTML. Fonte: [CRANE&PASCARELLO, 2006] ....................................................................................... 22 Ilustrao 3 - Modelo MVC e seus frameworks.................................................................... 23 Ilustrao 4 Ciclo de vida das requisies JSF fonte: [GEARY&HORSTMANN, 2005] ... 26 Ilustrao 5 - Exemplo de programa usando JSF .................................................................. 32 Ilustrao 6 - Exemplo de programa usando JSF - Erro CPF ............................................... 33 Ilustrao 7 - Exemplo de programa usando JSF - Disponibilizando cidades........................ 34 Ilustrao 8 - Fases do AJAX - fonte: [SUN, 2006a] ............................................................ 38 Ilustrao 9 - Exemplo de programa usando JSF e AJAX - Verificando senha fraca ........ 41 Ilustrao 10 - Representao da Forma 3 de integrao AJAX e JSF do artigo 1................. 44 Ilustrao 11 - Representao da Forma 1 de integrao AJAX e JSF do artigo 1................. 48 Ilustrao 12 - Representao da Forma 1 de integrao AJAX e JSF do artigo 2................. 51 Ilustrao 13 - Representao da Forma 1 de integrao AJAX e JSF segundo Mark Basler 53 Ilustrao 14 - Representao da Forma 1 de integrao AJAX e JSF de Super-Charge jax Data Fetch.......................................................................................................................... 55 Ilustrao 15 - Representao da forma de integrao AJAX e JSF da empresa Backbase [BACKBASE,2003] ............................................................................................................ 57 Ilustrao 16 - Representao da forma de integrao AJAX e JSF da empresa Exadel [EXADEL, 2006]................................................................................................................. 60 Ilustrao 17 - Representao da Forma 2 de integrao AJAX e JSF do artigo 1................. 64 Ilustrao 18 - Representao da Forma 3 de integrao AJAX e JSF do artigo 2................. 65 Ilustrao 19 - Representao da Forma 2 de integrao AJAX e JSF segundo Mark Basler 68 Ilustrao 20 - Tela 1 do exemplo ICEfaces ......................................................................... 73 Ilustrao 21 - Autocomplete exemplo ICEfaces.................................................................. 74 Ilustrao 22 Validao do campo CPF............................................................................. 75 Ilustrao 23 - inputDate exemplo ICEfaces ........................................................................ 76 Ilustrao 24 - inputFile e outputProgress exemplo ICEfaces ............................................... 76 Ilustrao 25 - Tela 2 do exemplo ICEfaces ......................................................................... 77 Ilustrao 26 - Tela 3 do exemplo ICEfaces ......................................................................... 78 Ilustrao 27 - Integrao das tecnologias JSF e AJAX utilizada pela biblioteca ICEfaces. Fonte: [ICESOFT,2006] ...................................................................................................... 79 Ilustrao 28 - Arquitetura ICEfaces. Fonte: [ICESOFT,2006]............................................. 80 Ilustrao 29 - Modo de atualizao Sncrono. Fonte: [ICESOFT,2006]............................... 82 Ilustrao 30 - Componente tree da biblioteca AjaxfFaces. Fonte: [CYBERXP.NET ,2005] 84 Ilustrao 31-Componentes TabbedPane e Calendar da biblioteca AjaxFaces. Fonte: [ CYBERXP.NET,2005] ........................................................................................................ 84 Ilustrao 32 - Integrao Ajaxfaces. Fonte: [CYBERXP.NET, 2005].................................. 86 Ilustrao 33 - Tela 1 do exemplo Ajax4Jsf.......................................................................... 88 Ilustrao 34 - Tela 2 do exemplo Ajax4Jsf.......................................................................... 89 Ilustrao 35 - Tela 3 do exemplo Ajax4Jsf.......................................................................... 90 Ilustrao 36 - Tela 4 do exemplo Ajax4Jsf.......................................................................... 91 Ilustrao 37 - Tela 5 do exemplo Ajax4Jsf.......................................................................... 92 Ilustrao 38 - Tela 6 do exemplo Ajax4Jsf.......................................................................... 93 Ilustrao 39 - Tela 7 do exemplo Ajax4Jsf.......................................................................... 93

Ilustrao 40 Representao dos principais elementos da biblioteca Ajax4jsf. Fonte: [EXADEL, 2006]................................................................................................................. 94 Ilustrao 41 - Etapas realizadas por uma requisio Ajax4jsf. Fonte: [EXADEL,2006] ....... 95 Ilustrao 42 - Tela inicial do exemplo utilizando Backbase ................................................ 97 Ilustrao 43 Componente exibindo mensagem de valor invlido no exemplo Backbase ... 98 Ilustrao 44 - Componente DatePicker da biblioteca Backbase .......................................... 98 Ilustrao 45 Componente FileUploader da biblioteca Backbase ...................................... 98 Ilustrao 46 Componente ListGrid da biblioteca BackBase.............................................. 99 Ilustrao 47 - Etapas realizadas por uma requisio Backbase. Fonte : [BACKBASE,2003] .......................................................................................................................................... 100 Ilustrao 48 - Tela do exemplo utilizando Blueprints........................................................ 101 Ilustrao 49 - Exemplo Blueprints componente Autocomplete .......................................... 102 Ilustrao 50 - Exemplo Blueprints componente Rich Textarea Editor............................... 102 Ilustrao 51 - Exemplo Blueprints componente Calendar................................................. 103 Ilustrao 52 - Exemplo Blueprints componente Select Value Text Field............................ 103 Ilustrao 53 - Etapas realizadas por uma requisio utilizando a biblioteca BluePrints ..... 104 Ilustrao 54 - Exemplo DWR verificando campo E-mail .................................................. 106 Ilustrao 55 Passos seguidos por uma requisio que utiliza a biblioteca DWR [DWR, 2005] ................................................................................................................................. 106 Ilustrao 56 - Projeto Mabon componente inputSuggest ................................................... 108 Ilustrao 57 - Etapas realizadas por uma requisio da biblioteca Mabon. Fonte: [MABON,2006]................................................................................................................. 109 Ilustrao 58 Componente ServerSuggest de DynaFaces da apresentao JavaOne[JAVAONE, 2006]............................................................................................... 110 Ilustrao 59 Componente DataTable de DynaFaces da apresentao JavaOne [JAVAONE,2006] ............................................................................................................. 111 Ilustrao 60 - Diagrama de classe com AjaxValidatorRenderer ........................................ 115 Ilustrao 61 - Diagrama de classe com UIValidatorAjax................................................... 116 Ilustrao 62 - Diagrama de classe com ValidatorAjaxTag................................................. 117 Ilustrao 63 - Diagrama de classe com classe GerenciadorServlet .................................... 117 Ilustrao 64 - Diagrama de classe com classe abstrata Validate ........................................ 118 Ilustrao 65 - Exemplo utilizando o componente validatorAjax........................................ 119 Ilustrao 66 - Exemplo utilizando-se o componente validatorAjax validando o campo E-mail .......................................................................................................................................... 119 Ilustrao 67 - Exemplo utilizando-se o componente validatorAjax validando o campo CPF .......................................................................................................................................... 120

Lista de GrficosGrfico 1 - Comparao dos dados enviados do servidor para o cliente. Fonte [CRANE&PASCARELLO, 2006] ....................................................................................... 39

Lista de TabelasTabela 1 - Comparao entre JSF e JSF com Avatar [HOOKOM, 2006].............................. 46 Tabela 2 - Comparao das bibliotecas estudadas .............................................................. 112 Tabela 3 Notas associadas aos conceitos dados nos quesitos das bibliotecas.................... 113

Lista de Abreviaturas e SiglasAJAX Asynchronous JavaScript and XML DOM Document Object Model IDE Integrated Development Environment HTML HyperText Markup Language HTTP HyperText Transfer Protocol JSF JavaServer Faces JSP Java Server Pages J2EE Java 2 Enterprise Edition XML eXtensible Markup Language WWW World Wide Web W3C World Wide Web Consortium

Sumrio1 INTRODUO ........................................................................................................... 15 1.1 Contexto............................................................................................................... 15 1.2 Objetivos.............................................................................................................. 18 1.2.1 Objetivo Geral .............................................................................................. 18 1.2.2 Objetivos Especficos ................................................................................... 18 1.2.3 Metodologia ................................................................................................. 19 2 BASE TERICA......................................................................................................... 20 2.1 Introduo ............................................................................................................ 20 2.2 JavaScript............................................................................................................. 20 2.3 XML .................................................................................................................... 21 2.4 DOM.................................................................................................................... 21 3 JAVASERVER FACES ............................................................................................... 23 3.1 Introduo ............................................................................................................ 23 3.2 Contextualizao JSF ........................................................................................... 24 3.2.1 Ciclo de Vida das Requisies JSF ............................................................... 24 3.2.2 FacesServlet ................................................................................................. 24 3.2.3 View ID........................................................................................................ 24 3.2.4 FacesContext ................................................................................................ 25 3.2.5 Backing Beans .............................................................................................. 25 3.2.6 Faces-config.xml .......................................................................................... 25 3.3 Ciclo de Vida ....................................................................................................... 26 3.3.1 Fases do Ciclo de Vida ................................................................................. 26 3.3.1.1 Restaurar viso..................................................................................................... 27 3.3.1.2 Aplicar Valores de Requisio.............................................................................. 27 3.3.1.3 Processar Validaes............................................................................................ 27 3.3.1.4 Atualizar Valores de Modelo ................................................................................ 28 3.3.1.5 Invocar Aplicao ................................................................................................ 28 3.3.1.6 Renderizar Resposta............................................................................................. 28 3.3.2 Variaes do Fluxo do Ciclo de Vida............................................................ 28 3.3.2.1 Eventos de Mudana de Valor .............................................................................. 28 3.3.2.2 Eventos de Ao................................................................................................... 29 3.3.2.3 Tags Event Listener.............................................................................................. 29 3.3.2.4 Componentes Imediatos ....................................................................................... 30 3.3.2.5 Eventos de Fase.................................................................................................... 30 3.4 Vantagens da utilizao do framework JSF........................................................... 31 3.5 Desvantagens da utilizao do framework JSF ..................................................... 31 3.6 Aplicao Exemplo .............................................................................................. 31 3.7 Concluso ............................................................................................................ 34 4 AJAX........................................................................................................................... 35 4.1 Introduo ............................................................................................................ 35 4.2 Histrico .............................................................................................................. 35 4.3 Caractersticas ...................................................................................................... 37 4.4 Funcionamento..................................................................................................... 38 4.5 Vantagens da utilizao da tecnologia AJAX........................................................ 39 4.6 Desvantagens da utilizao da tecnologia AJAX .................................................. 40 4.7 Aplicao Exemplo .............................................................................................. 41 4.8 Concluso ............................................................................................................ 42

5

FORMAS DE INTEGRAO..................................................................................... 43 5.1 Introduo ............................................................................................................ 43 5.2 Sem a construo de componentes personalizados................................................ 43 5.2.1 Integrando os componentes JSF com AJAX por intermdio de funes JavaScript .................................................................................................................... 43 5.2.2 Modificando a especificao JSF .................................................................. 46 5.3 Desenvolvendo componentes personalizados........................................................ 47 5.3.1 Usando apenas um Servlet ............................................................................ 47 5.3.2 Usando dois Servlets..................................................................................... 62 5.4 Concluso ............................................................................................................ 69 6 BIBLIOTECAS DE COMPONENTES DE INTEGRAO EXISTENTES ................ 71 6.1 Introduo ............................................................................................................ 71 6.2 Bibliotecas de componentes existentes ................................................................. 71 6.2.1 ICEfaces....................................................................................................... 71 6.2.2 AjaxFaces..................................................................................................... 83 6.2.3 Ajax4jsf ........................................................................................................ 87 6.2.4 Backbase ...................................................................................................... 96 6.2.5 Java BluePrints .......................................................................................... 101 6.2.6 DWR .......................................................................................................... 105 6.2.7 Mabon ........................................................................................................ 107 6.2.8 DynaFaces ................................................................................................. 110 6.3 Estudo Comparativo ........................................................................................... 112 6.4 Concluso .......................................................................................................... 114 7 COMPONENTE DESENVOLVIDO ......................................................................... 115 7.1 Introduo .......................................................................................................... 115 7.2 Componente desenvolvido.................................................................................. 115 7.3 Exemplo utilizando o componente desenvolvido ................................................ 119 7.4 Concluso .......................................................................................................... 120 8 CONCLUSO FINAL............................................................................................... 121 8.1 Trabalhos futuros ............................................................................................... 122 9 REFERNCIAS BIBLIOGRFICAS........................................................................ 123 10 Anexos................................................................................................................... 128 10.1 Exemplo JSF ...................................................................................................... 128 10.2 Exemplo JSF + AJAX ........................................................................................ 137 10.3 Exemplo ICEfaces.............................................................................................. 146 10.4 Exemplo AJAX4JSF .......................................................................................... 170 10.5 Exemplo Backbase ............................................................................................. 183 10.6 Exemplo BluePrints............................................................................................ 190 10.7 Exemplo DWR................................................................................................... 199 10.8 Exemplo ValidatorAjax...................................................................................... 205

1 INTRODUO1.1 ContextoO advento da rede mundial de computadores no sculo passado vem desde ento revolucionando o mundo: mudando conceitos e hbitos, e tornando o computador cada vez mais til e necessrio na vida das pessoas. Com a Internet, programas e informaes puderam ser compartilhados por usurios, de forma on-line e simultnea, vencendo grandes distncias e tornando o mundo uma nica aldeia. Essa revoluo de comportamento motiva, entre outras aes, o desenvolvimento de aplicativos Web, e proporciona a todos os segmentos que trilham o caminho da informatizao um crescimento gigantesco. Fbulas de recursos so investidos objetivando a melhoria dos processos de desenvolvimento e manuteno de softwares e a obteno de maior interatividade de suas interfaces, a fim de deix-los mais atraentes, eficientes e intuitivos aos usurios. Dentro desse contexto, vem se tornando padro, no somente para aplicaes Web, mas no contexto geral, a adoo da arquitetura MVC (Modelo Viso Controle) [FOWLER, 2003]. A idia central do MVC dividir o programa em trs conjuntos, cada um com sua respectiva responsabilidade. Assim, a camada de Viso seria a responsvel pela apresentao dos dados. O Controle seria incumbido de receber os dados inseridos pelo usurio, manipullos utilizando-se da camada de Modelo, e retornar alguma informao para a camada de Viso. J o Modelo teria a funo de definir o modo como os dados so organizados no meio persistente. Com essa diviso do problema o modelo MVC tem como seus principais objetivos facilitar: o reuso do cdigo, a modularizao dos sistemas e a manuteno do programa, devido melhor compreenso do cdigo e do fluxo da aplicao. Com a popularizao da internet muitas linguagens de programao para Web j foram inventadas, tais como: Asp, Php, Java (utilizando o padro J2EE, uma plataforma de programao que faz parte da plataforma Java e utilizada para desenvolvimento de aplicaes executadas em um servidor [WIKIPEDIA, 2006]), entre outras.

A linguagem Java, criada em 1992, teve franca expanso, sendo hoje uma das linguagens mais utilizadas para desenvolvimento de aplicativos processados na rede mundial de computadores. Este sucesso deve-se a algumas caractersticas: por ser uma linguagem orientada a objetos, multiplataforma e pela facilidade de utilizao de protocolos para acesso remoto, como HTTP e FTP. Com o intuito de facilitar ainda mais a construo de aplicativos com esta linguagem foram e esto sendo desenvolvidos muitos projetos para a elaborao de frameworks e tecnologias, tais como: Struts1 , JavaServer Faces2, Spring3, entre outros. Um dos frameworks mais utilizados at ento no desenvolvimento de programas Web o Struts. Este utiliza arquivos html, xml e classes Java para a construo das aplicaes e facilita principalmente o desenvolvimento das camadas de Viso e Controle do modelo MVC. Entretanto, o Struts comeou a perder seu espao no mercado com o surgimento, h alguns anos, do framework JavaServer Faces (JSF) que contm inovaes que agradam em cheio os desenvolvedores como, por exemplo: possuir um conjunto de componentes de interface prontos e padronizados; ter um modelo de programao dirigida a eventos, ou seja, que se assemelha muito ao desenvolvimento Java desktop utilizando Swing (padro J2SE). permitir que os desenvolvedores construam de forma simples seus prprios componentes aproveitando os fornecidos pelo JSF.

O framework JSF se baseia no modelo de programao Cliente/Servidor [COULOURIS&DOLLIMORE&KINDBERG, 1994], no qual os computadores podem ser divididos em dois grupos: Clientes e Servidores. Os servidores geralmente so mais poderosos e contm as informaes desejadas pelos computadores clientes. Esses computadores tambm fazem processamento de dados que podem ser muito pesado para mquinas que no possuam velocidade to expressiva como as que os servidores possuem.1 2

http://struts.apache.org/ http://java.sun.com/javaee/javaserverfaces/ 3 Spring: O Spring um framework open source criado por Rod Johnson e atua principalmente na camada de Controle do modelo MVC. A pgina oficial do projeto http://www.springframework.org/

O funcionamento das aplicaes baseadas no modelo Cliente/Servidor se d da seguinte maneira: o programa requisitante (cliente), quando necessrio, envia uma mensagem de requisio (request messages) ao servidor, indicando a URI (Uniform Resources Identifiers) e a informao desejada por intermdio dos mtodos de requisio (request methods), por exemplo: post, get, delete, entre outros, requisitando dessa forma algum processamento do servidor. Ao finalizar o servio solicitado, o servidor elabora uma mensagem de resposta (response messages) ao cliente informando os dados solicitados pelo computador Cliente ou ainda se houve alguma falha durante a execuo.

Ilustrao 1Funcionamento do protocolo HTTP. Fonte: THE WEB DESIGNER 5 HTTP PRIMER, 2006]

Finalmente, no caso de aplicaes Web, o cliente, com base na resposta do servidor, reconstri uma pgina totalmente nova, mesmo se esta for igual primeira, e a exibe ao usurio. Como dito anteriormente, o JSF um framework que se baseia no modelo de programao Cliente/Servidor e por utilizar apenas requisies sncronas, a cada evento realizado pelo cliente, criada uma requisio que vai at o servidor para realizar um processamento. Uma nova pgina deve ser totalmente construda, mesmo que esta seja igual anterior e exibida no browser do cliente, que espera todos esses acontecimentos sem usar o sistema. Uma possvel soluo para este problema seria a utilizao de AJAX (Asynchronous JavaScript and XML), uma tecnologia hoje em grande evidncia no contexto da programao Web, sendo utilizada pelo GMail4, GoogleMap5 entre outras. O AJAX tem impressionado pelo fato de que as pginas no precisam mais ser totalmente reconstrudas quando ocorrer algum evento. Utilizando esta tecnologia, as pginas atualizam apenas os dados que foram modificados. Desse modo os programas ficam muito mais interativos na viso do usurio.4 5

http://www.gmail.com/ http://maps.google.com/

Ainda assim existe pouca integrao do AJAX com os frameworks que atuam nas camadas de Viso e Controle do modelo MVC, que so as camadas mais interessadas nas vantagens oferecidas por essa tecnologia. Isso pode ser observado, por exemplo, no caso do framework JSF contido na especificao Java Enterprise Edition 5.06, que permite a criao de componentes personalizados, mas que ainda possui poucos recursos que facilitam a integrao com a tecnologia AJAX. O objetivo principal deste trabalho analisar as diversas maneiras de se efetuar uma integrao entre JavaServer Faces e AJAX, de forma a facilitar o desenvolvimento das pginas WEB e tambm sua utilizao. Para complementar o estudo, um componente foi desenvolvido possibilitando a integrao das duas tecnologias de maneira simplificada e eficiente, servindo como exemplo para desenvolvedores. Um outro objetivo deste trabalho um estudo para verificar se o framework JSF poderia incorporar em seus componentes a tecnologia AJAX, oferecendo assim os servios desta tecnologia aos seus usurios de maneira natural, eliminando dessa forma trabalho adicional aos desenvolvedores.

1.2 Objetivos

1.2.1 Objetivo Geral Estudo comparativo entre formas de integrao entre o framework JavaServer Faces e a tecnologia AJAX.

1.2.2 Objetivos Especficos Verificar se o framework JSF pode integrar a tecnologia AJAX nas suas prximas verses de maneira nativa. Desenvolver um componente utilizando a melhor forma de integrao das tecnologias comentadas, de acordo com as concluses do estudo realizado.

6

http://java.sun.com/javaee/technologies/javaee5.jsp

1.2.3 Metodologia Inicialmente ser feito um estudo aprofundado do framework JSF e da tecnologia AJAX. Depois dessa etapa pretende-se analisar, comparar e verificar as formas de integrao dessas duas tecnologias. Ser ento desenvolvido um componente que utilizar a melhor tcnica pesquisada.

2 BASE TERICA2.1 IntroduoPara que se possa compreender o assunto central deste trabalho necessrio definir inicialmente alguns conceitos relevantes ao tema.

2.2 JavaScript

uma linguagem de programao desenvolvida pelo Netscape em 1995, cujo principal objetivo era tornar os sistemas Web mais interativos. Com esta linguagem os programas podem, por exemplo, fazer a validao de valores inseridos pelo usurio no browser do cliente, sem a necessidade de efetuar uma requisio ao servidor [GOODMAN, 2001]. As principais caractersticas do JavaScript so: As variveis oferecem tipagem dinmica, ou seja, no precisam ter seus tipos declarados. Esta uma linguagem interpretada, portanto, o seu cdigo-fonte no precisa ser compilado. As funes desenvolvidas utilizando a linguagem JavaScript so executadas no browser do cliente. JavaScript orientada a eventos, ou seja, as funes so executadas quando um evento associado a funo ocorre.

Porm, uma das grandes desvantagens da utilizao de JavaScript o prejuzo causado na manuteno dos sistemas, haja visto que com a utilizao de funes dessa linguagem, parte da lgica colocada na camada de Viso do modelo MVC, diminuindo assim a compreenso sobre o cdigo fonte dos programas.

2.3 XML

O acrnimo XML significa Linguagem de Marcao Extensvel (eXtensible Markup Language). Esta linguagem usada para descrever documentos e dados de maneira padro, definida pelo W3C, que possam ser transportados utilizando a Internet [DURANT&BENZ, 2003]. atualmente utilizada em inmeras aplicaes, inclusive para programas desktops, devido facilidade de uso e a diversidade de funes disponveis.

Os principais benefcios da utilizao desta linguagem so: O desenvolvedor pode estend-la, ou seja, pode adicionar novas tags. Formal e fcil de ser usada. Os dados de diversas fontes podem ser integrados, ou seja, pode-se efetuar o compartilhamento de dados entre programas diferentes.

2.4 DOM

O Modelo de Objeto de Documento (Document Object Model) uma plataforma definida pelo W3C a qual armazena as informaes de uma pgina numa estrutura de dados conhecida como rvore, permitindo que programas e scripts acessem e alterem o contedo, a estrutura e o estilo dos documentos [W3C, 2006a].

Ilustrao 2 - DOM - rvore [CRANE&PASCARELLO, 2006]

que

contm

os

dados

de

uma

pgina

HTML.

Fonte:

O DOM uma API de programao de documentos e foi desenvolvido para ser utilizado em qualquer linguagem de programao. O DOM pode ser dividido atualmente em duas partes: DOM Core: define como sero feitos os acessos e as modificaes dos valores dos modelos de objetos de documentos. DOM Html: estabelece quais consultas e operaes podem ser realizadas sobre o documento HTML.

3 JAVASERVER FACES3.1 IntroduoEste framework o resultado de um projeto apoiado pela Sun e teve sua primeira verso apresentada em setembro de 2002 [GEARY&HORSTMANN, 2005]. O JavaServer Faces atua principalmente nas camadas de Viso e Controle do modelo MVC [FOWLER, 2003], conforme visualizado na figura abaixo, e tem como principal objetivo facilitar o trabalho dos desenvolvedores na construo das pginas dos sistemas Web. Para isso, disponibiliza aos usurios uma biblioteca de componentes prontos para serem utilizados e permite que novos componentes sejam criados de maneira simples. Alm disso, possui um modelo de programao dirigido a eventos, tentando se aproximar das aplicaes desktops.

Ilustrao 3 - Modelo MVC e seus frameworks

3.2 Contextualizao JSF

Nesta seo sero abordados alguns tpicos que compem o framework JSF e que so essenciais para a compreenso das sees posteriores.

3.2.1 Ciclo de Vida das Requisies JSF o caminho percorrido por uma requisio JSF, desde a sua criao, com a realizao de um evento, at a renderizao7 da pgina a ser exibida para o usurio. Este ciclo divido em seis fases, sendo que os desenvolvedores podem acrescentar novas etapas ou implementar artifcios para que as requisies no executem alguma determinada fase.

3.2.2 FacesServlet Conhecido como Controlador Frontal do framework JSF, visto que este o ponto pelo qual devem passar todas as requisies, assim que forem instanciadas. Depois de passar pelo FacesServlet a requisio comea a executar a primeira fase do ciclo de vida das requisies JSF.

3.2.3 View ID uma rvore de informaes de todos os componentes de uma pgina que instanciou uma requisio. As View IDs de cada pgina podem se encontrar em trs estados: Novo (New View) View que acaba de ser criada e que possui todas as informaes dos componentes vazias.

7

Renderizar: neologismo originado do verbo to render do ingls e que muito usado em livros tcnicos da

Inicial (Initial View) Na primeira vez em que uma pgina carregada as informaes dos componentes desta so preenchidas. Portanto, o estado Inicial View um estado subseqente ao New View. PostBack Ocorre quando a View de uma pgina j existe e precisa apenas ser restaurada para o usurio.

3.2.4 FacesContext Este objeto o responsvel por armazenar as View ID e todas as informaes necessrias para o framework JSF gerenciar os componentes de uma pgina.

3.2.5 Backing Beans So classes as quais contm parte ou todas as informaes dos valores de uma pgina [GEARY&HORSTANN, 2005]. a representao do formulrio HTML na forma de um objeto Java.

3.2.6 Faces-config.xml Este o principal arquivo de configurao do framework JSF, no qual se deve definir todos os backing beans e as regras de navegao que sero utilizadas na aplicao.

Finalizando este captulo, merece destaque a descrio do ciclo de vida do framework JSF, pois este assunto essencial para entender em quais momentos de uma requisio JSF a tecnologia AJAX pode ou no atuar.

rea da computao. Significa a converso de um dado para ser exibido.

3.3 Ciclo de Vida

3.3.1 Fases do Ciclo de Vida Para que no haja erros bsicos nos sistemas extremamente importante que os desenvolvedores tenham pleno conhecimento do ciclo de vida das aplicaes JSF. Este ciclo compreende todas as fases que ocorrem desde a requisio at o fornecimento da respectiva resposta de determinado usurio. Abaixo apresentada uma viso esquemtica deste ciclo.

Ilustrao 4 Ciclo de vida das requisies JSF fonte: [GEARY&HORSTMANN, 2005]

Como se pode observar na ilustrao anterior, o ciclo de vida de uma requisio JavaServer Faces pode ser dividido em seis fases:

3.3.1.1 Restaurar viso Esta a primeira fase do ciclo, iniciada quando o FacesServlet recebe uma requisio. A partir dessa ao o controle examina a requisio e a pgina que solicitou o servio. O FacesServlet ento verifica se j possui uma View ID da pgina solicitante no FacesContext. Caso ainda no exista, uma nova View ID criada.

3.3.1.2 Aplicar Valores de Requisio O objetivo inicial desta fase a recuperao do estado corrente de cada componente. Caso a propriedade immediate do componente no for igual a true, o valor do dado do componente apenas convertido para o tipo da propriedade em questo, como por exemplo: Integer, Boolean e String. No entanto, se a propriedade immediate do componente possuir o valor igual a true, o valor do componente convertido e validado j nesta fase.

3.3.1.3 Processar Validaes Nesta fase cada componente ir verificar se os valores que esto sendo recebidos podem ser aceitos sem que haja nenhum problema de dados, como por exemplo: um atributo numeral receber um valor contendo letras. Caso seja encontrado um erro, uma mensagem de erro adicionada no FacesContext e o controle da aplicao vai para a ltima fase do ciclo de vida, chamada Renderizar Resposta.

3.3.1.4 Atualizar Valores de Modelo Aqui o objetivo nico atualizar os valores dos backing beans. Como esta fase sucessora de validao e esta somente chamada caso ocorra sucesso na validao dos dados, pode-se efetuar a atualizao dos valores do modelo com segurana.

3.3.1.5 Invocar Aplicao So executados os listeners de ao (lgica de interface) e as aes (lgica de negcio), respectivamente. Tambm nesta fase do JSF a aplicao deve definir, dependendo das respostas das aes acima citadas e do arquivo faces-config.xml, a pgina a ser mostrada na seqncia ao usurio.

3.3.1.6 Renderizar Resposta ltima fase do ciclo de vida do framework JavaServer Faces, tem como objetivo principal o de reconstruir a pgina que deve ser exibida ao usurio.

3.3.2 Variaes do Fluxo do Ciclo de Vida O ciclo de vida das requisies que utilizam o framework JavaServer Faces, representado na Ilustrao 4 pode sofrer alteraes no fluxo, como por exemplo: saltar fases caso execute alguns eventos, como os de ao, de mudana de valor, etc.

3.3.2.1 Eventos de Mudana de Valor Os eventos de mudana de valor ocorrem, por exemplo, quando o usurio seleciona um valor de uma lista ou marca um checkbox ou um radio button. Quando um evento de mudana de valor ocorre, o ciclo de vida de uma aplicao JavaServer Faces executado normalmente at a terceira fase chamada de Processar Validaes (Process Validations).

Logo em seguida, se no houver erros, a funo definida para ser executada ao ocorrer um evento de mudana de valor processada. Depois dessa ao, as fases restantes do ciclo de vida so executadas normalmente at que uma nova pgina seja exibida ao usurio.

3.3.2.2 Eventos de Ao Eventos de ao so executados quando o usurio clica em um boto ou um link de uma aplicao. Quando um evento de ao ocorre, o ciclo de vida de uma requisio JSF executado normalmente at a penltima etapa, conhecida como Invocar Aplicao (Invoke Application). Nesta fase a ao definida para ser invocada executada. Depois do cumprimento dessas etapas, a ltima fase do ciclo de vida das requisies JSF executada, finalizando o ciclo.

3.3.2.3 Tags Event Listener Esses eventos so representados pelas classes ActionListener e ValueChangeListener e so anlogos respectivamente aos eventos de ao e s mudanas de valor. A diferena entre esses eventos que, enquanto nos primeiros deve-se representar o evento numa classe, nos ltimos deve-se utilizar uma tag. Mesmo com esta pequena diferena, o fluxo do ciclo de vida entre os eventos de ao e mudana de valor com seus respectivos tag event listeners so iguais.

3.3.2.4 Componentes Imediatos So utilizados quando se deseja executar uma ao numa pgina sem que haja a necessidade de conferir o preenchimento de todos os campos obrigatrios. Os componentes imediatos podem ser divididos em dois tipos: Componentes de Entrada Imediatos: Fazem parte deste tipo de componentes: os de entrada de texto e os que permitem ao usurio selecionar um determinado dado. O fluxo do ciclo de vida para estes componentes ocorre normalmente at a fase de Aplicar Valores de Requisio (Apply Request Values). Logo aps esta etapa, a converso e validao do dado que sofreu a ao realizada. Depois de realizadas todas essas aes o fluxo se encaminha ento para a ltima fase do ciclo de vida: Renderizar Resposta (Render Response). Componentes de Comando Imediatos: Os links e botes podem fazer parte dos componentes de comandos imediatos. O fluxo do ciclo de vida de uma requisio de uma aplicao JSF para este tipo de componente idntico ao dos Componentes de Entrada Imediatos apresentados anteriormente, ou seja, segue normalmente at a segunda fase, Aplicar Valores de Requisio (Apply Request Values). A requisio ento segue diretamente para a ltima fase Renderizar Resposta (Render Response).

3.3.2.5 Eventos de Fase

O framework JSF permite que seus desenvolvedores criem novas fases do ciclo de vida das requisies. Nessas novas etapas o sistema poderia, por exemplo, verificar os erros e a permisso do usurio para execuo de certas aes.

3.4 Vantagens da utilizao do framework JSF

Permitir que os programadores criem interfaces usando os componentes do framework ou componentes desenvolvidos por algum desenvolvedor. Possuir inmeras IDEs e plugins que ajudam e facilitam o desenvolvimento de sistemas utilizando este framework. Possuir um modelo de programao orientado a eventos. Oferecer facilidade de construo de novos componentes.

3.5 Desvantagens da utilizao do framework JSF

Conter pouca documentao de qualidade disponvel visto o pouco tempo de existncia em comparao a outros frameworks. Executar apenas requisies sncronas.

3.6 Aplicao Exemplo

Nesta seo ser apresentado um exemplo de mdulo de aplicativo cujo cdigo-fonte est disponibilizado na seo 10.1 Exemplo JSF, o qual utiliza o framework JSF. Entretanto, o referido mdulo no aproveita as vantagens da tecnologia AJAX e, conseqentemente, apresenta o problema citado anteriormente, em que a cada ao executada h a necessidade da reconstruo de uma nova pgina, mesmo que esta seja igual anterior.

O exemplo criado para demonstrao foi um programa de cadastro de dados de pessoas, como pode ser visto na figura abaixo.

Ilustrao 5 - Exemplo de programa usando JSF

Este aplicativo possui algumas particularidades, como por exemplo: Nmero do CPF: Para verificar se o nmero do CPF informado vlido usando a tcnica de dgito verificador, foi criada uma classe CPFValidator que implementa a interface Validator disponibilizada pelo framework JSF. Utilizando o framework JSF, o implementador pode efetuar a validao do nmero do CPF de duas maneiras: validao aps preenchimento do CPF. Neste caso, a tela toda deveria ser atualizada mesmo que a maioria de seus dados permanecesse os mesmos, causando tal desconforto ao usurio, alm da performance da aplicao ficar prejudicada; outra alternativa seria aguardar o final do preenchimento de todos os campos e o clique no boto OK para que tal validao fosse realizada. Esta tcnica (utilizada neste exemplo) tambm necessita que a pgina seja totalmente reconstruda aps este evento.

Caso ocorra um erro de validao do nmero do CPF o sistema reconstri a pgina de cadastro e exibe a mensagem de erro, como pode ser visto na figura abaixo:

Ilustrao 6 - Exemplo de programa usando JSF - Erro CPF

Seleo do estado: Todas as vezes em que o usurio selecionar um estado diferente na tela de cadastro, conforme Ilustrao 7, o sistema faz uma requisio ao servidor, que executa um mtodo, no caso populeListaCidades da classe PessoaForm. Com a invocao desse servio a pgina de cadastro reconstruda, disponibilizando ao usurio todas as cidades do programa que esto associadas ao estado selecionado.

Ilustrao 7 - Exemplo de programa usando JSF - Disponibilizando cidades

3.7 Concluso

Com o estudo sobre JavaServer Faces, um framework que atua nas camadas de Viso e Controle dos aplicativos Web, foi possvel observar a sua grande contribuio para a implementao de aplicaes para uso na Internet. No entanto, como foi demonstrado no mdulo do aplicativo descrito na seo 3.6 Aplicao Exemplo, implementado usando JSF, uma de suas deficincias a inexistncia de recursos que permitam que as pginas no precisem ser totalmente reconstrudas ao sofrerem algum evento, mesmo que apenas partes dos dados tenham sido modificadas. Tal deficincia, alm de degradar a performance dos sistemas, gera desconforto para o usurio. Dessa forma, na continuidade deste trabalho so buscados recursos para a integrao da tecnologia AJAX com o JSF objetivando eliminar as deficincias apresentadas neste tpico sobre o JSF.

4 AJAX4.1 Introduo

Neste captulo pretende-se comentar algumas caractersticas importantes do conjunto de tecnologias to em voga nos ltimos meses, chamado de AJAX. Esse conjunto de tecnologias no era muito conhecido at a Google, uma das maiores empresas do mundo, com grande destaque no oferecimento de recursos de busca de contedos na Web, comear a investir e a utilizar o AJAX em seus aplicativos como: Gmail, Google Suggest, GoogleMap, entre outros. A partir de ento, o AJAX comeou a ser objeto de estudo de muitos desenvolvedores e centros de pesquisa, e comeou a ser integrado a diversos aplicativos no mundo inteiro.

4.2 Histrico

O Internet Explorer 5 teve sua verso lanada no final do sculo passado e contou com um objeto novo - at ento chamado ActiveX - que implementava Microsoft.XMLHTTP. Tal objeto permitia a realizao de requisies assncronas. Com o sucesso do lanamento do MicrosoftXMLHTTP, o W3C (World Wide Web Consortium), conjunto de empresas formado pela Sun Microsystems, Microsoft Corporation, Mozilla Foundation, entre outras, que desenvolvem e definem padres do WWW (World Wide Web), padronizou a implementao nos browsers de um objeto similar ao MicrosoftXMLHTTP, chamado de XMLHTTPRequest. O documento que formalizou este padro pode ser visto em:

http://www.w3.org/TR/XMLHttpRequest/. Contudo, a Microsoft manteve o uso de seu componente (MicrosoftXMLHTTP) e no aderiu aos padres W3C. Como conseqncias, existem vrias diferenas entre Internet Explorer da Microsoft e os demais navegadores, como por exemplo, a criao de um objeto XMLHTTPRequest.

Para criar um objeto XMLHTTPRequest no Internet Explorer deve-se utilizar o JavaScript das seguintes formas:

1 - var xmlhttp = new ActiveXObject(Microsoft.XMLHttp);

2- var xmlhttp = new ActiveXObject(MSXML2.XMLHttp);

J nos demais browsers, como no Mozilla Firefox, Konqueror e Netscape, deve-se inicializar o objeto XMLHTTPRequest desta maneira:

var xmlhttp = new XMLHttpRequest();

Esta uma das inmeras diferenas de comportamento entre os navegadores de internet que aceitam JavaScript, o que torna difcil a implementao de solues genricas para todos os browsers de mercado. Com a implementao em todos os navegadores do XMLHTTPRequest e do DOM, e a utilizao do XML e do JavaScript, os desenvolvedores puderam implementar recursos nos aplicativos para atualizar alguns dados de uma pgina sem ter que reconstru-la integralmente, tarefa esta que s era possvel de ser feita atravs de artifcios de programao (utilizando iFrames). Com isso, utilizando o XMLHTTPRequest, as novas informaes que aplicativos deveriam mostrar ao seu usurio poderiam ser colocadas em algum ramo da rvore e a pgina poderia renderizar apenas o contedo alterado. Em fevereiro de 2005, Jesse James Garret, funcionrio de uma empresa de consultoria e desenvolvimento de softwares chamada Adaptive Path, nomeou de AJAX a integrao de todas as tecnologias citadas acima, tais como, XML, JavaScript, DOM e outras, no intuito de acrescentar mais dinamismo aos programas. [ADAPTATIVE PATH, 2006]. A sigla AJAX significa Asynchronous JavaScript and XML. O primeiro A da sigla significa Assncrono (Asynchronous), ou seja, o cliente pode solicitar aes ao servidor, porm esse pode continuar interagindo com o sistema, no precisando ficar parado enquanto o servidor processa a informao. O resto da sigla, JAX, demonstra os dois principais componentes utilizados: JavaScript e XML.

4.3 Caractersticas

Segundo o livro AJAX in Action [CRANE&PASCARELLO, 2006], a tecnologia AJAX segue trs princpios: Os browsers apenas acessam a aplicao: Os browsers so apenas terminais que possuem acesso ao sistema, portanto, cada vez que o usurio necessita requisitar uma informao nova, deve solicitar tal informao ao servidor. Para diminuir esse trfego de requisies, o conjunto de tecnologias AJAX transfere uma parte da lgica de aplicao para o browser do cliente. Servidores enviam dados: A cada nova requisio o servidor deve enviar ao seu cliente uma resposta contendo, normalmente, um conjunto de dados solicitados. Interao com usurio pode ser contnua: No desenvolvimento de sistemas sem a utilizao de AJAX, a cada ao o usurio deveria esperar o processamento do sistema e a renderizao da pgina para continuar a utilizar o programa. Como o AJAX utiliza o modo de atualizao de dados assncrono, o sistema pode executar processamentos, como por exemplo, validao de campos, sem ter que deixar o usurio esperando que a pgina seja renderizada.

4.4 Funcionamento

As interaes entre o cliente e o servidor utilizando a tecnologia AJAX podem ser vistas na figura abaixo:

Ilustrao 8 - Fases do AJAX - fonte: [SUN, 2006a]

Passo 1: o usurio executa um evento na pgina, como por exemplo, digitar alguma palavra num determinado campo. Passo 2: nesta etapa um objeto XMLHTTPRequest criado e configurado, ou seja, esta instncia recebe o mtodo que deve executar no servidor e determinar se esta ao deve ser realizada de maneira assncrona. Passo 3: o objeto XMLHTTPRequest criado no passo 2 executa a ao configurada tambm na etapa anterior. Passo 4: neste passo pode-se fazer a validao de alguns valores do programa, como verificar se o usurio tem permisso para executar esta ao. Esta uma etapa opcional da tecnologia AJAX.

Passo 5: os resultados da ao do XMLHTTPRequest, executada no Passo 3, so colocados em um XML que ser retornado ao cliente. Passo 6: Nesta etapa chamada uma funo JavaScript no cliente, o qual verifica se o mtodo foi executado com sucesso e, em caso afirmativo, so atualizados alguns dados no DOM. Passo 7: Neste ltimo passo os dados que foram modificados na etapa anterior so exibidos ao usurio.

4.5 Vantagens da utilizao da tecnologia AJAX

As grandes vantagens da utilizao desta tecnologia so: Aumento da performance: Por meio de diversos estudos consagrados foi atestada que a utilizao do AJAX de maneira correta pode aumentar a performance dos aplicativos, j que algumas pginas no precisam ser totalmente recarregadas a todo o momento [CRANE&PASCARELLO, 2006], diminuindo assim a quantidade de dados trafegados na rede, conforme figura abaixo.

Grfico 1 - Comparao dos dados enviados do servidor para o cliente. Fonte [CRANE&PASCARELLO, 2006]

Como observado no grfico, apesar de o nmero de dados que trafegam entre o cliente e o servidor de uma aplicao que utiliza o conjunto de tecnologias AJAX ser maior no incio do uso do sistema, a funo que representa esta quantidade quase constante. Enquanto isso, a funo que representa a quantidade de dados de um sistema desenvolvido sem AJAX possui um coeficiente angular muito maior, portanto, apresenta um crescimento do nmero de informaes igualmente superior. Maior interao com o usurio: Com a utilizao do AJAX pode-se perceber tambm que os aplicativos apresentam uma maior interao com o usurio, pela diminuio do tempo de espera. O usurio pode fazer uso de outras partes da pgina enquanto aguarda o processamento do servidor e utilizar este conjunto de tecnologias para validar e/ou autocompletar campos.

4.6 Desvantagens da utilizao da tecnologia AJAX

Aumento de uso de JavaScript: Uma das conseqncias da utilizao do AJAX o aumento significativo do uso da tecnologia JavaScript, muito eficiente, porm causadora de muitos transtornos na manuteno de sistemas. Esta degradao acontece porque com o uso dessa linguagem uma parte da lgica colocada na camada de Viso do sistema, dificultando assim a compreenso do cdigo do programa. Como se no bastasse, ainda h diferentes formas em que os navegadores trabalham com esta linguagem, o que funciona no Internet Explorer pode no funcionar em outro browser como no Mozzila Firefox, por exemplo, Adicionalmente, o usurio pode desabilitar o servio de JavaScript de seu browser e com isso qualquer pgina que contiver AJAX no funcionar corretamente. Boto voltar do navegador: Utilizando o AJAX possvel modificar apenas alguns valores mostrados em uma pgina, sem alterar o endereo (URL). Podem ento ocorrer problemas ao se clicar no boto voltar do navegador, j que este ir mostrar a pgina do ltimo endereo contido no browser. Por este mesmo motivo algumas pginas podem no aparecer no histrico do navegador.

4.7 Aplicao Exemplo

Nesta seo ser apresentado o mesmo exemplo da seo 3.6 Aplicao Exemplo, porm usufruindo da tecnologia AJAX e tentando assim obter um aplicativo mais interativo do ponto de vista do usurio. O cdigo-fonte deste exemplo encontra-se no captulo Anexo na seo 10.2 Exemplo JSF + AJAX. As principais vantagens obtidas pelo uso deste conjunto de tecnologias no exemplo construdo foram:

Ilustrao 9 - Exemplo de programa usando JSF e AJAX - Verificando senha fraca

Senha: Neste exemplo, quando o usurio tirar o foco do campo de senha, ocorre a execuo de um mtodo Java utilizando o AJAX para verificar se a senha informada possui nmeros e letras que a tornam uma senha mais adequada do ponto de vista de segurana computacional. Depois da invocao deste mtodo, caso a senha no atenda aos requisitos definidos, o sistema exibe ao lado do campo Senha uma mensagem em vermelho: A senha deve conter letras e nmeros, como mostrado na figura referenciada. CPF: A validao no ocorre mais em uma classe CPFValidator, como no exemplo da seo 3.6 Aplicao Exemplo Agora a validao ocorre quando o usurio tira o foco do campo

invocando um mtodo usando AJAX. Caso o CPF no seja vlido, o sistema imediatamente mostra ao usurio a mensagem de que o valor informado para este campo est irregular. E-mail: A validao do valor de E-mail invocada toda vez que o usurio tira o foco deste campo. Caso o usurio no tenha colocado o caractere @, o sistema mostra uma mensagem de E-mail invlido. Escolha do estado e da cidade: Toda vez que o usurio selecionar um estado (UF), o sistema executa um mtodo, o qual disponibiliza ao usurio na segunda selectOneListbox todas as cidades associadas ao estado selecionado, sem a necessidade de renderizar toda a tela novamente.

Como pde ser visto, em todas as situaes citadas no exemplo, com o uso do conjunto de tecnologias AJAX, a pgina no precisa ser totalmente reconstruda para mostrar a mensagem de erro, executar validaes ou disponibilizar as cidades do estado selecionado.

4.8 Concluso

Conclui-se que o grande benefcio desta tecnologia, to comentada, utilizada e pesquisada, a interatividade aplicada aos sistemas, reduzindo assim um dos maiores problemas das aplicaes Web, que obriga o cliente, depois de solicitar algum processamento ao servidor, esperar pelo resultado para continuar seu trabalho. Adicionalmente, o AJAX permite tambm a atualizao de apenas alguns dados nas telas dos sistemas, sem a necessidade de renderizao de toda pgina.

5 FORMAS DE INTEGRAO5.1 Introduo

Neste captulo ser realizada uma anlise aprofundada das formas de integrao da tecnologia AJAX e do framework JSF. Sero analisadas uma srie de publicaes, entre as quais se destacam o artigo Using JavaServer Faces Technology with AJAX [MURRAY&NORBYE&BURNS, 2005] de Greg Murray, Tor Norbye e Ed Burns e o livro Pro JSF and AJAX [JACOBI&FALLOWS, 2006a], escrito por Jonas Jacobi e John R.Fallows. A integrao entre a tecnologia AJAX e o framework JavaServer Faces pode ser dividida inicialmente de duas maneiras: com o uso dos componentes JSF, adicionando na pgina as funcionalidades AJAX ou com a confeco de componentes personalizados.

5.2 Sem a construo de componentes personalizadosEsta a forma de integrao na qual o desenvolvedor no precisa personalizar componentes JSF para que esses disponibilizem as funes da tecnologia AJAX aos seus usurios. As idias de integrao que consideram este princpio so apresentadas abaixo:

5.2.1 Integrando os componentes JSF com AJAX por intermdio de funes JavaScript comentada a seguir a forma de integrao apresentada no artigo Using JSF with AJAX [MURRAY&NORBYE&BURNS, 2005]. Nesta estratgia de integrao AJAX e JSF, o desenvolvedor pode utilizar componentes disponibilizados pelo prprio framework JavaServer Faces, no necessitando portanto, criar o seu prprio componente.

Nessa forma de integrao o desenvolvedor o responsvel por todos os mecanismos de integrao AJAX e JSF, como por exemplo: escrever funes JavaScript, criar objetos XMLHttpRequest, executar requisies assncronas e atualizar dados de uma pgina aps o DOM sofrer alguma alterao. A forma de integrao comentada ilustrada na figura abaixo, com as aes realizadas por uma requisio de aplicao.

Ilustrao 10 - Representao da Forma 3 de integrao AJAX e JSF do artigo 1

Os passos executados pela requisio desde a ao do usurio at a renderizao da pgina so:

1)

Toda vez que o usurio selecionar um valor para o campo Estado, um novo

objeto XMLHttpRequest instanciado.

2)

Neste momento o objeto XMLHttpRequest invoca uma instncia de

AjaxControllerServlet, que deve ser criada pelo desenvolvedor, passando o mtodo que deve ser executado e os parmetros necessrios para sua realizao.

3)

A instncia de AjaxControllerServlet repassa a responsabilidade de executar o

mtodo, passado anteriormente pelo XMLHttpRequest, para a classe capaz de realiz-lo, neste caso a classe GerenciadorEstadoCidade.

Uma instncia da classe GerenciadorEstadoCidade ir filtrar todas as cidades que pertencem ao valor de Estado selecionado pelo usurio.

4)

Depois de o objeto da classe GerenciadorEstadoCidade selecionar as cidades

no passo anterior, esse transfere instncia de AjaxControllerServlet todos esses valores filtrados para serem empacotados em um arquivo XML e repassados ao browser do usurio.

5)

Nesse momento a funo Callback da instncia XMLHttpRequest invocada,

repassando assim os registros contidos no XML para a pgina do usurio.

6)

A funo Callback da instncia de XMLHttpRequest atualiza o DOM da pgina

do cliente com os dados recebidos no XML criado no passo anterior.

Nessa forma de integrao so utilizados dois Servlets: FacesServlet, que gerencia as requisies JSF e AjaxControllerServlet, que administra as solicitaes utilizadas com a tecnologia AJAX. Como neste exemplo no foi desenvolvido nenhum componente JSF, apesar de reduzir o trabalho de desenvolvimento inicial, esta soluo s resolve problemas especficos, neste caso a disponibilizao das cidades do estado (UF) selecionado pelo cliente. Caso o desenvolvedor deseje ter esta mesma funcionalidade em outra pgina, adotando esta forma de integrao AJAX e JSF, ele dever duplicar todo o cdigo utilizado na primeira pgina. Alm das desvantagens apresentadas, nessa forma de integrao as funes JavaScript, criadas pelo desenvolvedor, ficam nas pginas jsp, fazendo com que qualquer usurio do sistema possa analisar facilmente este cdigo, deixando o sistema vulnervel em termos de segurana. Tais funes JavaScript podem ser construdas automaticamente, como feitas na biblioteca DWR (que ser apresentada na seo 6.2.6 DWR deste trabalho). No entanto, tal biblioteca ainda possui algumas limitaes, como a quantidade de funcionalidades disponveis, por exemplo. Concluindo, destaca-se que a maior deficincia dessa forma de integrao a necessidade da duplicao de cdigo fonte a cada utilizao da funcionalidade que utiliza AJAX, refletindo na manuteno dos programas.

5.2.2 Modificando a especificao JSFEsta idia, conhecida como AVATAR, surgiu em janeiro de 2006 apresentada no blog de Jacob Hookom [HOOKOM, 2006], desenvolvedor que contribui com idias e implementaes para a Sun para a melhoria do framework JSF. O principal objetivo atualizar apenas os dados da pgina que foram modificados, no necessitando para tal renderizar toda a pgina novamente, nem criar classe adicional para a utilizao de requisies assncronas. No JSF, cada componente tem controle sobre si durante todo o ciclo de vida das requisies, com isso, no final de uma requisio invocada por um usurio, todos os componentes de uma pgina se atualizam. Esta idia tem como principais princpios o de reimplementar algumas classes da especificao JSF, entre elas: UIComponent, UIComponentBase, UIViewRoot. Assim, as atualizaes da rvore DOM ocorreriam utilizando-se a tecnologia AJAX e s seriam atualizados os ramos que sofreram alguma alterao. Modificando as classes citadas da especificao JSF, todos os componentes herdariam ento a capacidade de utilizar a tecnologia AJAX, sem nenhum esforo adicional do desenvolvedor. Testes iniciais desenvolvidos por Jacob Hookom demonstram a melhoria da eficincia com a adoo dessa idia, de acordo com a tabela abaixo:

Tabela 1 - Comparao entre JSF e JSF com Avatar [HOOKOM, 2006] JSF JSF + Avatar Tempo de renderizao 12.51ms 0.17ms Quantidade de dados 17KB 89bytes

Dentro desse preceito, o desenvolvedor no precisa saber JavaScript. Porm, caso necessrio, pode utilizar tal linguagem para sobrescrever algumas funes, adicionar ou melhorar algumas funcionalidades existentes. Apresentada no ltimo JavaOne [JAVAONE, 2006], maior conferncia mundial sobre tecnologia Java, a idia teve uma grande repercusso e aceitao por partes dos desenvolvedores que utilizam o framework JSF.

A grande vantagem dessa forma de integrao o fato de que o usurio, ao construir seus prprios componentes, no precisa saber nem se preocupar em como ir integrar esses componentes com a tecnologia AJAX. Diante desse fato, a dificuldade e o tempo de desenvolvimento de componentes JSF que utilizam esta tecnologia devem cair consideravelmente.

5.3 Desenvolvendo componentes personalizados

Neste modo de integrao AJAX e JSF, o desenvolvedor obrigado a construir componentes personalizados, o que inicialmente necessita de mais trabalho que a forma anterior (apresentada na seo Erro! Fonte de referncia no encontrada.). Entretanto, personalizando seus prprios componentes, o desenvolvedor obtm algumas vantagens: reutilizar componentes e dificultar a visualizao, por parte dos usurios do sistema, das funes JavaScript. Atualmente existem duas formas de integrao da tecnologia AJAX com o framework JSF que envolvem esta idia, dependendo do nmero de Servlets usados para isso, conforme explicado nas sees abaixo:

5.3.1 Usando apenas um ServletA idia bsica se sustenta no fato de que todas as requisies que utilizam ou no o AJAX devam passar pelo Servlet disponibilizado pelo framework JavaServer Faces, conhecido como FacesServlet, e modificar em algum momento o fluxo do ciclo de vida das requisies JSF para que o sistema usufrua dos benefcios da tecnologia AJAX. A seguir sero apresentadas inmeras idias de integrao entre AJAX e JSF que fazem uso de apenas um Servlet:

5.3.1.1 Utilizando um PhaseListener aps a quinta fase do ciclo de vida

Esta uma forma de integrao escrita no artigo Using JSF with AJAX [MURRAY&NORBYE&BURNS, 2005] e pode ser representada pela figura abaixo:

Ilustrao 11 - Representao da Forma 1 de integrao AJAX e JSF do artigo 1

O roteiro a ser seguido pela requisio, desde a ao do usurio at a renderizao da pgina, comentado a seguir:

1)

Toda a vez que o usurio selecionar um estado na pgina, um objeto

XMLHttpRequest instanciado.

2)

Depois de ser criado, o objeto XMLHttpRequest invoca a instncia da classe

FacesServlet repassando a esta o mtodo a ser executado juntamente com os parmetros necessrios para que ele seja realizado. No exemplo, o parmetro o valor do estado selecionado.

3)

Ao receber a requisio, a instncia de FacesServlet a repassa para que assim

seja executada a primeira fase do ciclo de vida das requisies JSF, chamada de Restaurar Viso.

4)

Neste momento a requisio j passou pela primeira fase do ciclo de vida das

requisies JSF e ento comea a executar a segunda fase, chamada de Aplicar Valores de Requisio.

5)

Ao finalizar a fase anterior, a requisio comea a executar a terceira fase do

ciclo, conhecida como Processar Validaes.

6)

Depois da terceira fase do ciclo de vida das requisies JSF, a requisio

executa a quarta fase do ciclo, chamada de Atualizar Valores do Modelo.

7)

Neste momento a requisio inicia a realizao da quinta fase do ciclo,

conhecida como Invocar Aplicao.

8)

Ao finalizar a quinta fase do ciclo de vida das requisies JSF, o fluxo da

requisio desviado, em vez de passar para a sexta fase chamada de Renderizar Resposta uma instncia nomeada de RenderPhaseListener invocada.

9 e 10) Neste momento, a instncia de RenderPhaseListener invoca um objeto da classe GerenciadorEstadoCidade, a fim de que esta filtre todas as cidades que pertencem ao estado selecionado pelo usurio. Depois dessa pesquisa todas as cidades selecionadas so repassadas instncia de RenderPhaseListerner.

11)

Ao receber o resultado da pesquisa realizada, o objeto da classe

RenderPhaseListerer empacota todos estes registros em um arquivo XML. Ao empacotar os dados a instncia de FacesContext invocada.

12)

Ao

ser

invocado,

o

objeto

de

FacesContext

executa

o

mtodo

responseComplete() finalizando assim o ciclo de vida das requisies JSF e invocando a funo CallBack da instncia XMLHttpRequest.

13)

A funo XMLHttpRequest Callback atualiza o DOM da pgina de acordo com

o XML retornado, mostrando assim as opes de cidades que pertencem ao estado selecionado pelo usurio.

Uma observao importante a respeito dessa forma de integrao o fato de que as requisies que se utilizam da tecnologia AJAX modificam o fluxo de execuo antes da sexta e ltima fase do ciclo de vida de uma requisio JavaServer Faces, chamada de Renderizar Resposta. Essa forma de integrao tambm apresentada no artigo Super-Charge JSF AJAX Data Fetch [JACOBI&FALLOWS, 2006b]. Um dos problemas que pode ser gerado o fato que se vrios PhaseListeners forem adicionados ao ciclo de vida e configurados para serem executados na mesma fase, o desenvolvedor no pode garantir a ordem de sua execuo. Um outro problema dessa idia que o desempenho de um sistema inversamente proporcional ao nmero de PhaseListeners nele adotado, dado ao fato de que todas as instncias de cada PhaseListener so invocadas nas requisies.

5.3.1.2 Reimplementando os renderizadores dos componentes

Esta uma das formas de integrao AJAX e JSF apresentadas no artigo SuperCharge JSF AJAX Data Fetch [JACOBI&FALLOWS, 2006b], conhecida como The Renderer Approach. So adicionadas funcionalidades ao Renderizador, que disponibilizado pelo framework JSF, a fim de que consiga renderizar alguns componentes no usurio sem ter que reconstruir toda a pgina. Na ilustrao a seguir so exibidas as aes realizadas pela requisio de uma aplicao que faz uso da forma de integrao comentada.

Ilustrao 12 - Representao da Forma 1 de integrao AJAX e JSF do artigo 2

Os passos executados pela requisio desde a ao do usurio at a pgina ser reexibida ao usurio so:

1)

Toda vez que o usurio selecionar um valor do campo Estado na pgina, ir

ser construdo um objeto XMLHttpRequest.

2)

O objeto XMLHttpRequest ir invocar ento uma instncia da classe

FacesServlet passando para esta o mtodo que deseja executar juntamente com seus parmetros.

3)

Neste momento a instncia da classe FacesServlet repassa a requisio para a

fase chamada de Restaurar Viso, que a primeira etapa do ciclo de vida de requisies JSF.

4)

Ao finalizar a primeira fase do ciclo de vida das requisies JSF comea a

segunda etapa chamada de Aplicar Valores de Requisio, a qual o grande diferencial desta idia de integrao comparando-se com as requisies JSF.

5 e 6) Durante a segunda fase do ciclo de vida das requisies JSF invocada uma instncia da classe GerenciadorEstadoCidade para que esta filtre as cidades pertencentes ao estado (UF) selecionado pelo usurio.

7)

Agora a aplicao j contm a lista de cidades do estado (UF) selecionado,

portanto o objeto da classe Renderizador invoca o mtodo responseComplete() da classe FacesContext e com isso todas as demais fases do ciclo so ignoradas.

8)

A funo Callback da instncia de XMLHttpRequest invocada e os dados

alterados podem ser renderizados na pgina do cliente.

9)

A funo do XMLHttpRequest Callback atualiza o DOM da pgina colocando

neste os registros vindos do XML. Com isso a pgina mostra ao usurio todas as cidades que pertencem ao estado selecionado.

Uma observao importante refere-se ao fato de que o ciclo de vida das requisies JSF interrompido aps a segunda fase para todos os componentes que tiverem seus renderizados sobrescritos. Um dos possveis problemas que podem ocorrer ao fazer uso dessa forma de integrao quando h algum componente que esteja com o valor do atributo immediate igual a true na pgina em que a requisio foi criada. Dessa forma a lgica do problema chamada antes da segunda fase do ciclo, denominada Aplicar Valores de Requisio, danificando assim o correto funcionamento.

5.3.1.3 Utilizando um PhaseListener aps a primeira fase do ciclo de vida

Apresentada por Mark Basler [BASLER, 2006a], tem como idia principal a de alterar o ciclo de vida das requisies JSF incluindo neste um PhaseListener que atue aps a primeira fase do ciclo, conhecida como Restaurar Viso. Todos os passos realizados por uma requisio que se utiliza desta idia de integrao AJAX e JSF podem ser observados na figura abaixo.

Ilustrao 13 - Representao da Forma 1 de integrao AJAX e JSF segundo Mark Basler

De acordo com a ilustrao apontada, as etapas realizadas por uma requisio que utiliza esta forma de integrao so:

1)

Sempre que o usurio selecionar um valor para o Estado no exemplo mostrado

acima, um novo objeto XMLHttpRequest criado.

2)

Aps ser criado, o objeto XMLHttpRequest invoca a instncia da classe

FacesServlet repassando para esta o nome do mtodo a ser executado e os parmetros necessrios para sua realizao

3)

A requisio, ao chegar na instncia da classe FacesServlet, inicia a primeira

fase do ciclo de vida das requisies JSF, chamada de Restaurar Viso.

4)

Depois da fase Restaurar Viso, a requisio passa a executar a fase

PhaseListener, adicionada ao ciclo de vida das requisies JSF.

5 e 6) Durante a fase PhaseListener invocada uma instncia da classe GerenciadorEstadoCidade para que esta filtre as cidades pertencentes ao estado selecionado pelo usurio.

O PhaseListener tambm tem a funo de inserir todas as cidades filtradas num arquivo XML, que deve ser encaminhado para o browser do usurio, atualizando dessa forma os dados a serem mostrados.

7)

Neste momento o sistema j contm um arquivo XML no qual existe uma lista

com todas as cidades que devem ser exibidas ao usurio. Uma instncia da classe FacesContext invocada.

8)

Na

instncia

da

classe

FacesContext

executado

o

mtodo

responseComplete(). Com isso todas as fases seguintes do ciclo de vida das requisies JSF no so realizadas. Depois dessas atividades o mtodo CallBack da classe XMLHttpRequest invocado e o DOM da pgina atualizado de acordo com o XML criado nas etapa anterior.

9) anteriormente.

Nesta etapa o sistema exibe ao usurio todas as cidades do estado selecionado

Esta idia de integrao muito similar apresentada na seo 5.3.1.1 Utilizando um PhaseListener aps a quinta fase do ciclo de vida, pois desviam o fluxo do ciclo de vida das requisies JSF incluindo uma classe PhaseListener durante este ciclo. Porm, enquanto esta idia apresentada por Mark Basler executa apenas a primeira fase do ciclo de vida das requisies JSF, as solues apresentadas anteriormente executam todas, com exceo da ltima fase, chamada de Renderizar Resposta. Esta forma de integrao possui o mesmo problema que a apresentada na seo 5.3.1.1 Utilizando um PhaseListener aps a quinta fase do ciclo de vida, ou seja, se houver muitos Listeners para serem executados na mesma fase o desenvolvedor no pode garantir a ordem de execuo. Pelo fato de serem invocados em todas as requisies, o aumento da utilizao de PhaseListeners faz com que o desempenho do sistema decaia, constituindo um outro grande problema. No ltimo livro lanado por Chris Schalk, Ed Burns e James Holmes essa forma de integrao apresentada acima tambm apoiada [SCHALK&BURNS&HOLMES, 2006].

5.3.1.4 Utilizando um PhaseListener antes da primeira fase do ciclo de vida

O artigo Including AJAX Functionality in a Custom JavaServer Faces Component [MURRAY&BALL, 2006] apresenta uma nova forma de integrao da tecnologia AJAX com o framework JSF. O artigo sugere utilizar apenas o Servlet disponibilizado pelo JavaServer Faces chamado de FacesServlet. Porm, ao contrrio das idias exibidas anteriormente, nenhuma fase do ciclo de vida das requisies JSF executada. Todos os passos executados pela requisio que utiliza a tecnologia AJAX podem ser observados na figura que segue.

Ilustrao 14 - Representao da Forma 1 de integrao AJAX e JSF de Super-Charge jax Data Fetch

Como ilustrado, as etapas de uma requisio que utiliza esta forma de integrao executa so:

1)

Cada vez que o usurio selecionar na pgina um valor para o Estado, uma

instncia da classe XMLHttpRequest criada.

2)

Neste momento a instncia da classe FacesServlet invocada pelo

XMLHttpRequest, que passa para esse o mtodo a ser executado juntamente com os parmetros necessrios.

3)

Depois de chamado, o FacesServlet deveria invocar a primeira fase do ciclo de

vida das requisies JSF, chamada de Restaurar Viso, porm nesta idia inserida uma classe PhaseListener que deve ser executada antes desta fase.

4 e 5) Ao

ser

invocada

a

instncia

da

classe

PhaseListener,

a

classe

GerenciadorEstadoCidade, responsvel por filtrar todas as cidades que pertencem ao estado selecionado pelo usurio, delega a funo. Depois de obter as cidades, a instncia da classe GerenciadorEstadoCidade repassa essas informaes ao PhaseListener.

6)

De posse de todas as cidades que pertencem ao estado selecionado pelo

usurio, a instncia de PhaseListener empacota todas essas informaes num arquivo XML para repass-las ao browser do usurio. Com essas etapas finalizadas, FacesContext. o PhaseListener invoca a instncia

7)

Neste momento a instncia de FacesContext chamada para que execute o

mtodo responseComplete() a fim de que nenhuma fase do ciclo de vida das requisies JSF seja executada. A funo Callback do objeto XMLHttpRequest invocada.

8)

Neste passo a funo do XMLHttpRequest Callback atualiza o DOM da pgina,

colocando neste os registros vindos do XML. A pgina mostra ao usurio todas as cidades que pertencem ao estado selecionado.

Apesar de utilizar o FacesServlet, nesta forma de integrao as requisies que usam a tecnologia AJAX no passam por nenhuma fase do ciclo de vida das requisies JSF, visto que uma classe PhaseListener colocada para ser executada antes da primeira fase do ciclo, conhecida como Restaurar Viso. Possui o mesmo defeito das idias apresentadas nas sees 5.3.1.1 Utilizando um PhaseListener aps a quinta fase do ciclo de vida e Utilizando um PhaseListener aps a primeira fase do ciclo de vida, pois no garantem a ordem de execuo dos PhaseListeners se houver muitos a serem executados na mesma fase.

Alm disso, outro defeito dessa idia, comum tambm s outras que utilizam PhaseListerner, o fato de que o desempenho das aplicaes decai, quando so utilizados muitas instncias dessa classe, levando em considerao que todas so invocadas em todas as requisies JSF.

5.3.1.5 Implementando um mdulo de controle aps a terceira fase do ciclo de vida

Esta forma defendida e utilizada pela biblioteca Backbase [BACKBASE,2003] que fornece componentes JSF com funcionalidades da tecnologia AJAX. As idias principais so: manter no servidor uma rvore de componentes DOM da pgina exibida ao usurio e reimplementar a ltima fase do ciclo de vida das requisies JSF para que a cada requisio o servidor possa enviar ao browser do cliente apenas os componentes que foram alterados. J no browser do cliente so colocadas inmeras funes JavaScript para que a cada requisio a pgina atualize apenas os componentes recebidos pelo servidor. A figura abaixo representa todas as etapas cumpridas por uma requisio que se utiliza desta idia.

Ilustrao 15 - Representao da forma de integrao AJAX e JSF da empresa Backbase [BACKBASE,2003]

Essa requisio obedece a seguinte seqncia:

1)

Toda vez que o usurio selecionar um valor para o campo Estado na pgina

criado um objeto XMLHttpRequest.

2)

O objeto XMLHttpRequest invoca uma instncia da classe FacesServlet,

repassando para esta o mtodo que deve ser executado e todos os parmetros necessrios para sua execuo.

3)

Neste momento a instncia da classe FacesServlet invoca a primeira fase do

ciclo de vida das requisies JSF, chamada de Restaurar Viso.

4)

Inicia-se a segunda fase, chamada de Aplicar Valores de Requisio.

5)

Neste passo a requisio comea a executar a terceira fase do ciclo de vida das

requisies JSF, denominada Processar Validaes.

6)

Neste momento o fluxo do ciclo de vida das requisies JSF deveria seguir

para a quarta fase, contudo, o fluxo desviado para um mdulo de controle encontrado no servidor que armazena uma rvore DOM de componentes exibidos no browser do usurio. O servidor deve ento neste passo comparar quais componentes foram modificados desde a ltima requisio e armazenar tais informaes para serem repassadas ao browser do usurio.

7)

Depois da verificao no passo anterior de quais componentes foram

modificados o fluxo do ciclo de requisies JSF volta ao normal, executando ento a quarta etapa, conhecida como Atualizar Valores do Modelo.

8)

Na seqncia a requisio comea a executar a quinta fase do ciclo de vida:

Invocar Aplicao.

9)

A sexta e ltima fase do ciclo de vida das requisies JSF, a de Renderizar

Resposta, executada.

Deve-se notar que esta a nica fase que foi alterada pela biblioteca Backbase a fim de que seus componentes pudessem disponibilizar os benefcios da tecnologia AJAX.

10)

Com o ciclo de vida finalizado, a funo Callback do objeto XMLHttpRequest

invocada e recebe um arquivo XML contendo informaes de todos os componentes da pgina que tiveram alguma modificao.

11)

A instncia XMLHttpRequest atualiza a rvore de componentes DOM da

pgina, inserindo no campo Cidade todas aquelas pertencentes ao estado selecionado pelo usurio.

Pode-se observar que nesta forma de integrao AJAX e JSF, todas as etapas do ciclo de vida das requisies JSF foram executadas, sendo que a ltima fase, a de Renderizar Resposta, foi alterada para o correto funcionamento dos componentes com a tecnologia AJAX. Nota-se tambm a complexidade no desenvolvimento de uma biblioteca que utiliza essa forma de integrao, considerando a necessidade de armazenar no servidor um mecanismo para guardar uma cpia da rvore DOM de componentes exibidos no browser e tambm sobrescrever a ltima fase do ciclo de vida das requisies JSF. Essas aes so executadas a fim de que sejam enviados para o cliente somente os componentes modificados.

5.3.1.6 Utilizando PhaseListener em trs fases do ciclo de vida

Esta a forma de integrao AJAX e JSF utilizada pela empresa Exadel em sua biblioteca conhecida como Ajax4Jsf [EXADEL, 2006]. A idia principal colocar um PhaseListener atuando em trs fases durante o ciclo de vida das requisies JSF: Depois da fase Restaurar Viso o PhaseListener chamado e define se apenas uma regio ou toda a pgina deve ser atualizada aps a execuo da requisio. Para isso, o Listener deve verificar se o componente que gerou a requisio est contido entre alguma tag .no caso da biblioteca Ajax4Jsf.

O PhaseListener criado por esta idia de integrao invocado pela segunda vez aps a fase Processar Validaes. Neste momento o PhaseListener verifica se o valor de um atributo chamado de bypassUpdate, no caso de Ajax4Jsf, for igual a true. Em caso afirmativo, o ciclo de vida das requisies JSF passa a executar a quinta fase, conhecida como Invocar Aplicao; caso contrrio, o fluxo do ciclo continua normalmente. A terceira e ltima vez em que o PhaseListener chamado antes da ltima fase do ciclo de vida das requisies JSF a chamada fase de Renderizar Resposta. Aqui, se a requisio que est sendo executada utilizar a tecnologia AJAX, o PhaseListener empacota os dados que devem ser enviados ao usurio para ter o seu browser atualizado. Nesse caso, a ltima fase do ciclo de vida das requisies JSF no executada.

A figura abaixo ilustra as aes realizadas por uma requisio de uma aplicao que utiliza esta forma de integrao.

Ilustrao 16 - Representao da forma de integrao AJAX e JSF da empresa Exadel [EXADEL, 2006]

Como podemos observar na figura acima, os passos realizados por uma requisio que utiliza esta forma de integrao so:

1)

Toda vez que o usurio selecionar um valor para o campo Estado, uma

instncia de XMLHttpRequest criada.

2)

Depois de criada, a instncia de XMLHttpRequest invoca um objeto da classe

FacesServlet que recebe o mtodo que deve ser executado juntamente com os parmetros necessrios para sua realizao.

3)

A requisio comea a executar a primeira fase do ciclo de vida das requisies

JSF, conhecida como Restaurar Viso.

4)

Ao acabar a primeira fase do ciclo de vida das requisies JSF, a requisio

deveria comear a realizar a segunda fase, porm nesta idia o fluxo desviado. Um PhaseListener invocado para verificar se o componente gerador da requisio est entre alguma tag . Caso esteja, o PhaseListener conclui que apenas alguns componentes da pgina devem ser atualizados.

5)

Passada a primeira interveno do PhaseListener, a requisio deve executar a

segunda fase do ciclo de vida, chamada de Aplicar Valores de Requisio.

6)

Ao finalizar a segunda etapa do ciclo de vida, a requisio passa para fase

Processar Validaes, a terceira do ciclo.

7)

Ao trmino da terceira fase, a requisio deveria executar a quarta fase,

Atualizar Valores do Modelo. Ressalta-se que com essa idia a requisio deve invocar o PhaseListener novamente para que este verifique o atributo bypassUpdate do componente que gerou a requisio.

8)

Neste momento o PhaseListener verifica se o valor do atributo bypassUpdate

do componente que gerou a requisio igual a true. Neste exemplo foi utilizada esta condio como verdadeira, portanto, a requisio no executa a quarta fase do ciclo e passa a executar a quinta fase diretamente.

9)

No final da quinta fase do ciclo de vida das requisies JSF, o fluxo da

requisio modificado e o PhaseListener invocado novamente.

Dessa vez o trabalho deste PhaseListener de empacotar os dados que devem ser enviados ao usurio a fim de que sejam atualizados no browser.

10)

Ao empacotar os dados, o PhaseListener invoca uma instncia da classe

FacesContext para que ela conclua o ciclo de vida das requisies JSF sem executar a ltima fase deste ciclo.

11)

Ao

ser

invocado,

o

objeto

de

FacesContext

executa

o

mtodo

responseComplete() finalizando assim o ciclo de vida das requisies JSF e invocando a funo CallBack da instncia XMLHttpRequest.

12)

A funo Callback do XMLHttpRequest atualiza o DOM da pgina de acordo

com o XML retornado no passo anterior, mostrando assim as opes de cidades que pertencem ao estado selecionado pelo usurio.

Observa-se que esta forma de integrao similar apresentada na seo 5.3.1.1 Utilizando um PhaseListener aps a quinta fase do ciclo de vida, mas apresenta alguns detalhes adicionais. Um detalhe observado pela primeira vez nas formas de integrao AJAX e JSF pesquisados foi o atributo bypassUpdate, no qual o desenvolvedor pode escolher durante o desenvolvimento se deseja ou no executar a quarta fase, conhecida como Atualizar Valores do Modelo. Tal atributo, quando bem utilizado, pode trazer algumas vantagens, como a melhora no desempenho. Para isso o desenvolvedor deve possuir um conhecimento bom sobre o ciclo de vida das requisies JSF para que no ocorram problemas nos sistemas por eles desenvolvidos.

5.3.2

Usando dois Servlets

A soluo bsica aqui criar um novo Servlet para gerenciar todas as requisies que utilizam a tecnologia AJAX. Enquanto isso, o Servlet disponibilizado pelo framework JavaServer Faces, o FacesServlet, continua sendo utilizado, porm apenas para administrar as requisies JSF que

no usam AJAX. Entre as vantagens esto a menor dependncia do framework JSF, pois no atua durante o ciclo de vida das requisies JSF, possuindo assim uma clara separao no tratamento entre requisies assncronas e sncronas; e a ausncia de problemas com PhaseListeners e Renderizadores (como visto na seo 5.3.1 Usando apenas um Servlet). A dificuldade de implementao basicamente o desenvolvimento de um Servlet. Segundo a apresentao de Jacob Hookom no ltimo JavaOne

[BURNS&HOOKOM&WINER, 2006], essa idia apresenta dois defeitos principais: a baixa colaborao entre os componentes e o esforo adicional (desenvolvimento de