Tutorial JSF 2.0 (2012)

Java
Server
Faces
2.0

Breve
introdução
prá0ca

Helder
da
Rocha

helder@argonavis.com.br

16/02/2012

Obje0vos
deste
tutorial

•  Introdução
ao
JSF
2

–  O
que
é,
quando
usar,
como
usar,
para
que
serve,

beneGcios,
perﬁl
de
usuários

•  Introdução
prá0ca

–  Conﬁguração
do
ambiente

–  Criação
e
execução
de
uma
aplicação
simples

•  Breve
visão
geral
da
API
e
arquitetura

–  APIs
básica,
componentes
padrão
e
tags

–  Arquitetura
de
aplicações
JSF:
ciclo
de
vida,
0pos
de

requisições
e
respostas,
fases
do
processamento

–  Conversores,
validadores,
listeners,
suporte
a
ajax

–  Bibliotecas
de
componentes
(ex:
PrimeFaces)
e
JSR299
(CDI)

O
que
é
Java
Server
Faces

•  Um
framework
de
interface
do
usuário
(UI)
para

aplicações
Web
em
Java

•  Arquitetura
baseada
em
árvore
de
componentes
com

estado
e
comportamento
mapeados
a
tags

–  Facilita
a
criação
de
GUIs
em
HTML
e
o
controle
de
ciclos

de
vida,
estado
e
eventos
em
objetos
Java

•  Arquitetura
que
promove
a
separação
de
camadas

com
baxíssimo
acoplamento

–  Facilita
testes,
desenvolvimento,
manutenção,
evolução

•  Tecnologia
baseada
em
padrões
e
independente
de

ferramentas

–  Permite
tanto
o
desenvolvimento
via
ferramentas

integradas,
mas
também
sem
essas
ferramentas

Caracterís0cas

•  Transparência
no
gerenciamento
do
estado
nas

requisições

•  Encapsulamento
de
diferenças
entre
browsers

•  Suporte
a
processamento
mulC-‐página
de
formulários

•  Plataforma
extensível
(através
de
bibliotecas
de

componentes
criadas
por
terceiros)

•  Suporte
na0vo
e
extensível
a
validação,
eventos
e

conversão
de
0pos
(String
ßà
Objeto)

•  Controle
declara0vo
e
condicional
de
navegação

A
quem
se
des0na
a
especiﬁcação?

•  Autores
de
página

–  Programadores
Web
que
poderão
construir
páginas
em
HTML
usando

tags,
facelets,
bibliotecas
de
terceiros

•  Autores
de
componentes

Java
que
poderão
construir
os
componentes
que

serão
mapeados
a
tags,
ou
que
irão
suportar
páginas
e
aplicações

•  Desenvolvedores
de
aplicação

Java
EE
que
irão
u0lizar
o
JSF
como
interface
para

serviços
e
aplicações

•  Fornecedores
de
ferramentas
e
implementadores
JSF

–  Usam
a
especiﬁcação
para
construir
ferramentas
e
containers/
servidores
que
irão
suportar
aplicações
JSF

