1/9

AJAXcomJavaServerFaces
FaaumaaplicaoJSFcomAJAXsemmistrios
FRANCISCOCALAAXAVIER AtualmentemuitosetemfaladosobreoAJAXeJSF.Pretendemosnesteartigoapresentarao leitorousodatecnologiaJSFcomosbenefciosdoAJAX. Com JSF (JavaServer Faces) possvel construir interfaces grficas apenas utilizando componentes, o que permite uma efetiva reutilizao de software. Se voc necessitar de um calendrio,susarumcomponentequefazotrabalhodeumcalendrio.Outracoisapossvelcom oJSFapossibilidadedeconstruodeaplicaeswebdeformatotalmentevisual,comdragand dropdecomponentes. JoAJAX(AsynchronousJavaScriptAndXML)possibilitaaconstruodeaplicaesWEBcom ascaractersticasdasaplicaesDesktop.Apesardecontinuarexistindooconceitoderequisioe respostaemumaaplicaoqueutilizaAJAX,estesetornamenosperceptvelparaousurioda aplicao.Observequesuapropostajustamenteaproximarasvantagensdeconectividadedaweb comainteratividadedoambientedesktop.Istopossvelporque,noAJAX,umcdigoJavaScript responsvelporrealizaraatualizaodosdadosnoservidor.Suponhaumaaplicaoemqueao escolherumestadodopasapresentadaumacaixadeopescomascidadesdesteestado.Com AJAXnonecessrioatualizartodaapginaapenasparadescobrirquaiscidadespertencemao estadoselecionado,porexemplo.Eousurionotemmaisaimpressodelentidoquandoclicano botoConsultarouquandoumitemselecionadoemumcombobox.Issoporquenomais necessriorealizarumarequisiocompletaparaapenasatualizarumcampoouumaregioda pgina.possveliraoservidorebuscarapenasainformaonecessria. O nosso objetivo neste artigo fazer, inicialmente, um projeto utilizando o JSF sem AJAX. Apresentando ao leitor menos experiente esta tecnologia. Depois vamos acrescentar suporte a AJAXnestaaplicaoapresentandoassimasdiferenas.

Uma aplicao JSF de exemplo

Ainterfacedenossaaplicaoincluiumacomboboxondepossvelselecionarumdepartamento, eapsselecionadoodepartamento,outracomboboxpreenchidacomosnomesdosfuncionrios correspondentes.Assimqueousurioselecionaumfuncionrio,seusdadossomostradoslogo abaixo(vejaaFigura1).

2/9

.
Figura1.TeladonossoexemplosemousodoAJAXemexecuo

Paraconstruirnossoexemplo,seronecessriasasseguintesAPIs: 1. AimplementaoderefernciadoJSF.Vocpodeobtlaem java.sun.com/javaee/javaserverfaces/download.html.NesteexemploutilizaremosoJSF1.1, masnadaimpedequesejautilizadooJSF1.2,lembrandoapenasqueestenecessitade containeresquedemsuporteaoJSP2.1. 2. AJakartataglibs,necessriaparaalgunscomponentesJSF.possvelobtlaem jakarta.apache.org/taglibs/doc/standarddoc/intro.html.Nesteexemploestamosutilizando JSTL1.1. NaListagem1apresentadaaclassequerepresentaofuncionrio.NaListagem2estocdigo doManagedBeandaaplicao:aclasseFuncionarioMBean,ondeficaalgicadenegcio. VejaoquadroOquesoManagedBeansparamaisdetalhes.Quandoestaclasseforinstanciada, serpreenchidaumalistadefuncionriosfictcios.(Numaaplicaoreal,estalistapoderiaserlida deumbancodedados.)OmtodogetDepartamentos()retornaumalistacontendotodosos departamentos. Os mtodos selecionarFuncionario() e selecionarDepartamento() tratam eventos de mudana de valores na pgina so executadosquandoousurioselecionaumfuncionrioouumdepartamento.Orestantesogetters esetters. Observe os atributos da classe FuncionarioMBean. O atributo funcionario ter a instnciadofuncionrioselecionado; listaFuncisarmazenaalistadetodososfuncionrios;e funcionariosDepconterapenasalistadosfuncionriosdodepartamentoselecionado. Na Listagem3,temosaconfiguraodoFacesServlet(ocoraodoJSF)ena Listagem4 a configuraodoManagedBeanno facesconfig.xml.Vocsterquefazerestasconfiguraes quandoestiverprogramandosemapoiodeferramentas.EmIDEscomooNetBeanseoEclipse (comWTP)estesarquivosseropreenchidoscomasconfiguraesbsicasautomaticamente. Na Listagem 5 temos a pgina JSP (sem AJAX). Observe que nas tags <h:selectOneMenu> configuramos o evento onchange com submit. Desta forma, quandoousurioalterarovalordestascomboboxes,serfeitaumarequisioparaoservidoreser processado o mtodo selecionarFuncionario() ou selecionarDepartamento().

