Jsf2slideshare 161116001248

Indra Software Labs Brasil
JSF 2
09/2016
Observaes
Esse curso foi elaborado para apresentao de conceitos

d o J S F. p r - r e q u i s i t o c o n h e c e r J a v a e
desenvolvimento web bsico.
O cdigo-fonte com os exemplos de cdigo podem ser

obtidos em https://github.com/antoniolazaro/jsflabs.
Ttulo del documento | 2

Agenda
Curso dividido em 5 dias (cdigo-fonte do projeto reflete essa programao)

Dia 1:
Conceitos gerais JSF
Arvore de componentes
Escopos
Converters
Dia 2:
Validators
Navigation
Dia 3:
Events
Ajax
Dia 4:
Templates (facelets)
Primefaces
Dia 5:
Reviso/Dvidas

ndice
01 Desenvolvimento Web
02 Histrico JSF
03 JSF 2
04 Ciclo de vida
05 rvore de componentes
06 Escopos
07 Converters
08 Validators
09 Navegao
10 Events
11 Ajax
12 Templates (facelets)
13 Primefaces
14 Outras implementaes
15 Dicas desenvolvimento
16 JSF 2.2
17 JSF 2.3
18 Futuro JSF
19 Referncias

JSF 2
DESENVOLVIMENTO WEB
Antes de aprender JSF, importante (no pr-requisito) alguma

base de conhecimento:
Protocolo Http (mtodos, request, response, session, status,
headers).
https://nandovieira.com.br/entendendo-um-pouco-mais-
sobre-o-protocolo-http
http://cin.ufpe.br/~erp/DesenvWeb/aulas/http_servlet/
http.pdf
HTML, CSS e Javascript
https://www.caelum.com.br/apostila-html-css-javascript/
Java para Web:
JSP, Servlets, Filters, Listeners, Taglibs
http://docs.oracle.com/javaee/6/tutorial/doc/bnafd.html

JSF 2
DESENVOLVIMENTO WEB
Frameworks Web
O que um framework?
"Um framework prov uma soluo para uma famlia de
problemas semelhantes, usando um conjunto de classes e
interfaces que mostra como decompor a famlia de problemas e
como objetos dessas classes colaboram para cumprir suas
responsabilidades, o conjunto de classes deve ser flexvel e
extensvel para permitir a construo de vrias aplicaes com
pouco esforo, especificando apenas as particularidades de cada
aplicao.
Framework MVC: Model-View-Controller
Tipos
Action based x Component based

JSF 2
DESENVOLVIMENTO WEB

JSF 2
DESENVOLVIMENTO WEB - FRAMEWORKS ACTION BASED X COMPONENT BASED
Action based (MVC Push):

O Controller tem a responsabilidade de colocar os dados na
view.
Fluxo linear.
Orientado a Actions
Exemplos: Struts, Spring MVC, Vraptor, Grails, Rails, DJango,
asp.net

JSF 2
Component based (MVC Pull): O Controller invoca a view que chama

o Managed Bean que quem tem relao com o modelo.
No caso do JSF o Controller o Faces Servlet
Fluxo no orientado a actions/requests e responses.
Orientado a componentes. Componente invoca modelo
Exemplo: JSF, Wicket, Tapestry, Gwt (Google Web
Toolkit),Vaadin

JSF 2
Diferenas
So incompatveis, devido ao seu ciclo de vida.
MVC Push:
Desacoplamento entre a viso e o controller
Componentes so feitos com HTML, CSS e javascript.
MVC Pull:
Maior acoplamento entre a viso e o framework.
Permite criao de componentes de tela atravs de
cdigo Java (Wicket funciona assim, Swing like).

JSF 2
JSF
JSF = Java Server Faces.

Framework MVC Web.
Component Based
Mais sobre design patterns:

ndice
02 Histrico JSF
03 JSF 2
04 Ciclo de vida
06 Escopos
07 Converters
08 Validators
09 Navegao
10 Events
11 Ajax
13 Primefaces
16 JSF 2.2
17 JSF 2.3
18 Futuro JSF
19 Referncias

JSF 2
HISTRICO JSF
JSF = Java Server Faces.

Framework MVC Web.
Component Based