Uso
`pico:
papéis
de
desenvolvimento

•  Autor
de
página

–  Constrói
views
em
XHTML,
imagens,
CSS,
etc

–  Declara
namespaces
para
bibliotecas
de
tags
e

widgets

•  Autor
de
componentes

–  Cria
conversores,
managed
beans,
event
handlers;

–  Eventualmente
escreve
componentes
novos.

•  Desenvolvedores
de
aplicação

–  Conﬁguram
a
integração
de
aplicações
JSF
com
dados

e
serviços
(EJBs,
JPA,
MDB,
Web-‐Services)

Criação
de
aplicações
simples

•  Obje0vos

–  Conﬁgurar
os
ambientes
de
desenvolvimento
e
de

execução

–  Familiarizar-‐se
com
a
sintaxe
e
estrutura
de
aplicações

JSF
e
processo
de
desenvolvimento

•  Aplicações
de
exemplo

1.  Aplicação
mínima
(apenas
uma
tela
com
facelets)

2.  Aplicação
mínima
com
managed
bean

3.  Aplicação
simples
usando
bean,
navegação,

componentes
de
formulário
e
resources

4.  Aplicação
mínima
usando
CDI
(JSR
299)

O
que
é
preciso

•  Versão
mínima:
JSF
2.0,
JDK
6
ou
superior

•  Dependências
(JARs
necessários)

–  JARs
do
API
JSF,
da
implementação
JSF
e
JSTL

–  O
JAR
da
implementação
de
referência
(Mojarra)
já
inclui
todos

os
arquivos
necessários;
baixar
em
javaserverfaces.java.net

–  PrimeFaces
3.0
(www.primefaces.org
-‐
opcional)

•  Ambiente
de
execução

–  Tomcat
7
ou
servidor
de
aplicações
com
suporte
a
Java
EE
6;

baixar
em
tomcat.apache.org

•  Ambiente
de
desenvolvimento

–  Usaremos
o
mínimo:
editor
de
texto
(EditPad,
TextWrangler,

etc.),
acesso
ao
prompt
da
linha
de
comando
e
Apache
Ant;

baixar
o
Ant
em
ant.apache.org.

Diagrama
do
ambiente

de
desenvolvimento
jsnasico

src

web

intro.xhtml

WEB-‐INF

lib

javax.faces-‐2.x.jar

resources

build.xml

build.proper0es

myapp

IntroBean.java

css

myapp.css

Ant
build
script

do
projeto

Pasta
raiz
do
projeto

(use
dentro
de
uma

pasta
de
workspace)

Pasta
dist
contendo

WAR
será
criada

durante
o
build

Contém
estrutura
do
WAR

(contexto
Web)

Pasta
classes
será
criada

durante
o
build

Contém
código-‐fonte

Java
que
será

compilado
para

WEB-‐INF/classes

Desenvolvimento
com
JSF

Bibliotecas

de
tags

XHTML

Linguagem
de

expressões

API
Java
javax.faces.*

Páginas
XHTML

Tags

Expressões

Managed
beans

Event
handlers

Conversores

Validadores

Componentes

UI

Usadas
para
escrever
à

Usada
para
escrever
à

Usadas
em

Transferem
dados
de/para

ßMapeados
a
à

Usada
para
escrever
à

JSF

Estrutura,

comportamento

e
apresentação

da
interface
do

usuário

Dados,

controle
de

navegação
e

integração

com
serviços

faces-‐config.xml

Configuração

@Anotações

Configuração

Página
web
mínima

<!DOCTYPE
html
PUBLIC
"-‐//W3C//DTD
XHTML
1.0
Transi0onal//EN"

"hwp://www.w3.org/TR/xhtml1/DTD/xhtml1-‐transi0onal.dtd">

<html

xmlns="hwp://www.w3.org/1999/xhtml"

xmlns:h="hTp://java.sun.com/jsf/html">

<h:head>

<0tle>Introducao
a
JSF</0tle>

</h:head>

<h:body>

<h:outputText
value="Esta
funcionando!"/>

</h:body>

</html>

Facelets:
tags
mapeados

a
componentes
HTML

naCvos
do
JSF

Mapeamento
XML
de
namespace
de
biblioteca

de
tags
JSF
HTML
a
prefixo
padrão
(tags
com

prefixo
“h”
fazem
parte
desta
biblioteca)

Mapeamento
XML
do

namespace
da
biblioteca

padrão
XHTML
a
tags

sem
prefixo
(tags
sem

prefixo
são
XHTML)

Tags

XHTML

basicapp.war

Arquitetura:
aplicação
mínima

WEB-‐INF

lib


intro.xhtml

web.xml

<!DOCTYPE
html
PUBLIC
"-‐//W3C//DTD
XHTML
1.0
Transi0onal//EN"


<html

xmlns:h="hwp://java.sun.com/jsf/html"

xmlns:f="hwp://java.sun.com/jsf/core"

xmlns:ui="hwp://java.sun.com/jsf/facelets">

<h:head>

<Ctle>Introducao
a
JSF</Ctle>

</h:head>

<h:body>

<h:outputText
value="Esta
funcionando!"/>

</h:body>

</html>
intro.xhtml

<!DOCTYPE
html
PUBLIC
"-‐//W3C//DTD
XHTML
1.0
Transi0onal//EN"


<html
xmlns="hTp://www.w3.org/1999/xhtml">

<head>

<Ctle>Introducao
a
JSF</Ctle>

</head>

<body>Esta
funcionando!</body>

</html>

hTp://localhost:8080/basicapp/intro.faces

Facelets

HTML
gerado

web.xml
é
opcional
em
aplicações

simples
como
esta

é
opcional
em

muitas
aplicações
`picas

Ant:
build.xml
e

build.proper0es

•  Executar
ant
na
pasta
raiz
do
projeto

•  Compilar
conteúdo
de
src
para
a
pasta

WEB-‐INF/classes

ant

ou

ant
compile

•  Reinciar
ambiente
(apagar
pastas

classes
e
dist)
e
recompilar

ant
clean
compile

•  Construir
WAR
e
gravar
em
dist/
basicapp.war

ant
war

<project
name="JSF
Basico"
default="compile">

