Introdução ao Java Server Faces

Introdução ao Java Server Faces

O que é Java Server Faces (JSF)?

•

É a especificação de um framework de

componentes para o desenvolvimento web

em Java, definido pela JCP.

•

JSF é baseado no padrão de projeto MVC

•

Programação através de componentes( o

controle é feito através de uma servlet

chamada Faces Servlet)

O que é Java Server Faces (JSF)?

•

Por ser uma especificação precisamos recorrer

a uma implementação do JSP:

– Mojarra – Implementação de referência.

http://javaserverfaces.java.net/

– _{MyFaces da Apache}

Histórico do Java Server Faces

•

Versão 1.0 (2004)

Desvantagens:

– Propunha situações que na prática não eram ideais

– Concorria com outros frameworks (Struts e Spring)

Vantagem:

– Era extensível

– Vários outros frameworks eram plugáveis a ele:

• Facelets • Ajax3jsf

Histórico do Java Server Faces

•

Versão 2.0 (2009)

Desvantagens:

– Integração custosa com frameworks de design

– Recursos limitados para sites responsivos

Vantagem:

– Nasceu de projetos reais

– Padrão de interfaces da especificação J2EE

– _{Suporte a anotações e escopo de Beans}

– Acrescentou diversos plugings

• Facelets • Ajax

Configuração do Ambiente

•

JDK (Java development kit -

)

•

Instalação do servidor Apache Tomcat

ou superior)

•

Eclipse

•

Instalação do MySQL e o WorkBench

Configuração do Ambiente

•

Faça o download do zip de instalação do

servidor Apache Tomcat e descompacte a pasta.

Descompacte o arquivo em um diretório desejado Ex: c:\

Configuração do Ambiente

•

Crie as seguintes variáveis de sistema:

Indique o diretório de instalação do Java

Indique o diretório que o Tomcat foi

Configuração do Ambiente

•

Verifique se o servidor está executando

corretamente:

1. Execute o arquivo startup.bat dentro da pasta “bin” 2. Digite no browser o endereço http://localhost:8080

Configuração do Ambiente

•

Configurando o Tomcat no Eclipse:

1. Clique no menu: Windows > Preference 2. Siga os passos abaixo:

Configuração do Ambiente

3. Clique com o botão direito do mouse dentro da aba

Configuração do Ambiente

Configuração do Ambiente

Dê um duplo clique em cima do servidor criado e verifique se as configurações

Preliminares

• Uma aplicação JSF deve respeitar a

estrutura geral de uma aplicação web Java. Ou seja, deve seguir uma

estrutura mínima de pastas e arquivos.

• A Faces Servlet deve ser configurada no arquivo

WEB-INF/web.xml, indicando a classe que a implementa e o padrão de url que será associado a essa servlet.

• Devemos adicionar um arquivo chamado faces-config.xml no

diretório WEB-INF. Nesse arquivo,podemos alterar diversas configurações do JSF

Criando a primeira aplicação

1. Siga os passos do arquivo “Criando um projeto JSF passo a passo.pdf” disponibilizado no site do professor.

2. Adicione a aplicação no servidor:

2.a) Clique com o botão direito do mouse 2.b) Escolha a opção de adicionar e remover

3. Insira na caixa “Configured” a aplicação que será carregada no servidor e clique em Finish:

4. Depois “inicie” o servidor =>

5. No browser digite o endereço da aplicação:

http://localhost:8080/wteste1/index.xhtml

Publicando a primeira aplicação

Aplicação escolhida para ser publicada

Visualizando a primeira aplicação

Visualizamos uma página simples, mas o desenvolvimento passa a ser interessante quando associamos elementos Java através dos ManagedBeans...

Managed Beans

• São Java Beans que servem como canais entre a interface gráfica (a página) e o back-end da aplicação (regras de negócio, acesso ao banco de dados, etc).

• Suas tarefas:

– Fornecer dados que serão exibidos nas telas. – Receber os dados enviados nas requisições.

– Executar tarefas de acordo com as ações dos usuários • Regras para a criação de um Managed Bean:

– Criar uma classe Java com a anotação @ManagedBean do pacote javax.faces.bean.

– Definir o escopo do managedbean (request é o padrão). – Implementar a interface Serializable

– Ter um construtor sem parâmetro

Exemplo com Managed Bean

import javax.faces.bean.ManagedBean; import javax.faces.bean.RequestScoped;

@ManagedBean(name="ola")

@RequestScoped

