UNIVERSIDADE FEDERAL DE SANTA CATARINA DEPARTAMENTO DE INFORMTICA E ESTATSTICA

CURSO DE CINCIAS DA COMPUTAO

DIEGO LUIZ MARAFON

INTEGRAO JAVASERVER FACES E AJAX

ESTUDO 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 AJAX

ESTUDO 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 Vilain

FLORIANPOLIS, 2006

Diego Luiz Marafon

INTEGRAO JAVASERVER FACES E AJAX

ESTUDO 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.

Resumo

O 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.

Abstract

The 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 figuras

Ilustrao 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 Grficos

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

Lista de Tabelas

Tabela 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 Siglas

AJAX 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

Sumrio

1 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 INTRODUO

1.1 Contexto

O 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, manipul-

los 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 http://struts.apache.org/ 2 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/

http://struts.apache.org/http://java.sun.com/javaee/javaserverfaces/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 http://www.gmail.com/ 5 http://maps.google.com/

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

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 TERICA

2.1 Introduo

Para 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 que contm os dados de uma pgina HTML. Fonte: [CRANE&PASCARELLO, 2006]

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 FACES

3.1 Introduo

Este 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 AJAX

4.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.

http://www.w3.org/TR/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 INTEGRAO

5.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 personalizados

Esta 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 JSF

Esta 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 Servlet

A 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 Super-

Charge 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) Nesta etapa o sistema exibe ao usurio todas as cidades do estado selecionado

anteriormente.

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, o PhaseListener invoca a instncia

FacesContext.

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 d