apresentacao javaserver faces jsf

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

[email protected]

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

(Model-View-Controller)

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

desenvolver um projeto JSF.

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

◦ Java Studio Creator

JSF - Características

Permite que o desenvolvedor crie UIsatravés de um conjunto de componentes UIspré-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 a construção de aplicações Web.

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

Código aberto

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,

validação e conversão de dados de entrada.

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)

◦ Coluna de tabela de dados

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:

<html xmlns:h=“http://java.sun.com/jsf/html”>

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.

selectBooleanCheckbox Gera um único componente <input type=“checkbox” /> do HTML.

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:

http://www.exadel.com/web/portal/jsftags-guide




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:

<html xmlns:f=“http://java.sun.com/jsf/core”>

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"> <htmlxmlns="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

◦ PrimeFaces

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

◦ Mapeamento da navegação entre páginas.

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(TipoDaPropriedadevarName)

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)

◦ public Boolean isNomeDaPropriedade()

JSF – Classe Bean: Exemplopublic class Pessoa implements java.io.Serializable {

// atributos são declarados como privateprivate String nome; private boolean falecido;

// Construtor sem parâmetrospublic Pessoa() { }

// getXxxx para acessar o valor do atributopublic String getNome() { return this.nome; }

// setXxxx para modificar o valor dos atributospublic void setNome(String nome) { this.nome = nome; }

// isXxxx para acessar atributos booleanospublic boolean isFalecido() { return this.falecido; }

// setXxxx para modificar atributos booleanospublic 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).


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

@ManagedBeanpublic 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

Chama o método incrementaNumero

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>


Clique em Next>

novamente

Em Web Module,

marque a opção

Generate web.xml

deployment

descriptor

Clique em Next>


Em JSF Capabilities,

selecione a biblioteca

JSF 2.0...

Em URL Mapping

Patterns, informe

*.xhtml

Clique em Finish.


Crie um novo HTML

File e dê o nome de

arq01.xhtml

Clique em Next>


Selecione o modelo

New XHTML File

(1.0 transitional)

Clique em Finish.


Digite o código abaixo


Crie uma nova classe

e chame-a de

TesteBean

De o nome bean ao

pacote desta classe.

Clique em Finish


Digite o código abaixo

Em seguida, importe a classe javax.faces.bean

Pronto, agora execute o projeto.


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)

mais simples e direta

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

◦ to-view-id: determina a página 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

/publico/usuario.xhtml /modelos/contrato.pdf /modelos/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 executa os eventos registrados.


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 valores monetários, porcentagens, etc.

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 – Exemplo de Conversão

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

Detalhes 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;

◦ Criação da página JSF.

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.

OBS: Gerar getters e setters

Passo 4 – Criação da classe DAO A classe DAO será responsável por lidar diretamente com o BD.

Vejamos um exemplo simples:

Passo 5 – Criação das páginas JSF Neste exemplo usaremos 3 páginas: usuario.xhtml (código abaixo),

sucesso.xhtml e falha.xhtml.

apresentacao javaserver faces jsf

Documents