Capítulo 10 - Componentes JSF

Captulo 10 - Componentes JSF
Rosiclia Frasson
Componentes JSF
No JSF 2.0 as telas so definidas por meio arquivos .xhtml. A especificao do JSF possui um
conjunto de componentes que podem ser utilizados na construo dessas telas. Esses componentes
esto divididos duas bibliotecas:
HTML (http://java.sun.com/jsf/html): A biblioteca HTML possui os componentes visuais que
geram o HTML da pgina.
Core (http://java.sun.com/jsf/core): A biblioteca core possui componentes no visuais, como
validadores.
Com a tecnologia JSF, os componentes so renderizados em tempo de execuo, o que permite
que um mesmo componente seja renderizado de acordo com o tipo de cliente que est solicitando, ou
seja, uma mesma pgina ser renderizada de formas diferentes se for acessado por um computador e
por um celular.
Para a utilizao dos componentes necessrio que as bibliotecas estejam importadas nos
arquivos xhtml, atravs do pseudo-atributo xmlns. Segue um exemplo de como devem ser importadas
as duas bibliotecas mencionadas.
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core">
importante perceber que foram declarados prefixos para as duas bibliotecas. Para a biblioteca
core foi declarado o prefixo f e para a biblioteca html foi declarado o prefixo h. Podem ser declarados
qualquer prefixo porm os mencionados so considerados padro e usados pelas maioria dos
desenvolvedores.
Biblioteca HTML
Elementos HTML
Tag
Descrio
form
Formulrio HTML. Embora nos formulrios HTML necessrio indicar os

atributos method e action, em JSF estes valores no so definidos pelo
desenvolvedor, pois, o method sempre post e a ao igual ao endereo
da mesma pgina.
<?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">
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
113
Rosiclia Frasson
<title>Exemplo formulrio</title>
</h:head>
<h:body>
<h:form>

formulrio
</h:form>
</h:body>
</html>
inputText
Campo de entrada de dados com apenas uma linha. Pode ser vinculado
com um atributo de um managed bean.
<h:inputText value="#{usuarioBean.usuario.nome}"
"#{usuarioBean.usuario.nome}" id="nome"/>
inputTextArea
Campo de entrada de dados com mltiplas linhas.

<h:inputTextarea
id="observacoes"/>
id=
inputSecret
value="#{usuarioBean.usuario.observacoes}"
"#{usuarioBean.usuario.observacoes}"
Campo de entrada de dados do tipo senha. Os caracteres digitados

ficam ocultos.
<h:inputSecret value="#{usuarioBean.usuario.senha}"
"#{usuarioBean.usuario.senha}" id="senha"
inputHidden
/>
Campo oculto. Este campo pode ser utilizado para inserir informaes
que devem ser enviadas automaticamente quando um formulrio
enviado ao servidor.
<h:inputHidden/>
outputLabel
Renderiza o elemento label da HTML. Normalmente utilizado para

rotular campos de formulrio.
formulrio. O atributo for vincula este componente
com outro.
<h:outputLabel value="Login: " for="login"
"login" />
outputLink
Renderiza links externos na pgina.
114
Rosiclia Frasson
<h:outputLink value="http://www.google.com">
<h:outputText value="Para
"Para mais informaes clique aqui"/>
</h:outputLink>
outputFormat
Permite a adio de texto parametrizado, ou seja, o texto possui espaos

reservados para serem substitudos por valores reais durante o
processamento.
<h:outputFormat value="Ol {0}">
<f:param value="#{loginBean.usuario}"
"#{loginBean.usuario}" />
</h:outputFormat>
outputText
Renderiza textos simples na tela.

<h:outputText value="Cadastro
"Cadastro de Usurio"/>
Usurio"
commandButton
Este componente envia os dados de um formulrio HTML para um

servidor atravs do mtodo post. Pode ser associado a mtodos de ao
de um managed bean atravs dos atributos action e actionListener.
<h:commandButton value="Cadastrar"
action="#{usuarioBean.adicionaUsuario}"
"#{usuarioBean.adicionaUsuario}"/>
commandLink
Componente com funo similar ao commandButton. Apenas com

aparncia de um link.
<h:commandLink value="Cadastrar"
action="#{usuarioBean.adicionaUsuario}"
"#{usuarioBean.adicionaUsuario}"/>
message
Exibe uma mensagem de um componente especfico. Geralmente

utilizada em conjunto com validadores e conversores. Para utilizar essa
tag, necessrio definir um id para o componente referente a mensagem
e associar message a este id atravs do atributo for.
<h:outputLabel value="Idade: " for="idade" />
<h:panelGroup>
<h:inputText value="#{usuarioBean.usuario.idade}"
"#{usuarioBean.usuario.idade}"
id=
id="idade"
validatorMessage="S
"S aceitamos candidatos que possuam
idade entre 18 e 80 anos.">
anos."
<f:validateLongRange minimum="18"
minimum=
maximum="80"/>
115
Rosiclia Frasson
</h:inputText>
<h:message for="idade"/>
</h:panelGroup>
messages
Este componente permite que os erros dos diversos componentes de um

formulrio sejam exibidos juntos em um local especfico da tela.
<h:messages/>
graphicImage
Este componente adiciona uma imagem na tela. O endereo da imagem

deve ser informado no atributo value e pode ser usado o caminho
relativo da mesma.
<h:graphicImage value="/imagens/jsf.jpg"
"/imagens/jsf.jpg"/>
selectOneListBox
Lista de seleo onde apenas um item pode ser selecionado. Os itens do

componente podem ser estticos, como mostrado no exemplo abaixo ou
dinmicos.
<h:outputLabel value="Escolaridade: " for="escolaridade"
"escolaridade"/>
<h:selectOneListbox id="escolaridade"
value=
value="#{usuarioBean.usuario.escolaridade}"
>
<f:selectItem itemValue="1" itemLabel="No
"No alfabetizado"/>
alfabetizado"
<f:selectItem itemValue="2" itemLabel="Alfabetizado"
"Alfabetizado"/>
<f:selectItem itemValue="3" itemLabel="Ensino
"Ensino fundamental
completo"
completo"/>
"Ensino mdio
completo"
completo"/>
<f:selectItem itemValue="5" itemLabel="Superior
"Superior completo"/>
completo"
</h:selectOneListbox>
116
selectOneMenu
Rosiclia Frasson
Componente conhecido como combo box. No uso deste componente

apenas uma opo pode ser selecionada. Os itens do componente
podem ser estticos ou dinmicos. No exemplo a seguir, os elementos
esto sendo carregados atravs de uma lista que pode representar
dados adivindos de um banco de dados.
<h:outputLabel value="rea de Atuao: " for="areaAtuacao"
"areaAtuacao"/>
<h:selectOneMenu id="areaAtuacao"
value=
value="#{usuarioBean.usuario.areaAtuacao}">
<f:selectItems value="#{usuarioBean.areas}"
"#{usuarioBean.areas}"/>
</h:selectOneMenu>
/h:selectOneMenu>
selectOneRadio
Caixa de seleo. No uso deste componente, entre as vrias opes,

apenas uma pode ser selecionada. Este componente tambm pode ser
populado com valores estticos ou dinmicos.
<h:outputLabel value="Sexo: " for="sexo" />
<h:selectOneRadio value="#{usuarioBean.usuario.sexo}"
"#{usuarioBean.usuario.sexo}" id="sexo">
<f:selectItem itemLabel="Feminino" itemValue="F"/>
itemValue=
<f:selectItem itemLabel="Masculino" itemValue="M"/>
itemValue=
</h:selectOneRadio>
selectBooleanCheckBox
Caixa de seleo. Permite que o usurio faa selees do tipo sim ou

no.
<h:selectBooleanCheckbox id="aceito"
"aceito"
value="#{usuarioBean.aceite}"/>
<h:outputLabel value="Li
"Li e concordo com
117
Rosiclia Frasson
os termos de uso" for="aceito"/>
selectManyCheckBox
Caixa de seleo. No uso deste componente, vrias opes podem ser

marcadas.
<h:outputLabel value="Hobbies: " for="hobbies"/>
/>
<h:selectManyCheckbox id="hobbies"
value=
value="#{usuarioBean.usuario.hobbies}"
layout="pageDirection"
"pageDirection">
<f:selectItem itemValue="Msicas"/>
<f:selectItem itemValue="Filmes"/>
<f:selectItem itemValue="Culinria"/>
<f:selectItem itemValue="Artesanato"/>
<f:selectItem itemValue="Decorao"/>
<f:selectItem itemValue="Livros"/>
<f:selectItem itemValue="Passeios
"Passeios tursticos"/>
tursticos"
<f:selectItem itemValue="Prtica
"Prtica de esportes"/>
esportes"
</h:selectManyCheckbox>
selectManyListBox
Componente similar ao selectOneListBox, porm, neste componente

vrios itens podem ser selecionados com a ajuda do boto CTRL.
<h:outputLabel value="Escolaridade: " for="escolaridade"
"escolaridade"/>
<h:selectOneListbox id="escolaridade"
value=
value="#{usuarioBean.usuario.escolaridade}"
>
<f:selectItem itemValue="1" itemLabel="No
"No alfabetizado"/>
alfabetizado"
<f:selectItem itemValue="2" itemLabel="Alfabetizado"
"Alfabetizado"/>
"Ensino fundamental
completo"
completo"/>
"Ensino mdio
completo"
completo"/>
<f:selectItem itemValue="5" itemLabel="Superior
"Superior completo"/>
completo"
</h:selectOneListbox>
118
selectManyMenu
Rosiclia Frasson
Componente similar ao selectOneMenu, com a diferena de que o

mesmo permite que sejam selecionados vrios itens de uma vez
utilizando a tecla CTRL.
<h:outputLabel value="Idiomas: " for="idiomas"/>
/>
<h:selectManyMenu id="idiomas"
value=
value="#{usuarioBean.usuario.idiomas}"
style="height:
"height: 90px">
90px"
<f:selectItem itemValue="Ingls"/>
<f:selectItem itemValue="Francs"/>
<f:selectItem itemValue="Alemo"/>
<f:selectItem itemValue="Espanhol"/>
<f:selectItem itemValue="Mandarim"/>
</h:selectManyMenu>
panelGrid
Este componente funciona como um organizador de componentes na

pgina e pode acomodar qualquer componente JSF. O panelGrid possui
como valor padro o nmero de colunas igual a 1. Para modific-lo
necessrio utilizar o atributo columns. No exemplo a seguir tambm foi
utilizada a propriedade border de 1 pixel para a visualizao do
componente.
<h:panelGrid columns="2">
<h:outputLabel value="Nome: " for="nome"

"nome"/>
<h:inputText value="#{usuarioBean.usuario.nome}"
"#{usuarioBean.usuario.nome}" id="nome"
dir=
dir="rtl"
size="50"/>
<h:outputLabel value="Sexo: " for="sexo"

"sexo" />
<h:selectOneRadio value="#{usuarioBean.usuario.sexo}"
"#{usuarioBean.usuario.sexo}"
id="sexo"
"sexo">
119
Rosiclia Frasson
<f:selectItem itemLabel="Feminino"
"Feminino" itemValue="F"/>
<f:selectItem itemLabel="Masculino"
"Masculino" itemValue="M"/>
</h:selectOneRadio>
</h:panelGrid>
panelGroup
Este componente utilizado para organizar as telas. Com ele possvel

agrupar vrios componentes em apenas um n, colocando em apenas
uma clula do panelGrid, por exemplo.
<h:panelGroup>
"login" />
<h:graphicImage value="/imagens/ajuda.png"
"/imagens/ajuda.png" alt="ajuda"/>
</h:panelGroup>
<h:panelGroup>
h:panelGroup>
<h:inputText value="#{usuarioBean.usuario.login}"
"#{usuarioBean.usuario.login}"
id=
id="login"
validatorMessage="O
"O login deve ser composto apenas por
letras e deve possuir entre 6 e 18 caracteres.">
caracteres."
<f:validateRegex pattern="[a-z]{6,18}"
z]{6,18}"/>
</h:inputText>
<h:message for="login"/>
</h:panelGroup>
<h:outputLabel value="Senha: " for="senha"/>

<h:panelGroup>
"#{usuarioBean.usuario.senha}"
id=
id="senha"
validatorMessage="A
"A senha deve possuir no mnimo 6
caracteres e no mximo 10 caracteres.">
caracteres."
<f:validateLength maximum="10" minimum="6"/>
</h:inputSecret>
<h:message for="senha"/>
</h:panelGroup>
120
dataTable
Rosiclia Frasson
Componente que gera uma tabela HTML. Pode ser vinculado a um

managed bean para preenchimento de dados dinmicos.
No exemplo a seguir, gerada uma tabela que representa uma agenda
de contatos. Esses contatos poderiam estar armazenados em uma base
de dados. A ttulo de exemplo, os contatos esto sendo adicionados
manualmente
ualmente no managed bean.
Segue o bean Contato, onde est definido que cada objeto deste tipo
deve possuir um nome e um telefone. Tambm foi definido um construtor
com estes dois atributos para facilitar a criao de um novo contato.
package br.com.rosicleiafrasson.cap10componentestabela
cap10componentestabela.modelo;
public class Contato {
private String nome;

private String telefone;
public Contato(String nome, String telefone)

telefone {
this.nome = nome;
this.telefone = telefone;
}
public String getNome() {

return nome;
}
public void setNome(String nome) {

this.nome = nome;
}
public String getTelefone() {

return telefone;
}
public void setTelefone(String telefone) {

this.telefone = telefone;
}
121
Rosiclia Frasson
A seguir, est ilustrado o managed bean ContatoBean que possui uma

lista de contatos. No mtodo de acesso a esta lista so adicionados dois
contatos para que os mesmos populem a tabela.
package br.com.rosicleiafrasson.cap10componentestabela.controller;
import br.com.rosicleiafrasson.cap10componentestabela.modelo.Contato;
import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
@ManagedBean
public class ContatoBean {
private List<Contato> contatos = new ArrayList<>();
public List<Contato> getContatos() {

contatos.clear();
contatos.add(new Contato("Maria", "(48) 9924-9078"));
contatos.add(new Contato("Joo", "(11) 3645-6754"));
return contatos;
}
}
Na pgina, onde est o componente dataTable definido atravs do

atributo value os dados da tabela. O atributo var nomeia o elemento da
iterao corrente para se ter acesso ao ndice da mesma nas colunas.
<?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">
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>Exemplo Tabela</title>
</h:head>
<h:body>
<h:form>
<h:dataTable border="1"
value="#{contatoBean.contatos}" var="contato">
<f:facet name="header">
<h:outputText value="Agenda de Contatos"/>
</f:facet>
122
Rosiclia Frasson
<h:column>
<h:outputText value="Nome"/>
value=
</f:facet>
<h:outputText value="#{contato.nome}"
"#{contato.nome}"/>
</h:column>
<h:column>
<h:outputText value="Telefone"/>
value=
</f:facet>
<h:outputText
value=
value="#{contato.telefone}"/>
</h:column>
</h:dataTable>
</h:form>
</h:body>
</html>
column
Define uma coluna em uma tabela.

<h:column>
<h:outputText value="Telefone"
"Telefone"/>
</f:facet>
<h:outputText value="#{contato.telefone}"
"#{contato.telefone}"/>
</h:column>
123
Rosiclia Frasson
Tags de atributos bsicos HTML

Atributo
Descrio
id
Identifica o componente. Pode ser utilizado em todos os elementos

HTML.
<h:inputText value="#{usuarioBean.usuario.nome}" id="nome"/>
binding
Associa o componente da camada de viso sua camada de controle.

Pode ser utilizado em todos os elementos HTML.
<h:inputText binding="#{candidatoBean.candidato.cpf}" id="cpf"/>
rendered
Renderiza ou no um componente. O valor false indica que o

componente no deve ser renderizado. Pode ser utilizado em todos os
elementos HTML.
<h:panelGrid
columns="4" rendered="#{funcionarioBean.ehUsuario}">
<h:outputLabel for="login" value="Login: "/>

<h:inputText id="login"
value="#{funcionarioBean.funcionario.login}" />
<h:outputLabel for="senha" value="Senha: "/>

<h:inputText id="senha"
value="#{funcionarioBean.funcionario.senha}"/>
</h:panelGrid>
styleClass
Especifica uma classe CSS que contm definies de estilo. Pode ser
utilizado em todos os elementos HTML.
<h:inputText value="#{candidatoBean.candidato.nome}"
id="nome" styleClass="cxTexto" />
value
Associa o componente da camada de viso sua camada de controle.

Pode ser utilizado nos input, output e command.
<h:inputText value="#{candidatoBean.candidato.cpf}" id="cpf" />
valueChangeListener
Evento disparado quando o usurio muda o valor selecionado no

controle.
<h:selectOneMenu valueChangeListener="#{testeBean.carregarCidades}">
<f:selectItems value="#{testeBean.estados}" />
<f:ajax event="change" render="cidades" />
</h:selectOneMenu>
<h:selectOneMenu id="cidades">
<f:selectItems value="#{testeBean.cidades}" />
</h:selectOneMenu>
converter
Permite a utilizao de um converter prprio, ou seja, um converter

especfico do projeto.
124
Rosiclia Frasson
<h:selectOneMenu value="#{cadastrarMoradorBean.morador.apartamento}"
"#{cadastrarMoradorBean.morador.apartamento}"
converter=
converter="entityConverter">
<f:selectItems value="#{cadastrarMoradorBean.apartamentos}"
"#{cadastrarMoradorBean.apartamentos}"
var="apartamento"
"apartamento" itemLabel="#{apartamento.apartamento}"
"#{apartamento.apartamento}"/>
</h:selectOneMenu>
validator
Permite a utilizao de um validator prprio, ou seja, um validator

especfico do projeto.
required
Indica se um campo obrigatrio. Pode ser utilizado nos inputs.

"#{candidatoBean.candidato.nome}" id="nome"
required=
required="true"
/>
Atributos HTML 4.0

Atributo
Descrio
accesskey
Cria uma tecla de atalho para dar foco em um elemento. Embora a

documentao W3C sugere que a combinao de teclas para acionar o atributo
accesskey seja Ctrl + Alt + tecla, a maioria dos navegadores utilizam Alt + tecla
ou Shift + Alt + tecla.
<h:commandButton value="Cadastrar"
action="#{candidatoBean.adicionarCandidato}"
"#{candidatoBean.adicionarCandidato}" accesskey="C"/>
accesskey=
acceptcharset
Indica o charset que deve ser utilizado.

<h:form acceptcharset="ISO-8859-1">
>
alt
Texto alternativo para elementos no textuais como imagens.

<h:graphicImage value="/imagens/estrela.png" alt="estrela"/>
alt=
border
Valor em pixel para a largura da borda de um componente.

<h:panelGrid columns="2" border="3">
<h:outputLabel value="Nome: "/>
<h:inputText />
</h:panelGrid>
dir
Define a direo do texto. Pode ser ltr - esquerda ou rtl - direita.

<h:inputText value="#{candidatoBean.candidato.nome}" id="nome"
id=
dir="rtl" />
disable
Desabilita um componente. No exemplo a seguir o input est desabilitado, ou

seja, no permite que nenhum valor seja digitado no mesmo.
125
Rosiclia Frasson
<h:inputText value="#{candidatoBean.candidato.nome}" id="nome"

id=
disabled="true"
/>
maxlenght
Define a quantidade mxima de caracteres de uma caixa de texto.

<h:inputText value="#{candidatoBean.candidato.login}" id="login"
maxlenght="12
"12 />
readonly
O valor do componente fica visvel. Porm no pode ser alterado. Normalmente

utilizado em conjunto com teclados virtuais ou calendrios, pois o valor do
campo fica disponvel para leitura, porm no pode ser alterado.
rel
Relao entre o documento atual e um link especificado com o atributo href.

<link href="/css/estilo.css"
href=
type="text/css" rel="stylesheet"
"stylesheet"/>
rows
Nmero visvel de linhas em uma rea de texto.

<h:inputTextarea
value="#{usuarioBean.usuario.observacoes}
"#{usuarioBean.usuario.observacoes}
" id="observacoes" rows="4"/>
size
Define o tamanho de uma caixa de texto.

"#{candidatoBean.candidato.nome}" id="nome"
dir="rtl"
"rtl" size="75" />
style
Aplica um estilo a um componente.

<h:selectManyMenu id="idiomas"
value="#{candidatoBean.candidato.idiomas}"
"#{candidatoBean.candidato.idiomas}" style="height:
"height: 90px" >
tabindex
Define a ordem em que um elemento recebe o foco usando a tecla TAB. O

valor para este atributo deve ser um nmero inteiro entre 0 e 32767.
Atributos de eventos DHTML

Atributo
Descrio
onblur
Evento disparado quando o componente perde o foco.
onchange
Evento disparado quando o valor do campo alterado.
onclick
Evento disparado quando o componente clicado.
126
Rosiclia Frasson
onfocus
Evento disparado quando o componente recebe foco.
onkeydown
Evento disparado assim que a tecla pressionada.
onkeypress
Evento disparado assim que a tecla pressionada. disparado aps o

onkeydow.
onkeyup
Evento disparado quando a tecla pressionada solta.
onmousedown
Evento disparado quando o boto do mouse pressionado sobre o elemento.
onmousemove
Evento disparado quando o mouse se move sobre o elemento.
onmouseout
Evento disparado quando o mouse sair de cima do componente.
onmouseover
Evento disparado quando o mouse passar em cima do componente.
onmouseup
Evento disparado quando o boto do mouse liberado.
onreset
Evento disparado quando o boto de reset do formulrio acionado.
onselect
Evento disparado quando o texto contido no componente selecionado.
onsubmit
Evento disparado quando o formulrio submetido.
Biblioteca Core
Tag
Descrio
view
Serve para delimitar a regio onde ser criada a rvore de componentes

do JSF. Essa tag s necessria com o uso de JSP, no facelet no
necessrio.
subview
Serve para evitar que os IDs dos componentes se repitam na rvore de

componentes, nos casos em que existem includes de pginas dinmicos.
facet
Adiciona uma faceta a um componente. No caso das tabelas, por exemplo,

com esta tag possvel adicionar cabealho ou rodap.
<h:dataTable border="1" value="#{contatoBean.contatos}"
var="contato">
<h:outputText value="Agenda de Contatos"/>
</f:facet>
<h:column>
<h:outputText value="Nome"/>
</f:facet>
<h:outputText value="#{contato.nome}"/>
</h:column>
127
Rosiclia Frasson
<h:column>
<h:outputText value="Telefone"/>
value=
</f:facet>
<h:outputText value="#{contato.telefone}"
"#{contato.telefone}"/>
</h:column>
</h:dataTable>
attribute
Cria um par de nome/valor que define o valor de um atributo nomeado

associado com a tag que o contm.
param
Adiciona um parmetro a um componente.
action
um evento de ao disparado quando o componente clicado. O evento

executado na fase Invoke Application. O action contribui para a navegao
das pginas, porm no possui informaes sobre o evento.
<h:commandLink value="Cargo" action="/faces/paginas/cargo.xhtml"
"/faces/paginas/cargo.xhtml"/>
actionListener
Tambm um evento de ao disparado quando o componente clicado e

executado na fase Invoke Application. Diferentemente do action, o
actionListener possui informaes sobre o evento, porm no contribui
para a navegao de pginas.
valueChangeListener
Evento disparado quando o valor de um componente alterado. Pode ser

usado por exemplo, para carregar uma lista de cidades de acordo
ac
com o
estado selecionado.
Conversores:
Converso o processo que garante que os dados informados pelo

usurio se transformem em um tipo especfico. O processo de converso
ocorre na fase Apply Request Values. Os valores convertidos no so
aplicados aos beans neste momento, eles apenas so convertidos e
aplicados a objetos que representam os componentes e so chamados de
valores locais.
No JSF, a converso para os tipos primitivos feita de forma implcita. Os
objetos do tipo BigInteger e BigDecimal
BigDecimal tambm so convertidos
implicitamente. possvel converter valores de entrada e de sada. Para os
tipos que no possuem conversor padro ou em casos em que o tipo
possui, porm no adequado, possvel definir conversores explcitos.
Os conversores
conversores disparam mensagens que podem ser configuradas atravs
do elemento converterMessage. Tambm possvel trabalhar com
conversores explcitos nos casos em que os conversores implcitos no
forem suficientes.
128
convertDateTime
Rosiclia Frasson
Permite a formatao de datas utilizando um pattern. Esse conversor pode

ser aplicado em dados do tipo java.util.Date.
<h:outputLabel value="Data Nascimento: " for="dtNascimento"
"dtNascimento"/>
<h:panelGroup>
<h:inputText
value="#{candidatoBean.candidato.dataNascimento}" id="dtNascimento"
value="#{candidatoBean.candidato.dataNascimento}"
converterMessage=
converterMessage="Data
no fomato invlido. Utilize DD/MM/AAAA." >
<f:convertDateTime pattern="dd/MM/yyyy"
"dd/MM/yyyy"
type=
type="date"/>
</h:inputText>
<h:message for="dtNascimento" />
</h:panelGroup>
convertNumber
Permite a formatao de um nmero de acordo com uma definio prvia.

Seguem alguns atributos desta tag:
currencySimbol: Define um smbolo na formatao de moedas.
<h:outputLabel value="ltimo Salrio: " for="ultimoSalario"
"ultimoSalario" />
<h:inputText value="#{candidatoBean.candidato.ultimoSalario}"
didato.ultimoSalario}"
id="ultimoSalario"
"ultimoSalario">
<f:convertNumber currencySymbol="R$" type="currency"/>
type=
</h:inputText>
maxFractionDigits: Define o nmero mximo de dgitos que sero

formatados na parte fracionria do resultado. No fragmento de
cdigo a seguir, o atributo pode ter no mximo 3 dgitos na parte
fracionria. Caso a parte fracionria tenha uma maior quantidade
de dgitos do que foi definido, o nmero ser arredondado.
<h:outputLabel value="Peso: " for="peso" />

<h:inputText value="#{candidatoBean.candidato.peso}"
"#{candidatoBean.candidato.peso}" id="peso">
<f:convertNumber maxFractionDigits="3"
"3" />
</h:inputText>
O campo acima ser convertido para o resultado a seguir.
maxIntegerDigits: Define a quantidade mxima de dgitos da parte

inteira de um nmero.
<h:outputLabel value="Peso: " for="peso" />
129
Rosiclia Frasson
<h:inputText value="#{candidatoBean.candidato.peso}"
"#{candidatoBean.candidato.peso}" id="peso">
<f:convertNumber maxIntegerDigits="3" />
</h:inputText>
minFractionDigits: Define a quantidade mnima de dgitos da parte

fracionria de um nmero.
<h:outputLabel value="Altura: " for="altura" />

<h:inputText value="#{candidatoBean.candidato.altura}"
"#{candidatoBean.candidato.altura}"
id=
id="altura">
<f:convertNumber minFractionDigits="2"
"2" />
</h:inputText>
minIntegerDigits: Define a quantidade mnima de dgitos da parte

inteira de um nmero.
<h:outputLabel value="Altura: " for="altura" />

"#{candidatoBean.candidato.altura}" id="altura">
<f:convertNumber minFractionDigits="2" minIntegerDigits="1"
minIntegerDigits=
/>
</h:inputText>
pattern: Define um padro de formatao personalizado atravs de

uma expresso regular.
<h:outputLabel value="Altura: " for="altura"
"altura" />
"#{candidatoBean.candidato.altura}"
id="altura">
<f:convertNumber pattern="#0.00" />
</h:inputText>
type: Este atributo especifica como a string deve ser formatada.

Possui trs valores vlidos: number, currency e percentage.
Number o valor padro, currency o valor usado para moedas e
percentage usado para percentuais.
<h:outputLabel value="Valor: " for="valor" />
<h:inputText value="#{candidatoBean.candidato.valor}"
"#{candidatoBean.candidato.valor}"
id="valor">
<f:convertNumber type="percent" />
</h:inputText>
130
Rosiclia Frasson
converter
utilizado para a utilizao de conversores criados pelo desenvolvedor, ou

seja, conversores que no fazem parte da especificao.
Validadores
Durante o processo de construo de aplicativos, alm de converter

valores digitados pelo usurio em tipos especficos, necessrio verificar
se os mesmos esto conforme algumas regras de negcio estabelecidas.
A validaao ocorre na fase Process Validation. Os validadores disparam
mensagens que podem ser configuradas com o elemento
validatorMessage.
validateDoubleRange
Utilizado para verificar se um valor numrico real est entre um

determinado intervalo de nmeros.
<h:panelGroup>
<h:inputText value="#{usuarioBean.usuario.peso}"
"#{usuarioBean.usuario.peso}" id="peso"
validatorMessage="O valor do peso deve estar entre 45 e 250.">
validatorMessage="O
250."
<f:convertNumber maxFractionDigits="3"
maxFractionDigits=
maxIntegerDigits=
maxIntegerDigits="3"
/>
<f:validateDoubleRange minimum="45.00"
"45.00"
maximum=
maximum="250.00"/>
</h:inputText>
<h:message for="peso" />
</h:panelGroup>
validateLenght
Verifica se uma string possui uma quantidade mnima ou mxima de letras.

<h:outputLabel value="Senha: " for="senha"/>
<h:panelGroup>
"#{usuarioBean.usuario.senha}"
id="senha"
"senha" validatorMessage="A
"A senha deve possuir no mnimo 6
caracteres e no mximo 10 caracteres.">
caracteres."
<f:validateLength maximum="10" minimum="6"/>
minimum=
</h:inputSecret>
<h:message for="senha"/>
</h:panelGroup>
validateLongRange
Verifica se um nmero inteiro est entre um determinado intervalo de

nmeros.
131
Rosiclia Frasson
<h:outputLabel value="Idade: " for="idade" />

<h:panelGroup>
<h:inputText value="#{usuarioBean.usuario.idade}"
"#{usuarioBean.usuario.idade}" id="idade"
validatorMessage="S aceitamos candidatos que possuam idade entre 18 e
validatorMessage="S
80 anos.">
anos."
<f:validateLongRange minimum="18"
"18" maximum="80"/>
</h:inputText>
<h:message for="idade"/>
</h:panelGroup>
/h:panelGroup>
validateRegex
Verifica se um texto respeita determinada expresso regular.

<h:panelGroup>
"login" />
<h:graphicImage value="/imagens/ajuda.png"
"/imagens/ajuda.png"
alt=
alt="ajuda"/>
</h:panelGroup>
<h:panelGroup>
<h:inputText value="#{usuarioBean.usuario.login}"
"#{usuarioBean.usuario.login}"
id=
id="login"
validatorMessage="O
"O login deve ser composto apenas por
letras e deve possuir entre 6 e 18 caracteres.">
caracteres."
<f:validateRegex pattern="[a-z]{6,18}"
z]{6,18}"/>
</h:inputText>
<h:message for="login"/>
</h:panelGroup>
validator
Este componente deve ser utilizado para validadores customizados.
loadBundle
Permite carregar um pacote de recursos do Locale da pgina atual e