public class OlaMundo implements Serializable {

private static final long serialVersionUID = -4707094102414688584L; private String nome;

private String sobreNome; private String nomeCompleto; public OlaMundo() {

}

public void dizerOla(){

nomeCompleto = nome+" "+sobreNome; }

//get e o sets omitidos

A página xhtml referenciará a um objeto do tipo “OlaMundo” pelo nome “ola” e o

Exemplo com Managed Bean

<h:body> <h:form>

<h1>Olá #{ola.nomeCompleto} </h1>

Nome: <h:inputText value="#{ola.nome}"/> <br/>

Sobrenome: <h:inputText value="#{ola.sobreNome}"/> <br/>

<h:commandButton value="Dizer olá" action="#{ola.dizerOla}" /> </h:form>

</h:body> ...

Página primeiro.xhmtl inserida dentro do Diretório webapp

Estrutura geral de uma aplicação JSF

nova árvore de componentes que representa a tela desse usuário é gerada. Nas demais requisições (postback) desse

mesmo usuário, a árvore de componentes que representa a

tela anteriormente enviada a ele é reconstruída;

• Apply Request Values: Nesta etapa, a árvore construída na

etapa anterior é percorrida e cada um dos seus componentes é “decodificado”. No processo de decodificação, cada

componente extrai da requisição atual os dados associados a essa componente e se atualiza com essas informações;

Estrutura geral de uma aplicação JSF

possuem valores submetidos pelo usuário através de

formulários são convertidos e validados. Se ocorrer algum erro de conversão ou validação, mensagens de erro são adicionadas no contexto da requisição;

• UpdateModel Values: Os valores contidos em cada

componente da árvore, já convertidos e validados na fase anterior, são armazenados em propriedades de objetos definidos pela aplicação (managed beans);

Estrutura geral de uma aplicação JSF

já foram convertidos, validados e armazenados nos objetos do modelo, as tarefas correspondentes ao evento que disparou a requisição (normalmente um clique em um botão ou link)

serão executadas.

• Render Response: Nesta etapa, a próxima tela é gerada e

enviada ao navegador do usuário. Uma representação desta tela também é armazenada a fim de ser usada na fase Restore

Exemplo 2 com Managed Bean

import javax.faces.bean.ManagedBean; import javax.faces.bean.RequestScoped;

@ManagedBean

public class Maiusculo implements Serializable {

private static final long serialVersionUID = -4707094102414688584L; private String texto;

public Miusculo() { }

public void converte(){

this.texto = this.texto.toUpperCase(); }

//get e o set omitidos

Por padrão: a página xhtml referenciará a um objeto do tipo “Maiusculo” pelo nome

“maiusculo” e o escopo desse objeto é de requisição

Exemplo 2 com Managed Bean

...

<h:body>

<h:form>

<h:outputText value="Entre com o texto: "/> <h:inputText value="#{maiusculo.texto}" />

<h:commandButton value="Enviar"

action="#{maiusculo.converte}" />

</h:form>

</h:body> ...

Página maiusculo.xhmtl inserida dentro do Diretório webapp

Exemplo 3 com Managed Bean

import javax.faces.bean.ManagedBean; import javax.faces.bean.RequestScoped;

@ManagedBean

public class Aleatorio implements Serializable {

private static final long serialVersionUID = -4707094102414688584L; private int num;

private int numAleatorio; public Aleatorio() {

}

public void geraNumAleatorio(){

this.numAleatorio =

(int) (Math.random()*num); }

//get e o set omitidos

Por padrão: a página xhtml referenciará a um objeto do tipo “Aleatorio” pelo nome

“aleatorio” e o escopo desse objeto é de requisição

Exemplo 3 com Managed Bean

...

<h:body>

<h:form>

<h1>#{aleatorio.numAleatorio}</h1>

Nome: <h:inputText value="#{aleatorio.num}"/> <br/> <h:commandButton value="Gerar" action="#{aleatorio.geraNumAleatorio}" /> </h:form> </h:body> ...

Página aleatorio.xhmtl inserida dentro do Diretório webapp

Escopo do Managed bean

• O framework do JSF instanciará um objeto da classe

do managed bean. Todas as instâncias possuem um tempo de vida, que é definido pelo escopo

• Os escopos de managed beans JSF podem ser

definidos através de anotações do pacote javax.faces.bean:

– Request (padrão);

– View; – Session;

Escopo do Managed bean

• @RequestScoped (padrão): tem vida curta, começando quando é referenciado em uma única requisição HTTP e

Escopo do Managed bean

• @ViewScoped: a instância permanece ativa até que o usuário navegue para uma próxima página.

Escopo do Managed bean

• @SessionScoped: mantém a instância durante

diversas requisições e até mesmo navegações entre páginas, até que a sessão do usuário seja invalidada ou o tempo limite é

atingido. Cada usuário possui sua sessão de navegação, portanto, os objetos não são

compartilhados entre os usuários.

Escopo do Managed bean

• @ApplicationScoped: mantém a instância durante todo o tempo de execução da aplicação. É um escopo que

Exemplo de escopo

@ManagedBean @RequestScoped

public class Escopo implements Serializable{ private static final long serialVersionUID = 1L; private Carro carro = new Carro();

private List<Carro> carros = new ArrayList<>(); private String msg;

public Escopo() {

msg = "Criado em: "+

new SimpleDateFormat("dd/MM/yyyy HH:mm:ss:S").

format(new Date()); }

public void adicionaCarro(){

carros.add(carro); carro = new Carro(); }

// gets e sets omitidos

Exemplo de escopo

<h1> #{escopo.msg} </h1> <h:form>

<h:outputText value="Entre com a placa do carro: "/> <h:inputText value="#{escopo.carro.placa}" /><br/> <h:outputText value="Entre com a descricao: "/>

<h:inputText value="#{escopo.carro.descricao}" size="30" />

<h:commandButton value="Enviar" action="#{escopo.adicionaCarro}" /> </h:form>

<ol>

<ui:repeat var="c" value="#{escopo.carros}"> <li> #{c.placa} </li>

</ui:repeat> </ol>

...

Criando a visão: escopo.xhtml

O Componente “ui” é responsável por iterar um objeto do pacote

Exemplo de escopo

1) Insira dados sobre os carros e veja o que

acontece no escopo de requisição.

2) Altere o managed bean para o escopo de

sessão e veja se os dados são perdidos.

3) Em outro browser abra a aplicação e cadastre

mais carros e analise o resultado.

4) Mude o escopo para Application e veja como

