Introdução A JavaServer Faces 2

Mini-curso Gratuito
Introduo a JavaServer Faces 2
Globalcode open4education
Objetivo
Permitir que vocs tenham condies de decidir

pelo uso da tecnologia JavaServer Faces em
projetos Web com a linguagem Java
Apresentao da Agenda
Introduo
Arquitetura do JSF
Configurao
Principais componentes JSF
Ferramentas
Referncias
Perguntas e Respostas
Agenda
Introduo
Arquitetura do JSF
Configurao
Ferramentas
Referncias
Histrico
Tecnologias de Apresentao
Contedo Esttico
HTTP
HTML + Javascript + CSS + DOM
Contedo Dinmico
CGI
Servlets
JSP
Classical Custom Tags
Tag Files e Simple Tags
Apache Struts
Web 2.0
Por qu JSF?
Motivao
MVC tornou-se um padro de mercado (inmeros frameworks);
As interfaces grficas exigidas so muito complexas para
serem desenvolvidas somente com HTML exigindo muito
JavaScript;
Muitos componentes de UI sendo desenvolvidos com
Custom Tags ou JavaScript sem padronizao;
Baixa produtividade no desenvolvimento de aplicaes Web.
Web Apps sofisticadas - estado persistente entre requests
6
O que JSF?
O que JavaServer Faces (JSF)?
Paradigma de programao visual de User-interfaces
baseado em componentes aplicado Web
O framework Java padro para user interfaces em Web
applications
UM framework que permite a criao de aplicaes Web
com semntica de Swing implementando MVC;
Uma especificao Java EE com mltiplas
implementaes (Mojarra / MyFaces)
Introduo
Java EE EJB
Container
Java EE Web Container
JSF e Java EE
JavaServer Faces
View
Controller
Servlet
Java
Server
Pages
Custom
Tag
Model
JavaBeans
EJB
Introduo
Benefcios com o uso
Toolability = Ferramentabilidade (IDEs WYSIWYG);
Suporte a JSF na maioria dos IDEs;
Portabilidade = Todo Web Container compatvel com a

especificao Java EE (5.0 ou superior) implementa JSF;
Aumento da produtividade de aplicaes Java EE;
Suporte internacionalizao;
Gerenciamento de estado entre mltiplas requisies;

9
Introduo
Benefcios com o uso
Suporte a um modelo de eventos;
Componentes de UI de terceiros compatveis com JSF;
Mecanismo padro de converso e validao de dados;

Alta reusabilidade de componentes de tela e validadores;
Flexibilidade com processo de renderizao de componentes;

Fcil de aprender;
Alta adoo no mercado.

10
Introduo
Glassfish - Oracle
Java EE EJB
Container
Implementao Oracle de Java EE
11
Servlets
JSP
Custom Tags
JSF
EJB
Introduo
WildFly Red Hat
Java EE EJB
Container
Implementao Red
12
Servlets
JSP
Custom Tags
JSF
Hat de Java EE
EJB
Agenda
Introduo
Arquitetura do JSF
Configurao
Ferramentas
Referncias
13
Arquitetura Web
Arquitetura Client-Server baseada em HTTP;

Dificuldade em prover o mesmo dinamismo
de uma aplicao desktop;
Todo o processamento Java acontece no
servidor;
14
Arquitetura Swing
GUI e Listener
so processados pela
mesma mquina
Listener
-
Validao
Converso de dados
Integrao com a camada
Model
Lgica de negcios, etc
Java
Chamada a mtodos
15
Arquitetura Web

-
Java Servlet
Validao
Converso de dados
Integrao com a camada
Model
Lgica de negcios, etc
HTTP
REQUEST / RESPONSE
Cliente Browser: HTML + JavaScript

16
Ciclo vicioso de uma requisio

Geralmente cd. para processar cada request envolve:
17
Checar e carregar estado deixado por requests anteriores;
Validar e converter dados recebidos para tipos Java server-side