armazenar o mesmo em um mapa no escopo de request.
selectItems
Especifica itens para um componente de seleo. Utilizado para valores

dinmicos. No exemplo a seguir, os itens esto armazenados
armazen
em uma lista
e podem representar valores advindos de uma base de dados.
<h:outputLabel value="rea de Atuao: " for="areaAtuacao"/>
for=
<h:selectOneMenu id="areaAtuacao"
value="#{usuarioBean.usuario.areaAtuacao}">
>
132
Rosiclia Frasson
<f:selectItems value="#{usuarioBean.areas}"
"#{usuarioBean.areas}"/>
</h:selectOneMenu>
selectItem
Especifica um item para um componente de seleo. Utilizado para valores

estticos.
<h:outputLabel value="Hobbies: " for="hobbies"
"hobbies"/>
<h:selectManyCheckbox id="hobbies"
value=
value="#{usuarioBean.usuario.hobbies}"
layout=
layout="pageDirection">
<f:selectItem itemValue="Msicas"/>
<f:selectItem itemValue="Filmes"/>
<f:selectItem itemValue="Culinria"/>
/>
<f:selectItem itemValue="Artesanato"/>
/>
<f:selectItem itemValue="Decorao"/>
/>
<f:selectItem itemValue="Livros"/>
<f:selectItem itemValue="Passeios
"Passeios tursticos"/>
tursticos"
<f:selectItem itemValue="Prtica
"Prtica de esportes"/>
esportes"
</h:selectManyCheckbox>
133