3/9

Uma vez escolhido o funcionrio, so apresentados os valores de seus atributos dentro da tag <h:panelGrid>. Observequequandoselecionadoumdepartamento,geradaumarequisioparaoservidor.O servidorentorespondecomosfuncionriosdodepartamentoescolhido.Tambmpercebemosuma piscada da tela, pois toda ela atualizada. Temos uma tpica aplicao web com requisio/resposta(eesperas).AdicionaremosagorarecursosAJAXeveremosasdiferenas.

Entra o AJAX
Agora acrescentaremos benefcios doAJAX.ParausalocomJSF existem vrias tecnologias. Entreelaspodemosdestacarduas:oICEfaces,queumaimplementaodoJSFequeutiliza AJAXemseuscomponenteseoAjax4jsf,queadicionarecursosAJAXimplementaodoJSF sendousada(MyFaces,ADFFacesetc.). NesteartigoutilizaremosoAjax4jsf.

O Ajax4jsf
O Ajax4jsf permite de forma simples, a unio dos benefcios do JSF, como ciclo de vida, validaes, converses e outros recursos, com as vantagens de maior interatividade do AJAX. UsandooAjaz4jsf,oleitorverquenohmistrioemadicionarsuporteaAJAXasuaaplicao baseada em JSF.A Figura2 apresenta ociclo devidadoAjax4jsf.Observequeocliente se comunicacomoservidorpormeiodeumEngineAJAX,queimplementadoemJavaScript,no ciente.OJavaScriptsecomunicacomoservidorpormeiodeumfiltro,queveremosmaisadiante qual.Estefiltrorecebeasrequisiesdoclienteerealizaasatividadespertinentesjuntoaociclo devidadoJSF.EsteporsuavezdevolveainformaosolicitadaaoFiltro,quedevolveaoEngine Ajaxefinalmenteatualizaocomponentenapgina.

Cliente PginaJSF AjaxEngine

Servidor FiltroXML Ajax4Jsf

JSF

FasesdoJSF

4/9

Figura2.CiclodevidadoAjax4jsf

Acrescentando AJAX ao exemplo

ParaacrescentaroAJAXsigaospassos: 1. BaixeoAjax4jsf:visiteajax4jsf.dev.java.netecliqueemDownloadBinaryDistribution. 2. Descompactecadaarquivobaixadoemumlocalasuaescolha.Apsdescompactados,todos possuiroumdiretriolib. 3. Copietodososarquivosajax4jsf.jareoscache2.3.2.jardestediretrioparaodiretriolibda suaaplicaoweb. necessrioaindaacrescentarumservletdefiltroaoweb.xml.AListagem6apresentaoweb.xml final,contendoasalteraesnecessrias.Observequeestasestoemnegrito.Depois,napgina JSP,deveseincluirumataglib:
<%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%>

Verifiquena Listagem7 quefoiretiradodasduastags <h:selectOneMenu> oatributo onchange="submit()"efoiacrescentadaaseguintetag:

<a4j:support event="onchange" reRender="func" />

