fev 09 2010

JavaServer Faces 2.0 na Prática – Parte 2

Category: JSF 2.0Edson Gonçalves @ 20:05

Olá, tudo bom? Como vão vocês?
Este artigo é o segundo de uma série ao qual vou ensiná-los a trabalhar com o JavaServer Faces 2.0.
Nesta segunda parte iremos conhecer e utilizar um Managed Beans.
Dúvidas e críticas são bem vindas.

Conhecendo o comportamento do  JavaServer Faces

Agora que já fizemos nossa primeira aplicação em JSF, é mais fácil de entender os serviços que o framework JSF oferece ao desenvolvedor.  Como pudemos ver, o framework JSF é responsável por interagir com o usuário (cliente) e fornece componentes para criar uma apresentação visual de uma aplicação Web, ou seja, o escopo de JSF é restringido à camada de apresentação. A persistência de banco de dados e outras conexões de back-end estão fora do escopo de JSF.

A arquitetura do JavaServer Faces, em um alto nível, se assemelha ao mostrado na Figura 1. Aplicações JSF utilizam como padrão a interceptação HTTP via Servlet Faces e produz HTML. Esta mesma arquitetura permite “plugar” novos elementos, gerando outras características, possibilitando criar páginas usando eventos, listeners e componentes como o seu irmão Java Swing.

A arquitetura JavaServer Faces

Figura 1. A arquitetura JavaServer Faces

A Figura 1 mostra a arquitetura rica e flexível existente no JSF, onde:

  • FacesServlet – é o servlet principal para a aplicação e, opcionalmente, você pode ter o arquivo de configuração faces-config.xml[1].
  • Renderers –  são os responsáveis por exibir um componente e traduzir uma entrada de valor realizada por um usuário em componente.
  • Páginas XHTML, JSP – o JavaServer Faces permite mais de um tipo de arquivo para renderizar seus componentes (PDL – Page Declaration Language[2]), como páginas JSP ou Facelets.
  • Converters – convertem o valor de um componente (como datas, moedas, porcentagem e outros) dando-lhes novos formatos.
  • Validators – responsáveis por validar a entrada ocorrida no componente pelo usuário.
  • Managed Bean – a lógica do negócio é gerenciada pelos managed beans, que controlam inclusive a navegação por entre páginas.
  • Ajax – Tanto o envio como o recebimento de dados podem ser feitos via Ajax, sem a necessidade de reload na página do usuário.

[1] Este arquivo só se tornou opcional na versão 2.0 ou superior.

[2] PDL herda a funcionalidade do núcleo de dois conhecidos projetos JSF: Facelets e JSFTemplates. Entre todos os outros recursos, permite criar novos componentes JSF de forma declarativa, sem a criação de um grupo de classes Java como era nas versões anteriores do JSF.

Compreendendo o comportamento da primeira página JSF criada

Assim como ocorre com outras bibliotecas de tags, o JavaServer Faces é configurado através da diretiva taglib, onde existem as bibliotecas que manipulam o HTML e a Core.

Para usar as tags HTML personalizadas que representam componentes JavaServer Faces, você precisa da diretiva taglib mostrada a seguir, geralmente posicionadas no topo de cada página JSP, como de costume no uso dessa diretiva.

<%@ taglib uri=”http://java.sun.com/jsf/html” prefix=”h”%>

No caso da utilização do Facelets, onde as páginas são XHTML’s, você terá a inclusão da tag personalizada HTML de JSF dessa forma:

<html … xmlns:h=”http://java.sun.com/jsf/html”>

Nota: Com a evolução, o desenvolvimento em JSF atualmente pode utilizar a versão com XHTML descartando a anterior, uma vez que se adéqua melhor ao modelo Web 2.0.

Dentre as tags JSF adicionadas na página, a tag <h:form />, representa um componente UIForm e cria um formulário para envio de dados pelo JSF. No HTML gerado, temos a tag <form/> para que o browser a compreenda.