<property
file="build.properCes"
/>

<property
name="web.dir"
value="web"
/>

<property
name="webinf.dir"
value="${web.dir}/WEB-‐INF"
/>

<property
name="classes.dir"
value="${webinf.dir}/classes"
/>

<property
name="src.dir"
value="src"
/>

<property
name="lib.dir"
value="${webinf.dir}/lib"
/>

<property
name="dist.dir"
value="dist"
/>

<property
name="war.file"
value="${dist.dir}/${app.name}.war"
/>

<target
name="init">

<mkdir
dir="${classes.dir}"
/>

<mkdir
dir="${dist.dir}"
/>

</target>

<target
name="clean">

<delete
dir="${classes.dir}"
/>

<delete
dir="${dist.dir}"
/>

</target>

<target
name="compile"
depends="init">

<javac
destdir="${classes.dir}
srcdir="${src.dir}">

<classpath>

<fileset
dir="${lib.dir}"
includes="**/*.jar"
/>

</classpath>

</javac>

</target>

<target
name="war"
depends="compile">

<jar
des~ile="${war.file}">

<fileset
dir="${web.dir}"
/>

</jar>

</target>

</project>

app.name=basicapp

build.properCes

build.xml

Opcional:
web.xml

•  Um
web.xml
com
a
configuração
default
já
é
fornecido
no
JAR
da

implementação
de
referência
(Mojarra
2.x)

•  Não
é
preciso
criar
um
a
menos
que
se
deseje
configurar
o
ambiente

(adicionando
listeners
e
outros
recursos)

•  Se
criado,
web.xml
deve
ter
a
configuração
mínima
abaixo

<?xml
version='1.0'
encoding='UTF-‐8'?>

<web-‐app
version="2.5"

xmlns="hwp://java.sun.com/xml/ns/javaee"

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

xsi:schemaLoca0on="hwp://java.sun.com/xml/ns/javaee

hwp://java.sun.com/xml/ns/javaee/web-‐app_2_5.xsd">

<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-‐pawern>*.faces</url-‐pawern>

</servlet-‐mapping>

</web-‐app>

2.5
ou
superior!

Deve
ser
colocado
na
raiz

da
pasta
WEB-‐INF/

Opcional

•  O
é
usado
para
configurar
mapeamentos
de
componentes,

navegação,
conversores,
validadores,
beans
e
outros
recursos
do
JSF

–  Tudo
isto
pode
ser
feito
via
comportamento
default
e
anotações

–  Às
vezes
é
mais
prá0co,
legível
e
eficiente
fazer
via
XML
(quando
se
usa

ferramentas
gráficas
que
geram
XML,
por
exemplo)

–  A
configuração
tem
precedência
e
sobrepõe
a
configuração
via

anotações

•  Se
usado,
deve
ter
a
seguinte
configuração
mínima

<?xml
version="1.0"?>

<faces-‐config

xmlns="hwp://java.sun.com/xml/ns/javaee"


xsi:schemaLoca0on="hwp://java.sun.com/xml/ns/javaee

hwp://java.sun.com/xml/ns/javaee/web-‐facesconfig_2_0.xsd"

version="2.0">

</faces-‐config>

Deve
ser
colocado
na
raiz

da
pasta
WEB-‐INF/

2.0
ou
superior!

Implantação
(deploy)
e
execução

•  Inicie
o
Tomcat

–  $TOMCAT_HOME/bin/startup.sh

•  Implantação
(via
hot-‐deployment
–
pode
também
ser
via
Manager)

–  Com
o
Tomcat
executando,
copie
dist/basicapp.war
para
pasta

$TOMCAT_HOME/webapps/
do
Tomcat

–  Espere
Tomcat
criar
automa0camente
uma
pasta
basicapp/
dentro
de
sua

pasta
webapps/

•  Execução

–  Acesse

•  Se
houver
erros,
corrija-‐os
e
faça
redeploy
(remova
WAR
e
diretório

gerado
em
webapps/
e
copie
o
novo
WAR
para
webapps/)

<!DOCTYPE
html
PUBLIC
"-‐//W3C//DTD
XHTML
1.0
Transi0onal//EN"


<html
xmlns="hwp://www.w3.org/1999/xhtml"><head>

<0tle>Introducao
a
JSF</0tle></head><body>

<p>Hello!</p>

</body>

</html>

Arquitetura:
aplicação
mínima

com
managed
bean

basicapp.war

WEB-‐INF

lib


intro.xhtml

classes

myapp

IntroBean.class

web.xml

<!DOCTYPE
html
PUBLIC
"-‐//W3C//DTD
XHTML
1.0
Transi0onal//EN"