o programa se comporta nos dois browsers.

5) Não esqueça de testar o escopo de visão

também. Saia da página e volte novamente

Navegação

•

Em JSF, navegação é um conjunto de regras

que define a próxima página a ser exibida

quando uma ação é executada pelo usuário.

Existem dois tipos básicos em JSF:

– Implícita

Navegação - Implícita

•

É uma string que será utilizada pelo tratador

de navegação do JSF para definir a próxima

tela que será apresentada ao usuário:

Nesse caso a página alvo seria “Ola.xhtml”

Obs: Além do nome, os outcomes também podem determinar o caminho do arquivo de resposta. Se o outcome começar com caractere “/”, esse caminho será definido a partir do diretório raiz da aplicação web . Caso contrário, será definido a partir do diretório atual.

Navegação – Implícita Dinâmica

•

Quando um action tem método como expressão,

o retorno do método deve ser o outcome da

navegação:

Quando o método retornar null, o usuário

permanecerá na mesma página

public String adicionar() { this.nomes.add(nome); if (this.nomes.size() > 3) { return "Ola"; } return null; }

Redirecionamento

•

Por padrão, uma requisição é despacha para

uma nova página. Se for necessário que seja

feito o redirecionamento, podemos passar o

parâmetro

faces-redirect=true

para o

outcome:

public String adicionar() { this.nomes.add(nome); if (this.nomes.size() > 3) { return "Ola?faces-redirect=true"; } return null; }

Navegação - Explícita

• As regras de navegação explícitas são declaradas no

arquivo faces-config.xml. Para declarar uma regra

explícita, precisamos informar o caminho da página de origem, um outcome com um nome qualquer e o

caminho da página de destino.

Página de origem

Página de destino

Navegação - Exercício

1. Crie uma pagina que tem a opção de lançar uma moeda (botão ou link). Caso o lançamento, que é feito de forma aleatória, seja “cara” o usuário será redirecionado para a página cara.xhtml, caso contrário ele será redirecionando para a página coroa.xhtml.

Componentes

• As páginas são definidas por componentes visuais,

criados através de tags. As principais bibliotecas de tags são:

– Core: existe para dar suporte às outras bibliotecas, e não

possui componentes visuais. Aprenderemos esta biblioteca no decorrer do curso, sempre que for necessário

– HTML: possui componentes que geram conteúdo visual,

como formulários, campos de entrada, rótulos de saída de textos, botões, links, seleções,painéis, tabela de dados, mensagens e etc.

– Facelets: é a biblioteca para criação de templates de

páginas.

Componentes

• Para usar as bibliotecas, temos que importá-las

através dos namespaces correspondentes:

As bibliotecas de tags são nomeadas com os prefixos f, h, ui e composite.Os prefixos podem ser modificados,

Componentes

• A propriedade id está presente em quase todos os componentes. Ela nos permite identificar os

componentes da página para referência posterior, através de classes Java ou outros componentes JSF, além de poder acessar os elementos da HTML através de scripts.

• A propriedade binding pode ser especificada com uma expressão de ligação que referencia uma propriedade do bean a um tipo de componente.

Componentes

• A propriedade rendered controla a renderização do componente. Se o valor ou o resultado da expressão for false, o componente não será desenhado na tela.

• Com as propriedades style e styleClass utilizar estilos CSS (Cascade Style Sheet) em componentes de modo

inline ou usando classes CSS

Componentes

O componente <h:inputText> renderiza um campo de

entrada de texto simples. Exemplos:

<h: inputText value ="#{user.nome}" readonly =“true" id=“nome" />

<h: inputText value ="#{user.cep}" maxlength ="9" id=" cep" />

Componentes

O componente <h:inputSecret> renderiza um campo de

entrada de senha. Exemplos:

<h: inputSecret value ="#{user.senha}" id=“senha" />

Componentes

• O componente <h:inputTextarea> renderiza um

campo de entrada de textos maiores, que podem ter várias colunas e linhas:

<h: inputTextarea value ="Um texto de várias linhas " cols ="10" rows ="3" id=" texto "/>

<h:inputTextarea cols="40" rows="3”

value="#{cadastroUsuarioBean.resumoCurriculo}"/>

Componentes

• Com o componente <h:inputHidden> pode-se

adicionar informações que são submetidas

automaticamente quando um formulário é enviado sem que o usuário veja os dados :

<h: inputHidden id="curso-id" value ="#{cursosBean . curso.id}" />

Componentes

• O componente <h:outputText> renderiza textos simples na página:

<h:outputText value="Bem-vindo"/>

<h:outputText value="#{seguranca.userNameLogado}“ style="font-weight: bold" />

<h: outputText value =" Curso : #{curso.sigla} - #{curso . descricao}"/>

Componentes

• O componente <h:outputFormat> renderiza textos parametrizados na página. Os textos parametrizados são compostos por espaços reservados (placeholders): <h:outputFormat value="Oi {0}! Existem {1} tarefas

pendentes.">

<f:param value="#{tarefa.nomeUsuario}" />

<f:param value="#{tarefa.qtdeTarefasPendentes}" /> </h:outputFormat>

Componentes

• O componente <h:outputLabel> renderiza o elemento

<label> da HTML. Os componentes deste tipo são vinculados com outros através do atributo for. O uso deste componente é justificado para rotular campos de seus formulários:

<h:form id="frm">

<h:outputLabel value="Nome:" for="nomeInput" /> <h:inputText id="nomeInput" values=“ ”/>

</h:form>

Componentes

• O componente <h:graphicImage> renderiza o

elemento <img> da HTML, que exibe uma imagem na página.

• Este componente permite você usar o caminho

relativo ao contexto, ou seja, você não precisa

informar o caminho do contexto da aplicação, pois é colocado automaticamente.

<h:graphicImage value="/imagens/logo.png"

width="200" height="36"/>

O arquivo logo.png deve ser colocado em src/main/webapp/imagens Imagens

A partir da raiz da aplicação

Componentes

• todos os recursos web, como imagens, CSS e

JavaScript, podem ser colocados no diretório

src/main/webapp/resources.

• Um subdiretório dentro de resources é considerado

como uma biblioteca (library) de recursos do projeto.

<h:graphicImage library=“imagens" name="logo.png” width="200" height="36"/>

Imagens

Outro forma seria:

Componentes

• O componente <h:selectOneMenu> renderiza um

menu de seleção única:

<h:selectOneMenu value="#{torcedor.timeFavorito}”> <f:selectItem itemValue=“Cruzeiro" />

<f:selectItem itemValue="Flamengo" /> </h:selectOneMenu>

<h:selectOneMenu value="#{torcedor.timeFavorito}”> <f:selectItem itemValue=“CR" itemLabel =“Cruzeiro”/> <f:selectItem itemValue="FL" itemLabel =“Flamengo”/> </h:selectOneMenu>

Caixas de Seleção

Atributo do tipo String no Managed bean

Para diferencia o valor salvo do valor exibido

Componentes

• Existem uma forma de inserir um item informativo que

não pode ser selecionado pelo usuário. Isso é feito da seguinte forma:

<h:selectOneMenu value="#{torcedor.timeFavorito}”>

<f:selectItem itemLabel =“Escolha um time"

noSelectionOption =“true"/>

<f:selectItem itemValue=“Cruzeiro" /> <f:selectItem itemValue="Flamengo" /> </h:selectOneMenu>

Componentes

• O componente <h:selectOneListbox> renderiza um

elemento de tamanho especificado para seleção de um item:

<h:selectOneListbox size="4“ value="#{torcedor.timeFavorito}”> <f:selectItem itemValue="Cruzeiro" /> <f:selectItem itemValue="Flamengo" /> <f:selectItem itemValue="Santos" /> <f:selectItem itemValue="Vasco" /> </h:selectOneListbox> Caixas de Seleção

Atributo do tipo String no Managed bean Quantidade de linhas exibidas

Componentes

• O componente <h:selectManyListbox> renderiza um

elemento de tamanho especificado para seleção de um ou mais itens:

<h:selectManyListbox size="4“ value="#{torcedor.times}”> <f:selectItem itemValue="Cruzeiro" /> <f:selectItem itemValue="Flamengo" /> <f:selectItem itemValue="Santos" /> <f:selectItem itemValue="Vasco" /> </h:selectManyListbox> Caixas de Seleção

Atributo do tipo String[] no Managed bean Quantidade de linhas exibidas

Componentes

• O componente <h:selectOneRadio> renderiza um

elemento do tipo radio para seleção de um item: <h:selectOneRadio layout="pageDirection">

<f:selectItem itemValue="M" itemLabel="Masculino" /> <f:selectItem itemValue="F" itemLabel="Feminino" /> </h:selectOneRadio>

• É possível alterar o layout com a propriedade layout

que recebe os valores pageDirection e lineDirection

(padrão)