A tag <h:outputText /> , representando um componente UIOutput que exibe valores, é a responsável pela geração do texto renderizado na página do usuário que, na grande maioria das vezes, é dinâmico. No atributo value você adicionou o texto diretamente, mas poderia adicionar a JSF EL (JavaServer Faces Expression Language), visto mais adiante, referente ao Bean criado, dando assim o retorno ao browser de um valor dinâmico produzido por uma entrada ou vindo do banco de dados.

A página no Browser

A página criada no aplicativo poderá ser aberta através do seguinte endereço também:

http://localhost:8080/TrabComJSF/faces/index.xhtml

Isso ocorre porque adicionamos a seguinte configuração no deployment descriptor (web.xml):

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

Os itens em destaque mostram que o Servlet FacesServlet, usado para renderizar os componentes JSF, é acionado quando temos “/faces/” antes do nome da página.

Adicionando um bean ao projeto

Na primeira página JSF que criou, você simplesmente adicionou o texto diretamente na tag HTML JSF  <h:outputText />.

Desta vez, você irá adicionar o conteúdo através de um Managed Bean, que nada mais é que uma classe JavaBean comum. A Listagem 1 mostra o conteúdo do Managed Bean que deverá ser feito:

Listagem 1 – A classe MeuManagedBean.java

package br.com.integrator;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

@ManagedBean(name="meuManagedBean")
@RequestScoped
public class MeuManagedBean {

private String texto;

public String getTexto() {
return "Exemplo Simples";
}
}

A estrutura de diretórios com o Managed Bean

Sua estrutura de diretórios deverá ser similar ao mostrado na Figura 2, onde apresentamos a classe MeuManagedBean.java compilada:

Estrutura de diretórios do projeto TrabComJSF

Figura 2. Estrutura de diretórios do projeto TrabComJSF

Alterando a página do projeto

Vá até a página index.xhtml e altere a tag JSF  <h:outputText /> da seguinte forma:

<h:outputText value=”#{meuManagedBean.texto}” />

Ao alterar a tag <h:outputText/>, o atributo value recebeu agora os delimitadores #{…}. Estes delimitadores são indicações de expressão ao qual ligam o componente JSF ao Managed Bean e seu atributo get correspondente, neste caso.

No JavaServer Faces 2.0, usamos a anotação @ManagedBean, de javax.faces.bean.ManagedBean, para registrar a classe como sendo uma Managed Bean onde, através do atributo name, damos o nome que será acessível pelos componentes das páginas JSF. No caso, chamamos de meuManagedBean.

O conteúdo é exibido pelo método público getTexto(), responsável por enviar as informações do Managed Bean para a página JSF e exibi-las através da tag <h:outputText />. A Figura 3 mostra como funciona essa integração.

Um managed bean possui um escopo onde, no caso, está definido como por requisição[3]. Este escopo é definido na anotação @RequestScoped, de javax.faces.bean.RequestScoped.


[3] Isso indica que as informações transmitidas serão recebidas e permanecerão apenas na página ao qual foi requisitada. Se você navegar para outra página, estas informações se perdem.

Componente da página JSF lendo o Managed Bean

Figura 3. Componente da página JSF lendo o Managed Bean

Os Beans em JSF

Um bean em Java é uma classe que expõe atributos/propriedades e eventos em um ambiente como o JSF. Um atributo é nada mais que uma variável nomeada com um determinado tipo que pode ser lido ou escrito. No bean, existe a convenção de declarar tais atributos como sendo do tipo privado e expô-los através de métodos públicos que encapsulam seus valores com as iniciais: set e get que servem para atribuir um valor e para pegar este valor respectivamente.

Utilizando Getters e Setters em um Managed Bean

Para compreender melhor estas características, vamos modificar novamente o exemplo de modo que possamos enviar dados de um campo e recebê-los.

Rascunho da representação final do exemplo

Figura 4. Rascunho da representação final do exemplo

Altere a página index.xhtml como mostra o trecho a seguir:

<h:form>
<h:inputText id="texto" value="#{meuManagedBean.texto}" />
<br />
<h:commandButton value="Enviar Texto" action="enviar" />
<br />
<h3><h:outputText value="#{meuManagedBean.texto}" /></h3>
</h:form>

E altere o Managed Bean MeuManagedBean adicionando o método setText() e modificando o método getText() como mostra o trecho a seguir:

public String getTexto() {
return texto;
}
public void setTexto(String texto) {
this.texto = texto;
}

Pronto, basta rodar o exemplo que verá o resultado.

Submissão do texto da página para o Managed Bean e retornando

Figura 5. Submissão do texto da página para o Managed Bean e retornando

Na próxima Parte

Desta vez você utilizou mais dois componentes: <h:inputText /> e <h:commandButton />. O primeiro permite a inserção de dados. O atributo id é o nome atribuído ao componente e o value possui a expressão JSF que contém a ligação entre o componente e o atributo no Managed Bean. O segundo componente, o <h:commandButton />, teve o atributo value que representa o texto a ser exibido no componente e action, que chama um método no servidor e, se não houver método, recebe como valor uma string qualquer, que pode indicar navegação para outra página ou não.

Na Parte 3 de JavaServer Faces 2.0 na Prática teremos uma visão geral da arquitetura do framework, com pequenos exemplos funcionais em alguns dos seus aspectos.

Tags: , , , ,


jan 18 2010

JavaServer Faces 2.0 na Prática – Parte 1

Category: JSF 2.0Edson Gonçalves @ 1:06

Olá, tudo bom? Como vão vocês?
Este artigo é o primeiro de uma série ao qual vou ensiná-los a trabalhar com o JavaServer Faces 2.0. Dúvidas e críticas são bem vindas.

Como Rodar o JSF 2.0 na sua máquina

A forma mais rápida de executar um aplicativo em JSF 2.0 é através do NetBeans IDE 6.8.  A versão que você deve baixar é a que possui o Sun GlassFish Enterprise Server v3 que, não por acaso, possui suporte ao Java Web e EE.

JavaServer Faces no NetBeans IDE – Criando um Projeto JSF 2.0

O NetBeans IDE, graças ao GlassFish v3, possui as bibliotecas necessárias para desenvolver uma aplicação JavaServer Faces.

Para criar um projeto com JavaServer Faces, siga os seguintes passos:

1. Vá ao menu File e clique no item New Project.

File > New Project

Figura 1. Criando um novo projeto no NetBeans IDE

2. Na caixa de diálogo New Project selecione o item  Web em Categories e Web Application em Projects. Clique no botão Next.

Caixa de Diálogo New Project

Figura 2. Criando um projeto Web no NetBeans IDE

3. Na segunda etapa você define o nome do projeto, em Project Name, e a localização, em Project Location. Digite PrimProjJSF (uma abreviação de Primeiro Projeto JavaServer Faces, como sugestão no nome do projeto). Fique atento a localização dos arquivos em sua máquina. Se desejar mudar a localização de onde se encontra o projeto, clique no botão Browse e selecione um novo local. Clique no botão Next.

Nome do Projeto e Localização na Criação do Projeto no NetBeans IDE

Figura 3. Nome do Projeto e Localização

3. Na terceira etapa você vai manter o GlassFish v3 em Server, assim como manter o mesmo nome do projeto em Context Path. Clique no botão Next.

Seleção do Servidor de Aplicativos

Figura 4. Seleção do Servidor de Aplicativos

4. A última etapa é onde você escolhe o framework  JavaServer Faces. Na parte inferior, após selecionar o framework, surgirá duas abas: Libraries e Configuration. Em Libraries mantenha Use default library which comes with Server (JSF 2.0) .

Selecionando o Framework JSF 2.0

Figura 5. Selecionando o Framework JSF 2.0

