JavaServer Faces (JSF) Leonardo Murta (Leomurta@Ic.u .BR)

JavaServer
Faces (JSF)
Leonardo Murta (leomurta@ic.u.br)
Especicao/IDE/Implementao
Esse curso foi preparado em 03/2015 usando a
seguinte especicao, IDE e implementao
Especicao
JavaServer Faces 2.2 (05/2013, JEE 7)
JavaServer Faces 2.1 (11/2010)
JavaServer Faces 2.0 (07/2009, JEE 6)
IDE
JDK 8u40
NetBeans 8.0.2 na distribuio Java EE
Implementao
GlassFish 4.1 (vem no NetBeans)
Leonardo Murta
JSP
Agenda
O que JSF?
JavaBeans
Navegao
Tags JSF
Converso de dados
Validao de dados
JSF com AJAX
Templates
Leonardo Murta
JSP
O que JSF?
Um framework para a camada de apresentao
Visa promover uma separao clara entre
comportamento e apresentao
Apresentao
Leonardo Murta
Web
Designer
Programador
JSP
Comportamento
Principais componentes
Facelets (pginas XHTML)
Representam a interface do sistema

So transformados em HTML
Classes Java (JavaBeans)
So automafcamente instanciados
Armazenam os dados usados para ler e escrever os campos das
pginas
Tags
Permitem a escrita de Facelets de forma declarafva
Metadados
Conguram a aplicao
Podem ser tanto anotaes quanto XML
Leonardo Murta
JSP
Principais componentes
Programador
Tags
JavaBeans
Web Designer
Facelets
Leonardo Murta
JSP
Criando um projeto JSF
Leonardo Murta
JSP
Leonardo Murta
JSP
Leonardo Murta
JSP
Leonardo Murta
JSP
10
Adicionando o Framework JSF

em um projeto existente
Leonardo Murta
JSP
11

Leonardo Murta
JSP
12

Leonardo Murta
JSP
13
O que aconteceu?
Foram basicamente criados dois arquivos
Descritor (WEB-INF/web.xml)
Facelet (index.xhtml)
Leonardo Murta
JSP
14
Descritor criado
...
<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>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
...
<welcome-file-list>
<welcome-file>faces/index.xhtml</welcome-file>
</welcome-file-list>
...
Leonardo Murta
JSP
15
Descritor criado
...
<servlet>
<servlet-class>javax.faces.webapp.FacesServlet</
servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
...
<welcome-file-list>
<welcome-file>faces/index.xhtml</welcome-file>
</welcome-file-list>
...
Leonardo Murta
JSP
Implcito
em JSF
2.0 ou
superior
16
Facelet criado
<?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://xmlns.jcp.org/jsf/html">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>Hello from Facelets</h:body>
</html>
Leonardo Murta
JSP
17
Pgina gerada ao acessar

hmp://localhost:8080/alomundo
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="j_idt2">
</head>
<body>Hello from Facelets</body>
</html>
Leonardo Murta
JSP
18
O que aconteceu?
Servidor
Cliente
hmp://localhost:8080/alomundo/
HTML
Leonardo Murta
JSP
Facelet
19
Model-View-Controller (MVC)
O JSF implementa o esflo MVC, separando as
responsabilidades da aplicao
Model: JavaBeans
View: Facelets
Controller: FacesServlet
Leonardo Murta
JSP
20
JavaBeans
So representaes OO das enfdades
manipuladas nos Facelets
Facelet
JavaBean
PessoaBean
Nome:
- String : nome
- String : endereco
- String : telefone
Endereo:
Telefone:
Leonardo Murta
JSP
21
JavaBeans
Os JavaBeans usados pelo JSF so especiais, pois
tm seus ciclos de vida gerenciados pelo
container
Tambm so chamados de Managed Beans ou
Backing Beans
Recebem duas anotaes

Nome do Bean
Escopo do Bean
Leonardo Murta
JSP
22
Nome do Bean
Denido como anotao no Bean
@Named(nome)
O valor denido nessa anotao pode ser