Ataginformaquequandoocorreroevento onchange,deveseratualizadoapenasocampo func.Issofeitosemumarequisioeumarespostacompletadapgina.Vejaqueestaagrande sacadadoAJAX:noterqueatualizarsempretodaapginaparaobterapenasovalordeumcampo ouumaregiodapgina.Noquadro"MaistagsdoAjax4jsf"apresentamosmaisalgunsrecursos doajax4jsf.Comoporexemplo,atualizaesautomticasderegiesetc. Agoraomaisimportante:aoselecionarumdepartamento(napginaqueutilizaAJAX)oleitor novmaisapiscadanotadanoincio.IstosedevegraasaoAJAXquebuscaosdadosdo servidorsemrenderizartodaapgina.

Concluses
NesteartigovimoscomoutilizaroAjax4jsfparaadicionarrecursosAJAXaaplicaesbaseadas no JSF, e como configurar umambiente inicial para desenvolvimento. J existem projetos em ambiente de produo utilizando estas tecnologias e estes tm demonstrado um bom grau de maturidadedoAjax4jsf.
Listagem 1. Classe Funcionario
p a c k a g e javamagazine.exemplo;

publicclassFuncionario{ privateStringnome; privateStringendereco; privatedoublesalario; privateStringdepartamento;

5/9

publicFuncionario(){} publicFuncionario(Stringnome,Stringendereco,Stringdepartamento,doublesalario){ this.nome=nome; this.endereco=endereco; this.salario=salario; this.departamento=departamento; } //...gettersesettersomitidos...

Listagem 2. ManagedBean: FuncionarioMBean

packagejavamagazine.exemplo; importjava.util.*; importjavax.faces.event.ValueChangeEvent; importjavax.faces.model.SelectItem; publicclassFuncionarioMBean{ //Funcionrioselecionado privateFuncionariofuncionario=newFuncionario(); //Listadetodososfuncionrios privateList<Funcionario>listaFuncis=newArrayList<Funcionario>(); //Listadosfuncionriosdeumdepartamento privateListfuncionariosDep=newArrayList(); publicFuncionarioMBean(){ //Crianovosfuncionarioseoscolocanalista: listaFuncis.add(newFuncionario("Joao","Rua1","Contabilidade",1500)); listaFuncis.add(newFuncionario("Maria","Rua2","Contabilidade",2500)); listaFuncis.add(newFuncionario("Antonio","Rua3","Contabilidade",1000)); listaFuncis.add(newFuncionario("Isabel","Rua4","Atendimento",1000)); listaFuncis.add(newFuncionario("Mariana","Rua5","Atendimento",500)); listaFuncis.add(newFuncionario("Luciana","Rua6","Atendimento",2000)); listaFuncis.add(newFuncionario("Reinaldo","Rua7","Suporte",1300)); listaFuncis.add(newFuncionario("Luiz","Rua8","Suporte",2800)); listaFuncis.add(newFuncionario("Carlos","Rua9","Suporte",1800)); } //Descobrequantosdepartamentosexistemepreenchealista publicListgetDepartamentos(){ Listresultado=newArrayList(); Set<String>departamentos=newHashSet<String>(); for(Funcionariofunc:listaFuncis){ departamentos.add(func.getDepartamento()); } //criaaprimeiraopoparadepartamentos resultado.add(newSelectItem("departamento")); for(Stringdep:departamentos){ resultado.add(newSelectItem(dep)); } returnresultado; } //Executadoquandoforalteradoofuncionrio publicvoidselecionarFuncionario(ValueChangeEventevento){ for(Funcionariofunc:listaFuncis){ if(evento.getNewValue().toString().equals(func.getNome())) { funcionario=func; } } } //Executadoquandoforalteradoodepartamento

6/9

publicvoidselecionarDepartamento(ValueChangeEventevento){ Listfuncis=newArrayList<Funcionario>(); funcionariosDep=newArrayList(); //Criaaprimeiraopoparafuncionrios funcionariosDep.add(newSelectItem("funcionrios")); for(Funcionariofunc:listaFuncis){ if(func.getDepartamento().equals(evento.getNewValue().toString())) { funcionariosDep.add(newSelectItem(func.getNome())); } } //...mtodosgettersesettersomitidos... } }

Listagem 3. Declarao e mapeamento do FacesServlet no web.xml

<servlet> <servletname>FacesServlet</servletname> <servletclass>javax.faces.webapp.FacesServlet</servletclass> <loadonstartup>1</loadonstartup> </servlet> <servletmapping> <servletname>FacesServlet</servletname> <urlpattern>*.faces</urlpattern> </servletmapping>

Listagem 4. Configurao do Managed Bean no faces-config.xml

<facesconfig> <managedbean> <managedbeanname>funcionarioMBean</managedbeanname> <managedbeanclass> javamagazine.exemplo.FuncionarioMBean </managedbeanclass> <managedbeanscope>session</managedbeanscope> </managedbean> </facesconfig>

Listagem 5. funcionariosSemAjax.jsp
<%@tagliburi="http://java.sun.com/jsf/core"prefix="f"%> <%@tagliburi="http://java.sun.com/jsf/html"prefix="h"%> <html> <head> <linkhref="estilo.css"rel="stylesheet"type="text/css"/> </head> <bodybgcolor="#ffffff"> <f:view> <h:form> <h:panelGridcolumns="2"> <f:facetname="header"> <h:outputTextvalue="Funcionarios:"/> </f:facet> <h:outputTextvalue="Departamento:"/> <h:selectOneMenuonchange="submit()" valueChangeListener="#{funcionarioMBean.selecionarDepartamento}"> <f:selectItemsvalue="#{funcionarioMBean.departamentos}"/> </h:selectOneMenu> <h:outputTextvalue="Funcionrio:"/> <h:selectOneMenuonchange="submit()" valueChangeListener="#{funcionarioMBean.selecionarFuncionario}" id="func"> <f:selectItemsvalue="#{funcionarioMBean.funcionariosDep}"/> </h:selectOneMenu> </h:panelGrid> <h:panelGridid="dados"columns="2"> <h:outputTextvalue="Nome:"/> <h:outputTextvalue="#{funcionarioMBean.funcionario.nome}"/> <h:outputTextvalue="Endereo:"/>

7/9

<h:outputTextvalue="#{funcionarioMBean.funcionario.endereco}"/> <h:outputTextvalue="Salrio:"/> <h:outputTextvalue="#{funcionarioMBean.funcionario.salario}"/> <h:outputTextvalue="Departamento:"/> <h:outputTextvalue="#{funcionarioMBean.funcionario.departamento}"/> </h:panelGrid> </h:form> </f:view> </body> </html>

Listagem 6. web.xml completo aps a incluso do Ajax

<webapp> <filter> <displayname>Ajax4jsfFilter</displayname> <filtername>ajax4jsf</filtername> <filterclass>org.ajax4jsf.Filter</filterclass> </filter> <filtermapping> <filtername>ajax4jsf</filtername> <servletname>FacesServlet</servletname> <dispatcher>REQUEST</dispatcher> <dispatcher>FORWARD</dispatcher> <dispatcher>INCLUDE</dispatcher> </filtermapping> <servlet> <servletname>FacesServlet</servletname> <servletclass>javax.faces.webapp.FacesServlet</servletclass> <loadonstartup>1</loadonstartup> </servlet> <servletmapping> <servletname>FacesServlet</servletname> <urlpattern>*.faces</urlpattern> </servletmapping> </webapp>

Listagem 7. funcionariosComAjax.jsp
<%@tagliburi="https://ajax4jsf.dev.java.net/ajax"prefix="a4j"%> <%@tagliburi="http://java.sun.com/jsf/core"prefix="f"%> <%@tagliburi="http://java.sun.com/jsf/html"prefix="h"%> <html> <head> <linkhref="estilo.css"rel="stylesheet"type="text/css"/> </head> <bodybgcolor="#ffffff"> <f:view> <h:form> <h:panelGridcolumns="2"> <f:facetname="header"> <h:outputTextvalue="Funcionarios:"/> </f:facet> <h:outputTextvalue="Departamento:"/> <h:selectOneMenu valueChangeListener="#{funcionarioMBean.selecionarDepartamento}"> <f:selectItemsvalue="#{funcionarioMBean.departamentos}"/> a4j:supportevent="onchange"reRender="func"/> < </h:selectOneMenu> <h:outputTextvalue="Funcionrio:"/> <h:selectOneMenu valueChangeListener="#{funcionarioMBean.selecionarFuncionario}" id="func"> <f:selectItemsvalue="#{funcionarioMBean.funcionariosDep}"/> <a4j:supportevent="onchange"reRender="dados"/> </h:selectOneMenu> </h:panelGrid> <h:panelGridid="dados"columns="2">

8/9

<h:outputTextvalue="Nome:"/> <h:outputTextvalue="#{funcionarioMBean.funcionario.nome}"/> <h:outputTextvalue="Endereo:"/> <h:outputTextvalue="#{funcionarioMBean.funcionario.endereco}"/> <h:outputTextvalue="Salrio:"/> <h:outputTextvalue="#{funcionarioMBean.funcionario.salario}"/> <h:outputTextvalue="Departamento:"/> <h:outputTextvalue="#{funcionarioMBean.funcionario.departamento}"/> </h:panelGrid> </h:form> </f:view> </body> </html>

Mais tags do Ajax4jsf

Oajax4jsftrazmuitasfuncionalidadesquepodemdeixarsuaaplicaobemsofisticada. Vejaalgumastagsoferecidas:
a4j:region

DefineumaregioqueseratualizadaemumarequisiodoAJAX.Destaformano necessrioatualizartodooformulrioparaterapenasumaregiodapginaatualizada. Exemplo:

<a4j:region> <!- contedo que ser enviado ao servidor ou atualizado em uma requisio AJAX -- > <h:outputText value="..." /> <h:outputText value="..." /> <a4j:region> a4j:poll

Estatagpermitefazerrequisiesperidicasparaoservidoreatualizarapginade formaautomtica.Vejaumexemplo:
<h:form id="form1"> <a4j:poll interval="5000" reRender="campo1, campo2 /> </h:form>

Neste exemplo os campos campo1 e campo2 sero atualizados a cada 5000 ms (5 segundos). Observamos este comportamento no gmail, quando recebemos um novo emailnonecessrioatualizarapgina,poisestadetemposemtemposatualizase automaticamente.
a4j:log

Esta tag abre uma janela popup no lado do cliente com informaes de debug das requisiesAjax.Muitotilparaverificaodeerrosnapgina.Ex.:
<a4j:log/> <!- j suficiente para a exibio das informaes do debug. -- >

O que so Managed Beans

Managed Beans so classes Java que seguem o padro bean. Estas classes so unidades controladoras de uma aplicao JSF que fornecem uma interface entre a visualizao e o modelo de objetos da aplicao tornando bem transparente a

9/9

comunicaoentreocdigojavaeojsp.Sosimplespoisdiferentementedosservlets nopossuemaobrigatoriedadeemherdardeumaclasseespecifca. AsinstanciasdosManagedBeanssorealizadaspeloprprioJSF.Odesenvolvedor noprecisasepreocupareminstancilos. Costumamos utilizar o arquivo facesconfig.xml (localizado no diretrio WEBINF da aplicao)paradeclararosManagedBeans.Ex.:
<managed-bean> <managed-bean-name>funcionarioMBean</managed-bean-name> <managed-bean-class>javamagazine.exemplo.FuncionarioMBean </managed-bean-class> <managed-bean-scope>session</managed-bean-scope> </managed-bean>

Estecdigoquerdizer:InstancieaclasseFuncionarioMBeanecoloquenoescopoda seocomonomefuncionarioMBean. possvelacessarosdadosdosManagedBeansnapginajsfutilizandoexpressesde ligaoouEL.Ex.:

<h:outputText value="#{managedBean.valor}" />

Observeautilizaode#{}.Estecdigoquerdizerqueatagh:outputTextmostraro contedodoatributovalordomanagedBean.

Links
ajax4jsf.dev.java.net Pginaoficialdoprojetoajax4jsf java.sun.com/javaee/javaserverfaces/download.html PginadedownloaddoJSF jakarta.apache.org/taglibs/doc/standarddoc/intro.html PginadaJakartataglib

Livros

CoreJavaServerFaces,DavidGearyeCayHorstmann ApresentaoJavaServerFaces