JSF 2
HISTRICO JSF
Histrico de verses:
JSF 2.3 (2017) - JSR 372 (https://jcp.org/en/jsr/detail?id=372)
JSF 2.2 (16/04/2013) - JSR 344 (https://jcp.org/en/jsr/detail?id=344)
JEE 5 iniciou adoo do JSF e ele entrou oficialmente no JEE 6
como parte da especificao.
* JSR = Java Specification Request. Definio de especificao avaliada pelo JCP (Java Community
Process) do que ser implementado em cada verso do JSE, JEE, etc.
Especificaes x Implementaes:
Mojarra (implementao referncia): https://
javaserverfaces.java.net/
Myfaces (implementao Apache): https://myfaces.apache.org/

ndice
02 Histrico JSF
03 JSF
04 Ciclo de vida
06 Escopos
07 Converters
08 Validators
09 Navegao
10 Events
11 Ajax
13 Primefaces
16 JSF 2.2
17 JSF 2.3
18 Futuro JSF
19 Referncias

JSF 2
JSF
Java Server Faces (JSF):

Tecnologia de view oficial da camada web da especificao JEE.
Possui um conjunto de componentes pr-definidos.
Possui um modelo de programao orientada a eventos
Trabalha com HTML e CSS associado a classes java chamadas
Managed Beans
Os Managed Beans tem responsabilidade de manter a lgica de
apresentao de dados e conectar o usurio com a camada de
negcio no backend.

JSF 2
JSF
Hello World
Configurando aplicao JSF 2.
web.xml
Declarando tags na pgina xhtml
Criando primeiro Managed Bean
http://localhost:8080/jsflab
http://localhost:8080/jsflab/dia1/primeiroManagedBean.xhtml

JSF 2
JSF
Boa prtica: Nomear Managed Bean

@ManagedBean(name=requestScopeManagedBean).
Quando isso no acontece o default o nome da classe anotada

como @ManagedBean
O atributo eager da anotao ManagedBean informa se o bean ser

criado por demanda (quando requisitado) ou no startup da aplicao.
Default false.

ndice
02 Histrico JSF
03 JSF
04 Ciclo de vida
06 Escopos
07 Converters
08 Validators
09 Navegao
10 Events
11 Ajax
13 Primefaces
16 JSF 2.2
17 JSF 2.3
18 Futuro JSF
19 Referncias

JSF 2
CICLO DE VIDA

JSF 2
CICLO DE VIDA
RestoreView: Na primeira requisio de um usurio, uma nova rvore de
componentes que representa a tela desse usurio gerada. Nas demais
requisies (postback) desse mesmo usurio, a rvore de componentes que
representa a tela anteriormente enviada a ele reconstruda.
ApplyRequestValues: Nesta etapa, a rvore construda na etapa anterior

percorrida e cada um dos seus componentes decodificado. No processo de
decodificao, cada componente extrai da requisio atual os dados associados a
essa componente e se atualiza com essas informaes. Ainda nessa etapa, os
eventos de ao (como um clique em um link ou em um boto, por exemplo) so
identificados. Por padro, esses eventos so adicionados s filas correspondentes
para serem tratados posteriormente (na fase Invoke Application).
Process Validations: Nesta fase, os componentes que possuem valores

submetidos pelo usurio atravs de formulrios so convertidos e validados (caso
haja algum validador registrado para esse componente). Se ocorrer algum erro de
converso ou validao, mensagens de erro so adicionadas no contexto da
requisio atual e o fluxo redirecionado para a fase Render Response. Caso
contrrio, processo continua na fase Update Model Values. Ainda nesta fase, os
eventos de mudana de valor so identificados e tratados ao final da mesma.

JSF 2
CICLO DE VIDA
UpdateModelValues: Os valores contidos em cada componente da

rvore, j convertidos e validados na fase anterior, so armazenados
em propriedades de objetos definidos pela aplicao (managed
beans)
Invoke Application: Uma vez que os dados dos componentes j

foram convertidos, validados e armazenados nos objetos do modelo,
as tarefas correspondentes ao evento que disparou a requisio
(normalmente um clique em um boto ou link) sero executadas.
Tambm nesta fase, a prxima tela a ser apresentada ao usurio
determinada pelo resultado do mtodo que implementa a lgica de
negcio executado nesta fase.
Render Response: Nesta etapa, a prxima tela gerada e enviada

ao navegador do usurio. Uma representao desta tela tambm
armazenada a fim de ser usada na fase Restore View da prxima
requisio.

ndice
02 Histrico JSF
03 JSF
04 Ciclo de vida
06 Escopos
07 Converters
08 Validators
09 Navegao
10 Events
11 Ajax
13 Primefaces
16 JSF 2.2
17 JSF 2.3
18 Futuro JSF
19 Referncias

JSF 2
RVORE DE COMPONENTES

JSF 2
Componentes guardam estado na rvore de componentes (tambm

conhecida como view ou UIViewRoot)
Hash nico da view: <input id=javax.faces.ViewState"

value="-5331242430046946924:4161480279607048884"
Todas as pgina vo ter uma ou mais rvores de componentes na

sesso (mesmo para uma aplicao com poucas pginas, o usurio
poderia usar vrias abas da mesma pgina).
Como resolver? Guardar rvore serializada no cliente.

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

JSF 2
Boa prtica: Usar id em todos componentes.

ndice
02 Histrico JSF
03 JSF
04 Ciclo de vida
06 Escopos
07 Converters
08 Validators
09 Navegao
10 Events
11 Ajax
13 Primefaces
16 JSF 2.2
17 JSF 2.3
18 Futuro JSF
19 Referncias

JSF 2
ESCOPOS
Os Managed Beans so instanciados pelo JSF. O ciclo de vida que

esses Managed Bean vo existir na aplicao chamado de escopo,
Principais escopos no JSF 2:

Request - Valores so criados quando o request disparado e e
destrudo quando o response fornecido. Escopo default.
Caso no seja definido nenhuma anotao, ser considerado
esse.
View - Valores so criados quando o request criado e
persistido enquanto no h mudana de tela (navegao)
Session - Valores so persistido na sesso do usurio e so
destrudos apenas quando a sesso do usurio encerrada.
Application - Valores so persistido no contexto de aplicao e
so destrudos apenas quando a aplicao for finalizada

JSF 2
ESCOPOS
Os managed Bean devem sempre implementar serializable,

principalmente quando o estado da view do tipo client. O view de
escopo trabalha com serializao de dados para manter o estado dos
valores.
Precedncia dos escopos:

Request < View < Session < Application

JSF 2
ESCOPOS
Existem outros escopos:

@NoneScoped - No salvo em lugar algum. Os dados esto
disponveis at a EL ser executada.
@CustomScoped - Dev responsvel por implementar o ciclo de
vida.
Acessando request/sesso
ManagedBeanUtil ou abstrao

JSF 2
ESCOPOS - CONTEXTOS
FacesContext e ExternalContext
http://docs.oracle.com/javaee/6/api/javax/faces/context/
FacesContext.html
http://docs.oracle.com/javaee/6/api/javax/faces/context/
ExternalContext.html

JSF 2
ESCOPOS - OBJETOS IMPLICATIVO EL JSF

Implicitos objetos EL
#{component}: Atual UIComponent
#{facesContext}: Atual FacesContext
#{view}: Atual UIViewRoot
#{request}: Atual HttpServletRequest
#{session}: Atual HttpSession
#{application}: O ServletContext
#{flash}: Atual Flash
#{cc}: Atual composite component
#{requestScope}: Atual request attribute map
#{viewScope}: Atual view attribute map
#{sessionScope}: Atual session attribute map
#{applicationScope}: the application attribute map
#{initParam}: Atual context parameter map
#{param}: Atual request parameter map
#{paramValues}: Atual request parameter values map
#{header}: Atual request header map
#{headerValues}: Atual request header values map
#{cookie}: Atual request cookie map
ndice
02 Histrico JSF
03 JSF
04 Ciclo de vida
06 Escopos
07 Converters
08 Validators
09 Navegao
10 Events
11 Ajax
13 Primefaces
16 JSF 2.2
17 JSF 2.3
18 Futuro JSF
19 Referncias

JSF 2
CONVERTERS
Mecanismo automtico que converte valor do campo no HTML para o

Managed Bean
Aplicado automaticamente para os tipos abaixo:

BigDecimal
BigInteger
Boolean e boolean
Byte e byte
Character e char
Double e double
Float e float
Integer e int
Long e long
Short e short
String

JSF 2
CONVERTERS
Conversores especiais
<f:convertNumber>
Mais informaes: https://www.tutorialspoint.com/jsf/
jsf_convertnumber_tag.htm
<f:convertDateTime>
Mais informaes: https://www.tutorialspoint.com/jsf/
jsf_convertdatetime_tag.htm

JSF 2
CONVERTERS
Custom Validators:
Demo

ndice
02 Histrico JSF
03 JSF
04 Ciclo de vida
06 Escopos
07 Converters
08 Validators
09 Navegao
10 Events
11 Ajax
13 Primefaces
16 JSF 2.2
17 JSF 2.3
18 Futuro JSF
19 Referncias

JSF 2
DEMONSTRAO COMPONENTES JSF
http://www.mkyong.com/tutorials/jsf-2-0-tutorials/

JSF 2
VALIDATORS
Aps a converso, o JSF pode aplicar uma etapa de validao (fase Process
Validation)
Validaes padro:
Campo obrigatrio (required)
<h:inputText value="#{testeBean.nome}" id="campo-nome"
required="true"/> 2 <h:message for="campo-nome"/>
<h:inputText value="#{testeBean.nome}" id="campo-nome">
<f:validateRequired/>
</h:inputText>
Outros validadores:
<f:validateLongRange>
<f:validateDoubleRange>
<f:validateLength>
<f:validateRegex>

JSF 2
VALIDATORS
Exibindo mensagens de erro:
<h:message>
<h:inputText value="#{testeBean.numero}" id="campo-numero"/> <h:message

for="campo-numero"/>
Cada mensagem de erro possui duas verses: uma detalhada e outra

resumida. Por padro, apenas a mensagem detalhada exibida quando a
tag <h:message> aplicada. Para modificar esse comportamento, podemos
alterar os valores dos atributos showSummary e showDetail. O primeiro
atributo indica se a mensagem resumida deve ser apresentada, enquanto o
segundo indica se a mensagem detalhada deve ser exibida. Esses atributos
devem assumir valores true ou false. Veja o exemplo abaixo.
<h:inputText value="#{testeBean.numero}" id="campo-numero"/>
<h:message for="campo-numero" showSummary="true" showDetail="false"/>

JSF 2
VALIDATORS
Boa prtica: Criar um arquivo de mensagens (facilita

internacionalizao)
Conjunto de chaves/valores.
Exemplo: javax.faces.converter.BooleanConverter.BOOLEAN={1}:
{0} must be true or false
Exemplo de declarao do arquivo (faces-config.xml)

<application> <message-bundle>resources.Messages</
message-bundle> </application>
Outra forma de customizar mensagem:

<h:inputText value="#{testeBean.numero}" id="campo-numero"
converterMessage="Por favor, digite um nmero"/> <h:message
for="campo-numero"/>

JSF 2
VALIDATORS
Bean validation (JSR 303: https://jcp.org/en/jsr/detail?id=303)
Adicionar validaes na classe do modelo.

Strings por padro so tratadas como ao invs de null. Para mudar
esse comportamento, necessrio definir o atributo abaixo no
web.xml
<context -param> <param-name>

javax.faces.INTERPRET_EMPTY_STRING_SUBMITTED_VALUES_A
S_NULL </param-name> <param-value>true</param-value> </context
-param>
Para desabilitar bean validations em um componente particular de um

formulrio, podemos usar a tag <f:validateBean>. Isso pode ser feito
atribuindo o valor true ao atributo disabled dessa tag.

JSF 2
VALIDATORS
Validaes (Beans validation):
@AssertFalse: Verifica se uma propriedade booleana possui valor false.
@AssertTrue: Verifica se uma propriedade booleana possui valor true.
@DecimalMax: Define o valor real mximo que uma propriedade pode
armazenar.
@DecimalMin: Define o valor real mnimo que uma propriedade pode assumir.
@Digits: Define a quantidade mxima de dgitos da parte inteira (atravs do
atributo integer) ou da parte fracionria (atravs do atributo fraction) de um
nmero.
@Future: Verifica se uma data posterior ao instante atual.
@Max :Define o valor inteiro mximo que uma propriedade pode assumir.
@Min: Define o valor inteiro mnimo que uma propriedade pode armazenar.
@NotNull: Verifica se o valor de uma propriedade no null.
@Null: Verifica se o valor de uma propriedade null.
@Past: Verifica se uma data anterior ao instante atual.
@Pattern: Verifica se o valor de uma propriedade respeita uma expresso
regular.
@Size: Define os tamanhos mnimo (atravs do atributo min) e mximo (atravs
do atributo max) para uma Collection, array ou String.

JSF 2
VALIDATORS
(JSR 380 Bean Validation 2.0): http://beanvalidation.org/news/

2016/07/15/bean-validation-2-0-is-coming/

JSF 2
VALIDATORS
Personalizando mensagem usando Beans Validation:
@NotNull(message="O nome no pode ser nulo") private String nome;
Arquivo de configurao:
br.com.teste.Funcionario.nome=O nome do funcionrio no pode ser nulo
@NotNull(message="br.com.teste.Funcionario.nome") private String nome;
javax.validation.constraints.NotNull.message=O nome do funcionrio no pode ser
nulo
Outras demais:
@AssertFalse: {javax.validation.constraints.AssertFalse.message}"
@AssertTrue: {javax.validation.constraints.AssertTrue.message}"
@DecimalMax: {javax.validation.constraints.DecimalMax.message}"
@DecimalMin: "{javax.validation.constraints.DecimalMin.message}"
@Digits: {javax.validation.constraints.Digits.message}"
@Future: {javax.validation.constraints.Future.message}"
@Max: {javax.validation.constraints.Max.message}"
@Min: "{javax.validation.constraints.Min.message}"
@Null: {javax.validation.constraints.Null.message}"
@Past: {javax.validation.constraints.Past.message}"
@Pattern: {javax.validation.constraints.Pattern.message}"
@Size: "{javax.validation.constraints.Size.message}"

JSF 2
VALIDATORS
Criando seu prprio validator
@FacesValidator("com.mkyong.EmailValidator")
public class EmailValidator implements Validator{
private static final String EMAIL_PATTERN = "^[_A-Za-z0-9-]+(\\." +

"[_A-Za-z0-9-]+)*@[A-Za-z0-9]+(\\.[A-Za-z0-9]+)*" +
"(\\.[A-Za-z]{2,})$";
private Pattern pattern;
private Matcher matcher;
public EmailValidator(){
pattern = Pattern.compile(EMAIL_PATTERN);
}
@Override
public void validate(FacesContext context, UIComponent component,
Object value) throws ValidatorException {
matcher = pattern.matcher(value.toString());
if(!matcher.matches()){
FacesMessage msg =
new FacesMessage("E-mail validation failed.",
"Invalid E-mail format.");
msg.setSeverity(FacesMessage.SEVERITY_ERROR);
throw new ValidatorException(msg);
}
}
}

JSF 2
VALIDATORS
Criando seu prprio validator (passando parmetro para validator)

<h:inputText value="#{testeBean.data}" id="campo-data">
<f:attribute name="inicio" value="01/05/2014" />
<f:attribute name="fim" value="30/08/2014"/> </h:inputText>
@Override
public void validate(FacesContext context , UIComponent component , Object value) {
String inicio = (String) component.getAttributes().get("inicio");
String fim = (String) component.getAttributes().get("fim"); ...

JSF 2
VALIDATORS
Criando seu prprio validator

import java.lang.annotation.Retention; import java.lang.annotation.Target;
import javax.validation.Constraint;
import javax.validation.Payload;
@Target ({ METHOD , FIELD , ANNOTATION_TYPE }) @Retention(RUNTIME)
@Constraint(validatedBy = ValidadorDePrimo.class) public @interface Primo {
String message() default "{br.com.k19.Primo.message}"; Class<?>[] groups() default {};
Class <? extends Payload >[] payload () default {}; }

ndice
02 Histrico JSF
03 JSF
04 Ciclo de vida
06 Escopos
07 Converters
08 Validators
09 Navegao
10 Events
11 Ajax
13 Primefaces
16 JSF 2.2
17 JSF 2.3
18 Futuro JSF
19 Referncias

JSF 2
NAVEGAO
Navegar entre pginas algo natural em uma aplicao web.
Normalmente so utilizados botes ou links para navegao entre

telas.
Navegao no JSF acontece orientado a sinais (conhecidos como:

outcome). Esse sinal nada mais que uma string que direciona a
prxima pgina destino.

JSF 2
NAVEGAO
Tipos de navegao:
Navegao implcita: outcome tem o nome do arquivo destino sem o sufixo
Exemplo:
<h:commandButton value="Pgina 2" action="pagina2"/>
<h:link outcome="pagina1"> <h:outputText value="Pgina 1"/> </
h:link>
<h:commandButton value="Pgina 2" action="/diretorio1/diretorio2/
pagina2"/>
<h:commandButton value="Pgina 2" action="diretorio2/pagina2"/>
Navegao explicita: outcome tem nome diferente do arquivo destino. O
destino deve ter o nome completo do arquivo. Deve ser declarada no
faces-config.xml.
<navigation-rule> <from-view-id>/pagina1.xhtml</from-view-id>
<navigation-case> <from-outcome>proxima</from-outcome> <to-
view-id>/pagina2.xhtml</to-view-id> </navigation-case> </
navigation-rule>
<h:commandButton value="Prxima tela" action="proxima"/>

JSF 2
NAVEGAO
O JSF utiliza a seguinte lgica para determinar a pgina de resposta.

Primeiro, ele verifica se o outcome compatvel com alguma regra
de navegao registrada no arquivo faces-config.xml.
Caso seja, o JSF realizar uma navegao explcita
processando essa regra.
Caso contrrio, o JSF tentar realizar uma navegao
implcita, procurando um arquivo compatvel com o outcome.
Se esse arquivo no existir, a tela atual ser reapresentada.
<navigation-rule>
<from-view-id>/teste/*</from-view-id> <navigation -case>
<from-outcome>home</from-outcome> <to-view-id>/home.xhtml</to-view-
id>
</navigation -case> </navigation -rule>

JSF 2
NAVEGAO
Navegao dinmica
<h:commandButton value="Lanar Moeda" action="#{caraOuCoroaBean.lanca}" />
@ManagedBean
public class CaraOuCoroa{
public String lanca(){
if(Math.random() < 0.5){
return cara;
}else{
return coroa;

ndice
02 Histrico JSF
03 JSF
04 Ciclo de vida
06 Escopos
07 Converters
08 Validators
09 Navegao
10 Events
11 Ajax
13 Primefaces
16 JSF 2.2
17 JSF 2.3
18 Futuro JSF
19 Referncias

JSF 2
EVENTS
Aes so baseadas em eventos (clique do boto, mudana de

estado de combo).
Trs categorias:
FacesEvent
PhaseEvent
SystemEvent

JSF 2
EVENTS
FacesEvent
ActionEvent: Boto ou link pressionado. Mtodos do ManagedBean

podem ser invocados.
action x actionListener:
action: Retorno void ou String. No caso de retorno de String ser
usada como regra de navegao. Conceitualmente deve ser
usado para mtodos de regras de negocio da aplicao.
actionListener: Retorna void e tem como parmetro ActionEvent.
Conceitualmente deve ser usado por mtodos que implementem
lgica de interface. Sempre ser invocado antes da action.
(bloquear ou esconder componentes)

JSF 2
EVENTS
FacesEvent
ValueChangeEvent: Disparado quando o valor de um
componente modificado.
<h:inputText valueChangeListener="#{produtoBean.mudaPreco}" id="preco" />
@ManagedBean
public class ProdutoBean {
public void mudaPreco(ValueChangeEvent e) { System.out.println("Preo antigo: " + e.getOldValue());
System.out.println("Preo novo: " + e.getNewValue()); }
Outra forma:
<h:inputText id="preco"> <f:valueChangeListener type="teste.RegistraAlteracao" /> </h:inputText

JSF 2
EVENTS
PhaseListener: Eventos disparados pelo JSF antes e depois de cada uma das fases do
processamento de uma requisio. Esses eventos so teis para monitorar a execuo das
fases.
Para tratar um PhaseEvent, podemos criar uma classe que implemente a interface
javax.faces.event.PhaseListener.
Alm disso, precisamos registrar essa classe no arquivo faces-config.xml. A interface
PhaseListener obriga a implementao de trs mtodos: afterPhase(), beforePhase() e
getPhaseId().
O mtodo getPhaseId() deve devolver a referncia de um objeto do tipo
javax.faces.event.PhaseId, que indica em quais fases do processamento de
uma requisio estamos interessados. Se estivermos interessados nos eventos
da fase Apply Request Values, por exemplo, podemos fazer esse mtodo
devolver PhaseId.APPLY_REQUEST_VALUES.
Os valores que podem ser utilizados so:
PhaseId.RESTORE_VIEW
PhaseId.APPLY_REQUEST_VALUES
PhaseId.INVOKE_APPLICATION
PhaseId.PROCESS_VALIDATIONS
PhaseId.UPDATE_MODEL_VALUES
PhaseId.RENDER_RESPONSE
PhaseId.ANY_PHASE
<lifecycle> <phase-listener>br.teste.MonitorPhaseListener</phase-listener> </
lifecycle>

JSF 2
EVENTS
SystemEvent: Similares aos PhaseEvents no sentido de que ambos esto
relacionados a pontos especficos de execuo de uma aplicao JSF.
Contudo, os eventos de sistema so gerados em diversos pontos no
cobertos pelos eventos de fase. Todas as classes que definem eventos de
sistema so subclasses de javax.faces.event.SystemEvent.
PostConstructApplicationEvent: gerado imediatamente aps o incio
da aplicao, depois que todas as configuraes so processadas.
PreDestroyApplicationEvent: Esse tipo de evento gerado
imediatamente antes da aplicao ser finalizada.
ExceptionQueuedEvent: Esse evento gerado assim que uma exceo
no esperada lanada durante o processamento de uma requisio.
Alguns exemplos de excees esperadas durante o processamento de
uma requisio so aquelas relacionadas converso e validao dos
dados.
PreValidateEvent e PostValidateEvent: Esses eventos so gerados
imediatamente antes e logo aps um componente ser validado,
respectivamente.

JSF 2
EVENTS
SystemEvent
<f:event type="postValidate" listener="#{extratoBean.validaDatas}" />
preRenderComponent:javax.faces.event.PreRenderComponentEvent
preRenderView: javax.faces.event.PreRenderViewEvent
postAddToView: javax.faces.event.PostAddToViewEvent
preValidate: javax.faces.event.PreValidateEvent
postValidate: javax.faces.event.PostValidateEvent
Exemplo: preRenderView

JSF 2
EVENTS
Immediate
Por padro, a converso e a validao dos dados de um
componente de entrada so realizadas na fase Process
Validation.
Alm disso, os eventos de mudana de valor
(ValueChangeEvent) tambm ocorrem nessa fase.

JSF 2
EVENTS
Immediate
Tambm por padro, os eventos de ao (ActionEvent)
associados aos componentes
<h:commandButton>ou<h:commandLink>so disparados no final
da fase Invoke Application do processamento de uma requisio.
Esse comportamento pode ser alterado atravs do atributo
immediate desses componentes.
Para Input: Tornar o componente alta prioridade para
validao. Se qualquer validao falhar, ento nenhum
outro componente no mesmo form validado.
Para submit: Permite pular a fase de validao

ndice
02 Histrico JSF
03 JSF
04 Ciclo de vida
06 Escopos
07 Converters
08 Validators
09 Navegao
10 Events
11 Ajax
13 Primefaces
16 JSF 2.2
17 JSF 2.3
18 Futuro JSF
19 Referncias

JSF 2
AJAX
AJAX (Asynchronous Javascript And XML):AJAX carregar e

renderizar uma pgina, utilizando recursos de scripts rodando pelo
lado cliente, buscando e carregando dados em background sem a
necessidade de reload da pgina.
AJAX acrnimo para: Asynchronous JavaScript And XML e foi
gerado por Jesse James Garret, em um artigo no site
Enquanto em uma aplicao Web clssica o navegador tem que ir
buscar as informaes no servidor e retornar para o cliente, no Ajax
ocorre de forma diferente. No carregamento da pgina, toda a lgica
de processamento de dados passado ao cliente. Quando o usurio
faz uma requisio, quem busca e trs essas informaes o
JavaScript, de forma assncrona, no causando assim o chamado
reload na tela.
O tratamento dos dados, seu formato e exibio fica toda por conta do
script que foi carregado inicialmente quando se acessou a pgina. O
processo inicial de carregamento mais lento que de uma aplicao
comum, pois muitas informaes so pr-carregadas. Mas depois,
somente os dados so carregados, tornando assim o site mais rpido.

JSF 2
AJAX
Duas caractersticas:
A primeira a possibilidade de atualizar trechos de uma pgina
ao invs da pgina inteira.
A segunda poder realizar requisies sem interromper a
navegao dos usurios.
JSF 2 tem suporte nativo a ajax. Nas verses anteriores dependia do

uso de bibliotecas de terceiros (a4j !!!)
<h:inputText> <f:ajax/></h:inputText>
Evento padro (onchange).

BOA PRTICA. Informar explicitamente qual evento voc
programou.

JSF 2
AJAX
Agrupando chamadas:
<f:ajax event="mouseout"> <h:inputText/> <h:inputSecret/>

<h:commandButton value="OK"/> </f:ajax> \
Atravs do atributo execute da tag ajax possvel definir quais

componentes devem ser avaliados no servidor. Podem ser declarado
atravs de uma lista separada por ,.
<h:commandButton value=Enviar"><f:ajax event="click"
execute=component-id1,component-id2/> </h:commandButton>
Render
<h:commandButton value="Gera Nmero"> <f:ajax event="click"
render="numero"/></h:commandButton>
< h : o u t p u t Te x t id="numero"
value="#{geradorDeNumeroBean.numero}"/>

JSF 2
AJAX
Aes:
<h:commandButton value="Salva"> <f:ajax event=click"
execute="formulario" render="formulario"
listener=#{produtoBean.salva}/></h:commandButton>
Alm dos ids podem ser usados com render e execute os seguintes
valores:
@all refere-se a todos os componentes da tela.
@none refere-se a nenhum componente.
@this refere-se ao componente que disparou a requisio AJAX.
@form refere-se aos componentes do formulrio que contm o
componente que disparou a requisio AJAX.

ndice
02 Histrico JSF
03 JSF
04 Ciclo de vida
06 Escopos
07 Converters
08 Validators
09 Navegao
10 Events
11 Ajax
13 Primefaces
16 JSF 2.2
17 JSF 2.3
18 Futuro JSF
19 Referncias

JSF 2
TEMPLATES (FACELETS)
Em geral, os templates no definem uma tela concreta da aplicao.

Eles funcionam como uma base para a criao de telas concretas.
Dessa forma, no seria interessante que os navegadores acessassem
diretamente a tela correspondente a um template, pois,
provavelmente, essa tela estaria incompleta.
Para evitar esse comportamento indesejado, devemos colocar
todos os templates dentro do diretrio /WEB-INF.
Esqueleto. Gera Reuso, reduo de tempo, consequentemente custo.

Facelets nativo do JSF 2 e engine padro para gerenciamento de
telas.

JSF 2
Outras template engine (caso tenham gostado do tema e queiram

usar em outros projetos)
Thymeleaf
Apache Velocity
FreeMarker
Criando template (clssico: cabealho, rodap, menu e contedo)
<ui:insert>
<ui:composition>
<ui:define>
<ui:include>

JSF 2
Ciclo de vida:
1) Quando um cliente, como um navegador, faz uma nova solicitao para uma pgina que criado usando
Facelets, uma nova rvore de componente ou javax.faces.component.UIViewRoot criado e colocado no
FacesContext.
2) O UIViewRoot aplicada aos Facelets, e a view preenchida com componentes para processamento.
3) A view recm-construda processado de volta como uma resposta para o cliente.
4) No processamento, o estado desta view armazenado para o prximo request. O estado de componentes
de entrada e dados do formulrio armazenado.
5) O cliente pode interagir com a vista e solicitar uma outra view ou alterao do JavaServer Faces. Neste
momento a exibio salva restaurada a partir do estado armazenado.
6) A viso restaurada mais uma vez passou pelo ciclo de vida do JSF, que eventualmente ser ou gerar uma
nova viso ou re-tornar a viso atual se no houvesse problemas de validao e nenhuma ao foi acionado.
7) Se o mesmo ponto de vista solicitada, a vista armazenado processado novamente.
8) Se uma nova view requerida, ento o processo descrito no Passo 2 continuado.
9) A nova view ento renderizado de volta como uma resposta para o cliente.

JSF 2
Passagem de parmetros e facelets.
Exemplo prtico.

JSF 2
TEMPLATES (FACELETS) - TPICO AVANADO
Composite Components: Tipo especial de template que permite

criao de componentes de tela atravs de criao de novas tags.
uma coleo de tags e outros componentes existentes.
O componente essencialmente um pedao de cdigo reusvel que

tem comportamento particular.

JSF 2
TEMPLATES (FACELETS) - TPICO AVANADO

Tag Funo
composite:interface Declara o contrato de utilizao de um componente composto.
composite:implementation Define a implementao do componente compsito. Se um elemento

de interface aparece, deve haver um correspondente na
implementao.
composite:attribute Declara um atributo que pode ser dado a uma instncia do
componente composto em que essa marca declarada.
composite:insertChildren usada para inserir um componente dentro de um componente pai.

Estes componentes filhos so realocadas na pgina usando o ponto
onde eles so colocados. Serve para marcar, a implementao que
deve fazer quem implementa o componente.
No h atributos definidos para esta tag.
composite:valueHolder Especifica os componentes internos, que implemente
javax.faces.component.ValueHolder. Esta tag usada para fixar o
valor do objeto na pgina. O valor atribudo ao ValueHolder no
pode ser alterado pelo usurio.
composite:editableValueHolder Especifica os componentes internos, que implemente

javax.faces.component.EditableValueHolder. Esta tag usada para
fixar o valor do objeto na pgina. O valor atribudo ao
EditableValueHolder pode ser alterado pelo usurio.
composite:actionSource Esta marcao utilizado para acoplar o valor de objecto na pgina

usando o componente que utilizado no componente compsito.
Esta marca declarada dentro da tag <composite interface> com
algum valor do atributo 'nome' e / ou 'alvos'. Dentro do <composite:
implementao> tag se o valor objeto de qualquer componente
anexado ao ActionSource em seguida, seus nomes devem ser
combinados.
JSF 2
Exemplo.
Ateno para resources/demo. Padro da pasta.

ndice
02 Histrico JSF
03 JSF
04 Ciclo de vida
06 Escopos
07 Converters
08 Validators
09 Navegao
10 Events
11 Ajax
13 Primefaces
16 JSF 2.2
17 JSF 2.3
18 Futuro JSF
19 Referncias

JSF 2
PRIMEFACES
Principal biblioteca de componentes JSF 2 do mercado. (http://

www.primefaces.org/)
http://www.primefaces.org/showcase/index.xhtml
A instalao basicamente consiste em adicionar o jar no projeto e
adicionar a entrada abaixo nas pginas:
xmlns:p="http://primefaces.org/ui">
Caractersticas (verso atual 6.x):
Ajax nativo.
Suporte Html 5
Suporte a Themas
Construdo usando Jquery
Documentao:
http://www.primefaces.org/documentation
JSF 2
PRIMEFACES
Verses:
Community - Gratuito. Mantido pela comunidade, sem suporte
do time do Primefaces. Tem acesso apenas a major release
(Exemplo: 6.0. No tem acesso a 6.0.1)
Elite - Pagamento anuidade (US$ 99,00 por desenvolvedor
anual). Tem acesso a releases intermedirias.
Pro - Eles pedem para entrar em contato e negociar. Tem
direito a suporte pelo time do Primefaces.
Mais informaes:
http://www.primefaces.org/support
Cdigo fonte:
https://github.com/primefaces/primefaces

JSF 2
PRIMEFACES
Showcase
http://www.primefaces.org/showcase/

JSF 2
PRIMEFACES
Primefaces Theme
Primefaces mobile
Primefaces Push

JSF 2
PRIMEFACES - INDO ALM DO JSF
Primefaces Ui - Sute de componentes do Primefaces usando

Jquery para pginas Html, css e javascript
http://www.primefaces.org/primeui/
Primefaces Ng - Sute de componentes do Primefaces escrito para
uso com Angular 2 (https://angular.io/)
http://www.primefaces.org/primeng

JSF 2
PRIMEFACES EXTENSIONS
Definio do site:
Primefaces extensions uma biblioteca de componentes
open source para JSF 2. O projeto construdo em cima das
PrimeFaces. Primefaces extensions consiste em
componentes estendidos ausentes em outras bibliotecas ou
com componentes melhorados que j existem em algum
lugar, mas no trabalham l sem problemas. Alm disso ele
fornece ClientBehaviors teis, conversores, taghandlers e
muito mais. Eles esto apresentados no lado esquerdo.
Correspondentes casos de uso so mostrados na parte
superior sobre a documentao direita e tag along com
eventos comportamento do cliente na parte inferior direita.
http://www.primefaces.org/showcase-ext/views/home.jsf
http://primefaces-extensions.github.io/
https://github.com/primefaces-extensions

ndice
02 Histrico JSF
03 JSF
04 Ciclo de vida
06 Escopos
07 Converters
08 Validators
09 Navegao
10 Events
11 Ajax
13 Primefaces
16 JSF 2.2
17 JSF 2.3
18 Futuro JSF
19 Referncias

JSF 2
OUTRAS IMPLEMENTAES JSF 2

Rich Faces - http://richfaces.jboss.org/ - Descontinuado em junho/2016 (https://
developer.jboss.org/wiki/RichFacesEnd-Of-LifeQuestionsAnswers)
http://showcase.richfaces.org/
Omini faces - http://showcase.omnifaces.org/ - Biblioteca utilitria para JSF
Ice Faces - http://www.icesoft.org/java/projects/ICEfaces/overview.jsf

http://icefaces-showcase.icesoft.org/showcase.jsf
Boots Faces: http://www.bootsfaces.net/index.jsf

http://showcase.bootsfaces.net/
http://showcase.bootsfaces.net/Examples/
ButterFaces:
http://www.butterfaces.org/
https://github.com/ButterFaces/ButterFaces
Angular Faces: https://www.angularfaces.net/
https://www.angularfaces.net/tetris/index.jsf
ndice
02 Histrico JSF
03 JSF
04 Ciclo de vida
06 Escopos
07 Converters
08 Validators
09 Navegao
10 Events
11 Ajax
13 Primefaces
16 JSF 2.2
17 JSF 2.3
18 Futuro JSF
19 Referncias

JSF 2
DICAS
Livro JSF eficaz (https://www.casadocodigo.com.br/products/livro-jsf-

eficaz)
Coloque lgica de rendered no MB
Cuidado com que tipo de lgica coloca aqui.
@PostConstruct para inicializar atributos
Inicializar objetos evita Target Unreachable
Use sempre xhtml ( mais rpido que JSP).
Evite misturar as implementaes/Bibliotecas de Componentes
(Primefaces com Richfaces ou outras combinaes)
Quando usar ajax, sempre indique o que est acontecendo
(p:ajaxStatus)
Sempre indique mensagem de feedback para o usurio final
Evite o usurio dedo nervoso. Ele pode derrubar seu sistema
(bloqueio de boto)

JSF 2
DICAS
Onde aprender mais
Documentao oficial:
http://docs.oracle.com/javaee/6/tutorial/doc/bnadp.html
BalusC
http://balusc.omnifaces.org/
http://stackoverflow.com/users/157882/balusc
Rafael Ponte
http://www.rponte.com.br/
http://blog.triadworks.com.br/
Artigo clssico: http://www.rponte.com.br/2008/11/24/os-10-maus-habitos-dos-
desenvolvedores-jsf/
http://blog.triadworks.com.br/jsf-nao-coloque-processamento-caro-em-metodos-getters
Blog da caelum:
http://blog.caelum.com.br/10-razoes-para-migrar-sua-aplicacao-para-jsf-2/
K19
http://www.k19.com.br/downloads/apostilas/java/k19-k12-desenvolvimento-web-com-
jsf2-e-jpa2
Alura (https://www.alura.com.br/)
Casa do cdigo (https://www.casadocodigo.com.br/)
http://www.tutorialspoint.com/jsf/
http://www.mkyong.com/tutorials/jsf-2-0-tutorials/
http://www.coreservlets.com/JSF-Tutorial/

ndice
02 Histrico JSF
03 JSF
04 Ciclo de vida
06 Escopos
07 Converters
08 Validators
09 Navegao
10 Events
11 Ajax
13 Primefaces
16 JSF 2.2
17 JSF 2.3
18 Futuro JSF
19 Referncias

JSF 2
JSF 2.2
Suporte HTML 5
Faces Flows (novo escopo: FlowScoped)
Cross Site Request Forgery (CSRF) Protection
Componente de upload
Carga de facelets via resource handler
Multi-templating

ndice
02 Histrico JSF
03 JSF
04 Ciclo de vida
06 Escopos
07 Converters
08 Validators
09 Navegao
10 Events
11 Ajax
13 Primefaces
16 JSF 2.2
17 JSF 2.3
18 Futuro JSF
19 Referncias

JSF 2
JSF 2.3
Previsto para dezembro/2017
Melhorias na injeo CDI
Melhorias no suporte a collections
Melhor suporte a Java 8

ndice
02 Histrico JSF
03 JSF
04 Ciclo de vida
06 Escopos
07 Converters
08 Validators
09 Navegao
10 Events
11 Ajax
13 Primefaces
16 JSF 2.2
17 JSF 2.3
18 Futuro JSF
19 Referncias

JSF 2
FUTURO JSF
Pontos de vista contra:

https://www.thoughtworks.com/radar/languages-and-frameworks/jsf
https://gist.github.com/nekman/8774761
Pontos de vista a favor:

http://blog.primefaces.org/?p=3035

ndice
02 Histrico JSF
03 JSF
04 Ciclo de vida
06 Escopos
07 Converters
08 Validators
09 Navegao
10 Events
11 Ajax
13 Primefaces
16 JSF 2.2
17 JSF 2.3
18 Futuro JSF
19 Referncias

JSF 2
REFERNCIAS
1. http://docs.oracle.com/javaee/6/tutorial/doc/bnafd.html
2. https://www.caelum.com.br/apostila-java-testes-jsf-web-services-design-patterns/
3. http://www.rponte.com.br/2008/11/24/os-10-maus-habitos-dos-desenvolvedores-jsf/
4. http://blog.caelum.com.br/10-razoes-para-migrar-sua-aplicacao-para-jsf-2/
5. https://pt.wikipedia.org/wiki/JavaServer_Faces
6. https://en.wikipedia.org/wiki/JavaServer_Faces
7. http://richfaces.jboss.org/
8. http://showcase.omnifaces.org/
9. http://www.icesoft.org/java/projects/ICEfaces/overview.jsf
10.http://jdevelopment.nl/jsf-22/
11.http://blog.caelum.com.br/entenda-os-mvcs-e-os-frameworks-action-e-component-based/
12.http://www.dsc.ufcg.edu.br/~jacques/cursos/map/html/frame/oque.htm
13.http://www.softwareengineeringsolutions.com/thoughts/frameworks/JSF-lifecycle.htm
14.http://blog.caelum.com.br/jsf-lidando-com-o-estado-da-view/
15.http://download.oracle.com/otn_hosted_doc/jdeveloper/j2ee101302/jsf_apps/eventvalidate/sf_avc_converters.html
16.http://www.k19.com.br/downloads/apostilas/java/k19-k12-desenvolvimento-web-com-jsf2-e-jpa2
17.http://blog.triadworks.com.br/quando-usar-action-ou-actionlistener-com-jsf
18.http://stackoverflow.com/questions/3909267/differences-between-action-and-actionlistener
19.http://stackoverflow.com/questions/8177288/list-of-jsf-2-events
20.http://www.slideshare.net/drspockbr/novidades-do-jsf-22
21.http://www.devmedia.com.br/java-server-faces-technology-conceitos-avancados/25877
22.http://codigofonte.uol.com.br/artigos/o-que-e-o-ajax-e-como-ele-funciona
23.https://docs.oracle.com/javaee/7/tutorial/jsf-intro006.htm
24.http://balusc.omnifaces.org/2006/09/debug-jsf-lifecycle.html
25.http://balusc.omnifaces.org/2011/09/communication-in-jsf-20.html
26.http://www.beyondjava.net/blog/jsf-viewstate-and-csrf-hacker-attacks/
27.https://www.mkyong.com/jsf2/jsf-2-convertnumber-example/
28.http://www.mkyong.com/jsf2/jsf-2-convertdatetime-example/
29. http://pt.slideshare.net/fredmaia/java-web-facil-com-v-raptor
30.http://stackoverflow.com/questions/1247627/java-component-based-vs-request-based-frameworks
31.https://www.mkyong.com/jsf2/composite-components-in-jsf-2-0/
32.https://www.tutorialspoint.com/jsf/jsf_composite_components.htm
33.http://docs.oracle.com/javaee/6/tutorial/doc/giqzr.html
34.https://emmanuelnerisouza.wordpress.com/2014/11/19/passando-parametros-na-tag-jsf-uiinclude/
35.https://www.mkyong.com/jsf2/composite-components-in-jsf-2-0/
36.http://docs.oracle.com/javaee/6/tutorial/doc/giqzr.html
37.https://www.tutorialspoint.com/jsf/jsf_composite_components.htm
38.http://www.devmanuals.com/tutorials/java/jsf/jsf2TagLibrary/composite/insertChildren.html
39.http://www.primefaces.org/docs/guide/primefaces_user_guide_6_0.pdf
40.http://www.coreservlets.com/JSF-Tutorial/
41.http://www.mkyong.com/tutorials/jsf-2-0-tutorials/

Antonio Lazaro Carvalho Borges
Servios Globais de Produo / Mercado Telecom
alazaroc@indracompany.com
ISL Salvador
Av Tancredo Neves, Liz empresarial Segundo Andar
Iguatemi
Salvador BA
T +55 11 3025 1133
www.indracompany.com

Jsf2slideshare 161116001248

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

Jsf2slideshare 161116001248

Enviado por

Direitos autorais:

Formatos disponíveis

Indra Software Labs Brasil

Esse curso foi elaborado para apresentao de conceitos

O cdigo-fonte com os exemplos de cdigo podem ser

Ttulo del documento | 2

Curso dividido em 5 dias (cdigo-fonte do projeto reflete essa programao)

Ttulo del documento | 3

Ttulo del documento | 4

Antes de aprender JSF, importante (no pr-requisito) alguma

Ttulo del documento | 5

Ttulo del documento | 6

Ttulo del documento | 7

DESENVOLVIMENTO WEB - FRAMEWORKS ACTION BASED X COMPONENT BASED

Action based (MVC Push):

Ttulo del documento | 8

DESENVOLVIMENTO WEB - FRAMEWORKS ACTION BASED X COMPONENT BASED

Component based (MVC Pull): O Controller invoca a view que chama

Ttulo del documento | 9

DESENVOLVIMENTO WEB - FRAMEWORKS ACTION BASED X COMPONENT BASED

Ttulo del documento | 10

JSF = Java Server Faces.

Ttulo del documento | 11

Ttulo del documento | 12

JSF = Java Server Faces.

Ttulo del documento | 13

Ttulo del documento | 14

Ttulo del documento | 15

Java Server Faces (JSF):

Ttulo del documento | 16

Ttulo del documento | 17

Boa prtica: Nomear Managed Bean

Quando isso no acontece o default o nome da classe anotada

O atributo eager da anotao ManagedBean informa se o bean ser

Ttulo del documento | 18

Ttulo del documento | 19

Ttulo del documento | 20

ApplyRequestValues: Nesta etapa, a rvore construda na etapa anterior

Process Validations: Nesta fase, os componentes que possuem valores

Ttulo del documento | 21

UpdateModelValues: Os valores contidos em cada componente da

Invoke Application: Uma vez que os dados dos componentes j

Render Response: Nesta etapa, a prxima tela gerada e enviada

Ttulo del documento | 22

Ttulo del documento | 23

Ttulo del documento | 24

Componentes guardam estado na rvore de componentes (tambm

Hash nico da view: <input id=javax.faces.ViewState"

Todas as pgina vo ter uma ou mais rvores de componentes na

Como resolver? Guardar rvore serializada no cliente.

Ttulo del documento | 25

Boa prtica: Usar id em todos componentes.

Ttulo del documento | 26

Ttulo del documento | 27

Os Managed Beans so instanciados pelo JSF. O ciclo de vida que

Principais escopos no JSF 2:

Ttulo del documento | 28

Os managed Bean devem sempre implementar serializable,

Precedncia dos escopos:

Ttulo del documento | 29

Existem outros escopos:

Ttulo del documento | 30

Ttulo del documento | 31

ESCOPOS - OBJETOS IMPLICATIVO EL JSF

Ttulo del documento | 33