Tutorial para utilizao do JSF 2.

0 Java Server Faces

O JSF um framework web embasado em interface grfica, capaz de renderizar

componentes e manipular eventos em aplicaes web no padro Java EE, no qual os componentes JSF so
orientados a eventos. O JSF fornece mecanismos para converso, validao, execuo de lgica de negcios
e controle de navegao, incorporando caractersticas de um framework MVC para WEB e de um modelo de
interfaces grficas baseado em eventos, fazendo a separao entre a visualizao (pginas) e regras de
negcio (modelo).
O padro MVC divide uma aplicao em trs camadas: modelo, visualizao e controle
(model, view and controller). A camada de modelo representa os objetos de negcio, mantm o estado da
aplicao e fornecer ao controlador o acesso aos dados. A camada de visualizao implementa a interface
com o usurio, sendo responsvel por definir a forma como os dados sero apresentados e encaminhar as
aes dos usurios para o controlador. E a camada de controle responsvel pela ligao entre as outras
camadas (modelo e visualizao), assim como interpretar as aes do usurio e executar operaes sobre o
modelo, onde so efetivadas mudanas e, ento, gerar uma resposta (visualizao) apropriada para o
usurio.
No JSF o controle do fluxo da aplicao realizado por um servlet denominado
FacesServlet, por arquivos de configurao e por um conjunto de manipuladores de aes e observadores de
eventos. O FacesServlet quem recebe as requisies da WEB, e faz o redirecionamento para o modelo e ao
final envia uma resposta, que quase sempre gerada por uma pgina JSP. Os arquivos de configurao so
responsveis por realizar associaes e mapeamentos de aes e pela definio de regras de navegao. Os
manipuladores de eventos so responsveis por receber os dados vindos da camada de visualizao, acessar
o modelo, e ento devolver o resultado para o FacesServlet.
Basicamente uma aplicao web usando JSF composta de pginas HTML, JSP,
JavaBeans, Classes de negcios e os arquivos de configurao faces-config.xml e web.xml, alm do
FacesServlet.
O modelo representa os objetos de negcio e executa uma lgica de negcio ao receber
os dados vindos da camada de visualizao. Finalmente, a visualizao composta por component trees
(hierarquia de componentes UI), tornando possvel unir um componente ao outro para formar interfaces
mais complexas.
At a verso 1.2 as pginas so geradas por arquivos JSP que utilizam TAG's especiais do
JSF, carregadas atravs de duas taglibs que devem ser declaradas pela diretiva <%@ taglib ....
A verso 2.0 do JSF define como padro as pginas em xhtml do Facelets. Esses
arquivos so processados pela engine do Facelets que faz parte do JSF 2. Os componentes visuais que
formam as telas da aplicao so inseridos atravs de tags xhtml.

Configurao da aplicao WEB:

No arquivo \WEB-INF\web.xml devemos incluir a declarao do FacesServlet:

<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>

Tutorial para utilizao do JSF 2.0 Java Server Faces

Managed Bean
As regras de negcio podem ser invocadas atravs de objetos especiais chamados
Managed Bean's, sendo responsveis por intermediar a comunicao entre nossas pginas e o nosso
modelo de dados.

So classes simples, no herdam de nenhuma classe predefinida e nem so obrigados a

implementar nenhuma interface, possuem nossos famosos getters e setters seguindo a conveno Java
Bean. Estes objetos podem ainda definir mtodos que realizam validao de dados, alm de outros mtodos
que executam a lgica da aplicao e invocam outros objetos da lgica de negcios, como os DAO's (Data
Access Object) responsveis pela persistncia dos dados.

Resumindo: os Managed Beans possuem trs responsabilidades principais:

1. Receber os dados enviados pelos usurios atravs das telas da aplicao.
2. Executar as lgicas para tratar as requisies dos usurios.
3. Disponibilizar os dados que devem ser apresentados nas telas da aplicao.

Aps criar uma classe de Managed Bean devemos:

1. Definir atributos com os correspondentes getters e setters para poder receber dados das telas ou
enviar dados para as telas.
Definir mtodos para implementar as lgicas de tratamento das possveis requisies dos usurios.
Configurao do Managed Bean WEB:
1) A partir da verso 2.0
Dentro da prpria classe fazemos o uso de uma anotao (Annotation) @ManagedBean, indicando o nome
na sua propriedade name.