referenciado nos Facelets
#{nome}
Se o nome for omifdo, usado por conveno o

nome da classe iniciado com minscula
Leonardo Murta
JSP
23
Escopo dos Beans

Os Beans devem ser anotados com a idenfcao
do seu escopo
Essa anotao indica quando o Bean deve ser
instanciado
Leonardo Murta
JSP
24
Escopo dos Beans

(mais importantes)
@RequestScoped
Instanciado para cada requisio/resposta

Exemplo: cadastro de usurio
@SessionScoped
Instanciado uma vez no incio de cada sesso

Manfdo por toda a sesso do usurio
Exemplo: carrinho de compras de um usurio
@ApplicafonScoped
Instanciado uma vez quando o servidor de aplicao inicia

Comparflhado por todos os usurios
Exemplo: log de usurios on-line em um frum
Leonardo Murta
JSP
25
Escopo dos Beans

(mais especcos)
@ConversafonScoped
Instanciado uma vez no incio de cada conversao

Uma sesso pode conter vrias conversaes
Uma conversao pode ser encerrada pelo usurio
Exemplo: uma sesso de chat com o vendedor dentro de
uma aplicao de e-commerce
@FlowScoped
Instanciado uma vez no incio de cada conversao

Equivalente ao @ConversafoScoped, mas voltado para
Faces Flows
Exemplo: wizard de congurao de um site
Leonardo Murta
JSP
26
Escopo dos Beans

(mais especcos)
@ViewScoped
Instanciado uma vez por pgina
Vlido enquanto o usurio permanece na mesma pgina
Exemplo: site com jogos em pginas independentes
@Dependent
O escopo denido pelo escopo do componente que usa o
bean
Exemplo: Bean de converso de moedas, que pode ser usado
sozinho ou dentro de um carrinho de compras
ATENO: Beans com escopo Session, Applica,on e

Conversa,on devem implementar a interface Serializable
Leonardo Murta
JSP
27
Cancelando uma conversao

A qualquer momento o Manage Bean pode cancelar uma
conversao
Para tal, a classe javax.enterprise.context.Conversafon
deve ser usada no Managed Bean com escopo de
conversao
Isso fora a criao de um novo Bean na prxima iterao
requisio/resposta
@Inject
Conversation conversation;
...
public void finalizaConversacao() {
conversation.end();
}
Leonardo Murta
JSP
28
Criando um Bean
Leonardo Murta
JSP
29
Criando um Bean
Leonardo Murta
JSP
30
Criando um Bean
Leonardo Murta
JSP
31
Bean criado
package br.uff.ic.alomundo;
import javax.inject.Named;
import javax.enterprise.context.RequestScoped;
@Named
@RequestScoped
public class PessoaBean {
public PessoaBean() {
}
}
Leonardo Murta
JSP
32
Criando propriedade nome

...
@Named
@RequestScoped
public class PessoaBean {
private String nome;
public PessoaBean() {
nome = "Annimo";
}
public String getNome() {
return nome;
}
public void setNome(String nome) {
this.nome = nome;
}
}
Leonardo Murta
JSP
33
Usando o Bean no Facelet

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
</h:head>
<h:body>
<h:form>
Nome: <h:inputText value="#{pessoaBean.nome}" />
<h:commandButton value="Submit" />
</h:form>
Hello #{pessoaBean.nome} from Facelets
</h:body>
</html>
Leonardo Murta
JSP
34
O que aconteceu?
Servidor
Cliente
HTML
Leonardo Murta
JSP
Facelet
Bean
35
Navegao
A navegao entre pginas pode ser feita de duas
maneiras
Navegao direta: o mtodo acionado retorna a
pgina que deve ser aberta
Navegao indireta: o mtodo acionado retorna um
rtulo e o XML de congurao vincula o rtulo a uma
pgina
Leonardo Murta
JSP
36
Navegao direta
No Facelet
<h:commandButton value="Salva"
action="#{agendaBean.cadastra(contatoBean)}">
No Bean
public String cadastra(ContatoBean contatoBean) {
...
return "listagem.xhtml";
}
Leonardo Murta
JSP
37
Navegao direta
No Facelet
No Bean
...
return "listagem.xhtml";
Se no fver ac,on no
}
Facelet ou retorno no
Bean, o JSF acionar a
pgina de origem
novamente!
Leonardo Murta
JSP
38
Navegao indireta
No Facelet
No Bean