Componentes

• O componente <h:selectManyCheckbox> renderiza um lista de checkboks para seleção de um ou mais item:

<h:selectManyCheckbox

layout="pageDirection“ value="{cadastro.assuntos}"> <f:selectItem itemValue="1" itemLabel="Java" />

<f:selectItem itemValue="3" itemLabel="Python" />

<f:selectItem itemValue="5" itemLabel="Métodos ágeis" /> </h:selectManyCheckbox>

• É possível alterar o layout com a propriedade layout que recebe os valores pageDirection e lineDirection (padrão) Botões de Seleção

Componentes

• Existem situações que precisamos que uma lista de itens seja obtida dinamicamente, para isso precisamos da tag

<f:selectItems> (no plural) :

<h:selectOneListbox size="5" value="#{cadastro.cidade}"> <f:selectItems value="#{cadastro.todasCidades}" /> </h:selectOneListbox>

<h:selectManyListbox value ="#{cadastro.siglasEscolhidas}"> <f:selectItems value ="#{cadastro.cursos}"

var =“curso" itemValue ="#{curso.sigla}" itemLabel ="#{curso.nome}" /> </h:selectManyListbox> Itens de Seleção Coleção de dados Coleção de dados

Componentes

• O componente <h:selectBooleanCheckbox> renderiza o

elemento do tipo checkbox. Use este componente para definir atributos booleanos:

<h:selectBooleanCheckbox id="aceite”

value="#{cadastro.termoAceito}"/> <h:outputLabel value="Li e aceito os termos e condições"

for="aceite"/>

Componentes

• O componente <h:commandButton> renderiza um

botão que pode ser do tipo do tipo submit (padrão), image ou reset e está relacionado a um formulário: <h:commandButton id="cadastrar" value="Cadastrar"

type="submit” action="#{cadastro.cadastrar}"/> <h:commandButton value="Limpar" type="reset"/>

<h:commandButton id="voltar" value="Voltar"

image="/imagens/voltar.png" action="home"/>

Componentes

• O componente <h:commandLink> renderiza um link e

está relacionado a um formulário:

<h:commandLink id="cadastrar" value="Cadastrar"

action="#{cadastro.cadastrar}"/>

<h:commandLink id="voltar" action="home">

<h:graphicImage value="/imagens/voltar.png" /> <h:outputText value="Voltar"/>

</h:commandLink>

Componentes

• Os componentes “command” apresentados nos slides

anteriores geram um requisição ao servidor. Caso precise de um link HTML utilize <h:outputLink>:

<h:outputLink value="http://www.algaworks.com" target="_blank"> <h:graphicImage library="algaworks" name="logo.png" /> </h:outputLink>

<h:outputLink value="http://www.algaworks.com" target="_blank"> <f:param name="codigo" value="931"/>

<f:param name="grupo" value="Java"/>

<h:graphicImage library="algaworks" name="logo.png" /> </h:outputLink>

Botões e links _GET

Componentes

• Os componentes <h:button> e <h:link>, por sua vez,

são usados para realizar requisições através do método GET.

• O JSF utiliza o atributo outcome de um para definir a

página de destino nesses componentes.

<h:button value ="Lista de cursos" outcome ="lista-cursos" />

<h:link value ="Home" outcome ="home" />

Esses componentes não são utilizados para submeter formulários HTML.

Componentes

• O componente <h:panelGrid> é usado para organizar componentes em forma de uma grade.

<h:panelGrid columns="2"> <f:facet name="header">

<h:outputText value="Dados para cadastro" /> </f:facet> <h:outputText value="Nome:" /> <h:inputText size="20" /> <h:outputText value="E-mail:" /> <h:inputText size="40" /> <h:outputText /> <h:commandButton value="Cadastrar" /> </h:panelGrid> Painéis Quantidade de colunas Componentes inseridos da esquerda para a direita, e de cima para baixo

Componentes

• O componente <h:panelGroup> permite que diversos

componentes sejam tratados como um único componente:

<h: panelGroup >

<h:outputLabel value =“Carga horária :" for =“carga - horaria "/> <h:graphicImage library =“imagens" name =“relogio.png" />

</h: panelGroup >

Painéis

O label e a imagem foram tratados como um único elemento e inseridos na mesma

Componentes

• O componente <h:dataTable> gera uma tabela HTML

Tabelas

<h:dataTable value="#{livrosBean.livros}" var="livro" border="1" cellspacing="0" cellpadding="2">

<f:facet name="header"> Relação de livros favoritos </f:facet> <h:column> <f:facet name="header">Título</f:facet> <h:outputText value="#{livro.titulo}" /> </h:column> <h:column> <f:facet name="header">Autor</f:facet> <h:outputText value="#{livro.autor}" /> </h:column> </h:dataTable>

A tabela deve estar associada com uma coleção

É opcional a criação de um

Componentes

Tabelas – outro exemplo