Capítulo 10 - Componentes JSF

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Capítulo 10 - Componentes JSF

Diunggah oleh

Hak Cipta:

Format Tersedia

Captulo 10 - Componentes JSF

Formulrio HTML. Embora nos formulrios HTML necessrio indicar os

Captulo 10 - Componentes JSF

Campo de entrada de dados com mltiplas linhas.

Campo de entrada de dados do tipo senha. Os caracteres digitados

Renderiza o elemento label da HTML. Normalmente utilizado para

Renderiza links externos na pgina.

Captulo 10 - Componentes JSF

Permite a adio de texto parametrizado, ou seja, o texto possui espaos

Renderiza textos simples na tela.

Este componente envia os dados de um formulrio HTML para um

Componente com funo similar ao commandButton. Apenas com

Exibe uma mensagem de um componente especfico. Geralmente

Captulo 10 - Componentes JSF

Este componente permite que os erros dos diversos componentes de um

Este componente adiciona uma imagem na tela. O endereo da imagem

Lista de seleo onde apenas um item pode ser selecionado. Os itens do

Captulo 10 - Componentes JSF

Componente conhecido como combo box. No uso deste componente

Caixa de seleo. No uso deste componente, entre as vrias opes,

Caixa de seleo. Permite que o usurio faa selees do tipo sim ou