...
return "cadastrado";
}
No faces-cong.xml
<navigation-rule>
<from-view-id>cadastro.xhtml</from-view-id>
<navigation-case>
<from-outcome>cadastrado</from-outcome>
<to-view-id>listagem.xhtml</to-view-id>
</navigation-case>
</navigation-rule>
Leonardo Murta
JSP
39
Exerccio
Criar uma aplicao usando JSF para somatrio,
onde o valor inicial e o valor nal so informados
Informar o nmero de vezes que
O usurio acessou o servio na mesma sesso
Todos os usurios acessaram o servio desde quando
o servidor entrou no ar
Leonardo Murta
JSP
40
Tags JSF
At ento, vimos a tag h:inputText e
h:commandBu<on de forma intuifva
Contudo, o JSF disponibiliza diversas colees de
tags, para diferentes propsitos
necessrio declarar a coleo de tags que ser
usada e um prexo para representar a coleo
<html xmlns:prefixo=URI da coleo de tags">
Leonardo Murta
JSP
41
Tags JSF
(colees de tags)
Interface com usurio
Prexo padro: h
URI: hmp://xmlns.jcp.org/jsf/html
Templates
Prexo padro: ui
URI: hmp://xmlns.jcp.org/jsf/facelets
Core
Prexo padro: f
URI: hmp://xmlns.jcp.org/jsf/core
JSLT (vindas dos JSP)
Controle de uxo
Manipulao de strings
Leonardo Murta
JSP
42
Tags de interface com usurio

Componente visual
Formulrio
Tags
<h:form>
Exemplo
<h:form>
...
</h:form>
Leonardo Murta
JSP
43

Componente visual
Buto
Tag
<h:commandButton>
Exemplo
<h:commandButton value="Submit"
action="#{pessoaBean.cadastra}" />
Leonardo Murta
JSP
44

Componente visual
Link
Tag
<h:commandLink>
Exemplo
<h:commandLink value="Leia mais..."
action="leia.xhtml" />
Leonardo Murta
JSP
45

Componente visual
Tabela
Tags
<h:dataTable>
<h:column>
<f:facet>
Exemplo
<h:dataTable value="#{agendaBean.contatos}" var="contato">

<h:column>
<f:facet name="header">Nome</f:facet>
#{contato.nome}
</h:column>
<h:column>
<f:facet name="header">Telefone</f:facet>
#{contato.telefone}
</h:column>
</h:dataTable>
Leonardo Murta
JSP
46

Componente visual
Imagem
Tags
<h:graphicImage>
Exemplo
<h:graphicImage value="#{usuarioBean.foto}" />
Leonardo Murta
JSP
47

Componente visual
Entrada de texto
Tags
<h:inputText>
<h:inputTextarea>
<h:inputSecret>
Exemplo
<h:inputText value="#{usuarioBean.nome}" />
Leonardo Murta
JSP
48

Componente visual
Caixa de seleo
Tags
<h:selectBooleanCheckbox>
Exemplo
<h:selectBooleanCheckbox
value="#{usuarioBean.ativo}" />
Leonardo Murta
JSP
49

Componente visual
Lista de seleo nica
Tags
<h:selectOneMenu>
Exemplo
<h:selectOneMenu value="#{corBean.opcao}">
<f:selectItem itemValue="red" itemLabel="Red" />
<f:selectItem itemValue="blue" itemLabel="Blue" />
<f:selectItem itemValue="green" itemLabel="Green" />
</h:selectOneMenu>
Leonardo Murta
JSP
50