<html




<h:head>

<Ctle>Introducao
a
JSF</Ctle>

</h:head>

<h:body>

<p>#{introBean.mensagem}</p>

</h:body>

</html>

package
myapp;

import
javax.faces.bean.*;

@ManagedBean

public
class
IntroBean
{

public
String
getMensagem()
{

return
"Hello!”;

}

}

intro.xhtml


IntroBean.java

Facelets

HTML
gerado

Java

Com
managed
bean

•  Propriedades
de
leitura
são
derivadas
de

métodos
geTer
iniciados
em
get
ou
is

•  Propriedades
de
gravação
são
derivadas

de
métodos
seTer
iniciados
em
set

<!DOCTYPE
html
PUBLIC
"-‐//W3C//DTD
XHTML
1.0
Transi0onal//EN"


<html


xmlns:h="hTp://java.sun.com/jsf/html">

<h:head>

<0tle>Introducao
a
JSF</0tle>

</h:head>

<h:body>


</h:body>

</html>

package
myapp;

import
javax.faces.bean.ManagedBean;

@ManagedBean

public
class
IntroBean
{

public
String
getMensagem()
{

return
"Hello!”;

}

}
@ManagedBean
(name="introBean")

public
class
NomeDoBean
{
…
}

Expressão
EL

IdenCﬁcador
(nome)
do
bean
é
derivado
do
nome

da
classe
se
não
for
declarado
atributo
name
em

@ManagedBean
ou
em

Derivação
de
nomes
de
beans
e
propriedades
usados
em
EL
segue
regras
de
JavaBeans

Expression
language

•  Usada
para
comunicação
entre
componente
e
página

–  Ler
ou
gravar
propriedades
do
bean

–  Transformar
dados,
executar
expressões,
usar
resultados

–  Executar
métodos
no
bean
ou
componente

•  Geralmente
usada
em
atributos

–  Atributos
definem
como
resultados
da
expressão
serão
usados

(leitura,
leitura-‐gravação,
métodos)

–  Expressões
de
leitura
podem
ser
usadas
diretamente
na
página

•  Exemplos

#{iden0ficadorDoBean.propriedade}

#{iden0ficadorDoBean.metodo}

#{iden0ficadorDoBean.prop1.prop2.prop3}

#{iden0ficadorDoBean.colecao[5].value
+
20}

Navegação

•  Alguns
tags
recebem
métodos
que
retornam

idenCficadores
de
navegação

–  Ex:
tags
de
submissão
de
formulários
e
links
que
causam

eventos
de
ação
(ac0on
events)

•  Métodos
de
ação
devolvem
iden0ficadores
de
navegação

na
forma
de
strings

–  Iden0ficadores
retornados
podem
ser
mapeados
a
nomes
de

páginas
no

–  Na
ausência
de
mapeamentos
explícitos,
o
string
retornado
é

interpretado
como
nome
de
uma
página
*.xhtml

…

public
String
processarResposta()
{

//
processar
resposta

if
(erro)
{

return
"erro";

}

return
"sucesso";

}

<h:form>

<h:commandBuwon

ac0on="#{bean.processarResposta}"
/>

</h:form>

erro.xhtml

sucesso.xhtml

Exemplo
com
mapeamento
implícito

•  Jogo
de
cara
e
coroa

•  Três
páginas:
play.xhtml,
heads.xhtml,
tails.xhtml

•  Managed
bean:
coinBean
(coinsgame.CoinBean)

•  Método
de
ação
(coinFlip)
gera
número
aleatório
e

retorna
String
com
nome
da
página
a
exibir

package
coinsgame;

import
javax.faces.bean.*;

@ManagedBean

public
class
CoinBean
{

public
String
coinFlip()
{

int
side
=
(int)(Math.random()
*
2);

if
(side
==
0)
return
"heads";

return
"tails";

}

}

<!DOCTYPE

…>

<html

xmlns:h="hwp://java.sun.com/jsf/html">

<h:head><0tle>Coin
Game</0tle></h:head>

<h:body>

<h:form>

<h:commandBuwon
value="Flip
a
coin!"

ac0on="#{coinBean.coinFlip}"/>

</h:form>

</h:body>

</html>

Crie
páginas
heads.xhtml
e
tails.xhtml

Aplicação
mínima
com
resources

basicapp.war

WEB-‐INF

lib


intro.xhtml

classes

myapp

IntroBean.class

web.xml


META-‐INF

resources

i18n.proper0es

resources

css

myapp.css

Resources
no
classpath

carregados
pelo
ClassLoader

(em
classes
Java)

Resources
da
aplicação
Web

carregados
através
de
Faces