<h:dataTable value="#{cursoBean.cursos}" var=“curso"> <h:column> <f:facet name="header">Sigla</f:facet> <h:outputText value="#{curso.sigla}" /> </h:column> <h:column> <f:facet name="header">Nome</f:facet> <h:outputText value="#{curso.nome}" /> </h:column> <h:column>

<f:facet name=“header">Adicionar turma </f:facet > <h:commandLink

value=“Adicionar turma"

action="#{ cursosBean.adicionarTurma(curso)}" /> </h:column>

Componentes

• Os sistemas devem exibir mensagens de sucesso,

erros, advertências e etc. O componente <h:messages> é responsável por exibir mensagens de feedback:

<h:messages/>

<h:messages globalOnly =“true" />

<h:messages showDetail="true" showSummary="true" errorStyle="color: red" infoStyle="color: green"

warnStyle="color: orange" fatalStyle="color: gray" />

Componentes

• Os managed beans que são responsáveis por adicionar

mensagens para serem exibidas na página de resposta:

public void cadastrar() {

FacesContext context = FacesContext.getCurrentInstance();

FacesMessage mensagem = new FacesMessage("Cadastro efetuado."); context.addMessage(null, mensagem);

} //ou

public void cadastrar() {

FacesContext context = FacesContext.getCurrentInstance(); FacesMessage mensagem = new FacesMessage(

FacesMessage.SEVERITY_INFO, "Cadastro efetuado.", "Cliente " + this.nome + " cadastrado com sucesso."); context.addMessage(null, mensagem); } Mensagens Um parâmetro Várias informações podem ser fornecidas

Componentes

• Os componentes <h:outputStylesheet> e

<h:outputScript> podem ser usados para adicionar arquivos CSS e JavaScript da bilioteca de recursos do projeto:

<h:body>

<h:outputStylesheet library=“ifmg" name="estilo.css" />

<h:outputScript library=“ifmg" name="script.js” target="head"/> </h:body> Adicionando JavaScript e CSS Arquivo: estilo.css body { background-color: yellow } Arquivo: script.js alert('Olá!');

Conversores

• Os conversores são

responsáveis por converter os valores de uma requisição

HTTP tipo String para o tipo correto na linguagem Java (ex: inteiro, data)

• Os valores locais são

atualizados no modelo (nos beans) apenas se todas as conversões e validações forem bem sucedidas.

Conversores

<f:convertNumber>

Exemplo 01:

<h:inputText size="12" value="#{calculadoraBean.valorA}">

<f:convertNumber minFractionDigits="2" maxFractionDigits="2"

locale="pt_BR" /> </h:inputText>

<h:outputText value="#{calculadoraBean.resultado}">

<f:convertNumber type="currency" locale="pt_BR" /> </h:outputText>

Conversores

<f:convertNumber>

Exemplo 02:

<h: outputText value ="#{testeBean.numero}" > <f: convertNumber pattern =“#0.000" />

</h: outputText >

<h: outputText value ="#{testeBean.numero}" > <f: convertNumber type =“percent" />

</h: outputText >

<h: outputText value ="#{ testeBean.numero }" >

<f: convertNumber locale =“pt_BR " type =“currency" /> </h: outputText >

Conversores

<f:convertDateTime>

Exemplo 01:

... <h:messages showDetail="true" showSummary="false" />

<h:inputText size="12" value="#{calculadoraDataBean.dataBase}"> <f:convertDateTime pattern="dd/MM/yyyy" />

</h:inputText> +

<h:inputText size="12" value="#{calculadoraDataBean.dias}" /> dias =

<h:outputText value="#{calculadoraDataBean.resultado}"> <f:convertDateTime dateStyle="full" locale="pt_BR"/> </h:outputText>

<br/>

<h:commandButton

value="Adicionar”action="#{calculadoraDataBean.adicionar}" />....

Personalizando Conversores Padrão _{Soma dias}

Validadores

• Após a conversão, podemos verificar se os valores

obtidos respeitam determinadas restrições impostas pelas regras da aplicação. Ou seja, podemos validar os dados.

• Essa etapa como objetivo proteger o modelo contra

valores inválidos informados pelos usuários, evitando que fique em um estado inconsistente. O processo de validação ocorre após a conversão dos dados.

Validadores

<h: inputText value ="#{ testeBean .nome }"

id="campo-nome" required =“true"/>

<h: message for ="campo-nome"/> ou

<h: inputText value ="#{testeBean.nome}“ id="campo-nome"> <f:validateRequired />

</h:inputText >

<h:message for ="campo-nome"/>

Validadores

<h:inputText value ="#{testeBean.idade}" id="campo-idade">

<f:validateLongRange minimum="10" maximum=“130" />

</h:inputText >

<h:message for ="campo-idade"/> ou

<h:inputText value ="#{ testeBean.preco }" id="campo-preco">

<f:validateDoubleRange minimum =“20.57" maximum =“90.56" /> </h:inputText >

<h:message for ="campo-preco "/>

Validadores

<h:inputText value ="#{testeBean.nome}" id="campo-nome">