(e gerar mensagens de erro se validao/converso falha);
Atualizar objetos server-side com os novos dados;
Invocar cdigo server-side que realize tarefas como acessar BD;
Preparar estado que precise estar disponvel em prximos requests;
Gerar um response de volta ao cliente (images, scripts, e CSS).
Ciclo de vida da requisio JSF
1. Restore View
2. Apply Request Values
3. Process Validators
4. Update Model Values
Criao da rvore de
componentes de UI.
Se a pgina j foi
visualizada na mesma
session os dados so
recuperados.
5. Invoke Application
6. Render Response
18
1. Restore View
Atualiza rvore
componentes de UI
com valores da
request.
Dispara quaisquer
eventos gerados pela
atualizao
6. Render Response
19
1. Restore View
Executa todas
converses de dados +
validaes associadas
aos componentes de UI
6. Render Response
20
1. Restore View
Cada componente de
UI atualiza o seu
backing model
6. Render Response
21
1. Restore View
6. Render Response
22
Execuo do
ActionListener padro,
geralmente com
execuo de
componentes de
negcio
1. Restore View
6. Render Response
23
Gerao da Response
com a rvore de
componentes de UI
Arquitetura JSF
Principais componentes:
TagLibraries: JSF Core / HTML - cujas tags representam
componentes de tela fundamentais.
Managed Beans: classes Java que respondem por aes
e dados de telas JSF;
Expression Language: linguagem utilizada para declarar
o vnculo entre telas JSF e managed beans;
FacesController: Servlet provido pelo JSF que
representa o ncleo administrativo do JSF;
faces-config.xml: configuraes
24
Arquitetura JSF
Para criar um aplicativo Web com JSF devemos:

1) Criar a pgina JSF utilizando suas custom tags;
Estrutura da tela e os componentes grficos
2) Criar uma classe JavaBean;
Receber os dados da tela e responder por eventos / aes
3) Configurar o FacesController no web.xml;

4) Criar um faces-config.xml e declarar o JavaBean;
possvel declarar com @ManagedBean no JSF 2
5) Configurar as bibliotecas (caso no haja suporte nativo

Java EE);
25
Agenda
Introduo
Arquitetura do JSF
Configurao
Ferramentas
Referncias
26
Configurao
JARs necessrios v1.x:
27
jsf-api.jar
jsf-ri.jar
jstl.jar
standard.jar
commons-beansutils.jar
commons-digester.jar
commons-collections.jar
commons-logging.jar
JARs necessrios v2.0:

jsf-api.jar
jsf-impl.jar
JSF 2
Configurao
Deployment Descriptor: web.xml
Fazer o mapeamento do FacesController
Associao do controlador pode ser feita por extenso
ou por diretrio, ex. /faces/*
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>
javax.faces.webapp.FacesServlet
</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>
28
Configurao
faces-config.xml
Neste arquivo so feitas todas as configuraes da aplicao
JSF, como por exemplo:
29
Regras de Navegao
Managed Beans
Validators / Converters
i18n
Agenda
Introduo
Arquitetura do JSF
Configurao
Ferramentas
Referncias
30
Criao de pginas JSF
Pgina JSF
Tags: JSF HTML
Links, formulrios, imagens,

combo-box, tabelas, etc
Request
Managed
Bean
Expression Language: EL
Tags: JSF Core
Session
Atravs destas tags
adicionamos validao,
converso de dados, listeners
Dados para popular as tabelas,

combo-box, textos.
Managed
Bean
Application
Managed
Bean
...
31
Principais Componentes JSF
32
Bibliotecas de Tags
Managed Beans
Componentes de User-interface (UI)
Navegao
Validadores
Conversores
Eventos e Listeners
Facelets
Ajax
Bibliotecas de Tags
Pginas JSF geralmente utilizam duas

bibliotecas de Custom Tags do JSF:
JSF Html: renderizao de componentes de UI HTML
JSF Core: integrao dos componentes de UI com
validadores, conversores
JSF Facelets: composio de telas
JSF Composite: criao de componentes
customizados
33
Integrao JSF e JSP
JSP no a nica forma de construir interfaces JSF;

A integrao feita atravs de TagLibs;
As TagLibs ligam os componentes server-side aos

client-side (tipicamente HTML)
34
Integrao JSF e JSP
Configuraes necessrias com JSP:

<%@ taglib uri=http://java.sun.com/jsf/html prefix=h %>
<%@ taglib uri=http://java.sun.com/jsf/core prefix=f %>
Configuraes necessrias com XHTML:
<html xmlns=http://www.w3.org/1999/xhtml
xmlns:h=http://java.sun.com/jsf/html
xmlns:f=http://java.sun.com/jsf/core >
35
Integrao JSF e JSP

Core Tag Library: gerenciamento de listeners,
configurao de componentes, validao, entre outros;
HTML Tag Library: Definem o renderizador do
componente de UI, utilizam EL para integrao com os
Managed Beans;
Existe uma tag para cada combinao entre renderizador e
componente;
Por exemplo, um UIInput pode ser renderizado em forma
de inputText ou de inputSecret;
36
Integrao JSF e JSP

Pgina JSF similar a um formulrio HTML. Porm:
Todas tags JSF esto contidas em uma tag <f:view> (s .JSP)
Ao invs de usar um <form> HTML, componentes devem ser
includos em uma tag <h:form>
Ao invs de usar as tags de input HTML, utiliza-se <h:inputText>,
<h:inputSecret> e <h:commandButton>
Use, portanto:
<h:form> ao invs de <form>
<h:inputText> ao invs de <input type="text>
37
Exemplo Tags JSF

<%@ taglib uri=http://java.sun.com/jsf/html prefix=h %>
<%@ taglib uri=http://java.sun.com/jsf/core prefix=f %>
<html><head>...</head>
<h:body>
<f:view>
<h:form>
<h:graphicImage url="exemplo.png" />
<h:panelGrid columns="2">
<h:outputLabel for="textNome" value="Nome" />
<h:inputText id="textNome" value="..." />
<h:outputText value="Senha" />
<h:inputSecret value="" />
<h:outputText value="Observaes" />
<h:inputTextarea value="" />
</h:panelGrid>
<h:commandButton value="Enviar" action="..." />
</h:form>
</f:view>
38
39
Bibliotecas de Tags
Managed Beans
Navegao
Validadores
Conversores
Eventos e Listeners
Facelets
Ajax
Managed Beans
Um Managed Bean um JavaBean gerenciado pelo

framework JSF, ou seja, ele instanciado, e colocado no
escopo de acordo com as configuraes encontradas no
faces-config.xml ou por annotations (v2.0).
Um ManagedBean tambm chamado de backing bean,

pois contm os dados e os mtodos que sero executados
quando algum dos componentes de UI da pgina JSF tiver
que executar uma ao.
40
Managed Beans
Chamamos de binding o vnculo entre um

componente de UI da pgina JSF e o seu backing
model / managed bean.
41
Managed Beans
Model Sistema Legado
42
Managed Beans
Utilizamos Taglibs e EL (Expression Language) para

associar (fazer o binding) de um componente de UI com
um ManagedBean;
<h:outputText value="#{clienteBean.cliente.nome}"/>
A String clienteBean est associada a
classe ClienteBean no facesconfig.xml (ou anotao).
43
Managed Beans
Declarao de um ManagedBean no faces-config.xml:

<managed-bean>
<managed-bean-name>clienteBean</managed-bean-name>
<managed-bean-class>ClienteBean</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
JSF 2:
@ManagedBean(name=clienteBean")
@SessionScoped
public class ClienteBean { ... }
44
45
Managed Bean
faces-config.xml
Pgina JSF
Managed Beans em JSF 1.x
Pgina JSF
Managed Beans em JSF 2.0

<h:form>
<h:outputText value="e-mail">
<h:inputText value="#{olaMundoMB.email}">
<h:commandButton value="Chamar metodo no MB"
action="#{olaMundoMB.metodo}">
</h:form>
@RequestScoped
Managed Bean
faces-config.xml
@ManagedBean(name="olaMundoMB")
public class OlaMundoMB {
private String email;

public void metodo() {}
public String getEmail() {
return this.email;
}
public void setEmail(String email) {
this.email = email;
}
}
46
47
Bibliotecas de Tags
Managed Beans
Navegao
Validadores
Conversores
Eventos e Listeners
Facelets
Ajax
Componentes de User-Interface
Tecnicamente:
Todos os componentes de UI so subclasses da classe
abstrata UIComponent;
A classe UIComponentBase j implementa os mtodos
necessrios de UIComponent podendo ser estendida
diretamente;
48
Custom Tag renderiza um UICommand
em forma de boto
HTML Render Kit
49
ou hyperlink
Voc cria o componente

do zero
Indicado para construo de

componentes compostos
Utilizado para customizao
de componentes
50
Principais Componentes de UI
<f:view> e <h:form>
Representa uma tela JSF e demarca a rea onde utilizamos

componentes JSF. Uma pgina pode conter apenas uma view.
O form essencial para submisso dos dados
<f:subview>
Representa um fragmento de pgina. Utilizado com sistema de

pginas compostas para identificar os componentes includos na
pgina como uma sub-view.
<h:panelGrid> <h:panelGroup>
Utilizado para criar tabelas, seu funcionamento simples:

devemos indicar o nmero de colunas e adicionar componentes
na ordem certa.
<h:inputText>
51
Caixa de entrada de texto.
<h:inputTextArea>
Caixa de texto de mltiplas linhas
<h:inputSecret>
Normalmente usado para senhas
<h:inputHidden>
Para passagem de dados de aplicativo, pois no renderiza nada

visual.
<h:outputLabel>
O texto de ttulo de um outro componente
<h:outputText>
Texto simples
<h:graphicImage>
52
Apresentar imagens na pgina
<h:message>
Tag utilizada para componentes com validadores representa uma

mensagem relacionada a um componente da tela.
<h:messages>
Apresenta todas as mensagens de erro.
<h:outputLink>
Representa um hyperlink HTML convencional.
<h:commandLink>
Para chamar mtodos / aes em managed beans com um link

HTML
<h:commandButton>
53
Tambm chama mtodos em managed beans, mas representado

por um boto HTML.
<h:selectOneListbox>
Uma lista de seleo de simples escolha.
<h:selectOneMenu>
Um combobox
<h:selectOneRadio>
Radio buttons para seleo de simples, de um elemento
<h:selectBooleanCheckbox>
54
Representa um checkbox que ser armazenado um boolean
<f:view>
<h:form>
<h:graphicImage url="exemplo.png" />
<h:outputLabel for="textNome" value="Nome" />
<h:inputText id="textNome" value=#{exemplo.nome}" />
<h:outputText value="E-mail" />
<h:inputText value=#{exemplo.email}" />
<h:outputText value="Senha" />
<h:inputSecret value="" />
<h:outputText value="Observaes" />
<h:inputTextarea value="" />
</h:panelGrid>
<h:commandButton value="Enviar"
action="#{exemplo.lerDados}" />
</h:form>
<h:messages />
</f:view>
55
<h:selectOneListbox
value="#{exemplo.itemSelecionado}">
<f:selectItems value="#{exemplo.itemsLista}"
var=estado itemValue="#{estado.sigla}
itemLabel="#{estado.nome}/>
</h:selectOneListbox>
public String getItemSelecionado() {
return itemSelecionado;
}
public void setItemSelecionado(String itemSelecionado) {
this.itemSelecionado = itemSelecionado;
}
public ArrayList getItemsLista() {
ArrayList r =new ArrayList();
r.add(new Estado("SP","So Paulo"));
return r;
}
56
Mensagens
Para gerar uma mensagem genrica que ser apresentada
com a tag <h:messages> na sua tela, devemos usar:
FacesMessage facesMsg =
new FacesMessage(FacesMessage.SEVERITY_INFO,
"resumo", "mensagem detalhada");
FacesContext fc = FacesContext.getCurrentInstance();
fc.addMessage(null, facesMsg);
57
Tabela de Dados
Para trabalhar com tabelas de dados que apresentam
colees de objetos utilizamos o componente <h:dataTable>:
<h:dataTable value="#{categoriaMB.categorias}"
var="categoria">
<h:column>
<f:facet name="header">ID</f:facet>
<h:outputText value="#{categoria.categoriaId}"/>
</h:column>
<h:column>
<f:facet name="header">Descricao</f:facet>
<h:outputText value="#{categoria.descricao}"/>
</h:column>
</h:dataTable>
58
Tabela de Dados
O cdigo do managed bean deve apenas devolver a
collection para a tabela:
private List<Categoria> categorias;
public List<Categoria> getCategorias() {
categorias = CategoriaDAO().getInstance().getAll();
return categorias;
}
public void setCategorias(List<Categoria> cat){
this.categorias = cat;
}
59
Tabela de Dados
O componente <h:dataTable> permite operarmos em uma
das linhas da tabela, por exemplo:
<h:dataTable value="#{categoriaMB.categorias}"
var="categoria">
<h:column>
<f:facet name="header">ID</f:facet>
<h:outputText value="#{categoria.categoriaId}"/>
</h:column>
<h:column>
<f:facet name="header">Descricao</f:facet>
<h:outputText value="#{categoria.descricao}"/>
</h:column>
<h:column>
<f:facet name="header">Comandos</f:facet>
<h:commandButton value="Excluir Categoria"
value="#{categoriaMB.excluir(categoria)}"/>
</h:column>
</h:dataTable>
60
Tabela de Dados
No managed bean executamos a ao desejada:
public void excluir(Categoria categoria) {

CategoriaDAO().getInstance().remove(categoria);
}
Esta capacidade se deve ao fato de termos colocado o

comando / ao na linha da tabela em questo!
61
62
Bibliotecas de Tags
Managed Beans
Navegao
Validadores
Conversores
Eventos e Listeners
Facelets
Ajax
Navegao com JSF 1.x

O fluxo de navegao do usurio entre telas/mtodos do
managed bean configurado no faces-config.xml
Vamos imaginar o seguinte menu para nosso sistema
<f:view>
<h:form>
<h:commandButton action="listar"
value="Listar categorias" />
<h:commandButton action="incluir"
value="Incluir categoria" />
</h:panelGrid>
</h:form>
<h:messages />
</f:view>
63
incluir / listar so
nomes de
navegaes
configuradas no
faces-config.xml
Navegao com JSF 1.x

Supondo que o arquivo de menu chame menu.xhtml, a
seguinte configurao deve ser feita no faces-config.xml
<navigation-rule>
<from-view-id>/menu.xhtml</from-view-id>
<navigation-case>
<from-outcome>incluir</from-outcome>
<to-view-id>/incluir.xhtml</to-view-id>
</navigation-case>
<navigation-case>
<from-outcome>listar</from-outcome>
<to-view-id>/listar.xhtml</to-view-id>
<redirect/>
</navigation-case>
</navigation-rule>
64
Quando a regra de
navegao for
chamada a partir
do menu.xhtml
Se a String for
incluir
Exiba como
resposta a pgina
incluir.xhtml
Navegao com JSF 1.x

A navegao como foi exibida anteriormente com a String
direto dentro da tag HTML chamada de navegao
esttica
Tambm podemos utilizar a navegao dinmica, ou seja
acionar a navegao atravs de um mtodo do managed
bean
Mtodos de ao em managed beans podem retonar void

ou String
65
Navegao com JSF 1.x

Para direcionar o usurio para uma navegao em um
managed bean, basta retornar como String o nome da
navegao configurada no faces-config.xml
public String salvar(){
String retorno = "listar";
try {
// instrues
}
catch(Exception e) {
retorno = "erro";
}
return retorno;
}
66
Navegao com JSF 2.x

Para direcionar o usurio para uma navegao, basta retornar como
String o nome da pgina para a qual se deseja navegar, sem a
extenso.
Esse mecanismo de navegao denominado navegao implcita e
vale tanto para navegao dinmica quanto esttica.
Para forar um redirecionamento para a pgina de destino basta
acrescentar um parmetro ?faces-redirect=true
public String salvar(){
String retorno = "listar";
try {
// instrues
}
catch(Exception e) {
retorno = "erro?faces-redirect=true"; //redirecionamento
}
return retorno;
}
67
Demonstrao
Hello World JSF usando componentes bsicos
68
69
Bibliotecas de Tags
Managed Beans
Navegao
Validadores
Conversores
Eventos e Listeners
Facelets
Ajax
Validadores
Todos os componentes de UI derivados de

UIInput podem ser validados;
Os dados so validados aps a converso;
Uma validao simples em componentes de

entrada de dados o parmetro required="true".
70
Validadores
A validao pode ser feita das seguintes formas:

Delegar a validao para um mtodo de um JavaBean
que estiver no escopo;
Utilizar um Standard Validator (facilmente via tags);
Criar um Validator que implemente a interface

javax.faces.validator.Validator
71
Validadores
Uma tag de validao pode ser aninhada em campos de
entrada
Para visualizar os erros de validao e/ou converso,
devemos utilizar <h:message> ou <h:messages>
possvel customizar as mensagens de erro padro criando
um arquivo properties e configurando-o no faces-config.xml
<h:inputText id="textDescricao"
value="#{categoriaMB.categoria.descricao}">
<f:validateLength maximum="255" minimum="5" />
</h:inputText>
<h:message for="textDescricao"/>
72
Validadores
Todas as implementaes de JSF devem ter os
seguintes validadores (standard validators):
f:validateDoubleRange (DoubleRangeValidator)
f:validateLength (LengthValidator)
f:validateLongRange (LongRangeValidator)
f:validateRegex (RegularExpression)
f:validateRequired (Required)
JSF 2
f:validateBean (Bean Validation)

73
74
Bibliotecas de Tags
Managed Beans
Navegao
Validadores
Conversores
Eventos e Listeners
Facelets
Ajax
Converso / Formatao
A representao de dados universal da Web String:
"1/1/2007" = java.util.Date
"20.05" = double
"true" = boolean
Sem o uso de um framework devemos converter os dados
manualmente usando parsers do Java SE (NumberFormat,
DateFormat...)
75
Converso / Formatao
A converso de dados pode ser implcita ou explcita
Para tipos primitivos e wrapper classes: implcita!!!
Para outros tipos: explcita
O JSF dispe de uma poro de conversores:
76
Nmeros: BigInteger, Double, Float, Long, double, int etc.

Booleanos
Datas
Moedas
Caracteres
Converso / Formatao
Trs tags foram disponibilizadas para converso e
formatao de dados:
<f:convertDateTime>: especializada em datas
<f:convertNumber>: diversas formas de converter nmeros
<f:convert>: para associar o dado a um conversor especfico / customizado
<h:outputText id="textDataCadastro"
value="#{movimentoMB.movimento.dataCadastro}">
<f:convertDateTime pattern="dd/MM/yy" />
</h:outputText>
<h:inputText id="textValor"
value="#{movimentoMB.movimento.valor}">
<f:convertNumber type="currency" currencySymbol="R$" />
</h:inputText>
77
Converso / Formatao
Os erros de converso so colocados em mensagens,
importante o uso de <h:message> / <h:messages>;
Podemos desenvolver nosso prprio conversor criando uma
classe que implementa a interface:
javax.faces.convert.Converter
Esta interface define dois mtodos:
public Object
UIComponent
public String
UIComponent
78
getAsObject(FacesContext ctx,
c, String s)
getAsString(FacesContext ctx,
c, Object o)
Converso / Formatao
Alm dos conversores, todas as tags JSF disponibilizam o
parmetro rendered;
Com EL, podemos configurar o rendered para retornar um
booleano que indicar se a tag deve ou no ser renderizada:
<h:column>
<f:facet name="header">Status</f:facet>
<h:outputText value="Compensada"
rendered="#{movimento.status eq '1'}" />
<h:outputText value="Programada"
<h:outputText value="Cancelada"
</h:column>
-> Mais sobre EL apostila AW2, captulo 12

79
80
Bibliotecas de Tags
Managed Beans
Navegao
Validadores
Conversores
Eventos e Listeners
Facelets
Ajax
Eventos
Modelo de eventos muito parecido com AWT e Swing
Os Eventos so responsveis pela propagao das aes
sobre a interface com o usurio;
Ex: preenchimento de formulrio, ao via link/boto
Cada componente de UI pode disparar quantos eventos
forem necessrios;
Dois tipos de eventos:
Eventos de mudana de valor;
Eventos de ao;
81
Eventos
Managed
Bean
Pgina
JSF
O principal meio de comunicao entre uma pgina JSF e

um managed bean so comandos vinculados a mtodos:
82
Eventos
Uma outra forma de uma UI se comunicar com managed
bean atravs de eventos
Um comando dispara um mtodo no managed bean quando
o usurio clica no boto ou link
Um evento acionado no managed bean quando algo
acontece em um componente da tela
Um evento JSF semelhante a um evento Swing, porm o
listener se encontra em um servidor
83
Eventos
Exemplo de evento tipo ValueChange:
<h:selectOneRadio
valueChangeListener="#{loginMB.atualizaUI}"
onchange="submit()">
<f:selectItem itemLabel="Ja tenho cadastro" itemValue="1" />
<f:selectItem itemLabel="Quero me cadastrar" itemValue="2" />
<f:selectItem itemLabel="Esqueci minha senha" itemValue="3" />
</h:selectOneRadio>
public void
int valor
if (valor
} else if
} else if
}
}
84
atualizaUI(ValueChangeEvent event) {
= Integer.parseInt(event.getNewValue().toString());
== 1) { //regra de negcios
(valor == 2) {//regra de negcios
(valor == 3) {//regra de negcios
Eventos
Exemplo de evento do tipo ActionEvent:
<h:commandButton value="Login"
actionListener="#{loginMB.login}" />
public void login(javax.faces.event.ActionEvent event) {

// regra de negcios
}
85
86
Bibliotecas de Tags
Managed Beans
Validadores
Conversores
Eventos e Listeners
Facelets
Ajax
87
Bibliotecas de Tags
Managed Beans
Validadores
Conversores
Eventos e Listeners
Facelets
Ajax
Facelets
Framework de templates de pginas
Linguagem padro para descrever telas no JSF 2
Atua na camada view facilitando o reuso (herana)

de pginas e fragmentos
v2 no requer mais configurao (faces-config.xml)
Vantagens do Facelets:
88
Facilita o entendimento visual

Componentiza mais suas pginas
Facilita mudanas
Padro a partir do Java EE 6 / JSF 2.0
Configurando Facelets no JSF 1.x

SOMENTE para uso de Facelets no JSF 1.x
Adicionar no WEB-INF/lib o jar jsf-facelets.jar;
Adicionar a seguinte configurao no web.xml:
<context-param>
<param-name>javax.faces.DEFAULT_SUFFIX</param-name>
<param-value>.xhtml</param-value>
</context-param>
Adicionar a seguinte configurao no faces-config.xml:

<application>
<view-handler>
com.sun.facelets.FaceletViewHandler
</view-handler>
</application>
89
Usando Facelets
Vamos trabalhar com dois tipos diferentes de pginas:
Pgina template: no so visualizadas diretamente pelo usurio
Servem apenas para serem "herdadas". Nas pginas template
usamos a tag <ui:insert> para definir reas.
Pgina client: so pginas efetivamente visualizadas

Usamos a tag <ui:composition> para indicar o template e <ui:define>
para preencher as rea pr-definidas no template em questo.
90
Usando Facelets
Devemos fazer uma referncia ao namespace das
tags:
<html ..
xmlns:ui="http://java.sun.com/jsf/facelets">
Criar template as principais tags / parmetros so:

<ui:insert name="fragmento"> reas de contedo
substituvel
Criar tela cliente as principais tags / parmetros so:

<ui:composition template="arquivo.xhtml"> indica
que a pgina utiliza o arquivo.xhtml como template
<ui:define name="fragment"> redefine o contedo de
cada rea substituvel do template.
<ui:include src="/menu.xhtml"> faz a incluso de
fragmentos.
91
Usando Facelets
Exemplo de definio de um template:
template1.xhtml
<f:view>
<h:panelGrid columns="1" styleClass="table1">
<ui:insert name="menu">
<p>Area de menu padrao:</p>
</ui:insert>
<ui:insert name="dados">
<p>Area de dados padrao:</p>
</ui:insert>
<h:messages />
</h:panelGrid>
</f:view>
92
Usando Facelets
Exemplo de uso de um template:
PaginaComMenu.xhtml
<ui:composition template="/template1.xhtml">
<ui:define name="menu">
<f:subview id="menusSubView">
<h:form>
<h:commandButton action="Categorias" value />
...
</h:panelGrid>
</h:form>
</f:subview>
</ui:define>
</ui:composition>
93
Usando Facelets
Outro exemplo com o uso de template:
CategoriaForm.xhtml
<ui:composition template="/PaginaComMenu.xhtml">
<ui:define name="dados">
<f:subview id="categoriaForm">
<h:form>
<h:outputText for="textDescricao"
value="#{formCategoriaBundle.textoDescricao}" />
<h:inputText id="textDescricao"
value="#{categoriaMB.categoria.descricao}"/>
</h:panelGrid>
<h:commandButton value="#{formCategoriaBundle.botaoSalvar}"
action="#{categoriaMB.salvarCategoria}" />
</h:form>
</f:subview>
</ui:define>
</ui:composition>
94
95
Bibliotecas de Tags
Managed Beans
Validadores
Conversores
Eventos e Listeners
Facelets
Ajax
Suporte nativo a AJAX

JSF 1.x
No existem componentes nativos com suporte a AJAX
Suporte a AJAX implementado atravs de bibliotecas de
terceiros como AJAX4JSF
JSF 2.0
Adicionado suporte nativo a AJAX atravs do componente
<f:ajax>
O componente <f:ajax> adicionado ao corpo do elemento que
deve suportar requisies AJAX ao servidor
96
Diviso do ciclo de vida de JSF
Fonte: especificao JSR-314
97

Atributos do tag <f:ajax>
event: evento que ir gerar a requisio AJAX
execute: lista de ids de componentes que sero processados na
poro execute do ciclo de vida do JSF.
render: lista de ids de componentes que sero processados na poro
render do ciclo de vida do JSF.
listener: elemento opcional que representa um mtodo a ser executado
em um ManagedBean quando a requisio AJAX processada. O
mtodo deve receber um AjaxBehaviorEvent como parmetro e pode
lanar AbortProcessingException.
Alm da lista de ids separados por espao, tambm aceita os seguintes
valores padro
98
@this: valor default, que simboliza o prprio componente

@form
@all
@none

Trecho de pgina com uso de <f:ajax>
<h:inputText value="#{clienteMB.cliente.nome}">
<f:ajax event="change" render="otTeste"
listener="#{clienteMB.tratadorAjax}" />
</h:inputText>
<h:outputText id="otTeste" value="#{clienteMB.mensagem}" />
99

Managed Bean vinculado ao trecho de pgina
apresentado
@ManagedBean(name="clienteMB")
@RequestScoped
public class ClienteMB {
private Cliente cliente;
private String mensagem;
//getters e setters omitidos
public void tratadorAjax(AjaxBehaviorEvent e) {
mensagem = "executando tratamento Ajax";
}
}
100
Agenda
Introduo
Arquitetura JSF
Configurao
Ferramentas
Referncias
101
Ferramentas
Gratuitos
Eclipse 6 - Helios (com JBoss Tools 3 timo suporte a Facelets)
NetBeans 7
Oracle JDeveloper 11
Red Hat Developer Studio
Pagos
MyEclipse Enterprise Workbench 9.x
JetBrains IntelliJ IDEA 10.x
102
Agenda
Introduo
Arquitetura JSF
Configurao
Ferramentas
Referncias
103
Mais informaes
Sites
http://docs.oracle.com/javaee/7/tutorial/jsf-intro.htm
http://weblogs.java.net/blog/edburns/
http://www.jsfcentral.com/
Java Specification Requests
JSF 1.0 e 1.1: http://www.jcp.org/en/jsr/detail?id=127
JSF 1.2: http://www.jcp.org/en/jsr/detail?id=252
JSF 2.0 e 2.1: http://www.jcp.org/en/jsr/detail?id=314
JSF 2.2: http://www.jcp.org/en/jsr/detail?id=344
104
Livros
JSF The Complete Reference
Ed Burns
Core JavaServer Faces

David Geary
JSF in Action
Kitto Mann
Mastering JavaServer Faces

Bill Dudney e outros
105
Agenda
Introduo
Arquitetura JSF
Configurao
Ferramentas
Referncias
106
107
Agradecemos a presena!
108

Introdução A JavaServer Faces 2

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Introdução A JavaServer Faces 2

Hochgeladen von

Copyright:

Verfügbare Formate

Mini-curso Gratuito

Introduo a JavaServer Faces 2

Permitir que vocs tenham condies de decidir

Java EE Web Container

Portabilidade = Todo Web Container compatvel com a

Gerenciamento de estado entre mltiplas requisies;

Mecanismo padro de converso e validao de dados;

Flexibilidade com processo de renderizao de componentes;

Alta adoo no mercado.

Implementao Oracle de Java EE

Java EE Web Container

Arquitetura Client-Server baseada em HTTP;

Java EE Web Container

Cliente Browser: HTML + JavaScript

Ciclo vicioso de uma requisio

Checar e carregar estado deixado por requests anteriores;

Validar e converter dados recebidos para tipos Java server-side

Atualizar objetos server-side com os novos dados;

Invocar cdigo server-side que realize tarefas como acessar BD;

Preparar estado que precise estar disponvel em prximos requests;

Gerar um response de volta ao cliente (images, scripts, e CSS).

Ciclo de vida da requisio JSF

Ciclo de vida da requisio JSF

Ciclo de vida da requisio JSF

Ciclo de vida da requisio JSF

Ciclo de vida da requisio JSF

Ciclo de vida da requisio JSF

Para criar um aplicativo Web com JSF devemos:

Estrutura da tela e os componentes grficos

2) Criar uma classe JavaBean;

Receber os dados da tela e responder por eventos / aes

3) Configurar o FacesController no web.xml;

possvel declarar com @ManagedBean no JSF 2

5) Configurar as bibliotecas (caso no haja suporte nativo

JARs necessrios v1.x:

JARs necessrios v2.0:

Criao de pginas JSF

Links, formulrios, imagens,

Tags: JSF Core

Dados para popular as tabelas,

Principais Componentes JSF

Pginas JSF geralmente utilizam duas

Integrao JSF e JSP

JSP no a nica forma de construir interfaces JSF;

As TagLibs ligam os componentes server-side aos

Integrao JSF e JSP

Configuraes necessrias com JSP:

Integrao JSF e JSP

Integrao JSF e JSP

Exemplo Tags JSF

Principais componentes JSF

Um Managed Bean um JavaBean gerenciado pelo

Um ManagedBean tambm chamado de backing bean,

Chamamos de binding o vnculo entre um

Model Sistema Legado

Utilizamos Taglibs e EL (Expression Language) para

Declarao de um ManagedBean no faces-config.xml:

Managed Beans em JSF 1.x

Managed Beans em JSF 2.0

public class OlaMundoMB {

private String email;

Principais componentes JSF

HTML Render Kit