Requests
*

<h:outputStylesheet

library="css"

name=”myapp.css"/>

Arquivo
carregado
através
de

Non-‐Faces
Requests

<link
rel="stylesheet"

type="text/css"

href="other.css”
/>

other.css

*
Esta
é
a
forma
recomendada
de
carregar
CSS

Resources

•  Arquivos
que
não
são
processados
durante
a
requisição

–  Imagens,
scripts
JavaScript,
CSS,
etc.

•  Se
referenciados
em
tags
XHTML,
devem
ser
colocados
em

local
relaCvo
ao
contexto
Web

–  Arquivo
CSS:

<link
rel="stylesheet"
name=”resources/css/default.css"/>

–  Imagem
JPG

<img
src
=resources/images/badﬁsh.jpg"/>

•  Se
referenciados
em
tags
JSF,
devem
ser
colocados
em

pasta
resources
dentro
do
contexto
Web

–  Arquivo
CSS:

<h:outputStylesheet
library="css"
name="default.css"/>

–  Imagem
JPG

<h:graphicImage
library="images"
name="badﬁsh.jpg"/>

Principais
APIs
do
JSF

•  javax.faces

•  javax.faces.applica0on

•  javax.faces.bean

•  javax.faces.component

•  javax.faces.context

•  javax.faces.convert

•  javax.faces.lifecycle

•  javax.faces.event

•  javax.faces.render

•  javax.faces.validator

•  javax.faces.webapp

Anotações
para
managed

beans
(@ManagedBean,

@SessionScoped,
etc.)

Componentes
gráﬁcos
(hierarquia
de

UIComponent)
e
componentes

renderizáveis
(subpacote
html.*)

API
para
conversores
de
dados

(interface
Converter)

API
para
eventos
(FacesEvent,
FacesListener)

API
para
validação

API
para
acesso
ao
estado
da

requisição
(via
FacesContext)

API
para
renderização
gráﬁca
(RenderKit)

javax.faces.component
e

javax.faces.component.html

•  Pacote
component
contém
hierarquia
fundamental
de

componentes
UI

•  Pacote
component.html
contém
componentes
associados

a
renderer
HTML
que
são
mapeados
aos
tags
da
biblioteca

padrão
HTML

javax.faces.component.UIForm

javax.faces.component.html.HtmlForm

javax.faces.Form

<h:form>

Componente
UI
Tipo

Tag

Componente
HTML

Árvore
de

componentes

padrão
do

JSF

FIGURE 4-1 The javax.faces.component package
Fonte:
especiﬁcação
JSF
2,
capítulo
4

Arquitetura
JSF:
requisições

•  Uma
aplicação
pode
ter

combinações
de

–  Requisições
e
respostas
JSF

(Faces
Requests
e
Responses)

–  Requisições
e
respostas
não-‐JSF

•  Faces
Requests
e
Faces

Responses
são
interceptadas

pelo
Faces
run0me
e
tratadas
de

forma
diferenciada

•  Faces
RunCme
processa
dois

0pos
de
Faces
requests:

–  Faces
Resource
Request
(para

transferir
imagens,
CSS,
etc.)

–  Faces
Request
(para
processar

uma
página
JSF)

Cliente
Faces
RunCme

Outro
Endpoint

Faces
Request

Faces
Response

Faces
Resource
Request

Faces
Resource
Response

Non-‐Faces
Request

Non-‐Faces
Response

Fonte:
especiﬁcação
JSF
2

Ciclo
de
vida

Execute
&
Render

GET
index.faces

Processar
req
e

devolver
bytes

GET
img.jpg

GET
img.jpg

Tipos
de
requisições
e
respostas

•  Faces
Response
(FRs)

–  Resposta
criada
pela
execução
da
fase
Render
Response

•  Faces
Request
(FRq)

–  Requsição
iniciada
a
par0r
de
uma
FRs
prévia

–  Faces
Resource
Request
(FRRq):
um
FRq
para
um
resource
(imagem,

CSS,
etc.)

•  Non-‐Faces
Request
(NFRq)

–  Requisição
não
iniciada
a
par0r
de
FRs
prévia

•  Non-‐Faces
Response
(NFRs)

–  Resposta
que
não
passou
pelo
Faces
Run0me,
ou

–  Faces
Resource
Response
(FRRs):
um
NFRs
para
um
resource
iniciado

por
um
FRRq

•  Cenários
relevantes
para
JSF

1.  NFRq
gerando
FRs
(requisição
inicial)

2.  FRq
gerando
FRs
(requisição
que
causa
ciclo
execute
&
render)

3.  FRq
(FRRq)
gerando
NFRs
(FRRs)

