curso jsf fa7
Post on 18-Sep-2014
371 Views
Preview:
TRANSCRIPT
1
Curso JSFIntegrando JSF, Ajax4Jsf,
RichFaces e Facelets
Instrutor: Fábio Henrique Barros
2
Conteúdo
Java Server Faces Introdução Gerenciando a Navegação Managed Beans JSF Expression Language Java Server Faces Standard Tags Modelo de Componentes Conversão e Validação Tratando Eventos Ciclo de Vida de uma Requisição PhaseListeners Ajax e JSF Usando componentes (JBoss Richfaces) Gerenciamento de Layout com Facelets
3
JSF - Introdução
O que é o Java Server Faces Framework para simplificar o desenvolvimento de
aplicações WEB Baseado em Componentes Conjunto de componentes GUI para WEB Modelo orientado a eventos Ciclo de vida de requisição bem definido. O desenvolvedor não precisa se preocupar com
detalhes sobre HTTP Não é limitado a HTML Container IoC (provê injeção de dependências)
C
4
JSF - Introdução
O que é o Java Server Faces (cont.)
O
Vantagens Componentes GUI personalizados POJOs (Plain Old Java Object ): Objeto sem herança nem implementa interfaces. Tratamento de Eventos Conversão e Validação Suporte a outras tecnologias de transporte e
apresentação Managed Beans Expression Language Configuração mais simples
5
JSF - Introdução
Design MVC
6
JSF - Introdução
Primeira Aplicação Bibliotecas (Sun RI)
B
jsf-api.jar jsf-impl.jar
j
jstl.jar Configurações
web.xml faces-config.xml
Páginas jsp, html, js, css, etc...
7
JSF - Introdução
Criando um projeto JSF no Eclipse Passo I:
Criar no projeto do tipo Dynamic Web Project Preencher o nome do projeto: CursoJsf Configurar o servidor de aplicação: Tomcat 6.0
Passo II: Configurar as versões: Web=2.5, Java=6.0, JSF=1.2
Passo III: Configurar os parâmetros: root=cursojsf,
content=web, source=src Passo IV:
Configurar o mapeamento do JSF: “*.jsf”
8
JSF - Introdução
9
JSF - Introdução
10
JSF - Introdução
11
JSF - Introdução
12
JSF - Introdução
Exemplo: web.xml<?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"id="WebApp_ID" version="2.5"><display-name>CursoJsf</display-name><welcome-file-list>
<welcome-file>default.jsp</welcome-file></welcome-file-list><!-- Java Server 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></web-app>
13
JSF - Introdução
Exemplo: faces-config.xml<?xml version="1.0" encoding="UTF-8"?><faces-config xmlns="http://java.sun.com/xml/ns/javaee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd"version="1.2">
<application><resource-bundle>
<base-name>SystemMessages</base-name><var>msg</var>
</resource-bundle><locale-config>
<default-locale>pt_BR</default-locale></locale-config>
</application></faces-config>
14
JSF - Introdução
Exemplo: default.jsp<%@taglib uri="http://java.sun.com/jstl/core" prefix="c" %><c:redirect url="/index.jsf" />
Exemplo: index.jsp<%@taglib prefix="c" uri="http://java.sun.com/jstl/core" %><%@taglib prefix="h" uri="http://java.sun.com/jsf/html" %><%@taglib prefix="f" uri="http://java.sun.com/jsf/core" %><f:view><html><head>
<title> <h:outputText value="Página Inicial" />
</title></head><body>
<h:outputText value="Página Inicial" /></body></html></f:view>
15
JSF - Gerenciando a Navegação
Fluxo da requisição:
16
JSF - Gerenciando a Navegação
Gerenciando a Navegação Definida usando Regras de Navegação
Configurado no faces-config.xml <navigation-rule> <from-view-id>/login.jsp</from-view-id>(opcional) <navigation-case > <from-action>#{loginBean.login}</from-action>(opcional) <from-outcome>sucesso</from-outcome> <to-view-id>/index.jsp</to-view-id> <redirect/> (opcional) </navigation-case></navigation-rule>
Estática – Configurado na própria página Dinâmica – Saída de uma Action
17
JSF - Gerenciando a Navegação
Exemplo: faces-config.xml...<!-- Navigation --><navigation-rule>
<navigation-case><from-outcome>index</from-outcome><to-view-id>/index.jsp</to-view-id><redirect />
</navigation-case></navigation-rule>
<navigation-rule><navigation-case>
<from-outcome>ajuda</from-outcome><to-view-id>/ajuda.jsp</to-view-id><redirect />
</navigation-case></navigation-rule>...
18
JSF - Gerenciando a Navegação
Exemplo: index.jsp<%@taglib prefix="c" uri="http://java.sun.com/jstl/core" %><%@taglib prefix="h" uri="http://java.sun.com/jsf/html" %><%@taglib prefix="f" uri="http://java.sun.com/jsf/core" %><f:view><html><head>
<title><h:outputText value="Página Inicial" />
</title></head><body>
<h:form><h:commandLink action="ajuda" value="Página de ajuda" />
</h:form></body></html></f:view>
19
JSF - Gerenciando a Navegação
Exemplo: ajuda.jsp<%@taglib prefix="c" uri="http://java.sun.com/jstl/core" %><%@taglib prefix="h" uri="http://java.sun.com/jsf/html" %><%@taglib prefix="f" uri="http://java.sun.com/jsf/core" %><f:view><html><head><title>
<h:outputText value="Página de Ajuda" /></title></head><body>
<h:form><h:outputText value="Texto da ajuda!" /><br /><h:commandButton action="index"
value=“Voltar" /></h:form>
</body></html></f:view>
20
JSF - Gerenciando a Navegação
Exercício: Crie uma página de sobre, onde esta deverá
conter as informações do sistema e do autor Crie uma navegação da página de ajuda para a
página de sobre Crie uma navegação da página de sobre para a
página de ajuda
21
JSF - Message Bundles
Message Bundles Centralizar mensagens em um único lugar Arquivo .properties do tipo chave=valor Suporte a mensagens com parâmetros Suporte a internacionalização
22
JSF - Message Bundles
Configuração: SystemMessages.properties
#Page: indexpage.index.title=Página Inicialpage.index.link.ajuda=Visualizar ajuda!#Page: ajudapage.ajuda.title=Página de Ajudapage.ajuda.texto=Texto da ajuda!
faces-config.xml<faces-config> <!-- Configurações gerais do JSF -->
<resource-bundle> <base-name>SystemMessages</base-name> <var>msg</var> </resource-bundle> <locale-config> <default-locale>pt_BR</default-locale> </locale-config>
<faces-config>
23
JSF - Message Bundles
Exemplo: index.jsp<%@taglib prefix="c" uri="http://java.sun.com/jstl/core" %><%@taglib prefix="h" uri="http://java.sun.com/jsf/html" %><%@taglib prefix="f" uri="http://java.sun.com/jsf/core" %><f:view><html><head>
<title><h:outputText value="#{msg['page.index.title']}" />
</title></head><body>
<h:form><h:commandLink action="ajuda"
value="#{msg['page.index.link.ajuda']}" /></h:form>
</body></html></f:view>
24
JSF - Message Bundles
Exemplo: ajuda.jsp<%@taglib prefix="c" uri="http://java.sun.com/jstl/core" %><%@taglib prefix="h" uri="http://java.sun.com/jsf/html" %><%@taglib prefix="f" uri="http://java.sun.com/jsf/core" %><f:view><html><head><title>
<h:outputText value="#{msg['page.ajuda.title']}" /></title></head><body>
<h:form><h:outputText value="#{msg['page.ajuda.texto']}" /><br /><h:commandButton action="index"
value="#{msg['commons.voltar']}" /></h:form>
</body></html></f:view>
25
JSF - Message Bundles
Exercício: Configure um Message Bundle. Altere todas as páginas criadas até agora para
usar somente o Message Bundle configurado.
A partir de agora, somente usaremosMessage Bundles
26
JSF - Managed Beans
Managed Beans Usados para separação entre as lógicas de
negócio e de apresentação O que são Beans?
Definição de JavaBean : “a reusable software component that can be manipulated in a builder tool”
Construtor Vazio Propriedades privadas, acessadas por métodos get e
set (getXyz, setXyz)
s
Não é necessário herdar de nenhuma classe em especial (POJO)
e
No JSF também são chamados de backing beans Gerenciados pelo Framework
27
JSF - Managed Beans
Managed Beans (cont.)
M
Definidos no faces-config.xml Nome, classe, propriedades e escopo Propriedades para os dados do Form Métodos Action (Controller)
M
Propriedades para valores de saída Associados a páginas WEB através da EL Instanciados e inicializados pelo Container
28
JSF - Managed Beans
Exemplo: GuessNumberBean.javapublic class GuessNumberBean {
/** Numero a ser adivinado. */private Integer numero;/** Palpite do usuário. */private Integer palpite;/** Tentativas. */private Integer tentativas;/** Mensagem de erro. */private String mensagem;/* Gerar get e set. */public String init() {
numero = (int) (1 + (Math.random() * 100));palpite = null;mensagem = "page.guess.label.branco";return "guess";
}public String guess() {
if (palpite.equals(numero)) {mensagem = "page.guess.acerto";
} else if (numero.compareTo(palpite) < 0) {mensagem = "page.guess.menor";
} else {mensagem = "page.guess.maior";
}tentativas++;return "guess";
}}
29
JSF - Managed Beans
Exemplo: faces-config.xml<faces-config> ... <!-- Managed Beans --> <managed-bean> <managed-bean-name>guessBean</managed-bean-name> <managed-bean-class> br.com.cursojsf.view.GuessNumberBean </managed-bean-class> <managed-bean-scope>session</managed-bean-scope> <managed-property> <property-name>tentativas</property-name> <value>0</value> </managed-property> </managed-bean> ... <navigation-rule> <navigation-case> <from-outcome>guess</from-outcome> <to-view-id>/guess.jsp</to-view-id> <redirect/> </navigation-case> </navigation-rule> ...</faces-config>
30
JSF - Managed Beans
Exemplo: guess.jsp<%@taglib prefix="c" uri="http://java.sun.com/jstl/core" %><%@taglib prefix="h" uri="http://java.sun.com/jsf/html" %><%@taglib prefix="f" uri="http://java.sun.com/jsf/core" %><f:view><html><head>
<title><h:outputText value="#{msg['page.guess.title']}" />
</title></head><body>
<h:form id="guessForm"><h:commandLink id="link" action="#{guessBean.init}“
value="#{msg['page.guess.label.iniciar']}" /><br/><br/><h:outputLabel for="palpite" value="#{msg['page.guess.label.numero']}: " /><h:inputText id="palpite" value="#{guessBean.palpite}" /><h:commandButton value="#{msg['page.guess.label.enviar']}“
action="#{guessBean.guess}" /><br/><br/><h:outputFormat id="outtext" value="#{msg[guessBean.mensagem]}" styleClass="error">
<f:param value="#{guessBean.tentativas}" /></h:outputFormat><hr/><h:commandButton action="index" value="#{msg['commons.voltar']}" />
</h:form></body></html></f:view>
31
JSF - Managed Beans
Ciclo de uma requisição:
32
JSF - Managed Beans
Exercício: Construir a página “Adivinhe o número”
33
JSF - JSF Expression Language
JSF Expression Language Bastante semelhante a EL JSP 2.0
Forma de uso: #{blah} Usado nas páginas e no faces-config.xml (DI)
U
Fácil acesso as propriedades de um bean #{loginBean.email}, #{loginBean.senha}, #{usuarioBean.usuario.nome}, #{usuarioBean.usuario.endereco.logradouro}
Acesso a objetos implícitos (session, request, application)
A
Acesso a propriedades e métodos dos beans Acesso simples a elementos de uma coleção Suporte a operadores (or, and, eq, lt, gt, +, -, etc)
S
34
JSF - JSF Standard Tags
JSF Standard Tags Disponibilizadas pelo JSF Componentes Base para desenvolvimento Duas bibliotecas: html e core (43 tags no total)
D
São taglibs (importadas através da diretiva taglib)
S
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %> <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
35
JSF - JSF Standard Tags
Biblioteca core Serve como suporte para html (e outras)
S
Toda página de ter um <f:view> Raiz da árvore de componentes
Tag <f:loadBundle> usada para carregar arquivo .properties
Na versão 1.2 não é mais necessário declarar A maioria das tags representam objetos a serem
adicionados a componentes Atributos, Listeners, Converters, Validators, Facets,
Parametros, Select Items
36
JSF - JSF Standard Tags
Biblioteca Html Biblioteca de componentes Html
Componentes para entrada e saída de dados Outros: forms, mensagens, componentes de layout
Tags da lib html form, inputText, inputTextArea, inputSecret, inputHidden, outputLabel, outputLink, outputFormat, outputText, commandButton, commandLink, message, messages, graphicImage, selectOneListBox, selectOneMenu, selectOneRadio, selectBooleanCheckbox, SelectManyCheckbox, SelectManyListbox, SelectManyMenu, panelGrid, panelGroup, dataTable, column
37
JSF - JSF Standard Tags
Biblioteca html Categorias
Input (input...)
)
Output (output...)
)
Comandos ou actions (commandButton, commandLink)
)
Seleção (checkbox, listbox, menu, radio)
)
Layout (panelGrid, panelGroup)
)
Data Table (dataTable)
)
Erros e Mensagens (message, messages)
)
38
JSF - JSF Standard Tags
Biblioteca html Atributos Comuns a todos
HTML 4.0 (accesskey, lang, dir, etc) e eventos DHTML (onclick, onmouseover, onchange, etc)
id – Identificador para o componente binding – Usado para referenciar componente em um
backing bean rendered – Booleano indicando se o componente será
mostrado styleClass – Nome da classe CSS
39
JSF - JSF Standard Tags
Biblioteca html Outros Atributos
value – Valor do componente (I, O, C)
v
valueChangeListener – Método que responde a uma mudança no valor do componente (I)
m
converter – Conversor associado ao componente (I, O)
c
validator – Validador associado ao componente (I)
v
required – Booleano indicando se o campo é obrigatório (I)
o
40
JSF - JSF Standard Tags
Biblioteca html - IDs e Bindings IDs
Permite acessar elementos HTML através de javascript Permite referenciar componentes em outras tags<h:inputText id="nomeUsuario" value="#{usuarioBean.nome}" /><h:message for="nomeUsuario" errorStyle="color: #FF0000;" />
Permite referencia componentes no código JavaFacesContext context = FacesContext.getCurrentInstance();UIComponent nome =
context.getViewRoot().findComponent("nomeUsuario");
41
JSF - JSF Standard Tags
Biblioteca html - IDs e Bindings Bindings “Liga” o componente a uma propriedade do backing bean <h:inputText id="palpite" value="#{guessBean.palpite}"
binding="#{guessBean.palpiteInput}" />/** * Input do palpite. */private UIInput palpiteInput;public UIInput getPalpiteInput() { return palpiteInput;
}
public void setPalpiteInput(UIInput palpiteInput) { this.palpiteInput = palpiteInput;
}
42
JSF - JSF Standard Tags
Exemplo: GuessNumberBean.javapublic String init() {
numero = (int) (1 + (Math.random() * 100));palpite = null;mensagem = "page.guess.label.branco";if (palpiteInput != null) {
palpiteInput.setRendered(true);}return "guess";
}public String guess() {
if (palpite.equals(numero)) {mensagem = "page.guess.acerto";palpiteInput.setRendered(false);} else if (numero.compareTo(palpite) < 0) {
mensagem = "page.guess.menor";} else {
mensagem = "page.guess.maior";}tentativas++;return "guess";
}
43
JSF - JSF Standard Tags
Exercício: Alterar a página “guess.jsp” e o bean
“GuessNumberBean.java” para contemplar o binding.
44
JSF - JSF Standard Tags
DataTable Componente para mostrar dados de forma
tabular Renderiza a tag <table> do HTML Não é necessário Loops. É só usar Definição de Cabeçalho e Rodapé É configurável por CSS
headerClass – classe css para o cabeçalho footerClass – classe css para o rodapé rowClasses – classe para as linhas (lista separada por
vírgula)
45
JSF - JSF Standard Tags
Exemplo: usuarios.jsp<%@ page language="java" contentType="text/html; charset=ISO-8859-1“
pageEncoding="ISO-8859-1"%><%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%><%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%><f:view><html><head>
<title><h:outputText value="#{msg['page.usuarios.title']}" /></title></head><body><h:form> <h:dataTable value="#{usuarioBean.listaUsuarios}" var="usuario“ border="1" cellspacing="0" cellpadding="2"> <h:column> <f:facet name="header"> <h:outputText value="#{msg['page.usuarios.label.cpf']}" /> </f:facet> <h:outputText value="#{usuario.cpf}" /> </h:column>...
46
JSF - JSF Standard Tags
Exemplo: usuarios.jsp (cont.) <h:column> <f:facet name="header"> <h:outputText value="#{msg['page.usuarios.label.nomeReduzido']}" /> </f:facet> <h:outputText value="#{usuario.nomeReduzido}" /> </h:column> <h:column> <f:facet name="header"> <h:outputText value="#{msg['page.usuarios.label.email']}" /> </f:facet> <h:outputLink value="mailto:#{usuario.email}"> <h:outputText value="#{usuario.email}" /> </h:outputLink> </h:column> <h:column> <f:facet name="header"> <h:outputText value="#{msg['page.usuarios.label.dataNascimento']}" /> </f:facet> <h:outputText value="#{usuario.dataNascimento}" /> </h:column>...
47
JSF - JSF Standard Tags
Exemplo: usuarios.jsp (cont.) </h:dataTable> <hr/> <h:commandButton action="index" value="#{msg['commons.voltar']}" /></h:form></body></html></f:view>
48
JSF - JSF Standard Tags
Exemplo: UsuarioBean.javapublic class UsuarioBean { /** Referencia para a camada de regras de negocio */ private UsuarioBusiness usuarioBusiness; /** Usuario a serusado no form. */ private Usuario usuario = new Usuario(); /** Armazena o usuario logado apos a autenticacao */ private Usuario usuarioLogado;
/* Gerar gets e sets */
public List<Usuario> getListaUsuarios() { return usuarioBusiness.selecionarTodos(); }}
49
JSF - JSF Standard Tags
Exemplo: faces-config.xml<managed-bean> <managed-bean-name>usuarioDao</managed-bean-name> <managed-bean-class>br.com.cursojsf.dao.impl.UsuarioDaoImpl</managed-bean-class> <managed-bean-scope>application</managed-bean-scope></managed-bean><managed-bean> <managed-bean-name>usuarioBusiness</managed-bean-name> <managed-bean-class>br.com.cursojsf.business.impl.UsuarioBusinessImpl</managed-bean-class> <managed-bean-scope>application</managed-bean-scope> <managed-property> <property-name>usuarioDao</property-name> <value>#{usuarioDao}</value> </managed-property></managed-bean>
50
JSF - JSF Standard Tags
Exemplo: faces-config.xml (cont.)<managed-bean> <managed-bean-name>usuarioBean</managed-bean-name> <managed-bean-
class>br.com.cursojsf.view.UsuarioBean</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> <managed-property> <property-name>usuarioBusiness</property-name> <value>#{usuarioBusiness}</value> </managed-property></managed-bean><navigation-rule> <navigation-case> <from-outcome>usuarios</from-outcome> <to-view-id>/usuarios.jsp</to-view-id> </navigation-case></navigation-rule>
51
JSF - JSF Standard Tags
Exercício: Construa a consulta de usuários Construa o cadastro de usuários
Página de consulta deve ter: Um link para edição Botão para adicionar um novo usuário Botão para excluir usuário
Página de edição deve ter: Form para alterar/incluir usuário
Veja os exemplos a seguir
52
JSF - JSF Standard Tags
Exemplo: usuarios.jsp...<h:commandLink action="usuariosEditar"> <h:outputText value="#{usuario.cpf}" /> <f:setPropertyActionListener target="#{usuarioBean.usuario}" value="#{usuario}"/> </h:commandLink><h:column> <f:facet name="header"> <h:outputText value="#{msg['commons.excluir']}" /> </f:facet> <h:commandButton action="#{usuarioBean.excluir}" value="#{msg['commons.excluir']}"> <f:setPropertyActionListener target="#{usuarioBean.usuario}" value="#{usuario}"/> </h:commandButton></h:column>...<h:commandButton action="#{usuarioBean.novo}" value="#{msg['commons.novo']}" />
53
JSF - JSF Standard Tags
Exemplo: usuariosEditar.jsp<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%><%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%><f:view><html><head> <title><h:outputText value="#{msg['page.usuarios.title']}" /></title></head><body> <h:form id="usuarioForm"> <h:panelGrid columns="2"> <h:outputLabel for="idInput" value="#{msg['page.usuarios.label.id']}:" /> <h:inputText id="idInput" value="#{usuarioBean.usuario.id}" /> <h:outputLabel for="cpfInput" value="#{msg['page.usuarios.label.cpf']}:"/> <h:inputText id="cpfInput" value="#{usuarioBean.usuario.cpf}" /> <h:outputLabel for="nomeReduzidoInput" value="#{msg['page.usuarios.label.nomeReduzido']}:" /> <h:inputText id="nomeReduzidoInput" value="#{usuarioBean.usuario.nomeReduzido}" />
54
JSF - JSF Standard Tags
Exemplo: usuariosEditar.jsp <h:outputLabel for="nomeCompletoInput" value="#{msg['page.usuarios.label.nomeCompleto']}:" /> <h:inputTextarea id="nomeCompletoInput" value="#{usuarioBean.usuario.nomeCompleto}" rows="5" cols="20"/> <h:outputLabel for="emailInput" value="#{msg['page.usuarios.label.email']}:" /> <h:inputText id="emailInput" value="#{usuarioBean.usuario.email}" /> <h:outputLabel for="senhaInput" value="#{msg['page.usuarios.label.senha']}:" /> <h:inputText id="senhaInput" value="#{usuarioBean.usuario.senha}" /> </h:panelGrid> <hr/> <h:commandButton action="#{usuarioBean.salvar}" value="#{msg['commons.salvar']}" /> <h:commandButton action="usuarios" value="#{msg['commons.voltar']}" /> </h:form></body></html></f:view>
55
JSF - JSF Standard Tags
Exemplo: faces-config.xml<navigation-rule> <navigation-case> <from-outcome>usuariosEditar</from-outcome> <to-view-id>/usuariosEditar.jsp</to-view-id> </navigation-case></navigation-rule> Exemplo: UsuarioBean.javapublic String novo() { usuario = new Usuario(); return "usuariosEditar";}public String salvar() { usuarioBusiness.salvarUsuario(usuario); return "usuarios";}public String excluir() { usuarioBusiness.excluirUsuario(usuario); return "usuarios";}
56
JSF - JSF Standard Tags
Recursos de implementação JSP: <f:setPropertyActionListener>
Carrega propriedade de um Managed Bean Destino: target="#{usuarioBean.usuario}“ Origem: value="#{usuario}"
Faces-config.xml: <redirect /> Envia comando http para o browser efetuar nova
requisição para a página desejada Não deve ser usada em conjunto com beans que estão
em escopo de request Como o browser faz nova requisição, apenas os objetos que
estão na sessão estarão visíveis.
57
JSF - Modelo de Componentes
O que são componentes UI? Idioma bem definido para projeto de UIs São elementos configuráveis e reutilizáveis que
compõem a interface da aplicações JSF Podem ser simples, como um botão, ou
composto, como uma tabela, de múltiplos componentes
Extensíveis através de composição e herança São acessados através tags JSP
58
JSF - Modelo de Componentes
59
JSF - Modelo de Componentes
Modelo de Componentes Conjunto de classes javax.faces.component.UIComponent especificando o estado e o comportamento dos componentes UI
Modelo de Renderização. Define como renderizar (“mostrar”) os componentes de diferentes maneiras
Modelo de Eventos e Listeners que define como tratar os eventos dos componentes
Modelo de conversão que define como diferentes conversores são “plugados” nos componentes
Modelo de validação que define como registrar validadores em um componente
60
JSF - Modelo de Componentes
Modelo de Componentes UIComponent Classes
Define a funcionalidade do componente (comportamento e estado)
(
JSF provê um conjunto de classes UIComponent. É possível estender essas classes para criar componentes personalizados
A maioria dos componentes podem ser mostrados de formas diferentes (ex. commandButton e commandLink)
c
UICommand, UIForm, UIGraphic, UIInput, UISelectBoolean, UISelectMany, UISelectOne, etc
61
JSF - Modelo de Componentes
Modelo de Componentes Modelo de Renderização – RenderKit
A renderização é manipulado pelo Render Kit, não pelo componente em si
O Render Kit define como componentes serão mostrados para um cliente em particular
A implementação do JSF inclui um Render Kit para clientes HTML 4.01
Os Render Kits podem usar um look and feel (skin)
O
Podem ser específicos para um plataforma (celular, PC) ou linguagem de marcação (HTML, WML, SVG, etc)
e
Podem ser mudados “on the fly”
62
JSF - Modelo de Componentes
Modelo de Componentes Modelo de Renderização – Renderer Object
Definir o comportamento de um componente uma vez, e criar vários renderizadores (commandButton e commandLink)
c
Para cada componente que o Render Kit suporta, existe um conjunto de Renderer Objects
Define como um componente irá ser mostrado. O UISelectOne define três Renderer Objects diferentes
Combo Box Radio Button List Box
63
JSF - Modelo de Componentes
FacesContext Contém todas as informações sobre estado
relacionadas ao processamento de uma única requisição
É passado para, e potencialmente modificado por, cada fase do ciclo de vida da requisição
Acessado através de el #{facesContext} ou nos Beans através do método FacesContext.getCurrentInstance()
F
64
JSF - Modelo de Componentes
Exemplo: FacesContextpublic String autenticar() { try { usuarioLogado = usuarioBusiness.autenticarUsuario( usuario.getCpf(), usuario.getSenha()); return "principal"; } catch (UsuarioInvalidoException e) { FacesMessage message = new FacesMessage(); message.setSeverity(FacesMessage.SEVERITY_ERROR); message.setDetail("Usuário ou senha inválidos!"); FacesContext.getCurrentInstance() .addMessage("loginForm", message); return null; }}
65
JSF - Conversão e Validação
Conversão e Validação – Converters Em aplicações WEB os dados enviados do cliente
são sempre Strings Java é uma linguagem tipada Precisamos converter os dados enviados JSF provê Conversores para todos os tipos
básicos do Java (Date, Integer, Double, Long)
b
Convertem o valor dos componentes de e para string
Aplicam formatação ou internacionalização Podemos definir novos conversores e associar aos
componentes
66
JSF - Conversão e Validação
Exemplo: corverters<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %><%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %><f:view>...<h:form> ... <h:outputText value="#{msg['page.usuarios.cpf']}" /> <h:inputText id="ganhosUsuario" value="#{usuarioBean.usuario.ganhos}"> <f:convertNumber type="currency"/> </h:inputText> <h:message for="ganhosUsuario" /> <h:outputText value="#{msg['page.usuarios.cpf']}" /> <h:inputText id="cpfUsuario" value="#{usuarioBean.usuario.cpf}" converter="converters.CpfConverter" /> <h:message for="cpfUsuario" /> <h:outputText value="#{msg['page.usuarios.dataNascimento']}" /> <h:inputText id="dataNascimentoUsuario" value="#{usuarioBean.usuario.dataNascimento}"> <f:convertDateTime pattern="dd/MM/yyyy"/> </h:inputText> <h:message for="dataNascimentoUsuario" /> ...</h:form></body></html></f:view>
67
JSF - Conversão e Validação
Conversão e Validação – Converters É possível definir Converters Implementar Interface javax.faces.convert.Converter
Métodos getAsString e getAsObject Registrar o converter no faces-config.xml.
Reutilizar em várias partes da aplicação Defini-se um id para o converter Associa o converter a uma classe . Todas as instâncias
dessa classe utilizaram esse converter (<converter-for-class>)
)
Associar ao componente desejado
68
JSF - Conversão e Validação
Exemplo: CpfConverter.javapublic class CpfConverter implements Converter { public Object getAsObject(FacesContext context, UIComponent component, String value) throws ConverterException { if (value != null && !value.equals("")) { String cpf = value.replaceAll("\\.", "").replaceAll("\\-", ""); try { // Testa se somente existem numeros. Long.valueOf(cpf); return cpf; } catch (NumberFormatException e) { FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_ERROR, "Erro de conversão", "Não foi possível converter o valor para um
cpf"); throw new ConverterException(message); } } return value; } public String getAsString(FacesContext context, UIComponent component, Object value) throws ConverterException { String cpf = (value == null? null: value.toString()); if (cpf != null && !cpf.equals("") { cpf = cpf.substring(0, 3) + "." + cpf.substring(3, 6) + "." + cpf.substring(6, 9) + "-" + cpf.substring(9); } return cpf; }}
69
JSF - Conversão e Validação
Exemplo: faces-config.xml<faces-config> ... <converter> <converter-id>converters.CpfConverter</converter-id> <converter-class> br.com.cursojsf.view.converters.CpfConverter </converter-class> </converter> ...</faces-config> Exemplo: usuariosEditar.jsp<h:inputText id="cpfInput" value="#{usuarioBean.usuario.cpf}" converter="converters.CpfConverter" />
ou<h:inputText id="cpfInput" value="#{usuarioBean.usuario.cpf}"> <f:converter converterId="converters.CpfConverter" /></h:inputText>
70
JSF - Conversão e Validação
Conversão e Validação – Validators Tarefa que praticamente toda aplicação web precisa
Verifica se todos os campos obrigatórios foram preenchido corretamente
Mostrar página novamente se ocorrer algum problema Para campos obrigatórios o JSF provê o atributo required Provê também validação básicas (domínio e tamanho)
P
<f:validateDoubleRange maximum="1" minimum="2"/> <f:validateLongRange maximum="1" minimum="2"/> <f:validateLength maximum="3" minimum="3"/>
Podemos definir nosso próprio Validator Por default não suporta validação do lado do cliente :-(
71
JSF - Conversão e Validação
Exemplo: validators<h:outputText value="#{msg['page.usuarios.nome']}: " /><h:inputText id="nomeUsuario" value="#{usuarioBean.usuario.nome}" required="true"> <f:validateLength minimum="5"/></h:inputText><h:message for="nomeUsuario" errorClass="erro" /><h:outputText value="#{msg['page.usuarios.dependentes']}: " /><h:inputSecret id="numeroDependentesUsuario" value="#{usuarioBean.usuario.numeroDependentes}"> <f:validateLongRange maximum="3"/></h:inputSecret><h:message for="senhaUsuario" errorClass="erro" /><h:outputText value="#{msg['page.usuarios.senha']}: " /><h:inputSecret id="senhaUsuario" value="#{usuarioBean.usuario.senha}" required="true"> <f:validateLength minimum="6" maximum="10"/></h:inputSecret><h:message for="senhaUsuario" errorClass="erro" />
72
JSF - Conversão e Validação
Exemplo: usuarioEditar.jsp<h:inputText id="cpfInput" value="#{usuarioBean.usuario.cpf}" required="true">
Dica: Como exibir asmensagens em Português Brasil? Veja o conteúdo da biblioteca
de implementação do JSF (jsf-impl-?.?_??.jar) Abra o arquivo Messages.properties Salve-o no pacote “javax.faces” no “src” do seu projeto
com o nome de “Messages_pt_BR.properties” Edite o conteúdo do arquivo
73
JSF - Conversão e Validação
Conversão e Validação – Validators Duas maneiras de implementar validação Implementar a interface javax.faces.validator.Validator
Criar a classe que será o Validador Registrar no faces-config.xml Associar aos componentes desejados
Usar um método do backing bean para validação Método deve seguir a segunda assinatura:void validaCpf(FacesContext ctx, UIComponent comp, Object value) throws ValidatorException
Associar ao componente usando el:<h:inputText id="cpfUsuario" value="#{usuarioBean.usuario.cpf}" validator="#{usuarioBean.validaCpf}">
74
JSF - Conversão e Validação
Exemplo: CpfValidator.javapublic class CpfValidator implements Validator { public void validate(FacesContext context, UIComponent component, Object value) throws ValidatorException { if (value != null) { String valor = value.toString(); if (!ValidacaoHelper.validaCpf(valor)) { FacesMessage message = new FacesMessage(); message.setSeverity(FacesMessage.SEVERITY_ERROR); message.setSummary("Erro de Validação"); message.setDetail("CPF Inválido"); throw new ValidatorException(message); } } }}
75
JSF - Conversão e Validação
Exemplo: faces-config.xml<faces-config> ... <validator> <validator-id>validators.CpfValidator</validator-id> <validator-class> br.com.cursojsf.view.validators.CpfValidator </validator-class> </validator> ...</faces-config> Exemplo: usuariosEditar.jsp<h:inputText id="cpfInput" value="#{usuarioBean.usuario.cpf}" required="true"> <f:validator validatorId="validators.CpfValidator" /></h:inputText>...<h:commandButton action="usuarios" value="#{msg['commons.voltar']}"
immediate="true" />
76
JSF - Conversão e Validação
Atributo “immediate” Presente em <h:commandButton> e
<h:commandLink> Informa ao faces que este deve pular a fase de
ApplyRequetValues e Validation
77
JSF - Tratando Eventos
Eventos e Listeners Usa o modelo de eventos JavaBean (semelhante
ao Swing)
a
Componentes criam eventos que são “consumidos” por Listeners
Listeners podem ser métodos de um backing bean ou uma classe uma classe separada
Quando o cliente ativa um componente (apertar um botão), um evento é disparado
78
JSF - Tratando Eventos
Eventos e Listeners Duas variedades de eventos UI
Eventos que disparam processamento back-end Eventos que afetam apenas a forma da interface
Código para tratar esses eventos: action controllers e event listeners
Action Controllers (Action) lida com o envio completo do form
Disparados após preenchimento das propriedades do bean
Disparados após lógicas de validação Retorna Strings que afetam a navegação
79
JSF - Tratando Eventos
Eventos e Listeners (cont.)
E
Event Listeners lidam com eventos da UI Geralmente são disparados antes do preenchimento
das propriedades do bean Geralmente pula a fase de validação Não afeta a navegação (continua na página atual)
N
80
JSF - Tratando Eventos
Tipos de Listeners ActionListener
Disparados por commandButton ou commandLink <h:commandButton>,<h:commandLink>
Automaticamente envia o form ValueChangeListener
Disparados por combo boxes, checkboxes, radio buttons, textfields e outros
Não enviam o form automaticamente
81
JSF - Tratando Eventos
Action Listeners Método de um backing bean ou classe separada
Método deve seguir a seguinte assinaturapublic void nomeDoMetodo(ActionEvent event)
Implementar interface javax.faces.event.ActionListenerpublic interface ActionListener extends FacesListener { void processAction(ActionEvent actionEvent) throws AbortProcessingException;}
Associar listener a um componente Caso seja uma classe<h:commandButton action="#{usuarioBean}"
value="Mostar/Esconder Ajuda" /> Caso seja um método<h:commandButton action="#{usuarioBean.mostraEsconderAjuda}" value="Mostar/Esconder Ajuda" />
82
JSF - Tratando Eventos
ValueChangeListeners Método de um backing bean ou classe serparada
Método deve seguir a seguinte assinaturapublic void nomeDoMetodo(ValueChangeEvent event)
Implementar interface javax.faces.event.ValueChangeListenerpublic interface ValueChangeListener extends FacesListener { void processValueChange(ValueChangeEvent event) throws AbortProcessingException;}
Associar listener a um componente Caso seja uma classe<h:checkBox valueChangeListener="#{usuarioBean}" value="#{usuarioBean.mostrarAjuda}"
onclick="this.form.submit()" /> Caso seja um método<h:selectOneMenu
valueChangeListener="#{usuarioBean.mudarTipoRelatorio}" value="#{usuarioBean.tipoRelatorio}">
83
JSF - Tratando Eventos
Exemplo: guess.jsp<h:inputText id="palpite" value="#{guessBean.palpite}" binding="#{guessBean.palpiteInput}" valueChangeListener="#{guessBean.onChange}" onblur="this.form.submit()"></h:inputText> GuessBean.java
public void onChange(ValueChangeEvent event) { if (event.getNewValue() == null) { mensagem = "page.guess.digiteNumero"; } else { mensagem = "page.guess.label.branco"; } }
84
JSF - Ciclo de Vida da Requisição
Existem seis fases no ciclo de vida de um requisição 1. Restore view 2. Apply request values 3. Process validations 4. Update model values 5. Invoke application 6. Render response
85
JSF - Ciclo de Vida da Requisição
Modelo de requisição:
86
JSF - Ciclo de Vida da Requisição
1. Restore view O controlador examina a requisição que vem do
FacesServlet e extrai o “view ID”, que é determinado pelo nome da página JSP.
View State Restore Method Pode ser configurado no web.xml<context-param>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name> <param-value>client</param-value> </context-param> Tem dois valores possíveis:
client = salva o estado no browser (menor consumo de memória e maior tráfego de rede)
server = salva o estado no servidor (maior consumo de memória e menor tráfego de rede)
87
JSF - Ciclo de Vida da Requisição
2. Apply Request Values Cada componente deverá recuperar seu estado
corrente. Os valores das propriedades dos componentes
devem ser extraídas dos parâmetros do “request”, de “cookies” ou do “header” da requisição
88
JSF - Ciclo de Vida da Requisição
3. Process Validation Cada componente (propriedade “value”) será validado de
acordo com as regras de validação definidas na aplicação As regras de validação são definidas através dos
“validators” Cada valor é então validado e caso seja inválido, uma
mensagem de erro é adicionada no FacesContext e o componente é marcado como inválido
Se um componente for marcado como inválido, o JSF pula para a fase “Render Response”
Caso nenhum componente esteja inválido o JSF passa para a próxima fase
89
JSF - Ciclo de Vida da Requisição
4. Update Model Values Sua principal atividade é atribuir os valores
informados pelo usuário no formulário, para as respectivas propriedades associadas aos BackBeans (também conhecidos como Managed Beans)
Essa atribuição é feita utilizando o “converter” definido para o componente
Pode haver erro na conversão, fazendo com que o JSF dispare um erro de tempo de execução
90
JSF - Ciclo de Vida da Requisição
5: Invoke application Nesta fase o controlador (controller) do JSF
chama o método associado no submit, disparando assim a camada de regras de negócio da aplicação
Todos os valores foram validados e carregados nas fases anteriores, por isso poderemos usá-los conforme necessitar.
Métodos ou outcomes carregados na propriedade “action” dos componentes
91
JSF - Ciclo de Vida da Requisição
6.Render Response Fase responsável por montar a resposta onde
cada componente é processado e o resultado é unificado aos demais
92
JSF - PhaseListeners
PhaseListeners São componentes capazes de escutar as fases do
ciclo de vida de uma requisição Devem implementar a interface
javax.faces.event.PhaseListener public void beforePhase(PhaseEvent event);
Determina o código que será executado antes entrar na fase public void afterPhase(PhaseEvent event);
Determina o código que será executado após concluir a fase public PhaseId getPhaseId()
Determina qual fase dverá ser escutada. Valores possíveis estão na classe “javax.faces.event.PhaseId”
93
JSF - PhaseListeners
Exemplo: MyPhaseListener.javapublic class MyPhaseListener implements PhaseListener { private static final long serialVersionUID = 7700487457990644826L;
/** Metodo executado antes da fase. */ public void beforePhase(PhaseEvent event) { System.out.println("Antes da fase: " + event.getPhaseId()); } /** Metodo executado depois da fase. */ public void afterPhase(PhaseEvent event) { System.out.println("Depois da fase: " + event.getPhaseId()); } /** Metodo que indica qual fase sera "escutada". */ public PhaseId getPhaseId() { return PhaseId.ANY_PHASE; }}
94
JSF - PhaseListeners
Exemplo: faces-config.xml<faces-config>... <lifecycle> <phase-listener> br.com.cursojsf.view.listeners.MyPhaseListener </phase-listener> </lifecycle>...</faces-config>
95
JSF - PhaseListeners
Exercício: Criar um PhaseListener para validação e
autenticação de usuário. Criar uma página de login e logout Criar as regras de navegação no faces-config.xml Criar método de autenticação no UsusarioBean
96
JSF - PhaseListeners
Exemplo: LoginPhaseListener.javapublic class LoginPhaseListener implements PhaseListener { public void afterPhase(PhaseEvent event) { FacesContext context = event.getFacesContext(); String viewId = context.getViewRoot().getViewId(); UsuarioBean usuarioBean = (UsuarioBean) context.getApplication() .evaluateExpressionGet(context, "#{usuarioBean}", UsuarioBean.class); if (viewId.equals("/logout.jsp") || viewId.equals("/login.jsp")) { ExternalContext externalContext = context.getExternalContext(); HttpSession httpSession = (HttpSession) externalContext.getSession(false); httpSession.invalidate(); } else if (usuarioBean.getUsuarioLogado() == null) { navigateToView(context, "login"); } } private void navigateToView(FacesContext context, String view) { Application application = context.getApplication(); NavigationHandler navigationHandler = application.getNavigationHandler(); navigationHandler.handleNavigation(context, null, view); } public void beforePhase(PhaseEvent event) { /* nop */ }
public PhaseId getPhaseId() { return PhaseId.RESTORE_VIEW; }}
97
JSF - PhaseListeners
Exemplo: faces-config.xml<faces-config>... <lifecycle> <phase-listener> br.com.cursojsf.view.listeners.LoginPhaseListener </phase-listener> </lifecycle>...</faces-config>
98
JSF - PhaseListeners
Exemplo: login.jsp<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%><%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%><f:view><html><head><title><h:outputText value="#{msg['page.login.title']}" /></title></head><body> <div align="center"> <h1>Login</h1> <h:form id="loginForm"> <h:message for="loginForm" errorStyle="color: red;" /> <h:panelGrid columns="3"> <h:outputLabel for="cpfInput" value="#{msg['page.login.label.cpf']}:" /> <h:inputText id="cpfInput" value="#{usuarioBean.usuario.cpf}" maxlength="11" size="12" required="true" /> <h:message for="cpfInput" errorStyle="color: red;" /> <h:outputLabel for="senhaInput" value="#{msg['page.login.label.senha']}:" /> <h:inputSecret id="senhaInput" value="#{usuarioBean.usuario.senha}" maxlength="11" size="12" required="true" /> <h:message for="senhaInput" errorStyle="color: red;" /> </h:panelGrid> <h:commandButton action="#{usuarioBean.autenticar}" value="#{msg['page.login.label.entrar']}" /> </h:form> </div></body></html></f:view>
99
JSF - PhaseListeners
Exemplo: logout.jsp<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%><%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%><f:view><html><head> <title> <h:outputText value="#{msg['page.logout.title']}" /> </title></head><body> <h1><h:outputText value="#{msg['page.logout.title']}" /></h1> <h:outputText value="#{msg['page.logout.mensagem']}" /> <h:form> <h:commandLink value="#{msg['page.index.title']}" action="index" /> </h:form></body></html></f:view>
100
JSF - PhaseListeners
Exemplo: faces-config.xml<faces-config> <managed-bean> <managed-bean-name>usuarioBean</managed-bean-name> <managed-bean-class>br...UsuarioBean</managed-bean-class> <managed-bean-scope>session</managed-bean-scope> ... </managed-bean> <navigation-rule> <navigation-case> <from-outcome>login</from-outcome> <to-view-id>/login.jsp</to-view-id> <redirect /> </navigation-case> </navigation-rule> <navigation-rule> <navigation-case> <from-outcome>logout</from-outcome> <to-view-id>/logout.jsp</to-view-id> <redirect /> </navigation-case> </navigation-rule></faces-config>
101
JSF - PhaseListeners
Exemplo: UsuarioBean.javapublic class UsuarioBean {... public String autenticar() { try { usuarioLogado = usuarioBusiness.autenticarUsuario( usuario.getCpf(), usuario.getSenha()); return "index"; } catch (UsuarioInvalidoException e) { FacesMessage message = new FacesMessage(); message.setSeverity(FacesMessage.SEVERITY_ERROR); message.setDetail("Usuário ou senha inválidos!"); FacesContext.getCurrentInstance() .addMessage("loginForm", message); return null; } }}
102
JSF – PhaseListeners
Exercício: Crie um BackBean capaz de alterar o idioma
corrente da aplicação. Altere a página inicial, adicionando um Combo
para chamar a alteração de idioma do bean criado.
Crie um Listener capaz perpetuar o idioma selecionada entre as requisições.
Veja os exemplos nos slides posteriores.
103
JSF – PhaseListeners
Exemplo: LocaleBean.javapublic class LocaleBean { private static final List<SelectItem> LOCALES; static { LOCALES = new ArrayList<SelectItem>(2); LOCALES.add(new SelectItem("pt_BR", "Português")); LOCALES.add(new SelectItem("en", "English")); } private String locale = "pt_BR"; public String getLocale() { return locale; } public void setLocale(String locale) { this.locale = locale; } public List<SelectItem> getLocaleList() { return LOCALES; }
public void changeLocale(ValueChangeEvent event) { locale = event.getNewValue().toString(); FacesContext.getCurrentInstance().getViewRoot() .setLocale(new Locale(locale)); }}
104
JSF – PhaseListeners
Exemplo: faces-config.xml<application> ... <locale-config> <default-locale>pt_BR</default-locale> <supported-locale>en</supported-locale> </locale-config></application><managed-bean> <managed-bean-name>localeBean</managed-bean-name> <managed-bean-class> br.com.cursojsf.view.LocaleBean </managed-bean-class> <managed-bean-scope>session</managed-bean-scope></managed-bean> Exemplo: index.jsp<h:selectOneMenu value="#{localeBean.locale}" valueChangeListener="#{localeBean.changeLocale}" onchange="this.form.submit()"> <f:selectItems value="#{localeBean.localeList}" /></h:selectOneMenu>
105
JSF – PhaseListeners
Exemplo: LocalePhaseListener.javapublic class LocalePhaseListener implements PhaseListener { public void afterPhase(PhaseEvent event) {/* nop */}
public void beforePhase(PhaseEvent event) { FacesContext context = event.getFacesContext(); LocaleBean localeBean = (LocaleBean) context.getApplication().evaluateExpressionGet( context, "#{localeBean}", LocaleBean.class); context.getViewRoot().setLocale( new Locale(localeBean.getLocale())); }
public PhaseId getPhaseId() { return PhaseId.RENDER_RESPONSE; }}
106
JSF – PhaseListeners
Exemplo: faces-config.xml...<lifecycle> <phase-listener> br.com.cursojsf.view.listeners.LocalePhaseListener </phase-listener> <phase-listener> br.com.cursojsf.view.listeners.LoginPhaseListener </phase-listener></lifecycle>...
107
JSF – Exercício Desafio
Exercício: Crie um cadastro mestre-detalhe das entidades
“Estado” e “Cidade”. Veja nos slides posteriores, como o exercício
deve ficar.
108
JSF – Exercício Desafio
inde
x.js
p
109
JSF – Exercício Desafio
esta
dos.
jsp
110
JSF – Exercício Desafio
esta
dosE
dita
r.js
p
111
JSF – Exercício Desafio
cida
desE
dita
r.js
p
112
JSF – Ajax4Jsf
Framework desenvolvido inicialmente pela Exadel e que mais tarde foi doado para a JBoss
Parte integrante do framework RichFaces Tem por objetivo adicionar suport a Ajax para
aplicações JSF. Extremamente fácil de utilizar
113
JSF – Ajax4Jsf
Como configurar Copiar os arquivos "richfaces-api-?.?.?.jar" , "richfaces-
impl-?.?.?.jar" , "richfaces-ui-?.?.?.jar" para a pasta "WEB-INF/lib" da aplicação.
Adicionar o filtro no web.xml <filter> <display-name>RichFaces Filter</display-name> <filter-name>richfaces</filter-name> <filter-class>org.ajax4jsf.Filter</filter-class> </filter> <filter-mapping> <filter-name>richfaces</filter-name> <servlet-name>Faces Servlet</servlet-name> <dispatcher>REQUEST</dispatcher> <dispatcher>FORWARD</dispatcher> <dispatcher>INCLUDE</dispatcher> </filter-mapping> <context-param> <param-name>org.richfaces.SKIN</param-name> <param-value>blueSky</param-value> </context-param>
114
JSF – Ajax4Jsf
Como configurar (cont.) Importar a taglib na página que desejar <%@ taglib prefix="a4j" uri="http://richfaces.org/a4j" %> Utilizar as tags <a4j:commandButton> ,
<a4j:commandLink>, <a4j:poll> ou <a4j:support>
<h:inputText id="palpite" value="#{guessBean.palpite}" binding="#{guessBean.palpiteInput}" valueChangeListener="#{guessBean.onChange}"> <a4j:support event="onkeyup" reRender="outtext" /> </h:inputText>
115
JSF – Ajax4Jsf
Como funciona: Adiciona suporte a chamada Ajax para Listeners
do JSF Atua sobre um evento JavaScript Re-renderiza um ou mais componentes (nomes
separados por “,”) <h:inputText id="palpite" value="#{guessBean.palpite}" binding="#{guessBean.palpiteInput}" valueChangeListener="#{guessBean.onChange}"> <a4j:support event="onkeyup" reRender="outtext" requestDelay="1000" /> </h:inputText> <h:outputFormat id="outtext" value="#{msg[guessBean.mensagem]}"> <f:param value="#{guessBean.tentativas}" /> </h:outputFormat>
116
JSF – Ajax4Jsf
Principais atributos: event: evento JavaScript (“onkeyup”,
“onmouseover”, “onclick”, etc.) reRender: ID do(s) componente(s) a ser(em) re-
renderizado(s) após receber a resposta da chmada Ajax
requestDelay: usado para regular o número de chamadas Ajax, ou seja, o evento só poderá ser disparado após X milisegundos.
117
JSF – Ajax4Jsf
Principais tags: <a4j:commandButton> e <a4j:commandLink>:
Usadas para enviar uma requisição Ajax no "onclick" Herdam de <h:commandButton> e
<h:commandLink> <a4j:poll>:
Usadas para enviar uma requisição Ajax através de um timer
<a4j:support>: Permite adicionar suporte a requisições Ajax para os
componentes padrões do JSF Permite disparar as requisições em eventos JavaScript
118
JSF – Ajax4Jsf
Principais tags: (cont.) <a4j:status>
Permite executar ou exibir informações sobre o andamento da requisição
<a4j:status startText="Aguarde" stopText="Concluído" />
<a4j:status> <f:facet name="start"> <h:graphicImage value="ajax_process.gif" /> </f:facet> <f:facet name="stop"> <h:graphicImage value="ajax_stoped.gif" /> </f:facet></a4j:status>
<a4j:status startText="#{msg['commons.aguarde']}" stopText="#{msg['commons.concluido']}" />
119
JSF – RichFaces
Framework desenvolvido inicialmente pela Exadel e que mais tarde foi doado para a JBoos
Tem por objetivo adicionar interfaces de usuário mais ricas com suporte a Ajax para aplicações JSF.
Extremamente fácil de utilizar Dezenas de componentes Muito bem documentado com exemplos
120
JSF – RichFaces
Como configurar Copiar os arquivos "richfaces-api-?.?.?.jar" , "richfaces-
impl-?.?.?.jar" , "richfaces-ui-?.?.?.jar" para a pasta "WEB-INF/lib" da aplicação.
Adicionar o filtro no web.xml <filter> <display-name>RichFaces Filter</display-name> <filter-name>richfaces</filter-name> <filter-class>org.ajax4jsf.Filter</filter-class> </filter> <filter-mapping> <filter-name>richfaces</filter-name> <servlet-name>Faces Servlet</servlet-name> <dispatcher>REQUEST</dispatcher> <dispatcher>FORWARD</dispatcher> <dispatcher>INCLUDE</dispatcher> </filter-mapping> <context-param> <param-name>org.richfaces.SKIN</param-name> <param-value>blueSky</param-value> </context-param>
121
JSF – RichFaces
Como configurar (cont.) Importar a taglib na página que desejar <%@ taglib prefix="rich" uri="http://richfaces.org/rich" %> Utilizar as tags:
<rich:panel header="#{msg['page.login.title']}"> ... </rich:panel> Exemplos em:
122
JSF – Facelets
Introdução: A principal funcionalidade é auxiliar no gerenciamento de layout
Similar ao Tiles e SiteMesh, sendo mais parecido com o segundo Funcionalidades
Compatível JSF 1.1 e JSF 1.2, tanto Sun's RI e Apache MyFaces. Implementação rápida de Templates/Decorators para Components e
Páginas Habilidade de especificar a árvore de UIComponent em arquivos
separados (UICompositions) Relatório de erro preciso em nível de Linha/Tag/Atributo Suporte completo a EL, incluindo funções Validação de EL em tempo de Build Configuração independente de XML Atributo 'jsfc' reservado que permite escrever tags HTML (jwcid Tapestry)
(Exemplo: <input id="bar" type="text" jsfc="h:inputText" value="#{foo.bar}"/>)
Funciona com qualquer RenderKit API independente do Web Container
123
JSF – Facelets
Como configurar: Copiar o arquivo "jsf-facelets-?.?.?.jar" para a pasta "WEB-INF/lib" da
aplicação. Adicionar parâmetros no web.xml <web-app> ... <context-param> <param-name>javax.faces.DEFAULT_SUFFIX</param-name> <param-value>.jspx</param-value> </context-param> <context-param> <param-name>facelets.DEVELOPMENT</param-name> <param-value>true</param-value> </context-param> <context-param> <param-name>facelets.REFRESH_PERIOD</param-name> <param-value>1</param-value> </context-param> ... </web-app>
124
JSF – Facelets
Como configurar: (cont.) Adicionar parâmetros no faces-config.xml
<faces-config> ... <application> ... <view-handler> com.sun.facelets.FaceletViewHandler </view-handler> ... </application> ...</faces-config>
Alterar as extenções das tags <to-view-id> para “*.jspx” no faces-config.xml
Renomear os arquivos citados nas tags <to-view-id> do faces-config.xml para “*.jspx”
125
JSF – Facelets
Como configurar: (cont.) Criar um arquivo de template: /templates/padrao.jspx<?xml version="1.0" encoding="ISO-8859-1" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"xmlns:c="http://java.sun.com/jstl/core" xml:lang="pt" lang="pt-br"><f:view><head> <title> <h:outputText value=": #{msg['application.name']} - #{msg['application.version']} : "/> <ui:insert name="title" /> </title> <link href="styles/padrao.css" rel="stylesheet" type="text/css" /></head><body> <h3><ui:insert name="title" /></h3> <hr/> <ui:insert name="body" /></body></f:view></html>
126
JSF – Facelets
Como configurar: (cont.) Altear todas as paginas para o seguinte formato:<?xml version="1.0" encoding="iso-8859-1" ?><jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0" xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:c="http://java.sun.com/jstl/core"><f:view><ui:composition template="/templates/padrao.jspx"> <ui:define name="title">#{msg['page.ajuda.title']}</ui:define> <ui:define name="body"> <h:form> <h:outputText value="#{msg['page.ajuda.texto']}" /><br /> <h:commandButton action="index" value="#{msg['commons.voltar']}" /> </h:form> </ui:define></ui:composition></f:view></jsp:root>
127
JSF – Facelets
Como configurar: (cont.) Cuidado especial no LoginPhaseListener que
implementamos pois usamos “*.jsp” na implementação.
128
JSF - Referências
The J2EE(TM) 1.5 Tutorial http://java.sun.com/j2ee/1.5/docs/tutorial/doc/
Core Servlets http://www.coreservlets.com/
Strecks (Java 6) http://strecks.sourceforge.net/
The Server Side http://www.theserverside.com/
IBM developerWorks http://www-128.ibm.com/developerworks
top related