<f:validateLength minimum = "6" maximum = "20"/>

</h:inputText >

<h:message for="campo-nome"/> ou

<h:inputText value="#{testeBean.codigo}" id="campo-codigo"> <f:validateRegex pattern="[a-zA-Z]{6,20}"/>

</h:inputText>

<h:message for="campo-codigo"/>

Validadores padrão - Campo do tipo string

código tem pelo menos

6 e no máximo 20 caracteres, além de ser formada apenas por letras

Validadores

1. Crie uma página que deve receber o email, a data de nascimento e o nome do usuário, além de dois valores para serem somados.

2. Crie as seguintes validações:

– Nome deve ter entre 10 e 30 caracteres – Os valores devem ser entre 0 e 1000

– A data deve estar no formato dd/MM/yyyy

Criando o seu conversor

•

Os conversores que embutidos do JSF são úteis,

porém existem situações que é preciso criar um

conversor customizado;

•

Um conversor é uma classe que transforma

strings em objetos e objetos em strings

•

A implementação deve seguir os passos:

– criar uma classe que implementa a interface

javax.faces.convert.Converter

– Anote a classe com @FacesConverter

– implementar os métodos getAsObject() e

Criando o seu conversor

• Imagine que você têm um bean que faz referência a um

objeto Telefone: .... .... Lembre-se que o http trafega strings ao invés de objetos

Criando o seu conversor

Criando o seu conversor

Criando o seu conversor

O método para converter de objeto para string :

O conversor será chamado de forma automática

quando um objeto do tipo Telefone for associado a um componente

Criando o seu validador

•

Da mesma forma que os conversores, validadores

pode ser customizados;

•

Um validar é uma classe que verifica se os valores

obedecem certas restrições

•

A implementação deve seguir os passos:

– criar uma classe que implementa a interface

javax.faces. validator. Validator

– Anote a classe com @FacesValidator

Criando o seu validador

Exemplo com passagem de parâmetros para o

Criando o seu validador

Conversores e Validadores

1. Crie uma página que deve receber o CPF do usuário. 2. Crie um conversor e um validador para esse CPF,

essa classe pode ter três atributos string, um para armazenar o número, os outros dois para

armazenar separadamente cada dígito verificador.

Eventos

• Aplicações JSF são fortemente baseadas em eventos.

Esses eventos podem ser gerados pelos usuários:

– Clique em um botão ou link.

– Troca da opção escolhida em uma caixa de seleção.

ou pelo próprio JSF:

– Inicialização da aplicação.

– Erro no processamento de uma requisição.

• Um evento pode ser associado a procedimentos. No

JSF, os eventos são divididos em três categorias:

FacesEvent, PhaseEvent e SystemEvent.

A princípio, vamos nos preocupar com essa

Eventos

• Estes eventos são executados na fase Invocar a

aplicação do ciclo de vida JSF

• Os eventos podem ser listeners de ação ou

simplesmente ações

FacesEvent

Não contribui para a navegação das páginas, porém possui informações sobre o evento

Ações associadas a um

método público do tipo void ou String. Esse métodos

determinam a navegação das páginas. É como tratamos os eventos até o momento

Eventos

• Há dois tipos de listeners:

1. ActionEvent

2. ValueChangeEvent

• Para criar um actionlistener, precisamos criar um método em um managed bean que recebe um objeto do tipo

javax.faces.event.ActionEvent

• Para os eventos de mudança de valor os métodos recebem um objeto do tipo javax.faces.event.ValueChangeEvent.

• Use listener de ação se você quer executar algum código antes da lógica real do botão, como por exemplo, gerar log.

Eventos

public void mudaTexto(ActionEvent e) {

UICommand c = (UICommand) e.getComponent(); c.setValue("Clicado");

c.getAttributes().put("style", "color:red;"); System.out.println("executou o listener"); }

public String clicar(){

System.out.println("executou o action"); nome = nome.toUpperCase(); return null; } Exemplo - actionListener import javax.faces.component.UICommand; import javax.faces.event.ActionEvent;

Eventos

No arquivo xhtml chame os métodos criados: Exemplo - actionListener

Eventos

Exemplo - changeListener

No mesmo arquivo xhtml do exemplo anterior adicionamos o evento de

alterações

No mesmo managed bean do exemplo anterior

implementamos o método do evento changelistener.

Eventos

1. Crie uma página com três botões. Um dos botões estará habilitado e os outros dois desabilitados. Quando o usuário pressionar o botão habilitado, a aplicação deve escolher aleatoriamente qual dos três botões estará habilitado da próxima vez e desabilitar os outros dois.

Eventos

• Por padrão, a conversão e a validação dos dados ocorrem no “Process Validation” e os listeners são executados no final dessa fase. Além disso os métodos de ação ocorrem na fase “Invoke Application”.

• Porém, esse comportamento pode ser alterado através do atributo immediate. Então a conversão, a validação e os

listeners serão executados “Apply Request Values”e no final

dessa mesma fase as ações também são executadas.