Dois
0pos
de
Faces
requests

Processar
Faces
Resource
Request

Enviar
bytes
Processar
Faces
Request:

Ciclo
“execute
and
render”

É
Faces

Resource

Request?

Localizar
resource

Não

Sim

Ciclo
de
vida:
execute
&
render

Restaurar
view

Aplicar
valores
da
requisição

Processar
validações

Atualizar
valores
do
modelo

Executar
aplicação

Renderizar
resposta

Faces
request
Faces
response

Execute

Render

Processar

eventos

Processar

eventos

Processar

eventos

Processar

eventos

Erros
de
conversão

ou
resposta

Erros
de
validação

ou
resposta

Precisa
validar

Precisa
converter

Precisa
executar
aplicação

Leia
descrição
detalhada
de
cada
fase

na
especiﬁcação
JSF
2,
capítulo
2

Conversores

•  São
objetos
que
realizam
a
conversão
entre
dados
em
uma
view

(formato
String)
para
um
0po
de
dados
usado
em
propriedade
do

managed
bean
(int,
Date,
objetos,
etc.)

–  Conversores
encapsulam
a
lógica
necessária
para
converter
um
dado,
e

podem
ser
usados,
reusados
e
configurados
via
facelets
(tags
e
atributos)

•  Há
vários
conversores
prontos.
Exemplo:

<h:inputText converter="javax.faces.convert.IntegerConverter" />,
ou

<h:inputText ... /> !
<f:converter converterId="Integer" /> !
</h:inputText> !
•  Pode-‐se
escrever
novos
conversores
(objeto
anotado
com

@FacesConverter
que
implementa
javax.faces.convert.Converter)
e

usar
os
mesmos
atributos
ou
tags
para
configurá-‐los

•  Muitas
vezes
não
é
necessário
configurar
um
conversor
(se
a

conversão
default
resolver).
Ex:
idade
é
int
no
managed
bean

<h:inputText value=”#{bean.idade}" />!

Listeners

•  Listeners
são
objetos
usados
para
tratar
eventos

–  São
chamados
através
de
noCﬁcações

–  Podem
ser
uma
classe
especíﬁca
que
implementa
uma
interface
ou

método
implementado
no
managed
bean

•  Há
duas
interfaces

–  AcConListener
para
eventos
de
ação,
registrados
por

<f:acConListener…>

–  ValueChangeListener
para
eventos
de
mudança
de
valor
(que
não

causam
a
submissão
do
formulário),
registrados
por

<f:valueChangeListener…>

•  Pode-‐se
escrever
o
handler
no
próprio
bean

–  Componentes
de
ação
podem
associar
um
método
ao
atributo
acCon,

que
é
implementado
no
próprio
bean

•  PhaseListeners
podem
ser
criados
para
interceptar
eventos
nas

diferentes
fases
de
uma
requisição/resposta
JSF

Validadores

•  JSF
oferece
várias
alterna0vas
para
validação,
que
são
realizadas
em

uma
ordem
pré-‐determinada

–  Checagem
de
campos
vazios
em
componentes
(falha,
se
for
campo

required
e
vazio)

–  Conversão
de
0pos
(falha
se
conversão
não
puder
ser
realizada)

–  Validação
explícita,
se
houver

•  Erros
de
validação
geram
mensagens
que
podem
ser
apresentadas

via
facelets
(<h:message>
e
<h:messages>)
e/ou
atributos

(requiredMessage)

•  Validação
explícita
pode

–  Via
facelets
existentes:
<f:validateLength>,
<f:validateRegEx>,
etc.

–  Ou
usando
<f:validator>
para
registrar
validadores
customizados

(anotados
com
@FacesValidator,
implementando

javax.faces.validator.Validator)

–  Também
pode-‐se
usar
a
API
Bean
ValidaCon.

Ajax

•  JSF
2.0
inclui
bibliotecas
JavaScript
que
possibilitam
o
uso

transparente
de
Ajax

•  Qualquer
componente
pode
receber
a
tag
<f:ajax
/>
e
sua
ação

default
ganha
comportamento
assíncrono:

–  <h:inputText value="#{bean.message}"> !
<f:ajax render=“tabela1”/>!
</h:inputText> !
–  O
atributo
render
informa
qual
componente
vai
processar
e
exibir
a

resposta

•  Há
vários
outros
atributos
que
permitem
determinar
qual
evento

dispara
a
ação,
uma
lista
de
componentes
a
serem
noCﬁcados,

listeners,
funções
JavaScript
e
outros
mecanismos
para
controle
da

requisição
e
resposta

Templa0ng