Componente visual
Boto de seleo nica
Tags
<h:selectOneRadio>
Exemplo
<h:selectOneRadio value="#{corBean.opcao}">
</h:selectOneRadio>
Leonardo Murta
JSP
51

Componente visual
Lista de seleo nica
Tags
<h:selectOneListbox>
Exemplo
<h:selectOneListbox value="#{corBean.opcao}">
</h:selectOneListbox>
Leonardo Murta
JSP
52

Componente visual
Caixa de seleo mlfpla
Tags
<h:selectManyCheckbox>
Exemplo
<h:selectManyCheckbox value="#{corBean.opcoes}">
</h:selectManyCheckbox>
Leonardo Murta
JSP
53

Componente visual
Lista de seleo mlfpla
Tags
<h:selectManyMenu>
<h:selectManyListbox>
Exemplo
<h:selectManyMenu value="#{corBean.opcoes}">
</h:selectManyMenu>
Leonardo Murta
JSP
54

Componente visual
Mensagens de erro
Tags
<h:messages>
Exemplo
<h:messages errorStyle="color:red" />
Leonardo Murta
JSP
55
Exerccio
Faa uma aplicao em JSF de agenda eletrnica
Cadastrar nome, sexo, telefone e aniversrio, todos
como String por enquanto
Listar em uma tabela todos os registros
Leonardo Murta
JSP
56
Converso e Validao de Dados

Os dados preenchidos nos formulrios so sempre
String
Os dados dos beans tem fpos denidos (ex.: int,
oat, etc.) restries quanto aos seus valores (ex.:
formato de um nmero de telefone)
Converso
Garante que o 3po do campo no formulrio est sendo
mapeado adequadamente ao fpo do campo no Bean
Validao
Garante que os valores do campo respeitam as restries

de formato impostas pela aplicao
Leonardo Murta
JSP
57
Converso de dados
A converso feita de forma automfca para os
fpos principais da linguagem declarados no Bean
possvel congurar a converso
Exemplos
<h:inputText value="#{livroBean.preco}">
<f:convertNumber currencySymbol="R$" type="currency"/>
</h:inputText>
<h:inputText value="#{livroBean.dataPublicacao}">
<f:convertDateTime pattern="dd/MM/yyyy"/>
</h:inputText>
<h:inputText value="#{livroBean.devolucoes}">
<f:convertNumber type="percent" />
</h:inputText>
Leonardo Murta
JSP
58
Converso Customizada
possvel customizar a converso para um fpo
especco de objeto
Implementar a interface
javax.faces.convert.Converter
Object getAsObject(FacesContext ctx, UIComponent

component, String value)
String getAsString(FacesContext ctx, UIComponent
component, Object value)
Anotar a classe com @FacesConverter

Declarar
<f:converter converterId="nomeDaClasse"/>
Leonardo Murta
JSP
59
Validao de dados
Serve para assegurar que os dados entrados esto
aderentes ao esperado
Necessitam interao com o servidor
Uma alternafva usar em conjunto com JavaScript
So feitos por tags pertencentes coleo Core

Usualmente referenciada pelo prexo f
<html xmlns:f="http://xmlns.jcp.org/jsf/core" >
Leonardo Murta
JSP
60
Tags de validao de dados

(campo obrigatrio)
Obriga que um campo seja preenchido
Tags
<f:validateRequired>
Exemplo
<h:inputText value="#{UsuarioBean.nome}"
validatorMessage="O campo nome obrigatrio.">
<f:validateRequired />
</h:inputText>
Leonardo Murta
JSP
61

(tamanho do campo texto)
Tags
<f:validateLength>
Exemplo
<h:inputText value="#{usuarioBean.login}"
validatorMessage="Login deve ter de 5 a 8
caracteres">
<f:validateLength minimum="5" maximum="8"/>
</h:inputText>

Leonardo Murta
JSP
62