@ManagedBean(name = "loginMB")
public class LoginMB
{
}
2) At a verso 1.2
No arquivo \WEB-INF\faces-config.xml devemos fazer as declaraes dos Managed Bean's, regras de
navegao e validadores.
Declarao de um managed bean no arquivo \WEB-INF\faces-config.xml:

<managed-bean>
<managed-bean-name>userMB</managed-bean-name>
<managed-bean-class>controle.UsuarioMB</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>

Tutorial para utilizao do JSF 2.0 Java Server Faces

Escopo
Os Managed Beans so instanciados pelo JSF, ou seja, os desenvolvedores definem as
classes e o JSF cuida do new. Porm, podemos determinar quando os Managed Beans devem ser criados e
descartados. O tempo de vida de uma instncia afeta principalmente a durabilidade dos dados que ela
armazena. Por isso, precisamos escolher qual escopo queremos utilizar em cada Managed Bean.

Request
No

escopo

Request,

as

instncias

dos

Managed

Beans

so

criadas

durante

processamento de uma requisio assim que forem necessrias e descartadas no final desse mesmo
processamento. Ou seja, os dados no so mantidos de uma requisio para outra. O JSF utiliza o escopo
Request como padro. Dessa forma, se o desenvolvedor no definir nenhum escopo para um determinado
Managed Bean o escopo Request ser adotado automaticamente. Mesmo sendo o padro, podemos deixar
explcito

escolha

do

escopo

Request

atravs

da

anotao

@RequestScoped

ou

da

tag

managed-bean-scope.

Session
Certas informaes devem ser mantidas entre as requisies de um determinado usurio
em um determinado navegador. Por exemplo, suponha uma aplicao que utiliza a ideia de carrinho de
compras. Um usurio faz diversas requisies para escolher os produtos e coloc-los no seu carrinho.
Durante todo esse tempo, a aplicao deve manter a informao de quais produtos j foram escolhidos por
este usurio. Da surge o escopo Session. Cada usurio possui um espao na memria do servidor que
chamado de Session, ou seja, existe uma Session para cada usurio. Tecnicamente, possvel existir duas
ou mais Sessions de um mesmo usurio, por exemplo, se ele estiver utilizando dois navegadores. As
instncias dos Managed Beans configurados com o escopo Session so criadas quando necessrias durante o
processamento de uma requisio e armazenadas na Session do usurio que fez a requisio.
Essas instncias so eliminadas basicamente em duas situaes: a prpria aplicao
decide por algum motivo especfico apagar a Session de um usurio (por exemplo, o usurio fez logout) ou o
Web Container decide apagar a Session de um usurio pois este no faz requisies a muito tempo. Esse
tempo pode ser configurado com o Web Container. Para escolher o escopo Session, devemos utilizar a
anotao @SessionScoped ou a tag managed-bean-scope.
Application
As instncias dos Managed Beans configurados com escopo Application so criadas no
primeiro momento em que elas so utilizadas e mantidas at a aplicao ser finalizada. Os dados dessas
instncias podem ser utilizados nas telas de todos os usurios durante toda a execuo da aplicao.
Analogamente, para escolher o escopo Application, devemos utilizar a anotao @ApplicationScoped ou a
tag managed-bean-scope.
View
O escopo View foi adicionado no JSF 2. A ideia manter determinados dados enquanto o
usurio no mudar de tela. As instncia dos Managed Beans em escopo View so eliminadas somente
quando h uma navegao entre telas. Analogamente, para escolher o escopo View, devemos utilizar a
anotao @ViewScoped ou a tag managed-bean-scope.

Tutorial para utilizao do JSF 2.0 Java Server Faces

