O JSF é hoje a principal ferramenta no mundoj para desenvolvimento Web, principalmente por fazer parte nativamente da plataforma Java EE. Porém essa tecnologia sempre teve a fama de ser trabalhosa, com muitas configurações em XML e não possuir recursos importantes como suporte à AJAX. A versão 2.0 traz melhorias significativas para o JSF, mais facilidades e recursos novos. Este artigo apresenta essas novidades para o programador JSF.
A
Sérgio Lopes
(sergio.lopes@caelum.com.br) é desenvolvedor Java desde 2002 e bacharelando na Universidade de São Paulo. Possui as certificações SCJP e SCEA5 e é moderador do GUJ, palestrante em diversos eventos e instrutor e desenvolvedor na Caelum Ensino e Inovação.
Conheça a nova versão do JSF que traz
inúmeras vantagens em relação ao seu
antecessor.
QSJNFJSBWFSTÍPEP+BWB4FSWFS'BDFTGPJMBOÎBEBFN"ÞMUJ-NBWFSTÍPEBTÏSJFYÏB MBOÎBEBFNFRVFGB[QBSUF da especificação do Java EE 5. Por ser uma tecnologia oficial na plataforma Java, o JSF logo alcançou grande sucesso. Além de ser parte do Java EE, seu modelo de desenvolvimento baseado em componentes atraiu bastante atenção por facilitar o desenvolvimento de aplicações complexas baseadas em muitas telas com formulários. Mas o JSF também era bastante criticado por ter muitas configurações, muitos XMLs, pela falta de suporte a AJAX, pela complexidade de uso, entre outras deficiências. Alguns frameworks tentaram melhorar alguns pontos, sendo o mais famoso o JBoss Seam.
$PN P MBOÎBNFOUP EB WFSTÍP EP +4' FN NFBEPT EF NVJUBT novidades foram incorporadas com objetivo de simplificar o desenvolvi-NFOUPFBVNFOUBSBQSPEVUJWJEBEFEPQSPHSBNBEPS0+4'GB[QBSUFEP recém-lançado Java EE 6 (vide artigo nesta edição) e, com isso, integra-se também a outros recursos da plataforma, como o CDI (também com artigo nesta edição).
Neste artigo, direcionado a desenvolvedores JSF, veremos as principais OPWJEBEFTEBOPWBFTQFDJmDBÎÍP1BSBUFTUBSUPEPTPTFYFNQMPT VTB-mos a implementação de referência do JSF provida pela Sun (Mojarra) cujo link está disponibilizado nas referências do artigo.
As Novidades do
Facilidade de configuração e novos escopos
Facelets como view padrão e composite
components
Até a versão anterior do JSF, para configurar o bean que seria gerenciado e manipulado pelo JSF, o Managed Bean, era necessário adicionar algu-NBTMJOIBTEF9.-OPBSRVJWPGBDFTDPOmHYNM/BWFSTÍP ÏQPTTÓWFM VTBSBQFOBTBBOPUBÎÍP!.BOBHFE#FBOEJSFUBNFOUFFNDJNBEBDMBTTF DPNPNPTUSBB-JTUBHFN package br.com.caelum.jsf2; import javax.faces.bean.ManagedBean; @ManagedBean
publicclass AgendaHandler {
}
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <htmlxmlns=”http://www.w3.org/1999/xhtml” xmlns:f=”http://java.sun.com/jsf/core” xmlns:ui=”http://java.sun.com/jsf/facelets” xmlns:h=”http://java.sun.com/jsf/html”> <h:head>
<title>Olá Mundo!</title>
</h:head>
<h:bodybgcolor=”white”>
Nome: <h:inputText/> </h:body> </html> -JTUBHFN6TBOEPBBOPUBÎÍP!.BOBHFE#FBO -JTUBHFNIFMMPXPSMEYIUNM
"OPUBOEPVNBDMBTTFDPN!.BOBHFE#FBOBVUPNBUJDBNFOUFFMBÏSF-gistrada como um managed bean do projeto. Nessa anotação pode ser especificado, opcionalmente, o atributo name, utilizado para definir um nome para o acesso do managed bean na Expression Language. Caso nenhum seja especificado, é assumido que o nome do managed bean é o nome da classe convertendo a primeira letra para minúscula. No FYFNQMPEB-JTUBHFNPOPNFTFSJBiBHFOEB)BOEMFSw
1BSB EFmOJS P FTDPQP EP CFBO QPEFNPT VTBS BT BOPUBÎÜFT !/POF4-DPQFE !3FRVFTU4!/POF4-DPQFE !7JFX4!/POF4-DPQFE !4FTTJPO4DPQFE F !"QQMJDB-tionScoped. Se o managed bean não for anotado com nenhuma delas, o FTDPQPQBESÍPÏ!3FRVFTU4DPQFE0FTDPQPEFWJFXÏOPWPOP+4'F está entre os escopos de request e de sessão. É um escopo que sobrevive a vários requests que interajam com a mesma tela do JSF. Há também PFTDPQPnBTI BDFTTÓWFMWJB\nBTI^ GVODJPOBMJEBEFDPQJBEBEP3BJMT Com ele, é possível obter um escopo com duração até o request seguinte, útil para recuperar objetos logo depois de um evento ou um redireciona-mento. Há ainda a possibilidade de se criar escopos personalizados com B!$VTUPN4DPQFE0TVQPSUFBBOPUBÎÜFT QFMBFTQFDJmDBÎÍP ÏPQDJPOBM Mas tanto o Mojarra quanto o MyFaces implementam a ideia. É possível UBNCÏNVTBSBOPUBÎÜFTEP$%* WJEFRVBESPi+4'DPN$%*w
+4'DPN$%*
"TBOPUBÎÜFT!.BOBHFE#FBOFEPTFTDPQPTEFmOJEBTQFMP+4' TÍPFTQFDÓmDBTEP+4' QBDPUFKBWBYGBDFTCFBO.BT DPNP MBOÎBNFOUPEP$%* +43 QPEFTFVTBSBTBOPUBÎÜFTEP$%* ao invés das do JSF. A vantagem é integrar seus managed beans do JSF a toda a infraestrutura do Java EE 6. Usaríamos então a BOPUBÎÍP!.PEFMEP$%*FBTBOPUBÎÜFTEFFTDPQPEPQBDPUF do CDI – javax.enterprise.context, por exemplo. E, por ser um CFBOEP$%* QPEFSÓBNPTVTBSUPEPTPTSFDVSTPTEFMF DPNPP! Inject para injeção de dependências. Mas nem todas as anota-ÎÜFTEP+4'UÐNVNBDPOUSBQBSUJEBOP$%* B!7JFX4DPQFE QPS exemplo, não existe no CDI.
Para saber mais sobre o CDI, consulte o artigo correspondente nesta mesma edição da Mundoj.
A primeira versão do JSF definiu que a view deveria ser declarada usando JSPs com taglibs especiais do JSF. Mas sempre houve muitas críticas ao uso do JSP como view do JSF. Era difícil integrar taglibs que não fossem de JSF, o ciclo de vida do processamento do JSF se confundia com o processamento do JSP, a performance não era adequada, as views eram pouco reaproveitáveis e JSPs nunca foram uma maneira muito adequada para se declarar uma árvore de componentes. Logo começaram a surgir tecnologias alternativas para views FN+4' DPNP$MBZ +4'5FNQMBUJOHF'BDFMFUT0+4'FTQFDJmDBQPOUPTEF extensão para outros motores de visualização e transforma o Facelets na alternativa oficial, não exigindo nenhuma configuração extra para usá-lo. Mais que isso, o JSP, embora ainda suportado, passa a ser desencorajado e Facelets, agora, é a view padrão para JSF. Com Facelets, as views são escritas em XHTML e trazem muitos benefícios. O tempo de compilação é menor, a performance de renderização é melhor e, o mais importante, possui um mecanismo bastante robusto para se criar composições, templates e novos DPNQPOFOUFT"-JTUBHFNBQSFTFOUBVNBQÈHJOBTJNQMFTVTBOEP'BDFMFUT com um formulário e um campo de texto.
Uma das maiores facilidades do Facelets é o uso de templates. É pos-sível definir uma página com uma estrutura padrão e reaproveitável, e depois definir páginas específicas que preencham o template com informações próprias. A Listagem 3 mostra um exemplo de template e o uso dele em uma página específica, onde temos no template. xhtml o uso do <ui:insert> que vai ser trocado pelo valor definido no <ui:define> do agenda.xhtml. Outro recurso interessante do Facelets é a facilidade na criação de componentes reutilizáveis, os chamados $PNQPTJUF$PNQPOFOUT/P+4'Y DSJBSVNOPWPDPNQPOFOUFFSBVN trabalho descomunal, envolvendo implementações de várias classes e configurações, sendo uma tarefa de grande complexidade. Imagine uma listagem qualquer que precise ser reutilizada em vários pontos da aplicação, mas que precisa receber os objetos a serem listados em cada situação. Uma alternativa era criar um componente que recebia uma lista como argumento e renderizava a tabela para nós. Com Facelets, usamos as tags <composite:interface> e <composite:implementation> para de-finir o novo componente. Ele será definido dentro de um arquivo XHTML em uma pasta dentro de /resources com o nome do namespace que desejamos definir. Por exemplo, se quisermos uma tag <caelum:tabela>, criamos o arquivo tabela.xhtml na pasta /resources/caelum/. No
ar-Suporte a AJAX
template.xhtml
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <htmlxmlns=”http://www.w3.org/1999/xhtml” xmlns:f=”http://java.sun.com/jsf/core” xmlns:ui=”http://java.sun.com/jsf/facelets” xmlns:h=”http://java.sun.com/jsf/html”> <h:head> <title>
<ui:insertname=”titulo”>Titulo padrão</ui:insert>
</title>
</h:head>
<h:bodybgcolor=”white”>
<ui:insertname=”corpo”>Texto padrão</ui:insert>
</h:body> </html> agenda.xhtml <htmlxmlns=”http://www.w3.org/1999/xhtml” xmlns:f=”http://java.sun.com/jsf/core” xmlns:ui=”http://java.sun.com/jsf/facelets” xmlns:h=”http://java.sun.com/jsf/html”>
<ui:compositiontemplate=”/template.xhtml”>
<ui:definename=”titulo”>Agenda</ui:define>
<ui:definename=”corpo”>
<h:formid=”helloForm”>
<h:panelGridcolumns=”2”>
Nome: <h:inputText/>
Telefone: <h:inputText/>
<h:commandButtonvalue=”Cadastrar”/>
</h:panelGrid>
</h:form>
</ui:define>
</ui:composition> </html>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <htmlxmlns=”http://www.w3.org/1999/xhtml” xmlns:h=”http://java.sun.com/jsf/html” xmlns:f=”http://java.sun.com/jsf/core” xmlns:ui=”http://java.sun.com/jsf/facelets” xmlns:composite=”http://java.sun.com/jsf/composite”> <h:head>
<title>Não será apresentado ao renderizar o componente</title>
</h:head>
<h:body>
<composite:interface>
<composite:attributename=”lista”/>
</composite:interface>
<composite:implementation>
<h:dataTableitems=”#{cc.attrs.lista}”var=”obj”>
<h:column> ... </h:column> </h:dataTable> </composite:implementation> </h:body> </html> listaUsuarios.xhtml <htmlxmlns=”http://www.w3.org/1999/xhtml” xmlns:h=”http://java.sun.com/jsf/html” xmlns:greet=”http://java.sun.com/jsf/composite/caelum”> <h:head>
<title>Lista de usuários</title>
</h:head>
<h:body>
<caelum:tabelalista=”#{meuManagedBean.usuarios}”/>
</h:body> </html>
<!-- Tabela que queremos renderizar ao clicar no botão -->
<h:dataTableid=”tabela” ...> ....
</h:dataTable>
<!-- Usando a API JavaScript diretamente -->
<h:commandButtonid=”meuBotao”value=”Salvar” actionListener=”#{meuManagedBean.salvar}”
onclick=”jsf.ajax.request(this,event, {execute: ‘meuBotao’, render: ‘tabela’});”/>
<!-- Usando a tag de ajax -->
<h:commandButtonactionListener=”#{meuManagedBean.salvar}”>
<f:ajaxrender=”tabela”/> </h:commandButton>
Listagem 3. Uso de templates.
Listagem 4. Uso de composite components.
-JTUBHFN6TBOEP"KBYOP+4' quivo tabela.xhtml, usamos a tag <composite:interface> para definir
o que os usuários do componente precisam saber (atributos, facets, eventos) e a <composite:implementation> para implementar o código do componente. A Listagem 4 apresenta um esboço do componente de tabela recebendo um argumento com a lista de objetos. A tabela. xhtml faz isso através da tag <composite:attribute> declarado dentro de <composite:interface>. A listaUsuarios.xhtml mostra um exemplo de uso do componente através da tag <caelum:tabela lista=…>. Repare na declaração do namespace para o uso do componente criado. O uso de Facelets abre muitas possibilidades para o desenvolvedor JSF. Os exemplos deste artigo mostram as ideias principais, mas há ainda outros recursos, como tags para debug, utilização de tags html etc.
definindo uma biblioteca JavaScript, cuja referência está no final do artigo, acessível nas páginas e que integra todas as chamadas do cliente ao ciclo de vida do JSF. É possível escrever as chamadas direto em código JavaScript ou, para facilitar, usar a tag <f:ajax> que monta a invocação certa para nós. A Listagem 5 mostra as duas possibilidades de se invocar um método via AJAX quando o usuário clicar no <h:commandButton>. Neste exemplo, invocamos um método salvar no botão e renderizamos novamente uma parte da tela com o componente cujo id é igual a “tabela”.
Qualquer aplicação Web moderna, em especial as que necessitam de muita interação com usuário, usa AJAX para a melhorar a responsividade da BQMJDBÎÍPFPGFSFDFSVNBFYQFSJÐODJBNBJTBHSBEÈWFM1PSÏN BUÏP+4'Y usar AJAX com JSF significava usar alguma biblioteca não padronizada com extensões proprietárias que possibilitavam o uso dessa tecnologia. Várias bibliotecas surgiram, como o Ajax4jsf, o IceFaces, entre outras. O grande problema era a falta de padronização, a incompatibilidade entre as soluções e a necessidade de instalação e configuração de uma biblioteca extra. A QBSUJSEP+4' FYJTUFTVQPSUFPmDJBMB"+"9EFOUSPEBQSØQSJBFTQFDJmDBÎÍP de uma forma bastante extensível e reaproveitável. A especificação começa
Navegação implícita e condicional
Suporte a GET
Outras novidades
Validação e Bean Validation
Nos esforços de diminuir a quantidade de configuração necessária, o JSF USPVYFPSFDVSTPEFOBWFHBÎÍPJNQMÓDJUBRVFDPSUBCPBQBSUFEBTDPOm-gurações de navegação necessárias na versão anterior. Ao executar uma action, se nenhuma regra de navegação bater com o outcome devolvido, o JSF buscará uma página com o nome daquele outcome.
Por exemplo, se o botão devolver o outcome "inicial" (como na Listagem 6) e nenhuma regra de validação existir, o JSF procurará uma página inicial.xhtml. Se ela existir, a navegação será feita implicitamente, sem necessidade de configuração
<!-- Botão que redireciona para inicial.xhtml -->
<h:commandButtonvalue=”Voltar”action=”inicial”/>
<navigation-rule>
<from-view-id>/pagina1.xhtml</from-view-id>
<navigation-case>
<from-outcome>acao</from-outcome>
<to-view-id>/pagina2.xhtml</to-view-id>
<if>#{meuManagedBean.devoNavegar}</if>
</navigation-case> </navigation-rule>
<!-- Recebo “?parametro=bla” e seto a propriedade no bean -->
<f:metadata>
<f:viewParamname=”parametro”value=”#{meuBean.propriedade}”/> </f:metadata>
<h:linkoutcome=”visualiza”>
<f:paramname=”tag”value=”#{meuBean.tag}”/>
</h:link> Listagem 6. Navegação implícita.
Listagem 7. Navegação condicional.
Listagem 8. View parameters.
-JTUBHFN6TBOEP IMJOL 0VUSB OPWJEBEF EP +4' OB QBSUF EF OBWFHBÎÍP Ï B QPTTJCJMJEBEF EF
adicionar condições com a tag <if> na configuração. Ao configurar uma <navigation-rule> no XML, é possível apontar um resultado booleano que indica se aquela regra deve ser executada ou não. Na Listagem 7, te-mos um exemplo do uso da tag invocando um método de um managed bean que retorna boolean.
"+43#FBO7BMJEBUJPO< >ÏVNBOPWBFTQFDJmDBÎÍPRVFBCPSEBWBMJEB-ção de dados na plataforma Java. É baseada nas ideias do Hibernate Validator (hoje sua implementação de referência) e outros frameworks de validação. Com a Bean Validation é possível usar anotações diretamente nas classes de modelo indicando a validação que deve ser feita para cada atributo. Há BOPUBÎÜFTDPNP!/PU/VMM !.BY !.JO !4J[FF!1BUUFSO BMÏNEPTVQPSUF a extensão das anotações de validação pela própria aplicação. Basta anotar as classes de modelo e o container cuida da validação.
A grande vantagem da Bean Validation é ela ser integrada à plataforma Java &&&OUÍPB+1"VTBFTTBTWBMJEBÎÜFTQBSBHBSBOUJSJOUFHSJEBEFOPCBODP EFEBEPTFP+4'VTBBWBMJEBÎÍPOBDBNBEB8FC4FP+4'JEFOUJmDBSVNB implementação da Bean Validation, basta anotar as classes de modelo e tudo será automaticamente validado na fase de validação do JSF, inclusive com a exibição das mensagens de erro nos componentes apropriados.
"JOEB OB QBSUF EF WBMJEBÎÍP P +4' JODMVJV NBJT EPJT WBMJEBEPSFT <f:validateRequired/> para campos obrigatórios e <f:validateRegexp /> para validações com expressões regulares.
Uma crítica constante ao JSF é seu fraco suporte a GET e sua característica de post back que trata os requests quase sempre como POST. Não supor-tar adequadamente o uso de GET cria dificuldades no uso de bookmarks para páginas da aplicação e prejudica quando é necessário SEO (Search Engine Optimization).
/P+4' PTVQPSUFB(&5GPJCBTUBOUFNFMIPSBEP)È QPSFYFNQMP PT view parameters que permitem receber parâmetros pela URL do GET e mapeá-los para propriedades de managed beans, como mostra a Lista-gem 8. Além disso, há todo um ciclo de vida associado a requests GET que permite fazer praticamente tudo que se fazia via POST.
1BSB BKVEBS B EJTQBSBS OBWFHBÎÜFT DPN (&5 P +4' USB[ OPWPT DPN-ponentes de navegação além dos conhecidos <h:commandButton> e <h:commandLink> que usam POST. Os novos componentes são o <h:button> e o <h:link> que usufruem de toda a infraestrutura de OBWFHBÎÍPEP+4' NBTVTBOEP(&56TBOEPVNOPWPSFDVSTPEP+4' chamado de navegação preemptiva, o outcome desses componentes é resolvido durante a renderização da página. Isso faz com que o HTML gerado possua o link final correto direto para a página linkada sem que o desenvolvedor precise escrever o link explicitamente, mas possa usar os mecanismos de navegação do JSF.
"-JTUBHFNNPTUSBPVTPEP IMJOL DIBNBOEPVNPVUDPNFEFOB-vegação e passando um parâmetro. A URL será gerada direto no HTML e o request será feito via GET, permitindo ao usuário adicioná-la em seus bookmarks.
)ÈBJOEBPVUSBTOPWJEBEFTCFNJOUFSFTTBOUFTOP+4' DPNP QPSFYFNQMP a criação do conceito de project stages. É possível indicar para a imple-mentação do JSF o momento em que estamos no uso da aplicação e ela pode ter comportamentos diferentes. Por exemplo, é possível indicar que estamos em Development e a implementação exibir mais detalhes nos er-ros. Ou indicar que estamos em Production e a implementação compactar todo o código HTML e JavaScript para melhorar performance (o Mojarra hoje já faz isso). E, além dessas, temos as opções SystemTest e UnitTest e a escolha do stage pode ser feita através do context-param javax.faces. PROJECT_STAGE.
Considerações finais
QBSBVTBSNFOPTFTQBÎP"OUFT UPEBBÈSWPSFFSBTBMWBFTFSJBMJ[BEB BHPSBtodo componente tem um estado padrão associado e apenas as diferenças do estado em relação a esse padrão são salvas, diminuindo o tamanho do view state, algo excelente para a escalabilidade das aplicações JSF. Outra adição foi o suporte a SystemEvents aos tipos de eventos suporta-dos, além dos já existentes PhaseEvents e FacesEvents. Os SystemEvents permitem observar a ocorrência de outros tipos de eventos antes não detectáveis pela API do JSF. É possível, por exemplo, observar eventos in-ternos que um componente JSF deseje expor e, através da tag <f:event>, registrar um listener para eventos específicos. E o mecanismo extensível permite até que o desenvolvedor crie seus próprios eventos que podem ser observados de outros pontos da aplicação.
Além dessas, muitas outras novas funcionalidades foram adicionadas, tendo como alvo desenvolvedores de componentes e extensibilidade de pontos mais internos do JSF.
0+4'KÈFTUÈ IPKF NBEVSPPTVmDJFOUFQBSBTFSVTBEPFNQSPEVÎÍP BUSBWÏTEP.PKBSSB BJNQMFNFOUBÎÍPEP.Z'BDFTUFWFTVBWFSTÍPCFUB MBOÎBEBFNGFWFSFJSPEF NBTPVUSBTCJCMJPUFDBTEFDPNQPOFOUFT FYJTUFOUFTBJOEBFTUÍPTFOEPBEBQUBEBTQBSBP+4'0+#PTT3JDI'BDFT BJOEBFNEFTFOWPMWJNFOUP TFSÈUPEPCBTFBEPFN+4' BWFSTÍPBUV-BM FTUÈFNCFUBFBQFOBTDPNBEBQUBÎÜFTQBSBSPEBSDPN+4' 0*DF'BDFT DPNTVQPSUFBPOPWP+4' FTUÈFN"MQIBFMPHPEFWFSÈTFS lançado. Essa é a mesma situação do MyFaces Trinidad.
"OPWBFTQFDJmDBÎÍPEP+4'ÏVNJNQPSUBOUFQBTTPQBSBBFWPMVÎÍP dessa tecnologia. Foram adicionados importantes novos recursos e muita coisa foi simplificada. É uma versão focada em uma maior produ-tividade e facilidade de integração com outras tecnologias. Junto com o lançamento do Java EE 6 (coberto nesta edição da Mundoj) promete HSBOEFTNFMIPSJBTQBSBPEFTFOWPMWJNFOUP8FCFN+BWBt t&TQFDJmDBÎÍP+4' IUUQKDQPSHFOKTSEFUBJM JE t*NQMFNFOUBÎÍPEFSFGFSÐODJBEP+4' https://javaserverfaces.dev.java.net t&TQFDJmDBÎÍP+BWB4DSJQUEP"KBYOP+4' https://javaserverfaces.dev.java.net/nonav/docs/2.0/jsdocs/ t3FTVNPEBTOPWJEBEFTEP+4'QPS"OEZ4DIXBSU[ http://andyschwartz.wordpress.com/2009/07/31/whats-new-in-jsf-2/ t&TQFDJmDBÎÍP#FBO7BMJEBUJPO IUUQKDQPSHFOKTSEFUBJM JE t.BJTTPCSF#FBO7BMJEBUJPO http://blog.caelum.com.br/2010/02/03/java-ee-6-comecando-com-bean-validation/ Referências