(nmero mnimo e mximo)
Tags
<f:validateLongRange>
<f:validateDoubleRange>
Exemplo
<h:inputText value="#{usuarioBean.idade}"
validatorMessage="Idade deve ser entre 18 e 70 anos">
<f:validateLongRange minimum="18" maximum="70"/>
</h:inputText>
Leonardo Murta
JSP
63

(expresso regular)
Tags
<f:validateRegex>
Exemplo
<h:inputText value="#{usuarioBean.celular}"
validatorMessage="Celular invlido">
<f:validateRegex pattern="^(\+[0-9]{2})?\
([0-9]{2}\)9?[0-9]{4}\-[0-9]{4}$" />
</h:inputText>
Leonardo Murta
JSP
64
Rpida reviso de regex

Smbolo
Propsito
Casa com o incio do texto
Casa com o nal do texto
( )
Dene uma sub-expresso
[ ]
Casa com um dos elementos confdos no colchete
Indica que o elemento anterior opcional
Indica que o elemento anterior ocorre zero ou mais vezes
Indica que o elemento anterior ocorre uma ou mais vezes
{m,n}
a|b
Indica que o elemento anterior ocorre de n a m vezes

Indica que a e b so alternafvas (ou exclusivo)
Casa com qualquer caractere
Caractere de escape
Leonardo Murta
JSP
65
Validao Customizada
possvel customizar a validao dos valores de
um campo
Implementar a interface
javax.faces.validator.Validator
void validate(FacesContext context, UIComponent
component, Object value)
Anotar a classe com @FacesValidator

Declarar
<f:validator validatorId="nomeDaClasse"/>
Leonardo Murta
JSP
66

(anotao no Bean)
As validaes tambm podem ser estabelecidas via
anotaes no prprio Bean
Campo no nulo
Tamanho do campo
Valor mximo do campo
Data no passado ou no
futuro
@NotNull
@Size
@DecimalMax
@Max
@Past
@Future
Valor mnimo do campo
Expresso regular
@DecimalMin
@Min
Leonardo Murta
@Pamern
JSP
67
Exerccio
Revisite o exerccio anterior incluindo as
validaes apropriadas para cada campo
Leonardo Murta
JSP
68
Uso de JSF com AJAX

Para atualizar somente uma parte da pgina
possvel usar a tag f:ajax que vem com o JSF
Basta atribuir ids para os componentes que
devem ser atualizados e indicar os ids na tag f:ajax
Atributo execute: indica quais componentes devem
ser enviados para o servidor
Atributo render: indica quais componentes devem ser
atualizados em resposta
Leonardo Murta
JSP
69
Uso de JSF com AJAX

Os atributos execute e render aceitam alguns
valores padres
@none: nenhum componente (default)
@this: o componente que contm a tag f:ajax
@form: todos os componentes do form
@all: todos os componentes
Leonardo Murta
JSP
70
Uso de JSF com AJAX

Exemplo
...
<h:commandButton value="Submit"
action="#{carrinhoBean.adicionaItem}" >
<f:ajax execute="@all" render="total" />
</h:commandButton>
...
<h:outputText id="total" value="#{comprasBean.total}" />
Leonardo Murta
JSP
71
Exerccio
Revisite o exerccio anterior fazendo com que a
lista de contatos atualize via AJAX
Leonardo Murta
JSP
72
Uso de Templates
Com JSF possvel criar uma pgina que tenha o
layout da aplicao
Todas as demais pginas iro fazer uso desse
layout
Leonardo Murta
JSP
73
Uso de Templates
(layout.xhtml)
...
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://
xmlns.jcp.org/jsf/html" xmlns:ui="http://xmlns.jcp.org/jsf/
facelets">
<h:head>
<title>
<ui:insert name="title">Ttulo Padro</ui:insert>
</title>
</h:head>
<h:body>
<h1><ui:insert name="title">Ttulo Padro</ui:insert></h1>
<hr/>
<ui:insert name="content">Contedo Padro</ui:insert>
<hr/>
</h:body>
</html>
Leonardo Murta
JSP
74
Uso de Templates
(pgina que usa o layout)
...
<ui:composition xmlns:ui="http://xmlns.jcp.org/jsf/
facelets" xmlns:h="http://xmlns.jcp.org/jsf/html"
template="./layout.xhtml">
<ui:define name="title">Create a new book</ui:define>
<ui:define name="content">
<h:form>
<h:outputLabel value="Nome: "/>
<h:inputText value="#{usuarioBean.nome}"/>
...
<h:commandButton value="Cadastrar"
action="#{usuarioBean.cadastra}"/>
</h:form>
</ui:define>
</ui:composition>
Leonardo Murta
JSP
75
Exerccio
Revisite o exerccio anterior para fazer uso de um
layout padro
Coloque no cabealho o nome da universidade, curso
e disciplina
Coloque no rodap seu nome
Dica: o NetBeans ajuda a criar o layout e a criar as