•  TemplaCng
permite
que

segmentar
uma
view
e

processá-‐la
em
separado

–  Uma
view
que
age
como

template
define
uma

estrutura
de
página
e

carrega
views
auxiliares

para
compor
a
página

–  Cabeçalhos,
rodapés,

etc.
podem
ser
repe0dos

em
várias
páginas
e
seu

processamento
pode
ser

o0mizado
(cache)

–  Promove
o
reuso!

<h:body>Conteúdo
compar0lhado

<h2><ui:insert
name=”Ctulo">Título
default</ui:insert></h2>

Conteúdo
compar0lhado

<ui:insert
name=”conteudo">Conteúdo
default</ui:insert>

</h:body>
...

Template:
/templates/basico.xhtml

<ui:composi0on
xmlns=“..”
template="/templates/basico.xhtml">

<ui:define
name=”Ctulo">Texto
de
arquivo1</ui:define>

<ui:define
name=”conteudo”>Conteúdo
de
arquivo1</ui:define>

</ui:composi0on>

Página
que
usa
o
template:
arquivo1.xhtml

<body>Conteúdo
compar0lhado

<h2>Texto
de
arquivo1</h2>

Conteúdo
compar0lhado

Conteúdo
de
arquivo1

</body>
...

Resultado
ao
chamar
/arquivo1.faces

Bibliotecas
de
componentes

•  Os
componentes
do
JSF
focam
em
funcionalidade

–  Implementações
(Mojarra,
Apache,
etc.)
fornecem

apenas
componentes
padrão

–  Skins,
componentes
extensíveis,
pré-‐conﬁgurados,

compostos,
etc.
devem
ser
fornecidos
por
uma

biblioteca
de
componentes

•  As
mais
populares
bibliotecas
de
componentes

que
suportam
o
JSF
2.0
são:

–  RichFaces

–  ICEFaces

–  PrimeFaces

PrimeFaces
3.0

•  Uma
das
mais
populares

bibliotecas
de
componentes

para
o
JSF

–  Subs0tui
componentes
JSF
2.0

(também
podem
ser
usados

juntos)

–  Conecta
widgets
de
várias

bibliotecas
populares
(YUI,

JQuery,
Google,
etc.)

–  Suporte
integrado
a
Ajax
e

WebSockets

Como
usar

•  Baixe
e
inclua
no
projeto
(WEB-‐INF/lib)
e
depois
declare
em
cada

view
que
usar
os
componentes,
o
namespace:

–  xmlns:p="hwp://primefaces.org/ui

•  Alguns
exemplos

–  <p:ajax>
(sempre
use
este
em
vez
de
f:ajax
quando
usar
componentes

PrimeFaces)

–  <p:commandBuwon>
e
<p:commandLink>

–  <p:dataTable>
e
<p:column>

–  <p:message>
e
<p:messages>

–  <p:outputLabel>

–  <p:panelGrid>

–  <p:ﬁeldset>

–  <p:inputText>,
<p:inputTextArea>,
<p:password>

–  <p:selectOneMenu>,
etc.

Também
permite

conﬁguração
de
look

&
feel
através
de

temas
e
CSS

Mais
em

www.primefaces.org

CDI
(JSR
299)

•  Se
o
seu
ambiente
0ver
suporte
a
CDI
(Contexts
and
Dependendy

Injec0on),
você
deve
usá-‐lo
para
registrar
os
beans

–  CDI
é
um
mecanismo
universal
que
será
usado
para
registrar

componentes
gerenciados
em
qualquer
0po
de
aplicação
Java
EE

–  Inclua
um
arquivo
beans.xml
padrão
(use
o
IDE)
no
WEB-‐INF

–  Registre
os
beans
usando
@Named
(no
lugar
de
@ManagedBean)
e

use
escopos
de
javax.enterprise.context
(em
vez
de
escopos
JSF)

•  CDI
será
parte
integrante
do
Java
EE
7,
portanto
@ManagedBean

no
futuro
será
deprecated.

•  Se
seu
ambiente
não
0ver
suporte
a
CDI
(ex:
Tomcat
7)
você
pode

–  Usar
@ManagedBean
normalmente
como
foi
mostrado
neste
tutorial

–  Acrescentar
uma
implementação
de
CDI
e
registrá-‐la
no
web.xml

<beans
xmlns="hwp://xmlns.jcp.org/xml/ns/javaee"


xsi:schemaLoca0on="hwp://xmlns.jcp.org/xml/ns/javaee

hwp://xmlns.jcp.org/xml/ns/javaee/beans_1_1.xsd"

bean-‐discovery-‐mode="annotated">

</beans>

Managed
bean
com
CDI