Interdependncia e Injeo
Instncias de Managed Beans podem conversar entre si para dividir o processamento
das requisies dos usurios de acordo a especialidade de cada uma delas. Para que duas instncias
conversem, uma deve possuir a referncia da outra.
Como a criao e eliminao das instncias dos Managed Beans so responsabilidade do
JSF, ele o mais indicado para administrar as referncias entre as instncias do Managed Beans.
Basicamente, o que o desenvolvedor deve fazer indicar ao JSF quais instncias devem
ser conectadas atravs de referncias.
Como exemplo, suponha dois Managed Beans:
@ManagedBean
class PrimeiroManagedBean
{
}
@ManagedBean
class SegundoManagedBean
{
}
Suponha tambm que o primeiro precisa chamar o segundo para resolver algum
problema. Do ponto de vista da Orientao a Objetos, bastaria declarar um atributo na classe do primeiro
Managed Bean relacionando-o ao segundo.
@ManagedBean
class PrimeiroManagedBean
{
private SegundoManagedBean segundoManagedBean;
}
Porm, como o JSF que vai administrar as ligaes entre os objetos, devemos indicar
atravs de anotaes ou de xml o vnculo dos dois Managed Beans.
@ManagedBean
class PrimeiroManagedBean
{
@ManagedProperty(value="#{segundoManagedBean}")
private SegundoManagedBean segundoManagedBean;
}

Tutorial para utilizao do JSF 2.0 Java Server Faces

Regras de navegao:
um mecanismo que permite definir uma sequncia de pginas a serem mostradas aps
a execuo de alguma ao do managed bean, e o retorno desta ao ser uma String que deve se encaixar
em uma das regras de navegao definidas pela tag from-outcome.
A partir da verso 2.0 do JSF podemos retornar diretamente o nome da pgina pelo
mtodo do Managed Bean para realizar a transio, no sendo necessrio configurar essas regras no arquivo
faces-config.xml.
Declarao de uma regra de navegao no arquivo \WEB-INF\faces-config.xml:

<navigation-rule>
<from-view-id>/cadastrousuarios.jsp</from-view-id>
<navigation-case>
<from-outcome>login</from-outcome>
<to-view-id>/login.jsp</to-view-id>
</navigation-case>
<navigation-case>
<from-outcome>listar</from-outcome>
<to-view-id>/listarusuarios.jsp</to-view-id>
</navigation-case>
</navigation-rule>
Declarao das taglibs do JSF no incio da pgina JSP:

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>

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

Tutorial para utilizao do JSF 2.0 Java Server Faces

Facelets
Qual a importncia da reutilizao no desenvolvimento de software ? Os objetivos do
reaproveitamento de software so: diminuir o tempo e o custo para desenvolver e facilitar a manuteno
tambm diminuindo gastos e tempo.
Levando a ideia do reaproveitamento adiante, algumas pessoas desenvolveram um
projeto chamado Facelets que tem como principal objetivo facilitar todo o processo de desenvolvimento e
manuteno das telas de uma aplicao JSF. O Facelets j faz parte do JSF 2 sendo a engine padro dessa
tecnologia para a definio das telas das aplicaes web.

Criando Pginas XHTML

Namespaces
Para poder aplicar as tags que definem as telas das aplicaes JSF, precisamos
adicionar os namespaces correspondentes s bibliotecas de tags que desejamos utilizar.
<html xmlns="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">
</html>
Os

dois

principais

namespaces

so:

http://java.sun.com/jsf/html

http://java.sun.com/jsf/core.
O primeiro o namespace da biblioteca de tags do JSF que geram contedo HTML
especificamente.
O segundo corresponde a biblioteca de tags do JSF que no est atrelada a um tipo de
visualizao, ou seja, so tags mais genricas.
Outro namespace importante o http://java.sun.com/jsf/facelets que contm tags que
nos ajudam a reaproveitar o cdigo das telas. Veremos em outro captulo o funcionamento das tags desse
namespace.

Esqueleto HTML
Um documento HTML possui um esqueleto constitudo por algumas tags principais. Para
refletir essa estrutura devemos inserir algumas tags nos documentos XHTML que definem as telas JSF.

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
</h:head>
<h:body>
</h:body>
</html>

Tutorial para utilizao do JSF 2.0 Java Server Faces

Templating
A reutilizao do cdigo das telas realizada principalmente pelo uso de templates. A
ideia identificar um padro em um determinado conjunto de telas de uma aplicao JSF e defini-lo atravs
de um esqueleto (template) que possua trechos dinmicos que possam ser preenchidos posteriormente.
A criao de um template simples, basta criar um arquivo xhtml adicionando todos os
componentes visuais que so fixos e devem aparecer em um determinado conjunto de telas. Para os trechos
dinmicos, devemos aplicar o componente ui:insert criando um espao que pode ser preenchido depois.

