JavaServer Faces – JSF
Fernando Freitas Costa
Bacharel em Sistemas de Informação
Pós-Graduando em Gestão e Docência Universitária
blog.fimes.edu.br/fernando
nando@fimes.edu.br
JSF - Introdução
É a especificação para um framework de
componentes para desenvolvimento web em java.
Definida por meio da Java Community Process
(JCP)
◦
Interesse do mercado, não da SUN.
◦
Empresas como Apache, Fujitsu, HP, IBM, Macromedia,
Novell, Oracle, Siemens e Sun participam
Baseada no padrão de projeto MVC
JSF - Introdução
Possui duas implementações bem
conhecidas:
◦
Sun Mojarra – implementação de referência
◦
MyFaces da Apache
Com qualquer uma delas, pode-se
JSF - Ferramentas
Existe uma série de ferramentas no
mercado, tanto pagas quanto gratuitas que
permitem trabalhar com JSF. Ex:
◦
Eclipse
◦
NetBeans
◦
Macromedia Dreamweaver com extensões
JSTL e JSF
◦
MyEclipse
◦
Oracle JDeveloper
JSF - Características
Permite que o desenvolvedor crie UIs
através de um conjunto de componentes UIs
pré-definidos;
Associa os eventos do lado cliente com os
manipuladores dos eventos do lado do
servidor (os componentes de entrada
possuem um valor local representando o
estado no lado servidor);
Fornece separação de funções que envolvem
Características
Fornece um conjunto de tags JSP para
acessar os componentes;
Reutiliza componentes da página;
Utiliza Ajax em alguns de seus
componentes tornando alguns processos
mais rápidos e eficientes.
JSF - Vantagens
MVC para aplicações web
Componentes extensíveis
Boa demanda do mercado
JSF – Componentes
A especificação do JSF fornece um conjunto de
componentes visuais básicos em sua implementação de
referência.
Inclui duas bibliotecas de componentes básicos:
◦
Biblioteca “HTML” (sigla h): possui componentes que
representam diversos elementos HTML e a biblioteca
◦
Biblioteca “Core” (sigla f): responsável por tarefas comuns no
desenvolvimento de sistemas, como internacionalização,
JSF - Componentes
Os principais componentes que a implementação de
referência do JSF fornece são:
◦
Formulários
◦
Campos de entrada de texto
◦
Campo de entrada de senha
◦
Rótulos com textos
◦
Textos de uma única linha
◦
Links
◦
Botões
◦
Mensagens
◦
Painéis
◦
Tabela HTML
◦
Tabela de dados (grid)
JSF – Biblioteca HTML
Tag Descrição
body Representa a tag <html> do HTML button Cria um link <input type=“button”> column Coluna de dados em um <h:dataTable> commandButton Gera um botão de submit ou reset
commandLink Gera um link. Precisa estar dentro de um <h:form> dataTable Representa uma tabela html
form Representa o formulário html graphicImage Representa a tag <img> do html head Representa a tag <head> do html
inputHidden Gera um campo invisível. Correspondente a <input type=“hidden”> inputSecret Gera um campo de senha. Correspondente a <input
type=“password”> Declaração:
JSF – Biblioteca HTML
(continuação)Tag Descrição
inputText Gera um campo de texto. Correspondente a <input type=“text”> inputTextarea Gera um campo de texto multilinha. Correspondente a
<textarea></textarea>
link Cria um link <a href> cujos parâmetros podem ser montados com as tags <f:param> aninhadas.
message Mostra o texto das mensagens de erro ou alerta associados ao componente
messages Mostra todas as mensagens de erro geradas.
outputLabel Gera uma tag <label> que pode estar associada a um campo da tela. outputLink Gera um link html com a tag <a href>
outputText Gera em tela o texto especificado no atributo value.
panelGrid Permite montar um layout para a disposição de componentes
panelGroup Permite agrupar componentes para que sejam interpretados como um só por panelGrid.
JSF – Biblioteca HTML
(continuação)Tag Descrição
selectManyCheckBox Gera uma lista de componentes <input type=“checkbox”/> do html, com base em valores fornecidos pelas tags <f:selectItem/> ou
<f:selectItems/>
selectManyListbox Gera um componente <select> com várias linhas visíveis, no qual é possível selecionar vários itens ao mesmo tempo.
selectManyMenu Gera um componente <select> com apenas uma linha visível, no qual é possível selecionar vários itens ao mesmo tempo.
selectOneListbox Gera um componente <select>, no qual é possível selecionar apenas um item por vez.
selectOneRadio Gera uma linha de componentes <input type=“radio”/> do html, com base em valores fornecidos pelas tags <f:selectItem/> ou <f:selectItems/>
Confira exemplos de uso dos componentes HTML em:
JSF – Biblioteca Core
Tag Descrição
actionListener Permite registrar uma ação a ser realizada por um componente ajax Permite registrar um evento ajax ou uma ação ajax a ser
realizada pelo acionamento de um botão, por exemplo attribute Configura um atributo para a tag pai que a contiver convertDateTime Configura um conversor para data e hora
converter Permite registrar um conversor personalizado convertNumber Configura um conversor numérico
event Permite registrar uma classe para ser acionada em determinados eventos relativos a um componente.
selectItem Adiciona um item de valor a um componente de seleção selectItems Adiciona uma coleção de itens a um componente de seleção
Declaração:
JSF – Biblioteca Core
(continuação)Tag Descrição
setPropertyActionLis tener
Permite atribuir um valor a um determinado alvo (propriedades de beans) na execução de uma ação. Essa ação pode ser, por exemplo, o acionamento de um <h:commandButton> ou
<h:commandLink>. Isto é especialmente utilizado na criação de botões ou links para cada linha de tabelas ou listas geradas, em que cada botão/link acionado em cada linha trabalhará com um valor diferente.
validateRegex Registra um validador de expressões regulares
validator Registra um validador para o componente pai. Esse validador deve ser uma implementação da interface javax.faces.validator.Validator. valueChangeListener Permite registrar uma ação a ser executada quando o valor do
componente for alterado no envio do formulário. Confira exemplos de uso destas tags em:
JSF - Exemplo
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html">
<h:head> <title>JSF 2.0 Hello World</title> </h:head>
<h:body> <h3>JSF 2.0 Hello World Example - hello.xhtml</h3> <h:form>
<h:inputText value="#{helloBean.name}"></h:inputText> <h:commandButton value="Welcome Me"
action="welcome"></h:commandButton> </h:form>
</h:body> </html>
JSF – Componentes adicionais
Por ser uma especificação formal e segura, permite
desenvolvimento de ferramentas e componentes.
Como exemplo de componentes para JSF temos:
calendários, DataGrids com paginação, ordenação, etc.
Exemplos de bibliotecas de componentes mais comuns:
◦
Tomahawk, da Apache MyFaces
◦
Trinidad, da Apache MyFaces
◦
Tobago, da Apache MyFaces
◦
RichFaces, da JBoss
◦
ICEFaces, da ICESoft
JSF – Passos Iniciais
Existem 4 passos básicos para iniciar o
desenvolvimento em JSF:
◦
Criação da classe Backing Bean (classe
JavaBean ou apenas Bean)
◦
Mapeamento da classe Bean
◦
Criação da página JSF
JSF – Classe Bean
Mas afinal, o que é uma classe JavaBean?
“Um JavaBean normalmente é uma classe
(poderia ser mais de uma classe), mas uma
classe não é necessariamente um JavaBean.”
JSF – Classe Bean
Um bean tem como premissa a idéia de
encapsulamento. Assim sendo suas
variáveis devem obrigatoriamente serem
acessadas através de métodos.
Outra importante regra refere-se ao
construtor. Ele deve ser sem parâmetros.
Em relação aos métodos, eles podem
ser divididos em métodos de leitura e
de escrita.
JSF – Classe Bean
As convenções adotadas para dar nomes aos
métodos de um Bean são:
◦
public TipoDaPropriedade getNomeDaPropriedade()
◦
public void setNomeDaPropriedade(TipoDaPropriedade
varName)
Em relação as variáveis booleanas vale o mesmo
conceito, com o uso da palavra is ao invés do get.
◦
public void setNomeDaPropriedade(Boolean varName)
JSF – Classe Bean: Exemplo
public class Pessoa implements java.io.Serializable {
// atributos são declarados como private
private String nome; private boolean falecido;
// Construtor sem parâmetros
public Pessoa() { }
// getXxxx para acessar o valor do atributo
public String getNome() { return this.nome; }
// setXxxx para modificar o valor dos atributos
public void setNome(String nome) { this.nome = nome; }
// isXxxx para acessar atributos booleanos
public boolean isFalecido() { return this.falecido; }
// setXxxx para modificar atributos booleanos
public void setFalecido(boolean falecido) {this.falecido = falecido; }
JSF – PASSO 01: Criação da classe
Backing Bean
Classe bean que deve seguir os padrões já apresentados
anteriormente.
Fornecerá as informações exibidas na página e as
operações que serão executadas.
Para que uma página JSF acesse uma propriedade de um
Bean, ela precisa ter um método de acesso get.
Para que uma página JSF altere uma propriedade de um
Bean, ela precisa ter um método de modificação set.
Os métodos desta classe definem as operações da
página JSF. Eles devem ser do tipo void, quando não for
necessária navegação na página JSF, ou deve retornar
uma String que será utilizada para navegação através de
configurações feitas no arquivo faces-config.xml
JSF – PASSO 02: Mapeamento da
classe Bean
Após criada a classe Bean, ela ainda não pode ser
acessada, mesmo que tenha seguido todos os padrões
de nomenclatura. Para isso é necessário mapeá-la.
O mapeamento pode ser feito de duas formas:
◦
Através do arquivo faces-config.xml: Única forma disponível até a
versão 1.2 do JSF.
◦
Utilizando Anotações (Annotations): Modo mais fácil e prático
disponibilizado a partir do JSF 2.0. (Utilizaremos esta forma).
JSF – PASSO 02: Mapeamento da
classe Bean
Para registrar usando anotações, basta acrescentar a
anotação @ManagedBean do pacote javax.faces.bean
antes do nome da classe.
Se nenhum parâmetro for informado, o nome utilizado
será o mesmo da classe, porém com a 1ª letra
minúscula. Também podemos utilizar o parâmetro name.
Exemplo:
@ManagedBean(name=“meuBean”)
public class MeuBean implements java.io.Serializable{
... }
JSF – Mapeamento da classe Bean
Podemos definir o tempo de vida dessa classe Bean através da anotações.
Escopo Descrição
@ApplicationScoped Apenas uma instância da classe em toda a aplicação. Todos os usuários acessam a mesma instância.
@SessionScoped Existe uma instância para cada usuário
@RequestScoped Existe uma instância pelo tempo de duração da requisição feita pelo usuário
@NoneScoped Cada vez que houver uma chamada a uma propriedade ou método da classe Bean será criada uma nova instância @ViewScoped Armazena a instância da classe Bean na página exibida.
Enquanto esta estiver sendo manipulada, a mesma instância da classe Bean estará disponível
@CustomScoped(value=“ #{meuMap}”)
Armazena a instância da classe Bean em um java.util.Map declarado.
JSF - Exemplo
@ManagedBean
public class TesteBean { private int numero;
public void setNumero(int numero) { this.numero = numero;
}
public int getNumero() { return numero;
}
public void incrementaNumero() { this.numero = numero + 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:h=“http://java.sun.com/jsf/html”> <h:head> <title>Exemplo JSF</title> </h:head> <h:body> Valor: #{testeBean.numero} <h:form> <h:inputText value="#{testeBean.numero}" /> <h:commandButton value="Altera"/>
<h:commandButton value="Incrementa" action="#{testeBean.incrementaNumero}" /> </h:form>
</h:body> </html>
Página JSF
Classe Bean Mapeada
Acessa a propriedade numero Altera a propriedade numero
JSF – Construindo o Exemplo
Crie um novo Dinamic
Web Project com o
nome de
Exemplo01_jsf
No menu Configuration,
selecione JavaServer
Faces v2.0 Project.
Clique em Next>
JSF – Construindo o Exemplo
Clique em Next>
novamente
Em Web Module,
marque a opção
Generate web.xml
deployment
descriptor
Clique em Next>
JSF – Construindo o Exemplo
Em JSF Capabilities,
selecione a biblioteca
JSF 2.0...
Em URL Mapping
Patterns, informe
*.xhtml
Clique em Finish.
JSF – Construindo o Exemplo
Crie um novo HTML
File e dê o nome de
arq01.xhtml
JSF – Construindo o Exemplo
Selecione o modelo
New XHTML File
(1.0 transitional)
JSF – Construindo o Exemplo
Digite o código abaixo
JSF – Construindo o Exemplo
Crie uma nova classe
e chame-a de
TesteBean
De o nome bean ao
pacote desta classe.
Clique em Finish
JSF – Construindo o Exemplo
Digite o código abaixo
Em seguida, importe a classe javax.faces.bean
Pronto, agora execute o projeto.
JSF – PASSO 04: Mapeamento da
Navegação entre páginas
A navegação entre as páginas JSF pode ser
feita de duas formas:
◦
No arquivo faces-config. xml (única forma até
a versão 1.2)
◦
Navegação implícita (disponível a partir do JSF
2.0)
JSF – Mapeamento definido no
faces-config.xml
Baseado em dois pontos principais: a String
retornada pela classe Bean e o mapeamento
em si.
Regras básicas:
◦
navigation-rule: determina as regras de
navegação
◦
from-view-id: determina a origem da
requisição
◦
navigation-case: determina quais são os
destinos possíveis
◦
from-outcome: determina o nome de destino
JSF – Exemplo de mapeamento
definido no faces-config.xml
JSF – Navegação implícita
Parte do princípio que o nome do
outcome (destino) solicitado é o nome da
própria página a ser exibida.
Exemplo:
Neste exemplo, o JSF considerará que
deve ser aberta a página usuario.xhtml
public String novo(){ return “usuario”; }
JSF – Navegação implícita
A navegação implícita também funciona
com caminhos mais completos. Ex:
Página de Origem Destino (outcome) Página resultante
/publico/usuario.xhtml mostraUsuario /publico/mostraUsuario.xhtml /publico/usuario.xhtml /mostraUsuario /mostraUsuario.xhtml
/publico/usuario.xhtml /restrito/albumFotos /restrito/albumFotos.xhtml /publico/usuario.xhtml contrato.pdf /publico/contrato.pdf
JSF – Ciclo de Vida
Restaurar apresentação: Extrai da URL o nome da
página solicitada e carrega/recarrega os componentes
da página na memória, formando uma árvore de
objetos. Nasce a instância de FacesContext.
Aplicar valores requisitados: Atribui os valores
enviados na requisição à árvore de componentes na
memória. Se algum componente tiver o atributo
immediate=“true”, seus valores são enviados
diretamente para a propriedade correspondente na
classe Bean. Caso contrário isto só será feito mais
tarde.
Processar eventos: Percorre cada componente e
JSF – Ciclo de Vida
Processar validações: Percorre cada componente e valida
os valores informados. Se a validação falhar, o ciclo se
interrompe e a página é reexibida.
Atualizar valores do modelo: Com os dados já validados,
nesta fase, registra-se os dados nas respectivas propriedades
da classe Bean. Também é nesta fase que é feita as conversões.
Se qualquer conversão falhar, o ciclo se interrompe e a página
é reexibida.
Invocar aplicação: Nesta fase, o JSF acionará (se for o caso)
o método da classe Bean que acionou a requisição.
Renderizar resposta: Monta e devolve a página de resposta
ao navegador. A página devolvida é HTML gerado a partir de
cada componente JSF.
JSF - Conversões
As informações digitadas em um formulário e
enviadas para a aplicação são sempre do tipo
String.
Desta forma, algumas vezes pode ser necessário
realizar conversões destes dados para outros
tipos
JSF lida com as conversões de duas formas:
◦
Conversão implícita: Feita automaticamente pelo
JSF sem nenhum código do usuário. Realiza conversão
entre os tipos fundamentais do Java. Ex: Integer, Long,
Float, etc...
◦
Conversão explícita: Utilizada para trabalhar com
JSF – Conversões Explícitas
Para trabalhar com valores monetários, porcentagens,
entre outros, o JSF possui dois conversores padrão:
◦
f:convertNumber – permite conversões especiais em valores
numéricos. Ex:
◦
f:convertDateTime – permite conversões de datas. Ex:
Resultado
Resultado 02/06/2020
JSF - Mensagens
Podemos adicionar mensagens em nossa aplicação JSF. Para
isto devemos obter uma instância de FacesContext.
Em seguida chamamos o método addMessage(). Ele possui
3 parâmetros:
1.
ID do componente ou null para mensagens globais.
2.
Instância de FacesMessage. É composta por:
Severidade da mensagem. Valores válidos: SEVERITY_FATAL, SEVERITY_ERROR, SEVERITY_WARN, SEVERITY_INFO
Resumo da mensagem
JSF – Mensagens
As mensagens podem ser exibidas com:
◦
<h:message> - Exibe mensagens para um componente específico
◦
<h:messages> - Exibe todas as mensagens. Alguns atributos desta
tag:
errorStyle, fatalStyle, infoStyle, warnStyle – estilos CSS para mensagens de erro, fatais, de informação e de alerta respectivamente.
showDetail – Se true, exibe os detalhes da mensagem, caso contrário
exibe apenas o resumo.
globalOnly – Se true, exibe apenas as mensagens globais, caso contrário, exibe todas.
JSF e Banco de Dados
O JSF permite trabalhar com BD de forma
simples e independente, uma vez que se
apoia no modelo MVC.
Para trabalharmos com BD em JSF são
necessários 6 passos.
◦
Criação do banco de dados;
◦
Criação das tabelas;
◦
Criação da classe DAO;
◦
Criação da classe Bean;
◦
Mapeamento da classe Bean;
Passos 1 e 2 – Criação do Banco e da tabela
create database jsf_bd;
use jsf_bd;
create table usuario(
idUsuario integer not null auto_increment,
nome varchar(50) not null,
email varchar(50),
fone varchar(13) not null,
primary key (idUsuario)
) engine = InnoDB;
Passo 3 – Criação da classe Bean
A classe Bean irá ser o meio termo entre o dao e a página JSF.
Passo 4 – Criação da classe DAO
A classe DAO será responsável por lidar diretamente com o BD.
Passo 5 – Criação das páginas JSF