Eventos

• Durante a execução de um método de evento de mudança de valor, podemos dizer ao contexto do JSF que queremos que a página seja renderizada (“Render Response”), pulando todas as outras fases do ciclo de vida. Com o comando:

FacesContext.getCurrentInstance().renderResponse();

Esse tipo de comando é útil para atualizarmos um componente de acordo com o valor de um componente que o antecede.

Eventos

1. Classe bean do estado

Eventos

1. Managed bean

Exemplo – Mudar as cidades de uma caixa de seleção de acordo com o UF escolhido

Insire os estados

no Arraylist

Eventos

1. Página xhtml

Exemplo – Mudar as cidades de uma caixa de seleção de acordo com o UF escolhido

Submete o formulário ao alterar o valor do componente e executa o método “mudaEstado”

Ajax

•

Ajax (Asynchronous JavaScript and XML

) é um

grupo de tecnologias web que permite a criação

de aplicações interativas.

•

Com Ajax, as aplicações Web podem fazer

requisições de conteúdo ao servidor sem

recarregar a tela, buscando apenas fragmentos

da página que precisam ser atualizados.

Ajax

•

As requisições AJAX são realizadas quando

determinados eventos ocorrem.

•

Devemos indicar para o JSF quais componentes e

eventos devem realizar requisições AJAX. Para

fazer isso, utilizamos a tag <f:ajax>.

<h:inputText> <f:ajax /> </h:inputText> Nesse caso o evento padrão do componente (onChange) foi associado ao Ajax

Ajax

• Pode-se explicitar o evento que deve disparar as

requisições AJAX através do atributo event da tag <f:ajax>.

•

Os eventos podem ser:

focus, blur, click.

<h:inputText>

<f:ajax event =“keyup"/>

</h:inputText>

Evento padrão para campos de texto

Evento padrão para botões

Ajax

•

Podemos associar um método a uma requisição

AJAX. Esse método será executado durante o

processamento dessa requisição no servidor na

fase Invoke Application.

•

Essa associação é realizada através do atributo

listener da tag <f:ajax>.

<h:commandButton value="Salva">

<f:ajax event ="click" render ="formulario" execute ="formulario"

listener ="#{produtoBean.salva}"/> </h:commandButton >

Associando um procedimento a uma requisição AJAX

Esse método pode ou não receber um argumento do tipo AjaxBehaviorEvent

Ajax

• Quando uma requisição AJAX é feita, podemos

determinar quais componentes da tela devem ser avaliados pelo JSF.

• Informamos os componentes a serem avaliados no

servidor através do atributo execute da tag <f:ajax>.

<h:form id=“formulario-login"> <h: inputText/>

<h: inputSecret/>

<h:commandButton value =“Enviar">

<f:ajax event =“click" execute =“formulario-login"/>

</h: commandButton > </h: form >

Processando uma parte específica da tela

Nesse caso, o formulário

inteiro será enviado.

Ajax

•

Podemos definir quais componentes devem ser

atualizados quando a resposta de uma requisição

AJAX chega no navegador.

•

Para isso, devemos utilizar o atributo render da tag

<f:ajax>, o valor desse atributo deve ser uma lista

contendo os identificadores dos componentes.

<h:commandButton value ="Gera Números">

<f:ajax event ="click" render ="num1 num2"/> </h:commandButton>

<h:outputText id="num1" value ="#{ geradorBean.numero}"/> <h:outputText id="num2" value ="#{ geradorBean.numero}"/> Recarregando parte da tela

A lista têm seus elementos separados por um espaço

Ajax

Ajax

• Habilitar via Ajax o botão de “Enviar” somente se o login não existir (imagine que já exista o usuário com login

“joao”).

Ajax

Exemplo

Atualiza esses componentes Executa esse procedimento

no evento OnChange

Ajax

Ajax

1. Crie uma página que receba o nome do usuário

2. Toda vez que o usuário digitar uma letra mostre de forma assíncrona o número de caracteres digitados.

3. Toda vez que o usuário acabar de alterar o nome mostre de forma assíncrona o nome somente com letras maiúsculas.

4. Crie também um campo que recebe a data do cadastro. Depois que o usuário digitar essa informações, o sistema deve informar de

forma assíncrona a data acrescida de trinta dias, valide a data para ver se está no padrão dd/MM/yyyy.

5. De forma assíncrona, insira e mostre o nome e as datas em uma lista quando o usuário clicar no botão. Valide também o nome, que deve ter entre 6 e 15 caracteres.

Referências

• Programação Java para a Web - Décio Heinzelmann Luckow e Alexandre Altair de Melo - ISBN: 978-85-7522-238-6

• K19 treinamentos - Desenvolvimento Web com JSF2 e JPA2 acessoado em 22 de agosto de 2015, disponível em www.k19.com.br

• Java EE 7 com JSF, PrimeFaces e CDI por Thiago Faria, 2ª Edição, 28/02/2015, lgaWorks Softwares, Treinamentos e Serviços Ltda