Introdução ao..

MÓDULO
Programação para Web 2
Introdução ao JSF
Java Server Faces
Introdução
• Framework para desenvolvimento de aplicações web em Java
• Fortemente baseado nos padrões MVC e Front Controller
– MVC (model-view-controller): padrão de arquitetura que tem por
objetivo isolar a lógica de negócio da lógica de apresentação de uma
aplicação
• Modelo: encapsula os dados e as funcionalidades da aplicação.
• Visão: é responsável pela exibição de informações, cujos dados são obtidos
do modelo.
• Controlador: recebe as requisições do usuário e aciona o modelo e/ou a
visão.
2
MVC
3
OVERVIEW DA TECNOLOGIA
4
Conceitos chaves do JSF
•
•
•
•
•
•
•
Componentes
Renderers
Managed-beans
Converters / Validators
Navegação
Eventos
Ciclo de vida (Request Lifecycle)
5
Componentes (1)
• Separa a lógica de negócio da apresentação
• Cada view é composta por uma hierarquia de componentes
6
Componentes (2)
• Componentes podem ser adicionados na view
programaticamente ou via template (JSP por default, ou
Facelets para melhor desempenho e fácil desenvolvimento)
• Componentes são expressos em tags em uma página JSP e em
sua maioria são de interface com o usuário
• Os componentes padrões são divididos em dois grupos
– Faces Core <f:view>, <f:loadBundle>, <f:param>
– HTML wrappers <h:dataTable>, <h:selectOneMenu>
• Componente = class + [renderer] + tag handler (JSP)
7
Renderers
• Responsável por exibir o componente no cliente
• São agrupados em render kits
– Render kit padrão é o HTML, mas podemos ter WML, SVG etc.
– Efetua o encode (gera HTML do componente)
– Efetua o decode (seta o componente com os dados da URL query string e do
formulário)
• Resumindo
<h:inputText id=“login” size=“16” />
<input type=“text” id=“myForm:login”
name=“myForm:login” size=“16” />
8
Managed beans
• POJO – Plain Old Java Objects
• Podem ser definidos nos escopos: Application, Session, Request
e None
9
Managed beans
10
JSF Value Binding
• “Binda” o valor do componente ao managed-bean
• O binding ocorre através de JSF Expression Language (EL)
–
–
–
–
Semelhante a JSTL, porém usa-se ‘#{}’ no lugar de ‘${}’
Pode-se executar métodos no modelo através de expressões
Não é processada imediatamente como na JSTL
A partir da JSF 1.2 utiliza-se a Unified Expression Language (JSP
2.1) que resolve problemas de incompatibilidade entre a JSF-EL e
JSP-EL
11
JSF Value Binding
Exemplo (1)
• login.jsp
• Objeto meuManagedBean
12
JSF Value Binding
Exemplo (2)
• login.jsp
• Managed-beans são registrados dentro do faces-config.xml
13
Converters (1)
• Tem por finalidade converter e/ou formatar objetos do tipo Java
para String e vice-versa
• Converters são bi-direcionais
– Managed-bean faz: getAsObject()
– JSP faz: getAsString()
• JSF já fornece converters padrões para date / time, numbers, etc
• Você pode implementar seu próprio converter
– Basta implementar a interface javax.faces.convert.Converter
– Registrar o converter no faces-config.xml
– O converter pode atuar de forma explícita(id) ou implícita(class) de acordo
com a sua configuração no faces-config.xml
14
Converters (2)
15
Converters (3)
• Converter é registrado dentro faces-config.xml.
• Exemplo: registrando um converter para que toda propriedade
do tipo org.cejug.model.CPF de qualquer bean use este
converter
16
Converters (4) - Exemplo
• Converter declarado explicitamente
• Ou implicitamente (converter mapeado para objetos
do tipo CPF)
17
Validators (1)
• Tem por responsabilidade garantir que o valor informado
pelo usuário seja válido
• Validator trabalha com objetos, não somente com Strings
• JSF já fornece validators padrões como required, length,
range etc
• Você pode implementar seu próprio validator
– Basta implementar a interface javax.faces.validator.Validator
– Registrar o validator no faces-config.xml
– Você pode associar um ou mais validators à um componente
18
Validators (2)
• javax.faces.validator.Validator
• Validators são registrados no faces-config.xml
19
Validators (3) - Exemplo
• Validação para obrigatoriedade e comprimento do
campo
20
Navegação (1)
• Navegação de uma página para outra
• Simples e poderoso sistema de navegação
• O framework seleciona a próxima view baseado
–
–
–
–
Na view anterior
Resultado(outcome) de uma action
EL de ação (ex.: #{mBean.user.save})
Qualquer combinação acima
• Permite wildcard (‘*’) para páginas de origem (from-viewid)
21
Navegação (2) - Exemplo
22
Eventos (1)
• Componentes geram determinados eventos que por
sua vez disparam ações no servidor (método(s) no
managed-bean ou listeners)
• Você também pode implementar listeners de ação
associados a outros componentes do formulário
• Os listeners mais comuns do JSF são
– ActionListener
– ValueChangeListener
23
Eventos (2) - Exemplo
• Action event para navegação
• Action event que executa método no managed-bean
24
Eventos (3) - Exemplo
• Value-change event que executa método após alterar o valor do
componente
25
Funcionamento do MVC no JSF
26
Funcionamento do MVC no JSF
27
Configuração JSF
•
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.
– Por exemplo, na configuração abaixo, todas as requisições cujas urls possuam o sufixo .xhtml
serão processadas pela Faces Servlet.
28
Configuração JSF
• Adicionar no diretório WEB-INF um arquivo chamado
faces-config.xml.
– Nesse arquivo, podemos alterar diversas configurações do JSF.
Mas, a princípio, podemos deixá-lo apenas com a tag facesconfig.
29
Configuração do JSF
• Para utilizar os recursos do JSF, é necessário que a aplicação
possua uma implementação JSF.
– pode ser adicionada manualmente no diretório WEB-INF/lib da aplicação.
• Se um servidor de aplicação Java EE for utilizado, a inclusão de
uma implementação JSF manualmente não é necessária, já que
esse tipo de servidor possui, por padrão, uma implementação de
JSF.
30
Managed Bean
•
•
Objetos fundamentais de uma aplicação JSF.
Suas principais tarefas são:
– 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.
•
•
Para cada página JSP teremos um bean (classe java com get/set) correspondentes.
Essa classe é chamada ManagedBean e deve ter um atributo para cada campo da
página.
– Ex: Uma página de login, com nome e senha, deve ter um managed bean com os atributos
nome e senha correspondentes.
31
Criando um Managed Beans
• Pode ser definido de duas maneiras.
– criar uma classe Java e
public class TesteBean {
.. .
}
... – registrá-la no arquivo faces-config.xml.
<managed-bean >
<managed-bean-name>testeBean </managed-bean-name>
<managed-bean-class>modelo.TesteBean</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
...
• define o nome, a classe e o escopo do managed bean.
32
Criando um Managed Beans
• A segunda forma é criar uma classe Java com a anotação
@ManagedBean do pacote javax.faces.bean.
– utilizada a partir da versão 2 do JSF
@ManagedBean
public class TesteBean {
.. .
}
• JSF assumirá que o nome do managed bean é o nome da classe
com a primeira letra minúscula. O escopo request será assumido
como padrão.
33
Criando um Managed Beans
•
•
Para acessar o valor do atributo numero, precisamos definir um método de leitura.
Para alterar o valor do atributo numero, precisamos definir um método de escrita.
@ManagedBean
public class TesteBean {
private int numero ;
public int setNumero(int numero) {
this.numero = numero ;
}
public int getNumero() {
return numero ;
}
}
34
Exibindo atributos de um
Managed Bean
• Para exibir o valor de um atributo numero utiliza-se expression
language (#{}).
<!DOCTYPE html PUBLIC"-//W3C//DTDXHTML 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>Desenvolvimento Web</title>
</h:head >
<h:body >
Valor : #{testeBean.numero}
</h:body >
</html>
35
Alterando atributos de um
Managed Bean
• Para alterar o valor do atributo numero do managed bean testeBean, podemos vinculá-lo, por
exemplo, a uma caixa de texto em um formulário
<!DOCTYPE html PUBLIC"-//W3C//DTDXHTML 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>Desenvolvimento Web</title>
</h:head >
<h:body >
Valor : #{testeBean.numero}
<h: form >
<h: inputText value ="#{testeBean.numero}"/>
<h: commandButton value ="Altera "/>
</h: form >
</h:body >
</html>
36
Alterando atributos de um
Managed Bean
• Importante
– o vínculo com uma propriedade de um managed bean dá-se por meio dos
nomes dos métodos getters e setters, e não pelo nome do atributo.
– No exemplo, se mantivéssemos o nome do atributo do managed bean mas
substituíssemos os nomes dos métodos getNumero() e setNumero() por
getValor() e setValor(), respectivamente, então os trechos de código XHTML
em destaque deveriam ser alterados para
Valor : #{testeBean.valor}
<h: inputText value ="#{testeBean.valor}"/>
37
Ações
• Para implementar as lógicas que devem ser executadas assim que
o usuário clicar em um botão ou link, basta criar métodos nas
classes dos managed beans.
@ManagedBean
public class TesteBean {
private int numero ;
public void incrementaNumero () {
this.numero = numero+1;
}
// GETTERS E SETTERS
}
38
Ações
• Esses métodos de ação podem ser:
– void: para manter os usuários na mesma tela ou
– String : para realizar uma navegação entre telas.
• Exemplo:
– Para incrementar o valor do atributo numero do managed bean testeBean,
podemos criar uma página que possui um botão para executar essa ação e associálo ao método incrementaNumero()
<h:form >
<h:commandButton value ="Incrementa"
action="#{testeBean.incrementaNumero}"/>
</h: form >
39
Ações
• Todo managed bean possui um nome único que é utilizado para acessá-lo
dentro dos trechos escritos com expression language. Quando utilizamos a
anotação @ManagedBean, por padrão, o JSF assume que o nome do managed
bean é o nome da classe com a primeira letra em caixa baixa.
• Podemos alterar esse nome acrescentado um argumento na anotação.
@ManagedBean (name=”teste”)
public class TesteBean {
...
// GETTERS E SETTERS
}
40
Exemplo
• Construa TextoBean:
import javax.faces.bean.ManagedBean;
@ManagedBean
public class TextoBean {
private String texto ;
public String transformaEmCaixaAlta() {
this.texto = this.texto.toUpperCase ();
return "resposta";
}
public String getTexto () {
return this.texto ;
}
public void setTexto ( String texto ) {
this.texto = texto ;
}
}
41
Exemplo
• Faça a página index.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1 - transitional.dtd">
<html
xmlns
xmlns
xmlns
xmlns ="http://www.w3.org/1999/xhtml"
:ui="http://java.sun.com/jsf/facelets"
:h="http://java.sun.com/jsf/html"
:f="http://java.sun.com/jsf/core">
<h:head>
<title>Desenvolvimento Web</title >
</h:head>
<h:body >
<h:form >
<h:outputLabel value ="Texto : "/>
<h:inputTextarea value ="#{textoBean.texto}"/>
<h:commandButton value ="Transformar"
action="#{textoBean.transformaEmCaixaAlta}"/>
</h:form >
</h:body >
</html >
42
Exemplo
• Construa o formulário que exibirá o texto formatado
resposta.xhtml:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1 - transitional.dtd">
<html
xmlns
xmlns
xmlns
xmlns ="http://www.w3.org/1999/xhtml"
:ui="http://java.sun.com/jsf/facelets"
:h="http://java.sun.com/jsf/html"
:f="http://java.sun.com/jsf/core">
<h:head>
<title>Treinamento JSF</title >
</h:head>
<h:body >
<h:outputText value ="#{textoBean.texto}"/>
</h:body >
</html >
43
Processamento de uma requisição
44
Processamento de uma
requisição
• Restore View:
– Na primeira requisição de um usuário, uma 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.
45
Processamento de uma
requisição
• Apply Request Values:
– a árvore construída na etapa anterior é percorrida e cada um de seus
componentes é “decodificado”. No processo de decodificação, cada
componente extrai da requisição atual os dados associados a essa componente
e se atualiza comessas informações.
– Os eventos de ação (como um clique em um link ou em um botão, por exemplo)
são identificados. Por padrão, esses eventos são adicionados às filas
correspondentes para serem tratados posteriormente (na fase Invoke
Application).
46
Processamento de uma
requisição
• Process Validations:
– os componentes que possuem valores submetidos pelo usuário através de
formulários são convertidos e validados (caso haja algum validador registrado
para esse componente).
– Se ocorrer algum erro de conversão ou validação, mensagens de erro são
adicionadas no contexto
da requisição atual e o fluxo é redirecionado
para a fase Render Response. Caso contrário, processo continua na fase
UpdateModel Values.
– os eventos de mudança de valor são identificados e tratados ao final desta fase.
47
Processamento de uma
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)
48
Processamento de uma
requisição
• Invoke Application:
– Uma vez que os dados dos componentes 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.
– A próxima tela a ser apresentada ao usuário é determinada pelo
resultado do método que implementa a lógica de negócio executado
nesta fase.
49
Processamento de uma
requisição
• Render Response:
– Apró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 View da próxima requisição.
50
Processamento de uma
requisição
•
Managed beans estão à disposição da Faces Servlet durante todo o processamento
da requisição
51
Processamento de uma
requisição
•
Nas etapas Render Response e Restore View, a Faces Servlet aciona os managed
beans para recuperar os dados que devem ser usados na construção ou
reconstrução da árvore de componentes.
52
Processamento de uma
requisição
•
•
Na etapa Update Model, a Faces Servlet armazena nos managed beans os dados já
convertidos e validados.
Na etapa Invoke Application, a Faces Servlet dispara um método em um managed
bean responsável pelo processamento da regra de negócio correspondente à
requisição atual.
53
Processamento de uma
requisição
• Todas as regras de negócio são implementadas no modelo, que
também administra os dados da aplicação.
• Os managed beans acionam o modelo para executar alguma regra
de negócio, recuperar ou alterar os dados administrados pelo
modelo.
54
Processamento de uma requisição

As telas da aplicação são definidas na camada de visão. A Faces
Servlet acessa essa camada toda vez que necessita construir
ou reconstruir a árvore de componentes de uma determinada
tela. Isso ocorre nas etapas Restore View e Render Response.
55
Exemplo 2
• Adivinhe o número!
56
Exercício
Desenvolva uma aplicação JSF que:
• receba um número inteiro do usuário,
• produza um número aleatório entre zero e o número
recebido, e
• exiba esse número na tela do navegador do usuário.
57
Criando o Aplicativo Web
• Crie um aplicativo Web chamado WebGuess
– Selecione GlassFish como servidor
– Use o framework JSF
• Crie o Bean Gerenciado JSF UserNumberBean
– Escopo: session
– Pacote: guessNumber
58
Criando o Bean
• Complete Bean Gerenciado JSF UserNumberBean
– Atributos:
Integer randomInt;
Integer userNumber;
String response;
– Métodos get e set para userNumber
– Construtor padrão
Random randomGR = new Random();
randomInt = randomGR.nextInt(10);
59
Criando o Bean
• Finalizando o Bean Gerenciado JSF UserNumberBean
– Faça-o implementar Serializable
– Informe o nome do Bean
@ManagedBean(name="UserNumberBean")
@SessionScoped
public class UserNumberBean implements Serializable {
60
Criando o Bean
• Complete Bean Gerenciado JSF UserNumberBean
– Método getResponse()
if ( (userNumber != null) && (userNumber.compareTo(randomInt) == 0)) {
// Invalidar sessão do usuário
FacesContext context = FacesContext.getCurrentInstance();
HttpSession session = (HttpSession)
context.getExternalContext().getSession(false);
session.invalidate ();
return "É isso aí!";
}
return "<p> Desculpe, não é " + userNumber + ". </p> <p> Tente adivinhar de novo ... </p>";
61
Alterando o index.xhtml
• Altere o arquivo index.xhtml
– <html> para
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html" >
62
Alterando o index.xhtml
• Construa o corpo
63
Inclua o form para obtenção do
número do usuário
<h:form>
<h:inputText id="userNumber" size="2" maxlength="2"
value = "#{UserNumberBean.userNumber}"/>
<h:commandButton id="submit" value="submit"
action = "response"/>
</h:form>
64
Coloque uma imagem
<div id="right" class="subContainer">
<h:graphicImage url="/duke.png"
alt="Duke waving" />
</div>
• Lembre-se de colocar o recurso da imagem no projeto
65
Crie página JSF
resposta.xhtml
<body>
<div id="mainContainer">
<div id="left" class="subContainer greyBox">
<h4><h:outputText escape="false"
value="#{UserNumberBean.response}"/></h4>
<h:form prependId="false">
<h:commandButton id="backButton" value="Back"
action="index" />
</h:form>
</div>
<div id="right" class="subContainer">
<h:graphicImage url="/duke.png" alt="Duke waving" />
</div>
</div>
</body>
66
COMPONENTES VISUAIS
67
Introdução
• Telas são definidas em arquivos XHTML.
• Os componentes visuais que constituem as telas são adicionados
por meio de tags.
• A especificação do JSF define uma grande quantidade de tags e as
classifica em bibliotecas.
• As principais bibliotecas de tags do JSF são:
– Core (http://java.sun.com/jsf/core)
– HTML (http://java.sun.com/jsf/html)
– Facelets (http://java.sun.com/jsf/facelets)
68
Estrutura básica de uma página
JSF
<!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 ">
<h:head>
<title>Treinamento JSF </title>
</h:head>
<h:body>
<h:outputText value ="Estrutura básica de uma tela JSF"/>
</h:body>
</html>
•
Conteúdo da página definido na tag <html>, dividido em duas partes: o
cabeçalho, <h:head> (e não pela tag <head>), e o corpo, tag <h:body> (e não
pela tag <body>).
69
Estrutura básica de uma página
JSF
O uso das tags <h:head> e <h:body> é
fundamental para o funcionamento completo das
páginas HTML geradas pelo JSF. Ao processar
essas tags, na etapa Render Response, o JSF
adiciona recursos como scripts e arquivos de
estilo na tela HTML que será enviada para o
usuário. Esses recursos são necessários para o
funcionamento correto dos componentes.
70
Formulários
• definidos através da tag <h:form> (e não pela tag <form>).
• composto basicamente por:
–
–
–
–
–
caixas de texto,
caixas de seleção,
rótulos,
botões e
Links
• Ao ser processado, o componente <h:form> gera um formulário
HTML configurado para o método POST do HTTP.
71
Caixas de TExto
•
<h:inputText>
– Permite que o usuário digite uma linha de texto.
•
<h:inputTextarea>
– Permite que o usuário digite várias linhas de texto.
•
<h:inputSecret>
– Igual ao <h:inputText> mas não exibe o que foi digitado (usado em senha)
•
Uma caixa de texto pode ser associada a uma propriedade de um managed bean
através do atributo value. Esse vínculo é denominado binding.
<h: inputText value ="#{usuarioBean.nome}"/>
72
Caixas de TExto
• Quando o JSF constrói a tela a ser enviada para o usuário, ele
recupera o valor da propriedade nome através do método
getNome() e guarda esse valor na caixa de texto correspondente.
• Analogamente, no processamento de uma requisição, o JSF extrai
o valor presente na caixa de texto e utiliza o método setNome()
para armazenar esse valor na propriedade nome do managed
bean UsuarioBean.
<h: inputText value ="#{usuarioBean.nome}"/>
73
Rótulos
• <h:outputLabel>.
– O texto do rótulo é definido pelo atributo value e pode ser
associado a uma caixa de texto através do atributo for.
– O valor do atributo for deve ser igual ao valor do atributo id da
caixa de texto que desejamos associar ao rótulo.
<h: outputLabel value ="Nome : "for ="nome"/>
<h: inputText id="nome "/>
74
Exemplos
XMTML
<h: outputLabel value ="Nome :"for ="nome"/>
<h: inputText value ="Jonas K. Hirata "id="nome"/>
HTML GERADO
<label for ="j_idt6:nome ">Nome : </label>
<input id="j_idt6:nome“ type="text“ name="j_idt6:nome"
value ="Jonas K. Hirata"/>
RESULTADO
75
Exemplos
XMTML
<h: outputLabel value ="Nome :"for ="nome"/>
<h: inputText value ="#{usuarioBean.nome}"id="nome"/>
HTML GERADO
<label for ="j_idt6:nome ">Nome : </label>
<input id="j_idt6:nome“ type="text“ name="j_idt6:nome“
value ="Jonas K. Hirata"/>
RESULTADO
76
Exemplos
XMTML
<h: outputLabel value ="Nome :"for ="nome"/>
<h: inputText value ="#{usuarioBean.nome}"
readonly ="true " id="nome"/>
"
HTML GERADO
<label for ="j_idt6:nome ">Nome : </label>
<input id="j_idt6:nome"type="text"name="j_idt6:nome"
value ="Jonas Hirata"
readonly="readonly "/>
RESULTADO
77
Exemplos
XMTML
<h:outputLabel value="CEP :"for="cep"/>
<h:inputText value="#{usuarioBean.cep}“
maxlength="9"id="cep"/>
HTML GERADO
<label for ="j_idt6:cep"> Cep:</ label >
<input id="j_idt6:cep"type="text"name ="j_idt6:cep"
value ="01452-001"maxlength="9"/>
RESULTADO
78
Exemplos
XMTML
<h:outputLabel value="Texto :"for="texto"/>
<h:inputTextarea value="Um texto de várias linhas"
id="texto"/>
HTML GERADO
<label for ="j_idt6:texto">Texto :</label>
<textarea id="j_idt6:texto"name ="j_idt6:texto">Um texto de
várias linhas </textarea >
RESULTADO
79
Exemplos
XMTML
<h:outputLabel value="Texto :"for="texto"/>
<h:inputTextarea value="Um texto de várias linhas"
cols ="10"rows ="3"id="texto"/>
HTML GERADO
<label for ="j_idt6:texto">Texto :</label>
<textarea id="j_idt6:texto"name ="j_idt6:texto"
cols="10"rows="3">Um texto de várias linhas
</textarea >
RESULTADO
80
Exemplos
XMTML
<h:outputLabel value="Senha: "for="senha"/>
<h:inputSecret value="#{usuarioBean.senha}"
id="senha"/>
HTML GERADO
<label for ="j_idt6:senha">Senha : </label>
<input id="j_idt6:senha "type ="password
"name="j_idt6:senha"value=""/>
RESULTADO
81
Campos Ocultos
• Podemos adicionar informações que são submetidas
automaticamente quando um formulário é enviado ao servidor.
• Essas informações podem ser inseridas com o componente
<h:inputHidden>.
• Essa tag possui dois atributos principais: value e id.
• Podemos vincular um campo oculto a uma propriedade de um
managed bean,
<h:inputHidden id="curso-id"value="#{cursosBean.curso.id}"/>
82
Caixas de Seleção
• <h:selectBooleanCheckbox>
– Permite que o usuário faça seleções do tipo “sim ou não”.
• <h:selectManyCheckbox>
– Permite que o usuário faça múltiplas seleções do tipo “sim ou não”.
• <h:selectOneRadio>, <h:selectOneMenu>, <h:selectOneListbox>
– Permitem a seleção de uma única opção de um conjunto de opções.
• <h:selectManyListbox>, <h:selectManyMenu>
– Possibilita a seleção de diversas opções de um conjunto de opções.
83
Caixas de Seleção
• Podemos vincular uma caixa de seleção a uma propriedade de um
managed bean através do atributo value.
– exemplo: uma caixa de seleção é associada à propriedade aceito do
managed bean ContratoBean.
<h:selectBooleanCheckbox value="#{contratoBean.aceito}"/>
• Caixas de seleção do tipo <h:selectBooleanCheckbox> devem ser
vinculadas a propriedades booleanas.
84
Caixas de Seleção
•
•
Opções de uma caixa de seleção (exceto <h:selectBooleanCheckbox>) podem ser
definidas estática ou dinamicamente.
Estaticamente, cada opção pode ser adicionada através da tag <f:selectItem>
<h:selectOneMenu value
="#{cursosBean.siglaDoCursoEscolhido }">
<f:selectItem itemValue="C01"
itemLabel="Orientação a Objetos em Java">
<f:selectItem itemValue="C02"
itemLabel="Desenvolvimento Web com JSF2">
</h:selectOneMenu>
– itemValue define o que será enviado para a aplicação se a opção correspondente for
selecionada.
– itemLabel define a descrição associada à opção correspondente. Essa descrição é exibida para
o usuário.
85
Caixas de Seleção
•
Dinamicamente
<h:selectOneMenu
value="#{cursosBean.siglaDoCursoEscolhido}">
<f:selectItems
value ="#{cursosBean.cursos}"
var ="curso"
itemValue ="#{curso.sigla}"
itemLabel ="#{curso.nome}">
</h:selectOneMenu>
•
•
•
A atributo value da tag <f:selectItems> deve ser associado a uma coleção de itens.
Todos os itens serão percorridos e adicionados como opção na caixa de seleção.
O atributo var é utilizado para definir a variável que armazenará, a cada rodada, o item atual. Essa
variável permite que o itemValue e o itemLabel de cada opção sejam definidos.
86
Seleção Única
<h:selectOneListBox
value="#{cursosBean.siglaDoCursoEscolhido}">
<f:selectItems
value ="#{cursosBean.cursos}"
var ="curso"
itemValue ="#{curso.sigla}"
itemLabel ="#{curso.nome}">
</h:selectOneListBox>
@ManagedBean
public class CursosBean {
private String siglaDoCursoEscolhido;
private List <Curso > cursos ;
public class Curso {
private String sigla ;
// GETTERS E SETTERS
private String nome ;
}
// GETTERS E SETTERS
}
87
Seleção Múltipla
<h:selectManyListBox
value="#{cursosBean.siglaDoCursoEscolhidos}">
<f:selectItems
value ="#{cursosBean.cursos}"
var ="curso"
itemValue ="#{curso.sigla}"
itemLabel ="#{curso.nome}">
</h:selectManyListBox>
@ManagedBean
public class CursosBean {
private List<String> siglaDoCursoEscolhidos;
private List <Curso > cursos ;
public class Curso {
private String sigla ;
// GETTERS E SETTERS
private String nome ;
}
// GETTERS E SETTERS
}
88
Seleção com Pseudo-opção

Caso seja para não apresentar nenhuma das opções disponíveis
selecionada.
<h:selectOneMenu value="#{cursosBean.siglaDoCursoEscolhido}">
<f:selectItem itemLabel ="Nenhum"noSelectionOption="true>
<f:selectItems
value ="#{cursosBean.cursos}"
var ="curso"
itemValue ="#{curso.sigla}"
itemLabel ="#{curso.nome}">
</h:selectOneListBox>


Se essa pseudo-opção estiver selecionada no momento em que o formulário
for submetido, a propriedade correspondente receberá o valor null.
Muitas vezes, a pseudo-opção é utilizada simplesmente para exibir uma
mensagem ao usuário, como “Escolha uma opção” ou “Selecione um item”.
89
Exemplos
XMTML
<h:outputLabel value="Ex-aluno"for="exaluno"/>
<h:selectBooleanCheckbox value ="#{cursosBean.exAluno}"
id="exaluno"/>
HTML GERADO
<label for ="j_idt6:exaluno">Ex-aluno</ label >
<input id="j_idt6:exaluno"type="checkbox"
name="j_idt6:exaluno"/>
RESULTADO
90
Exemplos
XMTML
<h:selectManyCheckbox
value="#{cursosBean.siglasDosCursosEscolhidos}"
layout ="pageDirection ">
<f:selectItems
value ="#{cursosBean.cursos}"
var="curso"
itemValue="#{curso.sigla}"
itemLabel="#{curso.nome}"/>
</h: selectManyCheckbox >
91
Exemplos
HTML GERADO
<table >
<tr >
<td >
<input name="j_idt6:j_idt27"id="j_idt6:j_idt27:0"value="C01"
type="checkbox "/>
<label for ="j_idt6:j_idt27:0"class="">
Orientação a Objetos em Java </label >
</td >
</tr >
<tr >
<td >
<input name ="j_idt6:j_idt27"id="j_idt6:j_idt27:1"value ="C02"
type ="checkbox "/>
<label for ="j_idt6:j_idt27:1"class ="">
Desenvolvimento Web com JSF2 e JPA2</label >
</td >
</tr >
<tr >
<td >
<input name ="j_idt6:j_idt27"id="j_idt6:j_idt27:2"value ="C03"
type ="checkbox"/>
<label for="j_idt6:j_idt27:2"class="">
Design Patterns em Java </label>
</td>
</tr>
</table>
92
Exemplos
RESULTADO
93
Exemplos
XMTML
<h:selectOneRadio
value="#{cursosBean.siglasDosCursosEscolhidos}"
layout ="lineDirection ">
<f:selectItems
value ="#{cursosBean.cursos}"
var="curso"
itemValue="#{curso.sigla}"
itemLabel="#{curso.nome}"/>
</h:selectOneRadio >
RESULTADO
94
Exemplos
XMTML
<h:selectOneMenu
value="#{cursosBean.siglasDosCursosEscolhidos}">
<f:selectItem itemLabel="Escolha um curso"
noSelectionOption="true"
<f:selectItems
value ="#{cursosBean.cursos}"
var="curso"
itemValue="#{curso.sigla}"
itemLabel="#{curso.nome}"/>
</h:selectOneMenu >
RESULTADO
95
Exemplos
XMTML
<h:selectOneListBox
value="#{cursosBean.siglasDosCursosEscolhidos}">
<f:selectItems
value ="#{cursosBean.cursos}"
var="curso"
itemValue="#{curso.sigla}"
itemLabel="#{curso.nome}"/>
</h:selectOneListBox >
RESULTADO
96
Exercícios
•
•
Crie um projeto Web “ExercJSF01”
Crie uma classe chamada “Pessoa”, contendo como atributos nome (string) e idade
(int). Crie os métodos get/set
public class Pessoa {
private String nome;
private String idade;
•
// get
e set
Crie uma classe
PessoaBean
contendo como atributo pessoa e pessoas (lista de
Pessoa) além dos métodos get/set. No construtor, crie alguma objetos Pessoa e
adicione a pessoas
97
Exercícios
• Crie a página pessoa.xhtml contendo um formulário para o usuário digitar e
enviar o nome e a sua idade.
• Faça um teste.
• Acrescente em pessoa.xhtml o trecho de código para exibir os dados do
usuário:
O nome do usuário é <b>#{pessoaBean.pessoa.nome}</b>
e sua idade é <b>#{pessoaBean.pessoa.idade}</b>.
98
Exercícios
• Crie o método cadastrarPessoa em PessoaBean que
vai adicionar a pessoa na lista de pessoas.
99
Exercícios
•
•
Crie uma classe ConversorMonetário, contendo três atributos: as String “de”,
“para”, e o Double “valor”.
Adicione um método para converter e um para armazenar o resultado da
conversão.
100
public class ConversorMonetarioBean {
private
private
private
private
private
String de;
String para;
Double valor;
Double resultado;
Map<String, Double> taxas =
new LinkedHashMap<String, Double>();
/**
* Creates a new instance of ConversorMonetarioBean
*/
public ConversorMonetarioBean() {
this.taxas.put("Real", 1.0);
this.taxas.put("Dolar", 1.84);
this.taxas.put("Euro", 2.33);
this.taxas.put("Peso", 0.42);
}
public void converte() {
this.resultado = valor * taxas.get(de) / taxas.get(para);
}
101
Exercícios
• Crie o arquivo conversor-monetario.xhtml
102
Botões e Links
• <h:commandButton> e <h:commandLink>
– Enviam os dados de um formulário HTML para o servidor
através do método POST do HTTP.
• <h:button> e <h:link>
– Realizam requisições HTTP do tipo GET. As URLs das
requisições são geradas pelo JSF a partir do atributo outcome.
• <h:outputLink>
– Também realiza requisições HTTP do tipo GET, mas exige que a
URL de destino seja explicitamente especificada.
103
Botões e Links
• Os componentes <h:commandButton> e <h:commandLink> são
usados para submeter formulários HTML por meio do método
POST do HTTP.
• Esses dois componentes podem ser associados a métodos de ação
de um managed bean através dos atributos action e
actionListener.
<h:commandButton value ="Adiciona curso"
action ="#{cursosBean.adicionaCurso}"/>
<h:commandLink value ="Remove curso"
action="#{cursosBean.removeCurso }"/>
104
Textos
• Para inserir textos em uma página, podemos usar os
componentes <h:outputText> e <h:output-Format>.
• O texto exibido por tais componentes é definido pelo
atributo value.
• <h:outputFormat> permite diversos tipos de formatação
do texto que será exibido.
<h:outputFormat value="Preço do produto {0} : R$ {1} ">
<f:param value="#{lojaBean.produto.nome }"/>
<f:param value="#{lojaBean.produto.preco }"/>
</h:outputFormat>
105
Imagens
• O componente <h:graphicImage> é usado para inserir imagens.
• Podemos indicar o caminho da imagem através dos atributos
value ou url. Esses dois atributos são exatamente iguais.
<h:graphicImage value ="/imagens/teste.png"/>
• Pode ser usada uma biblioteca de imagens. Criar um diretório na
pasta /resources e adicionar as imagens nele. Ex: diretório
/resources/imagens
<h:graphicImage library="imagens"name ="teste.png"/>
106
Exercício
• No arquivo conversor-monetario.xhtml, use a tag
<h:outputFormat> para exibir o resultado do
conversormonetário.
<h:outputFormat value=" {0} em {1} equivale a {2} em {3} "
rendered ="#{conversorMonetarioBean.resultado != null }">
<f:param value="#{conversorMonetarioBean.valor }"/>
<f:param value="#{conversorMonetarioBean.de}"/>
<f:param value="#{conversorMonetarioBean.resultado }"/>
<f:param value="#{conversorMonetarioBean.para }"/>
</h:outputFormat>
107
Componentes de Organização
• <h:panelGrid>
– Organiza os elementos em uma grade.
• <h:panelGroup>
– Permite que diversos componentes sejam tratados como um único
componente.
• <h:panelGrid> - organiza componentes em forma de uma grade.
– atributo columns - configura a quantidade de colunas
108
Exemplo
<h:panelGrid columns ="2">
<h:outputLabel value ="Nome do curso:"for="nome"/>
<h:inputText value ="#{cursosBean.curso.nome}"id="nome"/>
<h:outputLabel value="Descrição:"for="descricao"/>
<h:inputTextarea value="#{cursosBean.curso.descricao}"
id="descricao"/>
<h:outputLabel value="Carga horária:"for="carga-horaria"/>
<h:inputText value ="#{cursosBean.curso.cargaHoraria}"
id="carga-horaria "/>
<h:commandButton action ="#{cursosBean.cadastraCurso}"
value ="Cadastrar"/>
</h:panelGrid >
109
PanelGroup
• Usado para inserir mais de um componente em uma mesma
célula de um <h:panelGrid>.
– Ex: adicionar um ícone de um relógio ao lado do rótulo “Carga
horária:”(imagem e o rótulo na mesma célula)
<h:panelGroup>
<h:outputLabel value="Carga horária:"for="carga-horaria"/>
<h:graphicImage library ="imagens"name="relogio.png"/>
</h: panelGroup >
110
Tabelas
• <h:dataTable> usado para a criação de tabelas.
• Associação de uma lista de elementos a um
<h:dataTable> é feita através do atributo value.
• O componente gera uma linha para cada item da lista.
Os itens da lista podem ser acessados através de uma
variável definida pelo atributo var.
111
Exemplo
<h:dataTable value ="#{cursosBean.cursos}"var ="curso">
<f:facet name ="header">Lista de cursos </f:facet >
<h:column >
<f:facet name ="header">Sigla </f:facet >
#{curso.sigla}
</h:column >
<h:column >
<f:facet name ="header">Nome </f:facet >
#{curso.nome }
</h:column >
<h:column >
<f:facet name ="header">Descrição </f:facet >
#{curso.descricao }
</h:column >
<h:column >
<f:facet name ="header">Adicionar turma </f:facet >
<h:commandLink
value ="Adicionar turma"
action ="#{cursosBean.adicionarTurma(curso)}"/>
</h:column >
</h:dataTable >
112
Exemplo
• Resultado
113
Exercício
• Criar uma relação de pessoas participantes do curso.
– Criar uma classe para modelar as pessoas (Pessoa)
– Criar um managed bean que forneça a lista de pessoas para
uma tela de listagem de pessoas. (PessoaBean)
– Criar uma tela parcial para mostrar dados apenas de uma
pessoas dentro de um item de uma lista html.
(pessoaInfo.xhmtl)
– Criar uma tela principal de listagem de pessoas
(listaPessoas.xhtml)
114
Pessoa
public class Pessoa {
private String nome;
private String dtNasc;
public String getDtNasc() {
return dtNasc;
}
public void setDtNasc(String dtNasc) {
this.dtNasc = dtNasc;
}
public String getNome() {
return nome;
}
public void setNome(String nome) {
this.nome = nome;
}
}
115
PessoaBean
@ManagedBean
@RequestScoped
public class PessoaBean {
p = new Pessoa();
p.setNome("Maria Jose");
p.setDtNasc("10/10/10");
this.pessoas.add(p);
private List <Pessoa> pessoas =
new ArrayList <Pessoa>() ;
p = new Pessoa();
p.setNome("Mariana");
p.setDtNasc("10/10/10");
this.pessoas.add(p);
/**
* Creates a new instance
* of PessoaBean
*/
public PessoaBean() {
Pessoa p = new Pessoa();
p.setNome("Ana Maria");
p.setDtNasc("10/10/10");
this.pessoas.add(p);
p = new Pessoa();
p.setNome("Jose Maria");
p.setDtNasc("10/10/10");
this.pessoas.add(p);
}
public List<Pessoa> getPessoas() {
return pessoas;
}
public void setPessoas
(List<Pessoa> pessoas) {
this.pessoas = pessoas;
}
}
116
pessoaInfo.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<li >
<h:outputText value ="Nome: #{pessoa.nome }"/>
<br/>
<h:outputText value ="Data Nascimento: #{pessoa.dtNasc}"/>
</li >
</ui:composition >
117
listaPessoas.xhtml
<?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">
<ui:composition template ="/WEB-INF/TEMPLATES/template.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<ui:define name ="conteudo">
<h:outputLabel value="Lista de Pessoas" style="color:red" />
<ul>
<ui:repeat var ="pessoa" value ="#{pessoaBean.pessoas}">
<ui:include src ="pessoaInfo.xhtml ">
<ui:param name ="pessoa" value ="#{pessoa}"/>
</ui:include >
</ui:repeat >
</ul >
</ui:define >
</ui:composition >
118
Mensagens
• Durante o processamento de uma requisição, podemos adicionar
mensagens que podem ser exibidas na página de resposta.
FacesMessage mensagem = new FacesMessage ("Turma
adicionada");
FacesContext.getCurrentInstance().addMessage
(null,mensagem );
• O primeiro parâmetro do método addMessage() define qual
componente será associado à mensagem adicionada.
• null indica que a mensagem é considerada global, ou seja, ela não
será associada a nenhum componente específico
119
Mensagens
• Na tela, para exibir todas as mensagens geradas no
processamento da requisição através do componente
<h:messages>.
• Para exibir apenas as mensagens globais, utilize o
atributo globalOnly
<h:messages globalOnly="true" />
120
JavaScript e CSS
• Podemos adicionar recursos como scripts e arquivos de estilos (CSS) usando
diretamente as tags <script> e <link> do HTML.
• Porém, o JSF define outra maneira de inserir esses recursos nas páginas da
aplicação. Tais recursos podem ser inseridos com as tags <h:outputScript> e
<h:outputStylesheet>.
• A utilização dessas tags facilita a criação de componentes visuais
personalizados ou o gerenciamento de recursos que dependem de
regionalidade.
<h:outputScript name ="tst.js" library ="javascript"
target="head" />
<h:outputStylesheet name="tst.css" library ="css" />
121
Exercício
• No diretório WebContent, crie um diretório chamado
resources.
• Dentro de resources, crie um diretório chamado css.
• Crie um arquivo chamado teste.css contendo o estilo
desejado e adicione-o ao diretório
WebContent/resources/css.
122
Exercício
body {
font-family : arial , helvetica , sans-serif ;
font-size : 14px;
}
h1 {
color : #006699;
font-size : 18px;
}
ul {
list-style-type : square ;
}
input {
background-color : #E6E6FA ;
border : solid 1px #000000;
}
123
Exercício
• Use a tag <h:outputStylesheet> para incluir o arquivo de
estilos na página definida por pessoas.xhtml.
• Use a tag <ui:repeat> para exibir as pessoas.
<h:outputStylesheet name="teste.css" library="css"/>
124
Exercício
• Considere a página de adição e listagem de pessoas.
• Modifique sua aplicação de forma que uma
mensagem de confirmação seja exibida na tela após o
usuário adicionar uma nova pessoa.
125
Outros componentes
• <ui:remove>
– comentar (ou excluir) partes de código XHTML de uma aplicação
– o trecho de código dentro dessa tag é removido durante o processamento
de uma página JSF.
– podemos usar os delimitadores <!-- e --> do XML para comentar o código
<ui:remove >
<h:outputText value="Sobrenome:
#{testeBean.sobrenome}" />
</ui:remove >
126
Outros componentes
• <ui:repeat>
– iterar sobre coleções. Possui dois atributos obrigatórios:
• value: associa-se a uma coleção de objetos
• var: define o nome da variável usada para referenciar cada um dos elementos da coleção.
<h:outputText value =" Alguns cursos: " />
<ul >
<ui repeat value ="#{testeBean.cursos }" var = curso">
<li >
<h:outputText value ="#{ curso.sigla }:
#{ curso.nome }" />
</li >
</ui:repeat >
</ul >
127