•  Inclua
o
JAR
do
Weld:
a
implementação
de
referência

do
CDI
e
registre
o
listener

•  (isto
pode
não
ser
necessário
se
você
es0ver
usando

um
ambiente
que
tenha
suporte
na0vo
a
CDI)

<?xml
version='1.0'
encoding='UTF-‐8'?>

<web-‐app
version="2.5"
…
>

<servlet>…</servlet>

<servlet-‐mapping>
…
</servlet-‐mapping>

<listener>

<listener-‐class>

org.jboss.weld.environment.servlet.Listener

</listener-‐class>

</listener>

</web-‐app>

package
myapp;

import
javax.inject.Named;

import
javax.enterprise.context.RequestScoped;

@Named

@RequestScoped

public
class
IntroBean
{

public
String
getMensagem()
{

return
"Hello!”;

}

}

beans.xml
web.xml

Use
@Named
ou
@Named(“introBean”)

para
registrar
o
bean
com
o
id
“introBean”

Veriﬁque
se
está
importando
os
pacotes
corretos

Inclua
beans.xml
no
WEB-‐INF

intro.xhtml

No
Tomcat
7

<!DOCTYPE
html
PUBLIC
"-‐//W3C//DTD
XHTML
1.0
Transi0onal//EN"


<html
xmlns="hwp://www.w3.org/1999/xhtml"><head>

<0tle>Introducao
a
JSF</0tle></head><body>

<p>Hello!</p>

</body>

</html>

Aplicação
com
managed
bean
e
CDI

basicapp.war

WEB-‐INF

lib


intro.xhtml

classes

myapp

IntroBean.class

web.xml

<!DOCTYPE
html
PUBLIC
"-‐//W3C//DTD
XHTML
1.0
Transi0onal//EN"


<html




<h:head>

<Ctle>Introducao
a
JSF</Ctle>

</h:head>

<h:body>


</h:body>

</html>

package
myapp;

import
javax.inject.Named;

@Named

public
class
IntroBean
{

public
String
getMensagem()
{

return
"Hello!”;

}

}

intro.xhtml


IntroBean.java

Facelets

HTML
gerado

Java

weld-‐servlet.jar

beans.xml

Tomcat
7

Resumo

•  Este
tutorial
apresentou
uma
breve
introdução
ao
JSF
e
os

principais
componentes
da
sua
arquitetura

–  Demonstração:
conﬁguração
do
ambiente,
criação
de
views
e

beans,
deployment,
execução

–  Facelets,
managed
beans,
expression
language

–  Arquitetura
de
componentes

–  Navegação

–  Ciclo
de
vida

–  Conversores,
listeners,
validadores

–  Uso
de
bibliotecas
de
componentes
(PrimeFaces)

–  Integração
com
CDI
(JSR
299)

Referências

1.  Ed
Burns,
Roger
Kitain.
JavaServer
Faces
SpeciﬁcaCon.
Version
2.0.
Sun

Microsystems.
2009.

2.  Emmanuel
Bernard.
JSR
303:
Bean
ValidaCon.
Version
1.0.
Red
Hat,
2009.

3.  Gavin
King.
JSR-‐299:
Contexts
and
Dependency
InjecCon
for
the
Java
EE

Plaxorm.
Red
Hat.
2009.

4.  Eric
Jendrock
et
al.
The
Java
EE
6
Tutorial.
2010.

hwp://docs.oracle.com/javaee/6/tutorial/doc/

5.  Mojarra.
Mojarra
DocumentaCon
hwps://javaserverfaces.java.net/docs/2.1/

6.  JBoss.
Weld
–
JBoss.org
documentaCon.
hwp://docs.jboss.org/weld

7.  PrimeFaces.
Manual
do
PrimeFaces.
hwp://primefaces.org/documenta0on.html

8.  David
Geary
&
Cay
Horstmann.
Core
JavaServer
Faces
2.0.
Pren0ce-‐Hall,
2010.

9.  Marty
Hall.
JSF
2.0
Tutorial
Series.

hwp://www.coreservlets.com/JSF-‐Tutorial/jsf2/

10.  Marty
Hall.
PrimeFaces
Tutorial
Series.

hwp://www.coreservlets.com/JSF-‐Tutorial/primefaces/

11.  M.
Kyong.
JSF
2.0
Tutorials.
hwp://www.mkyong.com/tutorials/jsf-‐2-‐0-‐tutorials/

Atualizado
em
Janeiro/2013

Tutorial JSF 2.0 (2012)

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Tutorial JSF 2.0 (2012)

Mais de Helder da Rocha

Tutorial JSF 2.0 (2012)