5. Na aba Configuration, em  Servlet URL Pattern, mantenha como /faces/*, assim como deixe Facelets em Preferred Page Language (veremos sobre isso em outra parte). Clique no botão Finish para concluir.

Mapeando o Faces Servlet no Projeto

Figura 6. Mapeando o Faces Servlet no arquivo web.xml

O NetBeans IDE abrirá automaticamente uma página em JSF criada pelo assistente através do template existente.

Um primeiro contato com JavaServer Faces

Se você não tem base de conhecimento no JavaServer Faces, aqui será o seu princípio.  A idéia é modificar os arquivos configurados pelo NetBeans IDE.

Uma página simples

A primeira página de um projeto Web costuma ser chamada de index. No JSF 2.0, quando utilizamos o padrão de Facelets, esta página possui a extensão .xhtml, ficando  index.xhtml. No NetBeans basta substituir o conteúdo da página index.xhtml pelo mostrado na  Listagem 1.

Listagem 1 – A página index.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>Uma simples página JSF</title>
</h:head>
<h:body>
<h:form>
<h:outputText value="Exemplo Simples" />
</h:form>
</h:body>
</html>

O diretório WEB-INF

No diretório WEB-INF encontramos o arquivo web.xml (deployment descriptor) padrão, contendo as adições mostradas na Listagem 2.

Listagem 2 – O arquivo web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
<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>
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>faces/index.xhtml</welcome-file>
</welcome-file-list>
</web-app>

O elemento <servlet-class /> declara javax.faces.webapp.FacesServlet fazendo com que este seja carregado inicialmente. O Servlet é mapeado no contexto pelo elemento <url-pattern /> para que as páginas da aplicação tenham o prefixo /faces/.

Nota: Embora na versão com Eclipse apareça o arquivo faces-config.xml, utilizado até a versão 1.2, na versão do JSF 2.0 não é obrigatório.

Você também pode configurar, para um aplicativo JSF, alguns parâmetros específicos no elemento <context-param />, como no trecho a seguir:

<context-param>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>client</param-value>
</context-param>
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Production</param-value>
</context-param>

A seguir você tem a Tabela 1 com alguns parâmetros e sua explicação:

Tabela 1 – Parâmetros de configurações de um projeto JSF no web.xml

Parâmetro Descrição
javax.faces.CONFIG_FILES Define uma lista delimitada por vírgulas com caminhos relativos de  contextos de configurações JSF em que a aplicação  irá procurar.
javax.faces.DEFAULT_SUFFIX Permite definir uma lista de sufixos (ex.: .xhtml, .jsf) que serão utilizadas pelo framework para ler páginas com conteúdo JSF.
javax.faces.LIFECYCLE_ID Identifica a instância do ciclo de vida a ser utilizado durante o processamento de  requisições JSF.
javax.faces.STATE_SAVING_METHOD Define a localização em que o estado é salvo.  Neste caso temos dois: server (padrão) que tipicamente salva em HttpSession e client que salva como campos ocultos na subsequente submissão do formulário.
javax.faces.PROJECT_STAGE Descreve como a aplicação JSF está em seu ciclo de vida no desenvolvimento de software, podendo conter os seguintes valores:  Development, UnitTest, SystemTest ou Production. Esta informação poderá ser usada por uma implementação JSF cachear recursos de modo que haja uma melhora no desempenho em produção, por exemplo.
javax.faces.DISABLE_FACELET_JSF_VIEWHANDLER Desabilita o Facelets (padrão) como Linguagem de Declaração de Página (Page Declaration Language – PDL) se colocado como true em seu valor.
javax.faces.LIBRARIES Interpreta cada arquivo encontrado na lista, separada por vírgula, de caminhos como uma biblioteca de tags Facelets.

Executando o projeto de exemplo

No NetBeans é mais simples, pois o projeto considerado principal (main) já está ativo, sendo necessário apenas ir ao menu Run>Run Main Project.

Executando o Projeto

Figura 7. Executando o Projeto no NetBeans IDE

Resultado é uma página JSF renderizada no Browser como mostrado na Figura abaixo.

Resultado da página JSF renderizada

Figura 8. Resultado da página JSF renderizada no Browser

Tags: , , ,