<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>
<ui:insert name="titulo">Ttulo</ui:insert>
</title>
<meta content="text/html; charset=ISO-88591" http-equiv="Content-Type" />
</h:head>
<h:body>
<ui:insert name="cabecalho"></ui:insert>
<ui:insert name="conteudo"></ui:insert>
</h:body>
</html>

A pgina deve informar qual template ela utiliza:

<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<ui:composition template="modelo.xhtml">
<ui:define name="titulo">Pgina Principal</ui:define>
<ui:define name="conteudo">
CONTEDO DA PGINA ...
</ui:define>
</ui:composition>
</html>

Tutorial para utilizao do JSF 2.0 Java Server Faces

TAG's do JSF:
<f:view> - deve ser no incio de todas as pginas JSP em que se deseja utilizar o JSF, pois responsvel
pela criao da estrutura de componentes da pgina. Ela deve ser fechada ao final da pgina, e todas as
tags do JSF devem ficar entre esta tag de abertura e sua correspondente de fechamento.
<h:form> - declara um formulrio comum, e deve ser declarado sem nenhuma ao, pois a ao dever
ser declarada no boto de submisso.
<h:outputText> - imprime na pgina um valor fixo atravs da propriedade value, mas pode imprimir
valores de objetos JavaBeans. Exemplo: <h:outputText value="Digite o nome:" />
<h:outputLabel> - imprime na pgina um campo label associado ao ID de outro campo de entrada de
dados. Exemplo: <h:outputLabel for="nome" value="Digite o nome:" />
<h:inputText> - cria na pgina um campo campo de entrada de dados.
Exemplo: <h:inputText id="email" value="#{userMB.usuario.email}" />
<h:commandButton> - cria na pgina um boto de envio de dados do formulrio para o FacesServlet,
indicando qual mtodo do Managed Bean ser executado.
Exemplo: <h:commandButton action="#{userMB.salvar}"

value="Gravar" />

<h:commandLink> - cria na pgina um link que executa um mtodo do managed bean ou uma regra de
navegao definida no faces-config.xml.

Esta tag deve estar obrigatoriamente dentro de uma tag

<h:form> aberta.
Exemplo: <h:commandLink action="cadastrarUsuario">Cadastrar novo usuario</h:commandLink>
<h:panelGrid> - cria na um grid que organiza os componentes em um nmero fixo de colunas. Os
componentes podem ser inseridos livremente que a organizao automtica.
Exemplo: <h:panelGrid columns="2">
<f:ajax> - permite utilizar requisies assncronas via http usando AJAX para atualizar componentes ou
processar dados da pgina atual.
Exemplo: <f:ajax event="click" execute=@form render=@this>

Tutorial para utilizao do JSF 2.0 Java Server Faces

Exemplo de uma pgina completa em JSP (quando usamos JSF 1.2):

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"

pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<f:view>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Autenticao</title>
</head>
<body>
<h1>
<h:outputText value="Autenticao" />
</h1>
<br>
<hr>
<h:form>
<h:messages style="color: red" />
<h:panelGrid columns="2">
<h:outputLabel for="login" value="Digite o usurio:" />
<h:inputText id="login" value="#{loginMB.usuario.login}" required="true"
requiredMessage="campo login obrigatrio" />
<h:outputLabel for="senha" value="Digite a senha:" />
<h:inputSecret id="senha" value="#{loginMB.usuario.senha}"
required="true" requiredMessage="campo senha obrigatrio"/>
<h:commandButton action="#{loginMB.logar}" value="Enviar" />
</h:panelGrid>
</h:form>
<h:form>
<h:commandLink action="cadastrarUsuario">Cadastrar novo usuario</h:commandLink>
</h:form>
</body>
</html>
</f:view>

Tutorial para utilizao do JSF 2.0 Java Server Faces

Converter
Converso o processo que garante que os dados digitados pelos usurios se
transformem em um tipo especfico da linguagem Java, pois o navegador trata os dados de todos os campos
como texto (String). JSF fornece vrios conversores prontos para serem usados. Todos os tipos primitivos e
classes wrappers, alm de BigInteger e BigDecimal, usam conversores padro do JSF automaticamente.
E possvel criar conversores personalizados para as classes da aplicao utilizando a
interface Converter. O conversor deve implementar dois mtodos: um para transformar o objeto em String e
outro para transformar a String em objeto.

Exemplo:

