Esse artigo faz parte da revista Java Magazine edição 22. Clique aqui para ler todos os artigos desta edição

Atenção: por essa edição ser muito antiga não há arquivo PDF para download.Os artigos dessa edição estão disponíveis somente através do formato HTML. 

JavaServer Faces na Prática

Crie uma aplicação JSF completa

Conceitos, técnicas e vantagens de JavaServer Faces, a nova tecnologia padronizada para criação de aplicações web com alta interatividade

Julio Faerman

O desenvolvimento de interfaces gráficas (GUIs) com Java é um desafio. De um lado, o desktop rico (Swing) traz a programação baseada em componentes e eventos de alto nível, mas sofre com as necessidades de distribuição e outras dificuldades do modelo cliente/servidor, onde é mais usado. As interfaces web (baseadas em servlets, páginas JSP, documentos HTML etc.) resolvem muitas destas questões, mas expõem o desenvolvedor aos detalhes das tecnologias subjacentes, como a lógica de montagem do HTML e restrições do HTTP. Muito se fez para resolver este impasse, com avanços dos dois lados – alguns exemplos notáveis são o Java Web Start, o SWT, JSTL, Struts, entre muitas outras tecnologias.

A proposta do JavaServer Faces (JSF) é trazer o melhor dos universos web e desktop, criando uma nova camada sobre o modelo web tradicional, que seja capaz de renderizar componentes e manipular eventos. E o fato de ser um padrão do JCP (JSR-127), permite que sejam produzidas ferramentas de desenvolvimento e componentes de terceiros, trazendo compatibilidade e independência de fornecedor.

O objetivo deste artigo é mostrar o desenvolvimento de uma aplicação JSF passo a passo, ao mesmo tempo apresentando os principais conceitos e mecanismos da tecnologia. Será mostrado como criar interfaces JSF e como elas interagem com o restante dos seus sistemas. Para manter o foco em JSF, outros aspectos importantes foram deixados de lado como um foco maior em usabilidade e a lógica de persistência dos objetos.

No exemplo será apresentado o uso de componentes, eventos, backing beans, navegação, binding, validação, conversão e integração com JavaScript, usando JSF em uma pequena aplicação de reservas de passagens. Apesar de ser uma aplicação “completa”, seria inviável mostrar todos os componentes e mecanismos possíveis num único artigo. O intuito é fornecer uma boa base para que o leitor possa continuar explorando o JSF de acordo com seu interesse.

Preparação

A implementação de referência (RI) do JSF, disponibilizada pela Sun, cobre todos os aspectos da especificação, e pode ser usada no desenvolvimento de aplicativos e distribuída com eles, apesar de não ser de código aberto. Existem também outras implementações, como o MyFaces, que é open source e muito popular. O exemplo foi desenvolvido usando a RI, mas é facilmente adaptável para outras implementações.

Para usar a RI do JSF na sua aplicação é necessário que os arquivos jar da API e da implementação (jsf-api.jar e jsf-impl.jar) estejam no classpath do container web. Você pode colocar os jars no diretório de bibliotecas comuns do servidor (TOMCAT_HOME/shared/lib) ou no diretório das bibliotecas da aplicação (/WEB-INF/lib). Além disso, o descritor web.xml deve declarar o controlador do JSF, o FacesServlet, e seu mapeamento (veja a Listagem 1). Para rodar o exemplo usando o MyFaces, basta substituir as bibliotecas da RI pelas do MyFaces e adicionar um listener de inicialização no web.xml, como a seguir:

 

  <listener>

    <listener-class>
       net.sourceforge.myfaces.webapp.StartupServletContextListener

    </listener-class>

  </listener>

 

A aplicação web (war) do exemplo, disponível para download no site da Java Magazine junto com os fontes, já vem configurada. Basta implantá-la no container web de sua preferência (é recomendado na documentação da RI que o container suporte JSP 2.0). Para testar os exemplos foi usado o Tomcat 5.0.27.

 

Listagem 1. Descritor web.xml para a aplicação de exemplo

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns="http://java.sun.com/xml/ns/j2ee"

   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"   

   xsi:schemaLocation=

     "http://java.sun.com/xml/ns/j2ee

      http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd" version="2.4">

 

  <display-name>web</display-name>

  <servlet>

    <servlet-name>Faces Servlet</servlet-name>

    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>

    <load-on-startup>1</load-on-startup>

  </servlet>

  <servlet-mapping>

    <servlet-name>Faces Servlet</servlet-name>

    <url-pattern>*.faces</url-pattern>

  </servlet-mapping>

</web-app>

Componentes e eventos

As abstrações de componentes e eventos são fundamentais no JSF. Componentes são elementos reutilizáveis que podemos usar da forma que são distribuídos, ou estender para fins específicos. No caso do JSF os componentes formam as "telas" (views) da aplicação. Um exemplo é o javax.faces.component.html.HTMLInputText, um campo de entrada de texto. Objetos desse tipo representam os campos dos formulários no servidor e são declarados nas páginas JSP como tags (no caso, a tag é <h:inputText />).

 

Nota: Os componentes são implementados como tags e classes associadas. Neste artigo, “componente” será usado com os dois sentidos, de acordo com o que estiver sendo apresentado.

 

Antes de serem exibidas, as telas JSF passam por um processo chamado “renderização”, em que todos os componentes são convertidos em sua representação final (na maioria das vezes HTML, mas outros formatos podem ser suportados). No caso da tag <h:inputText/>, ela será transformada no HTML <input  type="text" />.

O conjunto de classes responsável pela renderização chama-se Render Kit. As classes do Render Kit possuem uma interface bem definida, possibilitando que ele seja estendido ou substituído por outro se o default não for suficiente. Por exemplo, um fabricante de celulares poderia criar um Render Kit otimizado para seus dispositivos, assim como componentes JSF customizados.

Os componentes podem disparar eventos de acordo com ações do usuário, como o clique em um botão ou a alteração do valor de um campo de texto. Cada componente pode indicar qual método de qual objeto deve ser usado para tratar esses eventos. Esses métodos são os chamados “Event Listeners” e funcionam de forma similar aos listeners do AWT e Swing. É no código destes listeners que a aplicação terá a oportunidade de invocar a lógica de negócio e responder aos usuários.

Componentes podem ainda (e em alguns casos devem) ser aninhados para se obter telas mais ricas e organizadas. Por exemplo, um componente de tabela HtmlPanelGrid “pai” pode ter diversos componentes “filhos”, como textos simples (HtmlOutputText) e campos de formulário HtmlInputText, ...

Quer ler esse conteúdo completo? Tenha acesso completo