pginas que usam o layout
Leonardo Murta
JSP
76
Bibliograa
Java EE 7 Tutorial, Eric Jendrock, Ricardo
Cervera-Navarro, Ian Evans, Kim Haase, William
Markito
Java EE 7: The Big Picture, Danny Coward
Java EE 7 Recipes, Josh Juneau
Beginning Java EE 7, de Antnio Gonalves
Leonardo Murta
JSP
77
JavaServer Faces (JSF)
Leonardo Murta (leomurta@ic.u.br)

JavaServer Faces (JSF) Leonardo Murta (Leomurta@Ic.u .BR)

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

JavaServer Faces (JSF) Leonardo Murta (Leomurta@Ic.u .BR)

Enviado por

Direitos autorais:

Formatos disponíveis

JavaServer

Leonardo Murta (leomurta@ic.u.br)

GlassFish 4.1 (vem no NetBeans)

Representam a interface do sistema

Classes Java (JavaBeans)

Permitem a escrita de Facelets de forma declarafva

Criando um projeto JSF

Criando um projeto JSF

Criando um projeto JSF

Criando um projeto JSF

Adicionando o Framework JSF

Adicionando o Framework JSF

Adicionando o Framework JSF

Pgina gerada ao acessar

Recebem duas anotaes

O valor denido nessa anotao pode ser

Se o nome for omifdo, usado por conveno o

Escopo dos Beans

Escopo dos Beans

Instanciado para cada requisio/resposta

Instanciado uma vez no incio de cada sesso

Instanciado uma vez quando o servidor de aplicao inicia

Escopo dos Beans

Instanciado uma vez no incio de cada conversao

Instanciado uma vez no incio de cada conversao

Escopo dos Beans

ATENO: Beans com escopo Session, Applica,on e

Cancelando uma conversao

Criando propriedade nome

Usando o Bean no Facelet

public String cadastra(ContatoBean contatoBean) {

Interface com usurio

JSLT (vindas dos JSP)

Tags de interface com usurio

Tags de interface com usurio

Tags de interface com usurio

Tags de interface com usurio

<h:dataTable value="#{agendaBean.contatos}" var="contato">

Tags de interface com usurio

<h:graphicImage value="#{usuarioBean.foto}" />

Tags de interface com usurio

<h:inputText value="#{usuarioBean.nome}" />

Tags de interface com usurio

Tags de interface com usurio

Tags de interface com usurio

Tags de interface com usurio

Tags de interface com usurio

Tags de interface com usurio

Tags de interface com usurio

<h:messages errorStyle="color:red" />

Converso e Validao de Dados

Garante que os valores do campo respeitam as restries

Object getAsObject(FacesContext ctx, UIComponent

Anotar a classe com @FacesConverter

So feitos por tags pertencentes coleo Core

Tags de validao de dados

Tags de validao de dados

Tags de validao de dados

Tags de validao de dados

Rpida reviso de regex

Casa com o incio do texto

Casa com o nal do texto

Dene uma sub-expresso