@FacesConverter(value="grupo-converter", forClass=Grupo.class)
public class GrupoConverter implements Converter {
@Override
public Object getAsObject(FacesContext arg0, UIComponent componente,
String valor) {
if (valor == null || valor.length() == 0)
return null;
GrupoDAO dao = new GrupoDAO();
Grupo grupo = dao.lerPorId(new Long(valor));
return grupo;
}
@Override
public String getAsString(FacesContext arg0, UIComponent componente,
Object objeto) {
if (objeto instanceof Grupo)
return ((Grupo) objeto).getId().toString();
return null;
}
}

Tutorial para utilizao do JSF 2.0 Java Server Faces

Validator
O JSF possui alguns validadores bsicos para os campos de um formulrio, como campos
obrigatrios e intervalos numricos. possvel criar validadores que implementam regras especificas de
validao dos dados da aplicao utilizando a interface Validator, onde apenas um mtodo deve ser
implementado e lanar uma exceo caso no atenda aos requisitos do teste.

Exemplo:

@FacesValidator(value="email-validator")
public class EmailValidator implements Validator {
@Override
public void validate(FacesContext contexto, UIComponent campo, Object valor)
throws ValidatorException {
String valorS = (String) valor;
if (valorS.indexOf("@") <= 0)
throw new ValidatorException(new
FacesMessage(FacesMessage.SEVERITY_ERROR, "O e-mail invlido", null));

}
}

Tutorial para utilizao do JSF 2.0 Java Server Faces

Ciclo de vida
Ao executar uma pgina ou mtodo usando componentes JSF, a requisio passar por
um ciclo de vida de processamento bem definido, constitudo por 6 fases:
1. Restore view (Restaurar viso)
2. Apply request values (Aplicar valores de requisio)
3. Process validations (Processar validaes)
4. Update model values (Atualizar os valores do modelo)
5. Invoke application (Invocar a aplicao)
6. Render response (Renderizar a resposta)

1. Restore view (Restaurar viso)

A fase de restaurao da viso recupera a hierarquia de componentes para a pgina
solicitada, se ela foi exibida anteriormente, ou constri uma nova hierarquia de componentes, se for a
primeira exibio.
Se a pgina j tiver sido exibida, todos os componentes so recuperados em seu estado
anterior. Isso d condies dos dados de um formulrio submetido ao servidor serem recuperados, caso
ocorra algum problema de validao ou restrio de regra de negcio. Por exemplo, se um formulrio
solicita campos obrigatrios que no so totalmente preenchidos, porm enviados pelo usurio, o mesmo
formulrio deve aparecer novamente com os campos que no estavam vazios j preenchidos, porm com
mensagens de erro indicando os campos requeridos.

2. Apply request values (Aplicar valores de requisio)

Nesta fase, cada componente da hierarquia de componentes criada na fase anterior tem a
chance de atualizar seu prprio estado com informaes que vieram da requisio.

3. Process validations (Processar validaes)

Os valores submetidos so convertidos em tipos especficos e anexados aos componentes.
Quando voc programa uma pgina em JSF, voc pode incluir validadores que atuam nos valores recebidos
pelos usurios. Neste momento, os validadores entram em ao e, se surgirem erros de converso ou de
validao, a fase de renderizao de resposta invocada imediatamente, pulando todas as outras fases e
exibindo a pgina atual novamente, para que o usurio possa corrigir os erros e submeter os dados mais
uma vez.

4. Update model values (Atualizar os valores do modelo)

Durante

esta

fase,

os

valores

anexados

(conhecidos

como

valores

locais)

aos

componentes so atualizados nos objetos do modelo de dados e os valores locais so limpos.

5. Invoke application (Invocar a aplicao)

Na quinta fase, os eventos que originaram o envio do formulrio ao servidor so
executados. Por exemplo, ao clicar em um boto para submeter um cadastro, a programao da ao deste
boto deve ser executada. Em alguns casos, o mtodo executado pode retornar um identificador dizendo
qual a prxima pgina a ser exibida, ou simplesmente no retornar nada para exibir a mesma pgina.

Tutorial para utilizao do JSF 2.0 Java Server Faces

6. Render response (Renderizar a resposta)

Por ltimo, a fase de renderizao da resposta gera a sada com todos os componentes
nos seus estados atuais e envia para o cliente. O ciclo recomea sempre que o usurio interage com a
aplicao e uma requisio enviada ao servidor.