Captulo 10 - Componentes JSF

os termos de uso" for="aceito"/>

Caixa de seleo. No uso deste componente, vrias opes podem ser

Componente similar ao selectOneListBox, porm, neste componente

Captulo 10 - Componentes JSF

Componente similar ao selectOneMenu, com a diferena de que o

Este componente funciona como um organizador de componentes na

<h:outputLabel value="Nome: " for="nome"

<h:outputLabel value="Sexo: " for="sexo"

Captulo 10 - Componentes JSF

Este componente utilizado para organizar as telas. Com ele possvel

<h:outputLabel value="Senha: " for="senha"/>

Captulo 10 - Componentes JSF

Componente que gera uma tabela HTML. Pode ser vinculado a um

public class Contato {

private String nome;

public Contato(String nome, String telefone)

public String getNome() {

public void setNome(String nome) {

public String getTelefone() {

public void setTelefone(String telefone) {

Captulo 10 - Componentes JSF

A seguir, est ilustrado o managed bean ContatoBean que possui uma

private List<Contato> contatos = new ArrayList<>();

public List<Contato> getContatos() {

Na pgina, onde est o componente dataTable definido atravs do

Captulo 10 - Componentes JSF

Define uma coluna em uma tabela.

Captulo 10 - Componentes JSF

Tags de atributos bsicos HTML

Identifica o componente. Pode ser utilizado em todos os elementos

Associa o componente da camada de viso sua camada de controle.

Renderiza ou no um componente. O valor false indica que o

<h:outputLabel for="login" value="Login: "/>

<h:outputLabel for="senha" value="Senha: "/>

Associa o componente da camada de viso sua camada de controle.

Evento disparado quando o usurio muda o valor selecionado no

Permite a utilizao de um converter prprio, ou seja, um converter

Captulo 10 - Componentes JSF

Permite a utilizao de um validator prprio, ou seja, um validator

Indica se um campo obrigatrio. Pode ser utilizado nos inputs.

Atributos HTML 4.0