Академический Документы
Профессиональный Документы
Культура Документы
O campo acima ser convertido pa
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 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 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.
Permite a formatao de datas utilizando um pattern. Esse conversor pode
ser aplicado em dados do tipo java.util.Date.
*"1output6abel value#,?ata $ascimento1 , &or#,dt$ascimento,28
*"1input/ext value#,^{usuario@ean.usuario.data$ascimento,
id#,dt$ascimento, converter!essage#,?ata no &omato i
??2!!2EEEE.,8
*&1convert?ate/ime pattern#,dd2!!2yyyy, type#,date,28
*2"1input/ext8
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.
*"1output6abel value#,eltimo salNrio1 , &or#,ultimoSalario, 28
*"1input/ext value#,^{usuario@ean.usuario.ultimoSalario,
id#,ultimoSalario,8
*&1convert$umber currencySymbol#,Cf, type#,currency,28
*2"1input/ext8
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.
*"1output6abel value#,;eso1 , &or#,peso, 28
*"1input/ext value#,^{usuario@ean.usuario.peso, id#,peso,8
*&1convert$umber maxFraction?igits#,4,28
*2"1input/ext8
O campo acima ser convertido para o resultado a seguir.
Rosiclia Frasson
84
aplicados a objetos que representam os componentes e so chamados de
No JSF, a converso para os tipos primitivos feita de forma implcita. Os
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.
aram mensagens que podem ser configuradas atravs
do elemento converterMessage. Tambm possvel trabalhar com
conversores explcitos nos casos em que os conversores implcitos no
do um pattern. Esse conversor pode
*"1output6abel value#,?ata $ascimento1 , &or#,dt$ascimento,28
*"1input/ext value#,^{usuario@ean.usuario.data$ascimento,
id#,dt$ascimento, converter!essage#,?ata no &omato invNlido. .tili>e
*&1convert?ate/ime pattern#,dd2!!2yyyy, type#,date,28
Permite a formatao de um nmero de acordo com uma definio prvia.
mbolo na formatao de moedas.
*"1output6abel value#,eltimo salNrio1 , &or#,ultimoSalario, 28
*"1input/ext value#,^{usuario@ean.usuario.ultimoSalario,
*&1convert$umber currencySymbol#,Cf, type#,currency,28
ractionDigits: 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
gitos do que foi definido, o nmero ser arredondado.
*"1input/ext value#,^{usuario@ean.usuario.peso, id#,peso,8
*&1convert$umber maxFraction?igits#,4,28
ra o resultado a seguir.
Captulo & - Coponentes JSF
converter utilizado para a utiliz
maxIntegerDigits: Define a quantidade mxima de dgitos da parte
inteira de um nmero.
*"1output6abel value#,;eso1 , &or#,peso, 28
*"1input/ext value#,^{usuario@ean.usuario.peso, id#,peso,8
*&1convert$umber maxFraction?igits#,4, maxInteger?igits#,4,28
*2"1input/ext8
minFractionDigits: Define a quantidade mnima de dgitos da parte
fracionria de um nmero.
*"1output6abel value#,Eltura1 , &or#,altura, 28
*"1input/ext value#,^{usuario@ean.usuario.altura, id#,altura,8
*&1convert$umber minFraction?igits#,0,28
*2"1input/ext8
minIntegerDigits: Define a quantidade mnima de dgitos da parte
inteira de um nmero.
*"1output6abel value#,Eltura1 , &or#,altura, 28
*"1input/ext value#,^{usuario@ean.usuario.altura, id#,altur
*&1convert$umber minFraction?igits#,0, minInteger?igits#,',28
*2"1input/ext8
pattern: Define um padro de formatao personalizado atravs de
uma expresso regular.
*"1output6abel value#,Eltura1 , &or#,alt, 28
*"1input/ext value#,^{usuario@ean.usuario.altura, id#,alt, 8
*&1convert$umber pattern#,^-.--,28
*2"1input/ext8
type: Este atributo especifica como a string deve ser formatada.
Possui trs valores vlidos: number, currency e percentage.
Number o valor padro, currency o valo
percentage usado para percentuais.
*"1output6abel value#,)alor1 , &or#,val, 28
*"1input/ext value#,^{usuario@ean.usuario.valor, id#,val, 8
*&1convert$umber type#,percent,28
*2"1input/ext8
utilizado para a utilizao de conversores criados pelo desenvolvedor, ou
Rosiclia Frasson
85
maxIntegerDigits: Define a quantidade mxima de dgitos da parte
*"1input/ext value#,^{usuario@ean.usuario.peso, id#,peso,8
ts#,4, maxInteger?igits#,4,28
minFractionDigits: Define a quantidade mnima de dgitos da parte
*"1output6abel value#,Eltura1 , &or#,altura, 28
*"1input/ext value#,^{usuario@ean.usuario.altura, id#,altura,8
minIntegerDigits: Define a quantidade mnima de dgitos da parte
*"1output6abel value#,Eltura1 , &or#,altura, 28
*"1input/ext value#,^{usuario@ean.usuario.altura, id#,altura, 8
*&1convert$umber minFraction?igits#,0, minInteger?igits#,',28
pattern: Define um padro de formatao personalizado atravs de
n.usuario.altura, id#,alt, 8
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
*"1input/ext value#,^{usuario@ean.usuario.valor, id#,val, 8
ao de conversores criados pelo desenvolvedor, ou
Captulo & - Coponentes JSF
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 ver
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 ver
determinado intervalo de nmeros.
validateLenght Verifica se uma string possui uma quantidade mnima ou mxima de letras.
*"1output6abel value#,Sen"a1 , &or#,sen"a,28
*"1panel(roup8
validator!essage#,E sen"a deve possuir no mLnimo = caracteres e no
mNximo '- caracteres.,8
*2"1panel(roup8
validateLongRange Verifica se um nmero inteiro est entre um determinado intervalo de
nmeros.
*"1output6abel value#,Idade1 , &or#,idade, 28
*"1panel(roup8
*"1input/ext value#,^{usuario@ean.usuario.idade, id#,idade,
validator!e
anos.,8
*2"1input/ext8
*"1message &or#,idade,28
*2"1panel(roup8
seja, conversores que no fazem parte da especificao.
Durante o processo de construo de aplicativos, alm de converter
valores digitados pelo usurio em tipos especficos, necessrio ver
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.
Utilizado para verificar se um valor numrico real est entre um
determinado intervalo de nmeros.
*"1panel(roup8
*"1input/ext value#,^{usuario@ean.usuario.peso, id#,peso,
validator!essage#,D valor do peso deve estar entre UI e 0I-.,8
*&1validate?oubleCange minimum#,UI.--, maximum#,0I-.--,28
*2"1input/ext8
*"1message &or#,peso, 28
*2"1panel(roup8
Verifica se uma string possui uma quantidade mnima ou mxima de letras.
*"1output6abel value#,Sen"a1 , &or#,sen"a,28
*"1panel(roup8
*"1inputSecret value#,^{usuario@ean.usuario.sen"a, id#,sen"a,
validator!essage#,E sen"a deve possuir no mLnimo = caracteres e no
mNximo '- caracteres.,8
*&1validate6engt" maximum#,'-, minimum#,=,28
*2"1inputSecret8
*"1message &or#,sen"a,28
*2"1panel(roup8
Verifica se um nmero inteiro est entre um determinado intervalo de
nmeros.
*"1output6abel value#,Idade1 , &or#,idade, 28
*"1panel(roup8
*"1input/ext value#,^{usuario@ean.usuario.idade, id#,idade,
validator!essage#,Sa aceitamos candidatos <ue possuam idade entre 'B e B-
anos.,8
*&1validate6ongCange minimum#,'B, maximum#,B-,28
*2"1input/ext8
*"1message &or#,idade,28
*2"1panel(roup8
Rosiclia Frasson
86
seja, conversores que no fazem parte da especificao.
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
ificar se um valor numrico real est entre um
*"1input/ext value#,^{usuario@ean.usuario.peso, id#,peso,
validator!essage#,D valor do peso deve estar entre UI e 0I-.,8
nimum#,UI.--, maximum#,0I-.--,28
Verifica se uma string possui uma quantidade mnima ou mxima de letras.
"1inputSecret value#,^{usuario@ean.usuario.sen"a, id#,sen"a,
validator!essage#,E sen"a deve possuir no mLnimo = caracteres e no
*&1validate6engt" maximum#,'-, minimum#,=,28
Verifica se um nmero inteiro est entre um determinado intervalo de
*"1input/ext value#,^{usuario@ean.usuario.idade, id#,idade,
ssage#,Sa aceitamos candidatos <ue possuam idade entre 'B e B-
*&1validate6ongCange minimum#,'B, maximum#,B-,28
Captulo & - Coponentes JSF
validateRegex Verifica se um texto respeita determinada exp
*"1panel(roup8
*2"1panel(roup8
*"1panel(roup8
validator!essage#
possuir entre = e 'B caracteres.,8
*2"1panel(roup8
validator Este componente deve ser utilizado para v
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 ex
e podem representar valores advindos de uma base de dados.
selectItem Especifica um item para um componente de seleo. Utilizado para valores
estticos.
Verifica se um texto respeita determinada expresso regular.
*"1panel(roup8
*"1output6abel value#,6ogin1 , &or#,login, 28
*"1grap"icImage value#,2imagens2ajuda.png, alt#,ajuda,28
*2"1panel(roup8
*"1panel(roup8
*"1input/ext value#,^{usuario@ean.usuario.login, id#,login,
validator!essage#,D login deve ser composto apenas por letras e deve
possuir entre = e 'B caracteres.,8
*&1validateCegex pattern#,Oa9>P{=J'B,28
*2"1input/ext8
*"1message &or#,login,28
*2"1panel(roup8
Este componente deve ser utilizado para validadores customizados.
Permite carregar um pacote de recursos do Locale da pgina atual e
armazenar o mesmo em um mapa no escopo de request.
Especifica itens para um componente de seleo. Utilizado para valores
dinmicos. No exemplo a seguir, os itens esto armazenados em uma lista
e podem representar valores advindos de uma base de dados.
*"1output6abel value#,\rea de Etua`Ho1 , &or#,areaEtuacao,28
*"1selectDne!enu id#,areaEtuacao,
value#,^{usuario@ean.usuario.areaEtuacao,8
*&1selectItems value#,^{usuario@ean.areas,28
*2"1selectDne!enu8
Especifica um item para um componente de seleo. Utilizado para valores
estticos.
*"1output6abel value#,:obbies1 , &or#,"obbies,28
*"1select!anyA"ec%box id#,"obbies,
value#,^{usuario@ean.usuario."obbies, layout#,page?irection,8
*&1selectItem item)alue#,!csicas,28
*&1selectItem item)alue#,Filmes,28
Rosiclia Frasson
87
resso regular.
*"1grap"icImage value#,2imagens2ajuda.png, alt#,ajuda,28
*"1input/ext value#,^{usuario@ean.usuario.login, id#,login,
,D login deve ser composto apenas por letras e deve
alidadores customizados.
Permite carregar um pacote de recursos do Locale da pgina atual e
armazenar o mesmo em um mapa no escopo de request.
Especifica itens para um componente de seleo. Utilizado para valores
emplo a seguir, os itens esto armazenados em uma lista
e podem representar valores advindos de uma base de dados.
*"1output6abel value#,\rea de Etua`Ho1 , &or#,areaEtuacao,28
value#,^{usuario@ean.usuario.areaEtuacao,8
*&1selectItems value#,^{usuario@ean.areas,28
Especifica um item para um componente de seleo. Utilizado para valores
*"1output6abel value#,:obbies1 , &or#,"obbies,28
ue#,^{usuario@ean.usuario."obbies, layout#,page?irection,8
Captulo & - Coponentes JSF
PASSO-A-PASSO
Cadastro de currculo
Para exemplificar o uso de compone
ser montada.
1. Aps a criao do projeto JSF, necessrio criar as classes de modelo. No pacote modelo
necessria a criao da classe Cargo que deve armazenar os possveis cargos dos candidatos.
pac%age br.com.rosicleia&rasson.curriculo.model;
public class Aargo {
private int codigo;
private String descricao;
public Aargo(int codigoJ String descricao) {
t"is.codigo # codigo;
t"is.descricao # descricao;
@Dverride
public String toString() {
return descricao;
22(ets e sets
2. Ainda no pacote modelo, a classe Conhecimento tem por objeto armazenar os conhecimentos
tcnicos que os candidatos possuem.
*&1selectItem item)alue#,AulinNria,28
*&1selectItem item)alue#,Ertesanato,28
*&1selectItem item)alue#,?ecora`Ho,28
*&1selectItem item)alue#,6ivros,28
*&1selectItem item)alue#,;asseios turLsticos,28
*&1selectItem item)alue#,;rNtica de esportes,28
*2"1select!anyA"ec%box8
Para exemplificar o uso de componentes JSF, uma pgina para cadastro de currculos
1. Aps a criao do projeto JSF, necessrio criar as classes de modelo. No pacote modelo
necessria a criao da classe Cargo que deve armazenar os possveis cargos dos candidatos.
e br.com.rosicleia&rasson.curriculo.model;
public class Aargo {
private int codigo;
private String descricao;
public Aargo(int codigoJ String descricao) {
t"is.codigo # codigo;
t"is.descricao # descricao;
@Dverride
public String toString() {
return descricao;
22(ets e sets
2. Ainda no pacote modelo, a classe Conhecimento tem por objeto armazenar os conhecimentos
tcnicos que os candidatos possuem.
Rosiclia Frasson
88
*&1selectItem item)alue#,;asseios turLsticos,28
*&1selectItem item)alue#,;rNtica de esportes,28
ntes JSF, uma pgina para cadastro de currculos
1. Aps a criao do projeto JSF, necessrio criar as classes de modelo. No pacote modelo
necessria a criao da classe Cargo que deve armazenar os possveis cargos dos candidatos.
2. Ainda no pacote modelo, a classe Conhecimento tem por objeto armazenar os conhecimentos
Captulo & - Coponentes JSF Rosiclia Frasson
89
pac%age br.com.rosicleia&rasson.curriculo.model;
public class Aon"ecimento {
private int codigo;
private String nome;
public Aon"ecimento(int codigoJ String nome) {
t"is.codigo # codigo;
t"is.nome # nome;
@Dverride
public String toString() {
return nome;
22(ets e sets
3. Para facilitar possveis manutenes, o endereo do usurio tambm deve possuir uma classe.
pac%age br.com.rosicleia&rasson.curriculo.model;
public class Endereco {
private String endereco;
private String complemento;
private String municipio;
private String bairro;
private String estado;
22(ets e sets
4. Para finalizar o pacote modelo, necessria a classe candidato.
pac%age br.com.rosicleia&rasson.curriculo.model;
import java.util.?ate;
import java.util.6ist;
public class Aandidato {
private int codigo;
private String nome;
private String cp&;
private ?ate data$ascimento;
private c"ar sexo;
private c"ar nacionalidade;
private String raca;
private String estadoAivil;
private boolean e"?e&iciente;
private String tele&one;
private String email;
private Endereco endereco;
private String login;
private String sen"a;
private 6ist*String8 &ormacoes;
private 6ist*String8 idiomas;
Captulo & - Coponentes JSF Rosiclia Frasson
90
private 6ist*Aon"ecimento8 con"ecimentos;
private 6ist*Aargo8 cargos;retendidos;
private String experiencias;
private double ultimoSalario;
private double pretensaoSalarial;
private int carga:oraria;
22(ets e sets
5. O pacote controller composto pela classe CandidatoBean que tem como responsabilidade
efetuar a ligao entre o modelo e a camada de visualizao composta pelas pginas xhtml.
importante perceber que os cargos e conhecimentos esto sendo adicionados de maneira
esttica. Porm os mesmos poderiam estar armazenados em uma base de dados.
pac%age br.com.rosicleia&rasson.curriculo.controller;
import br.com.rosicleia&rasson.curriculo.model.Aandidato;
import br.com.rosicleia&rasson.curriculo.model.Aargo;
import br.com.rosicleia&rasson.curriculo.model.Aon"ecimento;
import java.util.Erray6ist;
import java.util.6ist;
import javax.&aces.bean.!anaged@ean;
@!anaged@ean
public class Aandidato@ean {
private Aandidato candidato;
private 6ist*Aargo8 cargos;
private 6ist*Aon"ecimento8 con"ecimentos;
public Aandidato@ean() {
candidato # ne3 Aandidato();
cargos # ne3 Erray6ist*8();
con"ecimentos # ne3 Erray6ist*8();
cargos.add(ne3 Aargo('J ,Enalista de Sistemas,));
cargos.add(ne3 Aargo(0J ,Enalista de Fualidade e ;rocessos,));
cargos.add(ne3 Aargo(4J ,Enalista Implementador @I,));
cargos.add(ne3 Aargo(UJ ,Edministrador de @anco de ?ados,));
cargos.add(ne3 Aargo(IJ ,Enalista de In&raestrutura de /I,));
cargos.add(ne3 Aargo(=J ,Enalista de $egacio,));
cargos.add(ne3 Aargo(_J ,Enalista de Suporte,));
cargos.add(ne3 Aargo(BJ ,Enalista de /estes,));
cargos.add(ne3 Aargo(ZJ ,Enalista ;rogramador Gava,));
cargos.add(ne3 Aargo('-J ,Er<uiteto de So&t3are,));
cargos.add(ne3 Aargo(''J ,?esigner (rN&ico,));
cargos.add(ne3 Aargo('0J ,EstagiNrio,));
con"ecimentos.add(ne3 Aon"ecimento('J ,!S ;roject,));
con"ecimentos.add(ne3 Aon"ecimento(0J ,!odelagem de ?ados,));
con"ecimentos.add(ne3 Aon"ecimento(4J ,(estHo da Fualidade ( ISDJ A!!I),));
con"ecimentos.add(ne3 Aon"ecimento(UJ ,(erdncia de ;rojetos,));
con"ecimentos.add(ne3 Aon"ecimento(IJ ,/estes de So&t3are,));
con"ecimentos.add(ne3 Aon"ecimento(=J ,.!6,));
con"ecimentos.add(ne3 Aon"ecimento(_J ,EnNlise e ;rojeto de Sistemas,));
con"ecimentos.add(ne3 Aon"ecimento(BJ ,.sabilidade2Ergonomia de So&t3are,));
con"ecimentos.add(ne3 Aon"ecimento(ZJ ,;ontos de Fun`Ho,));
con"ecimentos.add(ne3 Aon"ecimento('-J ,!etodologias de ?esenvolvimento,));
con"ecimentos.add(ne3 Aon"ecimento(''J ,Ceda`Ho,));
Captulo & - Coponentes JSF Rosiclia Frasson
91
con"ecimentos.add(ne3 Aon"ecimento('0J ,/rabal"o em E<uipe,));
con"ecimentos.add(ne3 Aon"ecimento('4J ,Enterprise Erc"itect,));
con"ecimentos.add(ne3 Aon"ecimento('UJ ,!apeamento de ;rocessos,));
con"ecimentos.add(ne3 Aon"ecimento('IJ ,6evantamento de Ce<uisitos,));
con"ecimentos.add(ne3 Aon"ecimento('=J ,/reinamento de Sistemas,));
con"ecimentos.add(ne3 Aon"ecimento('_J ,Implanta`Ho de Sistemas,));
con"ecimentos.add(ne3 Aon"ecimento('BJ ,ASS,));
con"ecimentos.add(ne3 Aon"ecimento('ZJ ,:/!6,));
public Aandidato getAandidato() {
return candidato;
public void setAandidato(Aandidato candidato) {
t"is.candidato # candidato;
public 6ist*Aargo8 getAargos() {
return cargos;
public void setAargos(6ist*Aargo8 cargos) {
t"is.cargos # cargos;
public 6ist*Aon"ecimento8 getAon"ecimentos() {
return con"ecimentos;
public void setAon"ecimentos(6ist*Aon"ecimento8 con"ecimentos) {
t"is.con"ecimentos # con"ecimentos;
6. Por fim, a pgina index.
*+xml version#]'.-] encoding#]./F9B] +8
*R?DA/S;E "tml ;.@6IA ,922Q4A22?/? 5:/!6 '.- /ransitional22E$,
,"ttp122333.34.org2/C2x"tml'2?/?2x"tml'9transitional.dtd,8
*"tml xmlns#,"ttp122333.34.org2'ZZZ2x"tml,
xmlns1"#,"ttp122java.sun.com2js&2"tml,
xmlns1&#,"ttp122java.sun.com2js&2core,8
*"1"ead8
*title8AurrLculo*2title8
*2"1"ead8
*"1body8
*div id#,cabecal"o,8
*"'8Cevolu`Ho ;eople So&t*2"'8
*p8)en"a &a>er parte da empresa <ue estN trans&ormando o @rasil*2p8
*2div8
*div id#,pagina,8
*div id#,titulo;rincipal,8
*"1panel(rid columns#,0,8
Captulo & - Coponentes JSF Rosiclia Frasson
92
*"1grap"icImage value#,2imagens2estrela.png, alt#,estrela,28
*"48AE?ES/CE SE. A.CCgA.6D*2"48
*2"1panel(rid8
*2div8
*div id#,&ormulario,8
*"1&orm8
*"1messages28
*&ieldset8
*legend8?E?DS ;ESSDEIS*2legend8
*"1panel(rid columns#,0,8
*"1output6abel value#,$ome1 , &or#,nome,28
*"1input/ext value#,^{candidato@ean.candidato.nome, id#,nome, dir#,rtl, si>e#,_I,
re<uired#,true, 28
*"1output6abel value#,A;F1 , &or#,cp&,28
*"1input/ext value#,^{candidato@ean.candidato.cp&, id#,cp&, 28
*"1output6abel value#,?ata $ascimento1 , &or#,dt$ascimento,28
*"1panel(roup8
*"1input/ext value#,^{candidato@ean.candidato.data$ascimento, id#,dt$ascimento,
converter!essage#,?ata no &omato invNlido. .tili>e ??2!!2EEEE., 8
*&1convert?ate/ime pattern#,dd2!!2yyyy, type#,date,28
*2"1input/ext8
*"1message &or#,dt$ascimento, 28
*2"1panel(roup8
*"1output6abel value#,Sexo1 , &or#,sexo, 28
*"1selectDneCadio value#,^{candidato@ean.candidato.sexo, id#,sexo,8
*&1selectItem item6abel#,Feminino, item)alue#,F,28
*&1selectItem item6abel#,!asculino, item)alue#,!,28
*2"1selectDneCadio8
*"1output6abel value#,$acionalidade1 , &or#,nacionalidade, 28
*"1selectDne!enu value#,^{candidato@ean.candidato.nacionalidade,
id#,nacionalidade, 8
*&1selectItem item6abel#,@rasileira, item)alue#,@,28
*&1selectItem item6abel#,Estrangeira, item)alue#,E,28
*2"1selectDne!enu8
*"1output6abel value#,Ca`a1 , &or#,raca, 28
*"1selectDne6istbox value#,^{candidato@ean.candidato.raca, id#,raca, si>e#,4,8
*&1selectItem item6abel#,@ranca, item)alue#,@ranca,28
*&1selectItem item6abel#,;reta, item)alue#,;reta,28
*&1selectItem item6abel#,;arda, item)alue#,;arda,28
*&1selectItem item6abel#,IndLgena, item)alue#,IndLgena,28
*&1selectItem item6abel#,Emarela, item)alue#,Emarela,28
*&1selectItem item6abel#,$Ho desejo declarar, item)alue#,$Ho declarou,28
*2"1selectDne6istbox8
*"1output6abel value#,Estado civil1 , &or#,estAivil, 28
*"1selectDne6istbox value#,^{candidato@ean.candidato.raca, id#,estAivil, si>e#,4,8
*&1selectItem item6abel#,Solteiro, item)alue#,Solteiro,28
*&1selectItem item6abel#,Aasado, item)alue#,Aasado,28
*&1selectItem item6abel#,)icvo, item)alue#,)icvo,28
*&1selectItem item6abel#,?ivorciado, item)alue#,?ivorciado,28
Captulo & - Coponentes JSF Rosiclia Frasson
93
*&1selectItem item6abel#,Dutro, item)alue#,Dutro,28
*2"1selectDne6istbox8
*"1select@ooleanA"ec%box id#,de&iciente,
value#,^{candidato@ean.candidato.e"?e&iciente,28
*"1output6abel value#,;ortador de necessidades especiais, &or#,de&iciente,28
*"1output6abel value#,/ele&one1 , &or#,tele&one,28
*"1input/ext value#,^{candidato@ean.candidato.tele&one, id#,tele&one,28
*"1output6abel value#,Email , &or#,email,28
*"1input/ext value#,^{candidato@ean.candidato.email, id#,email, si>e#,_I,28
*2"1panel(rid8
*2&ieldset8
*br 28
*br 28
*&ieldset8
*legend8E$?ECEhD*2legend8
*"1panel(rid columns#,0,8
*"1output6abel value#,Endere`o1 , &or#,endereco,28
*"1input/ext value#,^{candidato@ean.candidato.endereco.endereco, id#,endereco,
si>e#,_I, 28
*"1output6abel value#,Aomplemento1 , &or#,complemento,28
*"1input/ext value#,^{candidato@ean.candidato.endereco.complemento,
id#,complemento, si>e#,_I,28
*"1output6abel value#,!unicLpio1 , &or#,municipio,28
*"1input/ext value#,^{candidato@ean.candidato.endereco.municipio, id#,municipio,
si>e#,_I, 28
*"1output6abel value#,@airro1 , &or#,bairro,28
*"1input/ext value#,^{candidato@ean.candidato.endereco.bairro, id#,bairro,
si>e#,_I,28
*"1output6abel value#,Estado1 , &or#,estado,28
*"1selectDne!enu value#,^{candidato@ean.candidato.endereco.estado, id#,estado, 8
*&1selectItem item6abel#,EA, item)alue#,EA,28
*&1selectItem item6abel#,E6, item)alue#,E6,28
*&1selectItem item6abel#,E;, item)alue#,E;,28
*&1selectItem item6abel#,E!, item)alue#,E!,28
*&1selectItem item6abel#,@E, item)alue#,@E,28
*&1selectItem item6abel#,AE, item)alue#,AE,28
*&1selectItem item6abel#,?F, item)alue#,?F,28
*&1selectItem item6abel#,ES, item)alue#,ES,28
*&1selectItem item6abel#,(D, item)alue#,(D,28
*&1selectItem item6abel#,!E, item)alue#,!E,28
*&1selectItem item6abel#,!/, item)alue#,!/,28
*&1selectItem item6abel#,!S, item)alue#,!S,28
*&1selectItem item6abel#,!(, item)alue#,!(,28
*&1selectItem item6abel#,;E, item)alue#,;E,28
*&1selectItem item6abel#,;@, item)alue#,;@,28
*&1selectItem item6abel#,;C, item)alue#,;C,28
*&1selectItem item6abel#,;E, item)alue#,;E,28
*&1selectItem item6abel#,;I, item)alue#,;I,28
*&1selectItem item6abel#,CG, item)alue#,CG,28
*&1selectItem item6abel#,C$, item)alue#,CG,28
Captulo & - Coponentes JSF Rosiclia Frasson
94
*&1selectItem item6abel#,CS, item)alue#,CG,28
*&1selectItem item6abel#,CD, item)alue#,CD,28
*&1selectItem item6abel#,CC, item)alue#,CC,28
*&1selectItem item6abel#,SA, item)alue#,SA,28
*&1selectItem item6abel#,S;, item)alue#,S;,28
*&1selectItem item6abel#,SE, item)alue#,SE,28
*&1selectItem item6abel#,/D, item)alue#,/D,28
*2"1selectDne!enu8
*2"1panel(rid8
*2&ieldset8
*br 28
*br 28
*&ieldset8
*legend8?E?DS ?E EAESSD*2legend8
*"1panel(rid columns#,0,8
*"1panel(roup8
*"1output6abel value#,6ogin1 , &or#,login, 28
*"1grap"icImage value#,2imagens2ajuda.png, alt#,ajuda,28
*2"1panel(roup8
*"1panel(roup8
*"1input/ext value#,^{candidato@ean.candidato.login, id#,login,
validator!essage#,D login deve ser composto apenas por letras e deve possuir entre = e 'B caracteres.,8
*&1validateCegex pattern#,Oa9>P{=J'B,28
*2"1input/ext8
*"1message &or#,login,28
*2"1panel(roup8
*"1output6abel value#,Sen"a1 , &or#,sen"a,28
*"1panel(roup8
*"1inputSecret value#,^{candidato@ean.candidato.sen"a, id#,sen"a,
validator!essage#,E sen"a deve possuir no mLnimo = caracteres e no mNximo '- caracteres.,8
*&1validate6engt" maximum#,'-, minimum#,=,28
*2"1inputSecret8
*"1message &or#,sen"a,28
*2"1panel(roup8
*2"1panel(rid8
*2&ieldset8
*br 28
*br 28
*&ieldset8
*legend8FDC!EhiD E E5;ECIj$AIES ;CDFISSID$EIS*2legend8
*"1panel(rid columns#,0,8
*"1output6abel value#,Forma`Ho1 , &or#,&ormacao,28
*"1select!any6istbox id#,&ormacao, value#,^{candidato@ean.candidato.&ormacoes,
si>e#,4,8
*&1selectItem item)alue#,', item6abel#,Ensino !Tdio,28
*&1selectItem item)alue#,0, item6abel#,Aurso /Tcnico,28
*&1selectItem item)alue#,4, item6abel#,(radua`Ho,28
*&1selectItem item)alue#,U, item6abel#,Especiali>a`Ho,28
*&1selectItem item)alue#,I, item6abel#,!estrado,28
*&1selectItem item)alue#,=, item6abel#,?outorado,28
Captulo & - Coponentes JSF Rosiclia Frasson
95
*2"1select!any6istbox8
*"1output/ext28
*"1output/ext28
*"1output6abel value#,Idiomas1 , &or#,idiomas,28
*"1select!any!enu id#,idiomas, value#,^{candidato@ean.candidato.idiomas,
style#,"eig"t1 Z-px, 8
*&1selectItem item)alue#,Inglds,28
*&1selectItem item)alue#,Francds,28
*&1selectItem item)alue#,ElemHo,28
*&1selectItem item)alue#,Espan"ol,28
*&1selectItem item)alue#,!andarim,28
*2"1select!any!enu8
*"1output/ext28
*"1output/ext28
*2"1panel(rid8
*"1panel(rid columns#,',8
*"1output6abel value#,:abilidades2Aon"ecimentos1 , &or#,con"ecimento,28
*"1select!anyA"ec%box id#,con"ecimento,
value#,^{candidato@ean.candidato.con"ecimentos, layout#,page?irection, 8
*&1selectItems value#,^{candidato@ean.con"ecimentos,28
*2"1select!anyA"ec%box8
*"1output6abel value#,Aargos ;retendidos1 , &or#,cargos;re,28
*"1select!any6istbox id#,cargos;re,
value#,^{candidato@ean.candidato.cargos;retendidos,8
*&1selectItems value#,^{candidato@ean.cargos,28
*2"1select!any6istbox8
*"1output6abel value#,Experidncias ;ro&issionais1 , &or#,ex;ro&issional,28
*"1input/extarea value#,^{candidato@ean.candidato.experiencias, id#,ex;ro&issional,
ro3s#,'-, cols#,B-,28
*"1output6abel value#,eltimo SalNrio1 , &or#,ultimoSalario, 28
*"1input/ext value#,^{candidato@ean.candidato.ultimoSalario, id#,ultimoSalario,8
*&1convert$umber currencySymbol#,Cf, type#,currency,28
*2"1input/ext8
*"1output6abel value#,;retensHo Salarial1 , &or#,pretensaoSalarial, 28
*"1input/ext value#,^{candidato@ean.candidato.pretensaoSalarial,
id#,pretensaoSalarial,8
*2"1input/ext8
*"1output6abel value#,Aarga :orNria1 , &or#,carga, 28
*"1input/ext value#,^{candidato@ean.candidato.carga:oraria, id#,carga,8
*2"1input/ext8
*2"1panel(rid8
*2&ieldset8
*br 28
*"1command@utton value#,Aadastrar, action#,^{candidato@ean.adicionarAandidato,28
*br 28
*br 28
*"1output6in% value#,"ttp122333.google.com,8
*"1output/ext value#,;ara mais in&orma`bes cli<ue a<ui,28
*2"1output6in%8
Captulo & - Coponentes JSF
*br 28
*br 28
*br 28
*2"1&orm8
*2div8
*2div8
*2"1body8
*2"tml8
Vale lembrar que a codificao apresentada no salva o candidato. Serve apenas para
exemplificar o uso dos componentes JSF.
7. Executando o projeto, a pgina exibida deve ser semelhante a figura a seguir.
Vale lembrar que a codificao apresentada no salva o candidato. Serve apenas para
exemplificar o uso dos componentes JSF.
Executando o projeto, a pgina exibida deve ser semelhante a figura a seguir.
Rosiclia Frasson
96
Vale lembrar que a codificao apresentada no salva o candidato. Serve apenas para
Executando o projeto, a pgina exibida deve ser semelhante a figura a seguir.
Captulo ' - CSS
CSS
Os usurios de pginas web esto cad
boa usabilidade, possuir uma navegao simples e agradvel, onde o usurio possa concluir sua
tarefa em poucos passos. Alm disso, o usurio deseja pginas que sejam visualmente atraentes.
Como visto no captulo anterior a criao de pginas utilizando apenas componentes JSF, no
deixa as mesmas esteticamente bonitas.
Para aprimorar o visual, necessrio aplicar CSS (Cascading Style Sheets) nas pginas.
O CSS usado para definir a aparncia da pgina. Com el
posicionamento, entre outros detalhes, dos componentes HTML.
Declarao do CSS
O CSS pode ser declarado diretamente na tag ou na seo head de uma pgina HTML, no
entanto, mais comum e produtivo utilizar folha
permite que o mesmo estilo seja aplicado em diversas pginas. Essas folhas de estilos possuem a
extenso .css.
A indicaco do uso de uma folha de estilo deve ficar dentro da tag head. Embora possa ser
utilizado o caminho completo do arquivo, esta uma abordagem no recomendada, pois, em caso
de mudanas na estrutura das pginas, a indicao das folhas de estilo continua a mesma.
O JSF possui um componente chamado ResourceHandler que trata cada recurso como
uma biblioteca. O ResourceHandler define uma estrutura de diretrios para facilitar a localizao
de cada recurso. Dessa forma, no deve ser utilizado o caminho fsico na declarao de arquivos
CSS, imagens e gifs. O recomendado que uma pasta chamada resourc
Pginas Web. Abaixo desta pasta devem ser criadas pastas que sero tratadas como bibliotecas.
Segue uma estrutura como exemplo.
No modelo apresentado foram criados os recursos css e imagens. Em todas as pginas, o
acesso a estes recursos definido da mesma forma
*"1"ead8
*"1outputStyles"eet library#,css, name#,estilo.css,28
*2"1"ead8
Os usurios de pginas web esto cada vez mais exigentes. As pginas web devem ter
boa usabilidade, possuir uma navegao simples e agradvel, onde o usurio possa concluir sua
tarefa em poucos passos. Alm disso, o usurio deseja pginas que sejam visualmente atraentes.
lo anterior a criao de pginas utilizando apenas componentes JSF, no
deixa as mesmas esteticamente bonitas.
Para aprimorar o visual, necessrio aplicar CSS (Cascading Style Sheets) nas pginas.
O CSS usado para definir a aparncia da pgina. Com ele possvel definir a cor, o tamanho, o
posicionamento, entre outros detalhes, dos componentes HTML.
O CSS pode ser declarado diretamente na tag ou na seo head de uma pgina HTML, no
entanto, mais comum e produtivo utilizar folhas de estilo externas, j que essa abordagem
permite que o mesmo estilo seja aplicado em diversas pginas. Essas folhas de estilos possuem a
A indicaco do uso de uma folha de estilo deve ficar dentro da tag head. Embora possa ser
o caminho completo do arquivo, esta uma abordagem no recomendada, pois, em caso
de mudanas na estrutura das pginas, a indicao das folhas de estilo continua a mesma.
O JSF possui um componente chamado ResourceHandler que trata cada recurso como
biblioteca. O ResourceHandler define uma estrutura de diretrios para facilitar a localizao
de cada recurso. Dessa forma, no deve ser utilizado o caminho fsico na declarao de arquivos
CSS, imagens e gifs. O recomendado que uma pasta chamada resources seja criada dentro de
Pginas Web. Abaixo desta pasta devem ser criadas pastas que sero tratadas como bibliotecas.
Segue uma estrutura como exemplo.
No modelo apresentado foram criados os recursos css e imagens. Em todas as pginas, o
es recursos definido da mesma forma.
*"1"ead8
*"1outputStyles"eet library#,css, name#,estilo.css,28
*2"1"ead8
Rosiclia Frasson
97
a vez mais exigentes. As pginas web devem ter
boa usabilidade, possuir uma navegao simples e agradvel, onde o usurio possa concluir sua
tarefa em poucos passos. Alm disso, o usurio deseja pginas que sejam visualmente atraentes.
lo anterior a criao de pginas utilizando apenas componentes JSF, no
Para aprimorar o visual, necessrio aplicar CSS (Cascading Style Sheets) nas pginas.
e possvel definir a cor, o tamanho, o
O CSS pode ser declarado diretamente na tag ou na seo head de uma pgina HTML, no
s de estilo externas, j que essa abordagem
permite que o mesmo estilo seja aplicado em diversas pginas. Essas folhas de estilos possuem a
A indicaco do uso de uma folha de estilo deve ficar dentro da tag head. Embora possa ser
o caminho completo do arquivo, esta uma abordagem no recomendada, pois, em caso
de mudanas na estrutura das pginas, a indicao das folhas de estilo continua a mesma.
O JSF possui um componente chamado ResourceHandler que trata cada recurso como
biblioteca. O ResourceHandler define uma estrutura de diretrios para facilitar a localizao
de cada recurso. Dessa forma, no deve ser utilizado o caminho fsico na declarao de arquivos
es seja criada dentro de
Pginas Web. Abaixo desta pasta devem ser criadas pastas que sero tratadas como bibliotecas.
No modelo apresentado foram criados os recursos css e imagens. Em todas as pginas, o
Captulo ' - CSS
Sintaxe do CSS
Uma regra CSS pode ser dividida em duas partes: seletor e declarao. O seletor
normalmente o elemento HTML que deve r
propriedade e um valor. Por sua vez a propriedade um atributo de estilo que ser
Cada propriedade deve possuir um valor.
Alm de definir um estilo para um elemento HTML, possvel especific
utilizando classes e ids. Um id uma identificao nica, s pode ser utilizado uma vez na pgina
html. J a classe reutilizvel, ou seja, pode ser repetida na mesma pgina.
Os seletores podem ser combinados para aplicar formataes mais e
possvel aplicar um bloco de declaraes para mais de um seletor.
HTML
*div id#,cabecal"o,8
E<ui vai o cabe`al"o do site
*2div8
*div id#,conteudo,8
*div class#,subtitulo,8
*p8subtLtulo ' *2p8
*2div8
*div class#,subtitulo,8
*p8subtLtulo 0 *2p8
*2div8
*2div8
*div id#,rodape,8
E<ui vai o rodapT do site
*2div8
Propriedades
background-color Especifica a cor de um elemento de fundo. Em CSS a cor pode ser
especificada:
Uma regra CSS pode ser dividida em duas partes: seletor e declarao. O seletor
normalmente o elemento HTML que deve receber o estilo. A declarao composta por uma
propriedade e um valor. Por sua vez a propriedade um atributo de estilo que ser
Cada propriedade deve possuir um valor.
Alm de definir um estilo para um elemento HTML, possvel especific
utilizando classes e ids. Um id uma identificao nica, s pode ser utilizado uma vez na pgina
html. J a classe reutilizvel, ou seja, pode ser repetida na mesma pgina.
Os seletores podem ser combinados para aplicar formataes mais e
possvel aplicar um bloco de declaraes para mais de um seletor.
CSS
^cabecal"o{
2Y?eclara`besY2
^conteudo{
2Y?eclara`besY2
^rodape{
2Y?eclara`besY2
.subtitulo{
2Y?eclara`besY2
Especifica a cor de um elemento de fundo. Em CSS a cor pode ser
especificada:
em hexadecimal: #FFFFFF.
em RGB: rgb(255,0,0).
pelo nome da cor: red.
body{
Rosiclia Frasson
98
Uma regra CSS pode ser dividida em duas partes: seletor e declarao. O seletor
eceber o estilo. A declarao composta por uma
propriedade e um valor. Por sua vez a propriedade um atributo de estilo que ser aplicado.
Alm de definir um estilo para um elemento HTML, possvel especificar seletores
utilizando classes e ids. Um id uma identificao nica, s pode ser utilizado uma vez na pgina
Os seletores podem ser combinados para aplicar formataes mais especficas. Tambm
Especifica a cor de um elemento de fundo. Em CSS a cor pode ser
Captulo ' - CSS Rosiclia Frasson
99
bac%ground9color1 ^-B0_=_;
background-image Indica um arquivo de imagem para ser exibido no fundo do elemento.
body{
bac%ground9image1 url(,&undo.png,);
background-repeat Controla a repetio da imagem de fundo. Essa propriedade pode conter
os seguintes valores:
repeat: a imagem repetida tanto na horizontal quanto na
vertical.
repeat-x: a imagem repetida na horizontal.
repeat-y: a imagem repetida na vertical.
no-repeat: a imagem no repetida.
body{
bac%ground9image1 url(,&undo.png,);
bac%groun9repeat1 no9repeat;
background-
attachment
Define se a imagem de fundo fixa ou se rola junto com a pgina.
Possui dois valores fixed e scroll.
body{
bac%ground9image1 url(,&undo.png,);
bac%ground9attac"ment1 scroll;
color Define a cor de um elemento. Normalmente a cor especificada em
nmeros hexadecimais, porm tambm ser definida atravs de seu
nome ou RGB.
p{
color1 ^04FFI=;
text-align Define o alinhamento horizontal do texto. Os valores disponveis para
esta propriedade so:
center: texto alinhado ao centro.
right: texto alinhado direita.
left: texto alinhado esquerda.
justify: texto justificado.
p{
text9align1 le&t;
Captulo ' - CSS Rosiclia Frasson
100
text-decoration Propriedade que permite adicionar ou retirar a decorao de um texto.
Pode conter os seguintes valores:
underline: texto sublinhado.
line-through: texto tachado.
overline: texto com sobrelinha.
blink: texto que pisca.
none: sem decorao.
"'{
text9decoration1 underline;
text-transform Permite transformaes no formato caixa-alta ou caixa-baixa no texto.
Permite os seguintes valores:
capitalize: primeira letra das palavras em maiscula.
lowercase: todas as letras em maisculas.
uppercase: todas as letras em minsculas.
none: sem efeito.
"'{
text9trans&orm1 uppercase;
text-ident Permite que um recuo seja aplicado na primeira linha do pargrafo.
p{
text9ident1 4-px;
font-family Define a famlia de fonte utilizada. Normalmente definida uma lista de
fontes e sua prioridade para apresentao na pgina. Dessa forma, se a
primeira fonte da lista no estiver instalada na mquina do usurio,
dever ser usada a segunda. Se a segunda tambm no estiver
instalada usa-se a terceira e assim at ser encontrada uma fonte
instalada.
As fontes podem ser definidas pelo nome da famlia, como por exemplo,
Times New Roman, Georgia, Arial, Tahoma. Tambm podem ser
definidas fontes de famlias genricas, ou seja, fontes que pertencem a
um grupo com aparncia uniforme. Dentre as famlias genricas podem
ser citadas:
serif: fontes que possuem p.
sans-serif: fontes que no possuem p.
monospace: fontes que possuem todos os caracteres com uma
largura fixa.
Captulo ' - CSS Rosiclia Frasson
101
recomendado que a lista de fontes seja encerrada com uma fonte
genrica.
"' {
&ont9&amily1 arialJ verdanaJ sans9seri&;
font-style Define o estilo da fonte que pode ser normal, italic e oblique.
"' {
&ont9style1 italic;
font-size Define o tamanho da fonte. O tamanho da fonte pode ser definido em
pixel ou em. O tamanho de 1 em equivale a 16 px.
"' {
&ont9si>e10.Iem;
"' {
&ont9si>e1U-px;
list-style-type Define o estilo de marcador de uma lista. Em uma lista no ordenada os
marcadores devem ser sempre do mesmo tipo e podem assumir os
seguintes valores:
none: sem marcador.
disc: crculo preenchido.
circle: crculo no preenchido.
square: quadrado cheio.
J nas listas ordenadas, os marcadores podem ser:
decimal: nmero decimal.
decimal-leading-zero: o marcador um nmero decimal com dois
dgitos.
upper-latin: o marcador composto por letras maisculas.
lower-latin: o marcador composto por letras minsculas.
upper-roman: o marcador composto por letras romanas.
ul {
list9style9type1 circle;
width Define a largura de um elemento.
Captulo ' - CSS Rosiclia Frasson
102
"' {
3idt"1 0--px;
border1 'px solid blac%;
bac%ground1 orange;
height Define a altura de um elemento.
"' {
"eig"t1 I-px;
border1 'px solid blac%;
bac%ground1 orange;
float Desloca um elemento para a esquerda ou para a direita.
^&igura {
&loat1le&t;
3idt"1 '--px;
Para limpar a flutuao dos elementos posteriores, necessrio utilizar
a propriedade clear com o valor both.
Links
Os links podem ser formatados usando qualquer propriedade CSS. Diferentemente do que
ocorre com outros seletores, os links podem ser formatados de acordo com o seu estado.
a Estiliza um link.
a {
color1 blue;
a:link Estiliza um link no visitado.
a 1 lin% {
color1 green;
a:visited Estiliza um link j visitado pelo usurio.
Captulo ' - CSS
a:hover Estiliza o link quando o mouse est sobre ele.
a: active Estiliza o lin
Box Model
O box model uma espcie de caixa que envolve todos os elementos HTML. O box model
possui opes de ajuste de margem, borda, preenchimento e contedo para cada element
margin: rea limpa ao redor da borda. A margem no possui uma cor de fundo, que
completamente transparente.
border: rea que gira em torno do contedo e do padding.
padding: rea limpa ao redor do contedo.
content: rea onde o texto e as imagens aparecem.
border-style Define o estilo da borda. Alguns estilos suportados:
none: sem borda.
dotted: borda pontilhada.
dashed:
a1 visited {
color1 blue;
Estiliza o link quando o mouse est sobre ele.
a1"over1 visited {
bac%ground9color1^FF_-U?;
Estiliza o link quando est sendo clicado.
a1active {
bac%ground9color1^FF_-U?;
O box model uma espcie de caixa que envolve todos os elementos HTML. O box model
possui opes de ajuste de margem, borda, preenchimento e contedo para cada element
margin: rea limpa ao redor da borda. A margem no possui uma cor de fundo, que
completamente transparente.
ea que gira em torno do contedo e do padding.
padding: rea limpa ao redor do contedo.
content: rea onde o texto e as imagens aparecem.
Define o estilo da borda. Alguns estilos suportados:
none: sem borda.
dotted: borda pontilhada.
dashed: borda tracejada.
Rosiclia Frasson
103
O box model uma espcie de caixa que envolve todos os elementos HTML. O box model
possui opes de ajuste de margem, borda, preenchimento e contedo para cada elemento.
margin: rea limpa ao redor da borda. A margem no possui uma cor de fundo, que
Captulo ' - CSS Rosiclia Frasson
104
solid: borda em linha slida.
double: define duas bordas.
"' {
border9style1 dotted;
Para que as demais propriedades de borda surtam efeito, o border-style deve
ser diferente de none.
Os lados que compem a borda podem possuir propriedades diferentes. Nesse
caso, necessrio indicar o lado em que a propriedade ser aplicada: top,
bottom, right e left.
border-width Define o tamanho da borda. A espessura pode ser definida em pixels ou
utilizando os valores thin, medium, e thick (fina, mdia e grossa).
"' {
border93idt"1 t"ic%;
border-color Define a cor da borda.
"' {
border9color1 gold;
margin Define uma margem para o elemento. Esta propriedade adiciona espao aps o
limite do elemento. possvel indicar o lado que a margem ser aplicada
utilizando bottom, top, left e right.
possvel tambm aplicar margens diferentes em uma mesma propriedade.
Sendo que o primeiro valor representa top, o segundo right, o terceiro bottom e
o ltimo left.
body{
margin10Ipx I-px _Ipx '--px;
"'{
margin9top1 '-px;
margin9bottom1 0-px;
margin9le&t1 'Ipx;
margin9rig"t1 4-px;
padding Define uma margem interna para o elemento, ou seja, a distncia entre o limite
do elemento, sua borda e seu contedo.
Captulo ' - CSS
CSS3
O CSS3 o novo padro para CSS. compatvel com as verses anteriores e possui
alguns recursos interessantes. A seguir so listados alguns.
border-radius Adiciona bordas
box-shadow Define sombra aos elementos da pgina. Este atributo necessita de alguns
valores para especificar as caractersticas da sombra:
Deslocamento horizontal da sombra: Corresponde ao primei
atributo. Se for definido um valor positivo a sombra deve aparecer
direita do elemento. Para sombra aparecer esquerda do elemento,
necessrio definir um valor negativo.
Deslocamento vertical da sombra: Corresponde ao segundo valor da
propriedade. Corresponde ao deslocamento vertical da sombra com
relao ao elemento que a produz. Se for definido um valor positivo a
sombra aparece abaixo do elemento e um valor negativo aplica a
sombra acima do elemento.
Esfumaado: o terceiro valor da pro
a sombra no esfumaada. Valores maiores aumentam o efeito.
cor da sombra: o ltimo elemento. Podem ser utilizados os nomes das
cores, rgb ou hexadecimal.
Para o Firefox essa propriedade definida como
Chrome e Safari a propriedade definida como
body{
padding9top10Ipx;
padding9bottom10Ipx;
padding9rig"t1I-px;
padding9le&t1I-px;
O CSS3 o novo padro para CSS. compatvel com as verses anteriores e possui
alguns recursos interessantes. A seguir so listados alguns.
Adiciona bordas arredondadas ao elemento.
div{
border9radius10Ipx;
Define sombra aos elementos da pgina. Este atributo necessita de alguns
valores para especificar as caractersticas da sombra:
Deslocamento horizontal da sombra: Corresponde ao primei
atributo. Se for definido um valor positivo a sombra deve aparecer
direita do elemento. Para sombra aparecer esquerda do elemento,
necessrio definir um valor negativo.
Deslocamento vertical da sombra: Corresponde ao segundo valor da
riedade. Corresponde ao deslocamento vertical da sombra com
relao ao elemento que a produz. Se for definido um valor positivo a
sombra aparece abaixo do elemento e um valor negativo aplica a
sombra acima do elemento.
Esfumaado: o terceiro valor da propriedade. O valor zero indica que
a sombra no esfumaada. Valores maiores aumentam o efeito.
cor da sombra: o ltimo elemento. Podem ser utilizados os nomes das
cores, rgb ou hexadecimal.
Para o Firefox essa propriedade definida como -moz
Chrome e Safari a propriedade definida como -webkit-box
^caixa{
3idt"1 '--px;
"eig"t1 '--px;
bac%ground1 ^AFE0F4;
Rosiclia Frasson
105
O CSS3 o novo padro para CSS. compatvel com as verses anteriores e possui
Define sombra aos elementos da pgina. Este atributo necessita de alguns
Deslocamento horizontal da sombra: Corresponde ao primeiro valor do
atributo. Se for definido um valor positivo a sombra deve aparecer
direita do elemento. Para sombra aparecer esquerda do elemento,
Deslocamento vertical da sombra: Corresponde ao segundo valor da
riedade. Corresponde ao deslocamento vertical da sombra com
relao ao elemento que a produz. Se for definido um valor positivo a
sombra aparece abaixo do elemento e um valor negativo aplica a
priedade. O valor zero indica que
a sombra no esfumaada. Valores maiores aumentam o efeito.
cor da sombra: o ltimo elemento. Podem ser utilizados os nomes das
moz-box-shadow. Para o
box-shadow.
Captulo ' - CSS
PASSO-A-PASSO
Com o intuito de deixar o projeto apresentado no captulo anterior
com uma melhor aparncia sero inseridas algumas regras de estilo.
1. No projeto criado no captulo anterior, necessrio indicar a folha de est
pgina.
*"1"ead8
*title8AurrLculo*2title8
*"1outputStyles"eet library#,css, name#,style.css,28
*2"1"ead8
2. O prximo passo a criao da folha de estilo. Segue a seguir a codificao da mesma.
body{
margin1 -;
padding1 -;
bac%ground1 ^F=F=F=;
&ont9si>e1 '4px;
text9align1 justi&y;
^cabecal"o{
3idt"1 B--px;
"eig"t1 '--px;
margin1 - auto;
^cabecal"o "'J ^cabecal"o p{
margin1 -;
padding1 -;
box9s"ado31 Ipx Ipx 4px ^444;
93eb%it9box9s"ado31 Ipx Ipx 4px ^444;
9mo>9box9s"ado31 Ipx Ipx 4px ^444;
Com o intuito de deixar o projeto apresentado no captulo anterior - cadastro de currculo
com uma melhor aparncia sero inseridas algumas regras de estilo.
1. No projeto criado no captulo anterior, necessrio indicar a folha de estilo que ser aplicada a
*"1"ead8
*title8AurrLculo*2title8
*"1outputStyles"eet library#,css, name#,style.css,28
*2"1"ead8
2. O prximo passo a criao da folha de estilo. Segue a seguir a codificao da mesma.
margin1 -;
padding1 -;
bac%ground1 ^F=F=F=;
si>e1 '4px;
align1 justi&y;
^cabecal"o{
3idt"1 B--px;
"eig"t1 '--px;
margin1 - auto;
^cabecal"o "'J ^cabecal"o p{
margin1 -;
padding1 -;
Rosiclia Frasson
106
s"ado31 Ipx Ipx 4px ^444;
cadastro de currculo -
ilo que ser aplicada a
2. O prximo passo a criao da folha de estilo. Segue a seguir a codificao da mesma.
Captulo ' - CSS Rosiclia Frasson
107
^cabecal"o "'{
&ont9si>e1 I0px;
color1 ^0-E--';
^cabecal"o p{
margin9top1 -px;
margin9le&t1 4-px;
padding1 - - - Upx;
&ont9si>e1 'Ipx;
&ont93eig"t1 normal;
color1 ^B=EE==;
text9trans&orm1 uppercase;
^pagina{
3idt"1 B--px;
margin1 - auto;
padding1 -px;
bac%ground1 ^&&&&&&;
box9s"ado31 Ipx Upx '-px ^444J 9Ipx 9Ipx '-px ^ccc;
^titulo;rincipal{
text9trans&orm1 uppercase;
bac%ground9color1 ^0-E--';
color1 ^FFFFFF;
&ont9si>e1 'Ipx;
^&ormulario{
margin1 0-px;
^&ormulario inputJ textareaJ selectJ optionJ body{
&ont9&amily1 ErialJ :elveticaJ sans9seri&;
color1 ^B4B0=E;
&ieldset{
border9radius1 Ipx;
Captulo ' - CSS Rosiclia Frasson
108
Captulo 1( - Escopos JSF Rosiclia Frasson
109
Escopos JSF
Request Scope
Os objetos armazenados com escopo request sobrevivem apenas a uma submisso do
ciclo de vida do JSF, ou seja, os dados recebidos so processados e uma resposta enviada ao
cliente, aps o envio da resposta os dados so apagados da memria do servidor. A cada
requisio criada uma nova instncia do managed bean, sendo assim, as informaes no so
compartilhadas entre as requisies.
O escopo request possui o menor tempo de vida entre os escopos, sendo assim os objetos
permanecem pouco tempo na memria, melhorando a performance da aplicao. RequestScoped
o escopo apropriado em telas onde no so necessrias chamadas ajax e no necessrio
armazenar dados entre as requisies dos usurios. Um bom exemplo para utilizao desse
escopo a submisso de um formulrio simples.
@!anaged@ean
@Ce<uestScoped
public class ExemploEscopoCe<uest{
Os managed beans com escopo request no necessitam da anotao @RequestScoped,
pois este o escopo padro. Porm uma boa prtica utilizar a anotao.
Session Scope
Os objetos armazenados com o escopo session sobrevivem enquanto a seo do usurio
estiver ativa. Em outras palavras, ao utilizar este escopo, os atributos do managed bean tero
seus valores mantidos at o fim da sesso do usurio.
O escopo de sesso recomendado para o armazenamento de informaes do usurio e
dados de preferncia deste. Vale ressaltar que a sesso definida pelo vnculo do usurio com o
navegador. Sendo assim, se dois navegadores distintos forem abertos pelo mesmo usurio, duas
sees diferentes sero criadas no servidor.
Uma seo pode ser destruda em duas situaes: a primeira delas quando a prpria
aplicao decide finalizar a sesso, que o que ocorre quando um usurio faz o logout e a outra
situao se d quando o servidor decide expirar a sesso. O tempo para que uma seo seja
expirada pode ser configurada no web.xml.
@!anaged@ean
@SessionScoped
public class ExemploEscopoSession{
Embora a utilizao do Session Scope seja relativamente fcil, importante ter muita
cautela ao anotar um managed bean com este escopo. importante lembrar que um objeto com
escopo session permanecer na memria durante toda a seo. Isso significa que quanto maior a
Captulo 1( - Escopos JSF Rosiclia Frasson
110
quantidade de usurios maior ser a quantidade de memria que o servidor ter que gerenciar, ou
seja, a cada nova seo criada um novo managed bean com todos os atributos ser alocado na
memria do servidor.
Application Scoped
A utilizao do escopo de aplicao cria uma instncia do managed bean no momento em
que a classe requisitada e a mantm at a finalizao da aplicao. Com o application Scoped,
o managed bean estar disponvel para todos os usurios da aplicao enquanto a mesma estiver
sendo executada. importante ressaltar que informaes que no devem ser compartilhadas no
devem possuir este escopo.
O escopo de aplicao geralmente utilizado para guardar valores de configurao e
realizao de cache manual como o carregamento de listagem de estados e municpios.
@!anaged@ean
@EpplicationScoped
public class ExemploEscopoEplicacao{
Atravs da configurao @ManagedBean (eager = true), o servidor instancia o managed
bean antes que qualquer tela da aplicao seja acessada. Isto significa que a informao ser
carregada em memria antes de ser solicitada pelo usurio.
View Scoped
O escopo de viso mantm os dados enquanto o usurio permanecer na pgina. No
momento em que h troca de pgina o objeto excludo da memria.
View Scoped possui um tempo de vida maior que o Request Scoped e menor que o
Session Scoped e muito indicado para pginas que possuem requisies ajax.
importante salientar que um managed bean com anotao @ViewScoped s removido
da memria se a mudana de pgina for feita pelo mtodo POST o que pode acarretar em objetos
desnecessrios na memria, caso a navegao for feita via link.
@!anaged@ean
@)ie3Scoped
public class ExemploEscopo)ie3{
PASSO-A-PASSO
Com o intuito de demonstrar a diferena entre os escopos dos managed beans, deve ser criado
um novo projeto JSF.
1. O pacote modelo deve conter uma classe com o nome de Aluno. Esse aluno deve possuir o
atributo nome.
Captulo 1( - Escopos JSF Rosiclia Frasson
111
pac%age br.com.rosicleia&rasson.cap'-escopos.modelo;
public class Eluno {
private String nome;
public String get$ome() {
return nome;
public void set$ome(String nome) {
t"is.nome # nome;
2. Para controlar os dados recebidos e enviados pela visualizao, necessrio criar um managed
bean. Neste primeiro exemplo ser utilizado o escopo request.
pac%age br.com.rosicleia&rasson.cap'-escopos.controle;
import br.com.rosicleia&rasson.cap'-escopos.modelo.Eluno;
import java.util.Erray6ist;
import java.util.6ist;
import javax.&aces.bean.!anaged@ean;
import javax.&aces.bean.Ce<uestScoped;
@!anaged@ean
@Ce<uestScoped
public class Eluno@ean {
private 6ist*Eluno8 alunos # ne3 Erray6ist*8();
private Eluno aluno # ne3 Eluno();
public String adicionaEluno(){
t"is.alunos.add(t"is.aluno);
t"is.aluno # ne3 Eluno();
return ,index,;
public 6ist*Eluno8 getElunos() {
return alunos;
public Eluno getEluno() {
return aluno;
public void setEluno(Eluno aluno) {
t"is.aluno # aluno;
Captulo 1( - Escopos JSF Rosiclia Frasson
112
3. A pgina de visualizao deve ser composta por um campo de texto e um boto para adio dos
alunos e um componente de repetio para exibir todos os alunos cadastrados. Como a aplicao
no est conectada a uma base de dados, a lista dos alunos ser mantida durante o tempo de vida
do managed bean.
*+xml version#]'.-] encoding#]./F9B] +8
*R?DA/S;E "tml ;.@6IA ,922Q4A22?/? 5:/!6 '.- /ransitional22E$,
,"ttp122333.34.org2/C2x"tml'2?/?2x"tml'9transitional.dtd,8
*"tml xmlns#,"ttp122333.34.org2'ZZZ2x"tml, xmlns1"#,"ttp122java.sun.com2js&2"tml,
xmlns1ui#,"ttp122xmlns.jcp.org2js&2&acelets,8
*"1"ead8
*title8;rimeira pNgina GSF*2title8
*2"1"ead8
*"1body8
*"1&orm8
*"1panel(rid columns#,0,8
*"1output6abel value#,$ome1 , &or#,nome,28
*"1input/ext value#,^{aluno@ean.aluno.nome, id#,nome,28
*"1command@utton value#,Edicionar, action#,^{aluno@ean.adicionaEluno,28
*2"1panel(rid8
*2"1&orm8
*"1panel(roup rendered#,^{not empty aluno@ean.alunos,8
*"'8Elunos cadastrados*2"'8
*ul8
*ui1repeat value#,^{aluno@ean.alunos, var#,aluno,8
*li8
*"1output/ext value#,^{aluno.nome,28
*2li8
*2ui1repeat8
*2ul8
*2"1panel(roup8
*2"1body8
*2"tml8
Captulo 1( - Escopos JSF
Executando a aplicao uma pgina semelhante a pgina mostrada a seguir deve ser exibida.
importante perceber que quando o escopo do managed bean request, a cada requisio, ou
seja, cada vez que o usurio acionar o boto adicionar, a lista fica v
managed beans com escopo request duram o tempo de uma requisio.
Alterando o managed bean para o escopo de sesso, possvel perceber que os alunos
permanecem na lista cada vez que o usurio aciona o boto de adicionar.
pac%age br.com.rosicleia&rasson.cap'-escopos.controle;
import br.com.rosicleia&rasson.cap'-escopos.modelo.Eluno;
import java.util.Erray6ist;
import java.util.6ist;
import javax.&aces.bean.!anaged@ean;
import javax.&aces.bean.SessionScoped;
@!anaged@ean
@SessionScoped
public class Eluno@ean {
Como a seo muda a cada usurio ou navegador distinto, necessrio abrir a pgina em um
outro navegador para visualizar como o SessionScoped funciona. Como mostra a imagem a seguir, o
mesmo software em sees distin
Executando a aplicao uma pgina semelhante a pgina mostrada a seguir deve ser exibida.
importante perceber que quando o escopo do managed bean request, a cada requisio, ou
seja, cada vez que o usurio acionar o boto adicionar, a lista fica vazia. Isso ocorre porque os
managed beans com escopo request duram o tempo de uma requisio.
Alterando o managed bean para o escopo de sesso, possvel perceber que os alunos
permanecem na lista cada vez que o usurio aciona o boto de adicionar.
%age br.com.rosicleia&rasson.cap'-escopos.controle;
import br.com.rosicleia&rasson.cap'-escopos.modelo.Eluno;
import java.util.Erray6ist;
import java.util.6ist;
import javax.&aces.bean.!anaged@ean;
import javax.&aces.bean.SessionScoped;
@!anaged@ean
ssionScoped
public class Eluno@ean {
Como a seo muda a cada usurio ou navegador distinto, necessrio abrir a pgina em um
outro navegador para visualizar como o SessionScoped funciona. Como mostra a imagem a seguir, o
mesmo software em sees distintas possui em sua lista de alunos, valores distintos.
Rosiclia Frasson
113
Executando a aplicao uma pgina semelhante a pgina mostrada a seguir deve ser exibida.
importante perceber que quando o escopo do managed bean request, a cada requisio, ou
azia. Isso ocorre porque os
Alterando o managed bean para o escopo de sesso, possvel perceber que os alunos
import br.com.rosicleia&rasson.cap'-escopos.modelo.Eluno;
Como a seo muda a cada usurio ou navegador distinto, necessrio abrir a pgina em um
outro navegador para visualizar como o SessionScoped funciona. Como mostra a imagem a seguir, o
tas possui em sua lista de alunos, valores distintos.
Captulo 1( - Escopos JSF
Se o managed bean for alterado para escopo de aplicao, possvel perceber que mesmo em
sees distintas os valores contidos na lista de alunos continuam os mesmos.
pac%age br.com.rosicleia&rasson.
import br.com.rosicleia&rasson.cap'-escopos.modelo.Eluno;
import java.util.Erray6ist;
import java.util.6ist;
import javax.&aces.bean.EpplicationScoped;
import javax.&aces.bean.!anaged@ean;
@!anaged@ean
@EpplicationScoped
public clas
Se o managed bean for alterado para escopo de aplicao, possvel perceber que mesmo em
sees distintas os valores contidos na lista de alunos continuam os mesmos.
pac%age br.com.rosicleia&rasson.cap'-escopos.controle;
import br.com.rosicleia&rasson.cap'-escopos.modelo.Eluno;
import java.util.Erray6ist;
import java.util.6ist;
import javax.&aces.bean.EpplicationScoped;
import javax.&aces.bean.!anaged@ean;
@!anaged@ean
@EpplicationScoped
public class Eluno@ean {
Rosiclia Frasson
114
Se o managed bean for alterado para escopo de aplicao, possvel perceber que mesmo em
sees distintas os valores contidos na lista de alunos continuam os mesmos.
import br.com.rosicleia&rasson.cap'-escopos.modelo.Eluno;
Captulo 1( - Escopos JSF
Para finalizar resta exemplificar o escopo de viso. Como j mencionado o escopo de viso
existe na memria enquanto o usurio permanecer na pgina exibida. No exemplo exposto, o mtodo
adicionar um mtodo void. Isso significa que ao a
mesma. Portanto, para demonstrar este escopo necessrio uma modificao no mtodo adicionar,
para que o mesmo seja redirecionado. No exemplo mostrado ser redirecionado para a mesma
pgina, mas o comportamento ser o mesmo se a pgina redirecionada for diferente.
pac%age br.com.rosicleia&rasson.cap'-escopos.controle;
import br.com.rosicleia&rasson.cap'-escopos.modelo.Eluno;
import java.util.Erray6ist;
import java.util.6ist;
import javax.&aces.bean.!anaged@ea
import javax.&aces.bean.)ie3Scoped;
Para finalizar resta exemplificar o escopo de viso. Como j mencionado o escopo de viso
existe na memria enquanto o usurio permanecer na pgina exibida. No exemplo exposto, o mtodo
adicionar um mtodo void. Isso significa que ao acionar o boto adicionar, a pgina continua a
mesma. Portanto, para demonstrar este escopo necessrio uma modificao no mtodo adicionar,
para que o mesmo seja redirecionado. No exemplo mostrado ser redirecionado para a mesma
o ser o mesmo se a pgina redirecionada for diferente.
pac%age br.com.rosicleia&rasson.cap'-escopos.controle;
import br.com.rosicleia&rasson.cap'-escopos.modelo.Eluno;
import java.util.Erray6ist;
import java.util.6ist;
import javax.&aces.bean.!anaged@ean;
import javax.&aces.bean.)ie3Scoped;
Rosiclia Frasson
115
Para finalizar resta exemplificar o escopo de viso. Como j mencionado o escopo de viso
existe na memria enquanto o usurio permanecer na pgina exibida. No exemplo exposto, o mtodo
cionar o boto adicionar, a pgina continua a
mesma. Portanto, para demonstrar este escopo necessrio uma modificao no mtodo adicionar,
para que o mesmo seja redirecionado. No exemplo mostrado ser redirecionado para a mesma
o ser o mesmo se a pgina redirecionada for diferente.
import br.com.rosicleia&rasson.cap'-escopos.modelo.Eluno;
Captulo 1( - Escopos JSF Rosiclia Frasson
116
@!anaged@ean
@)ie3Scoped
public class Eluno@ean {
private 6ist*Eluno8 alunos # ne3 Erray6ist*8();
private Eluno aluno # ne3 Eluno();
public String adicionaEluno() {
t"is.alunos.add(t"is.aluno);
t"is.aluno # ne3 Eluno();
return ,index,;
Executando o projeto possvel perceber que a lista est sempre vazia. Isso ocorre porque
cada vez que o boto adicionar acionado a pgina redirecionada. O ViewScoped muito til em
pginas com chamadas ajax.
Captulo 11 - Facelets
Facelets
Facelets um framework utilizado para a
padronizados, bem como para a criao de componentes customizveis.
As aplicaes, em sua grande maioria, possuem um modelo padro para as pg
menu, o cabealho e o rodap tendem a ter a mesma estrutura no aplicativo inteiro. Codificar
estes componentes em todas as pginas torna difcil a manuteno das mesmas. O suporte a
templates do facelets permite a definio de uma estrutura visual
reaproveitada em diversas telas.
Na padronizao das telas com o uso do facelets possvel construir uma estrutura fixa
com o que semelhante em todas as telas como topo, menu e rodap.
Alm da facilidade de manuteno, reduo
consequente diminuio no tempo de desenvolvimento, a utilizao de facelets prov outras
vantagens. A principal delas que com a utilizao da tecnologia o cdigo a execuo do cdigo
fica de 30% a 50% mais rpida do qu
aplicao e est incorporado ao JSF 2.0.
Para construir um template para uma aplicao, necessrio identificar um padro em um
determinado conjunto de telas. Em posse deste padro, faz
utilizando trechos estticos e dinmicos. Vale ressaltar que um template nunca ser executado,
pois uma pgina incompleta, deste modo, importante que os templates sejam salvos dentro da
pasta WEB-INF para que o usurio no consiga ace
Em pginas que utilizam facelets necessrio importar o namespace de facelets:
http://xmlns.jcp.org/jsf/facelets. Seguem algumas tags dessa biblioteca:
Tag Descrio
ui:insert Define uma rea de substituio no template, ou seja,
exemplo, o menu, o topo e o corpo da pgina.
ui: include Insere um fragmento de tela dentro de uma pgina. Essa tag muito utilizada
quando o cdigo fonte de uma pgina fica muito extenso. Esse cdigo pode ser
separado em vrios a
ui:define Define o contedo de uma rea criada no template como ui:insert.
Facelets um framework utilizado para a construo de pginas com templates
bem como para a criao de componentes customizveis.
As aplicaes, em sua grande maioria, possuem um modelo padro para as pg
menu, o cabealho e o rodap tendem a ter a mesma estrutura no aplicativo inteiro. Codificar
estes componentes em todas as pginas torna difcil a manuteno das mesmas. O suporte a
templates do facelets permite a definio de uma estrutura visual padro que pode ser
reaproveitada em diversas telas.
Na padronizao das telas com o uso do facelets possvel construir uma estrutura fixa
com o que semelhante em todas as telas como topo, menu e rodap.
Alm da facilidade de manuteno, reduo drstica na quantidade de cdigo e
consequente diminuio no tempo de desenvolvimento, a utilizao de facelets prov outras
vantagens. A principal delas que com a utilizao da tecnologia o cdigo a execuo do cdigo
fica de 30% a 50% mais rpida do que em pginas jsp. O facelets independente de servidor de
aplicao e est incorporado ao JSF 2.0.
Para construir um template para uma aplicao, necessrio identificar um padro em um
determinado conjunto de telas. Em posse deste padro, faz-se a mont
utilizando trechos estticos e dinmicos. Vale ressaltar que um template nunca ser executado,
pois uma pgina incompleta, deste modo, importante que os templates sejam salvos dentro da
INF para que o usurio no consiga acess-las diretamente.
Em pginas que utilizam facelets necessrio importar o namespace de facelets:
http://xmlns.jcp.org/jsf/facelets. Seguem algumas tags dessa biblioteca:
Define uma rea de substituio no template, ou seja, demarca onde ser, por
exemplo, o menu, o topo e o corpo da pgina.
Insere um fragmento de tela dentro de uma pgina. Essa tag muito utilizada
quando o cdigo fonte de uma pgina fica muito extenso. Esse cdigo pode ser
separado em vrios arquivos, o que facilita a manuteno.
Define o contedo de uma rea criada no template como ui:insert.
Rosiclia Frasson
117
construo de pginas com templates
As aplicaes, em sua grande maioria, possuem um modelo padro para as pginas. O
menu, o cabealho e o rodap tendem a ter a mesma estrutura no aplicativo inteiro. Codificar
estes componentes em todas as pginas torna difcil a manuteno das mesmas. O suporte a
padro que pode ser
Na padronizao das telas com o uso do facelets possvel construir uma estrutura fixa
drstica na quantidade de cdigo e
consequente diminuio no tempo de desenvolvimento, a utilizao de facelets prov outras
vantagens. A principal delas que com a utilizao da tecnologia o cdigo a execuo do cdigo
e em pginas jsp. O facelets independente de servidor de
Para construir um template para uma aplicao, necessrio identificar um padro em um
se a montagem do esqueleto
utilizando trechos estticos e dinmicos. Vale ressaltar que um template nunca ser executado,
pois uma pgina incompleta, deste modo, importante que os templates sejam salvos dentro da
Em pginas que utilizam facelets necessrio importar o namespace de facelets:
demarca onde ser, por
Insere um fragmento de tela dentro de uma pgina. Essa tag muito utilizada
quando o cdigo fonte de uma pgina fica muito extenso. Esse cdigo pode ser
rquivos, o que facilita a manuteno.
Define o contedo de uma rea criada no template como ui:insert.
Captulo 11 - Facelets
ui:composition Define o relacionamento de composio entre a tela e o template.
PASSO-A-PASSO
Criao de um template
Como j mencionado um template nunca deve ser executado, pois trata
incompleta. Dessa forma recomendado que os templates fiquem dentra da pasta WEB
usurio no tenha acesso a mesma.
1. Aps a criao de um novo projeto, necessrio criar
INF. Dentro da pasta criada, necessrio um arquivo com extenso .xhtml. No caso ilustrado foi criado o
arquivo template.xhtml.
2. No template criado necessrio definir os trechos estticos e dinmicos. O
apresentado possui o trecho dinmico contedo e os trechos estticos: topo, menuLateral e rodap.
*+xml version#]'.-] encoding#]./F
*R?DA/S;E "tml ;.@6IA ,
,"ttp122333.34.org2/C2x"tml'2?/?2x"
*"tml xmlns#,"ttp122333.34.org2'ZZZ2x"tml,
xmlns1ui#,"ttp122xmlns.jcp.org2js&2&acelets,
xmlns1"#,"ttp122xmlns.jcp.org2js&2"tml,8
*"1"ead8
*2"1"ead8
*"1body8
*div id#,topo,8
/opo
*2div8
*div id#,conteudo,8
Define o relacionamento de composio entre a tela e o template.
o um template nunca deve ser executado, pois trata
incompleta. Dessa forma recomendado que os templates fiquem dentra da pasta WEB
usurio no tenha acesso a mesma.
1. Aps a criao de um novo projeto, necessrio criar uma pasta templates dentro do diretrio WEB
INF. Dentro da pasta criada, necessrio um arquivo com extenso .xhtml. No caso ilustrado foi criado o
2. No template criado necessrio definir os trechos estticos e dinmicos. O
apresentado possui o trecho dinmico contedo e os trechos estticos: topo, menuLateral e rodap.
*+xml version#]'.-] encoding#]./F9B] +8
*R?DA/S;E "tml ;.@6IA ,922Q4A22?/? 5:/!6 '.- /ransitional22E$,
,"ttp122333.34.org2/C2x"tml'2?/?2x"tml'9transitional.dtd,8
*"tml xmlns#,"ttp122333.34.org2'ZZZ2x"tml,
xmlns1ui#,"ttp122xmlns.jcp.org2js&2&acelets,
xmlns1"#,"ttp122xmlns.jcp.org2js&2"tml,8
*div id#,topo,8
*div id#,conteudo,8
Rosiclia Frasson
118
Define o relacionamento de composio entre a tela e o template.
o um template nunca deve ser executado, pois trata-se de uma pgina
incompleta. Dessa forma recomendado que os templates fiquem dentra da pasta WEB-INF para que o
uma pasta templates dentro do diretrio WEB-
INF. Dentro da pasta criada, necessrio um arquivo com extenso .xhtml. No caso ilustrado foi criado o
2. No template criado necessrio definir os trechos estticos e dinmicos. O trecho de cdigo
apresentado possui o trecho dinmico contedo e os trechos estticos: topo, menuLateral e rodap.
22Q4A22?/? 5:/!6 '.- /ransitional22E$,
Captulo 11 - Facelets
*ui1insert name#,conteudo,8Aontecdo*2ui1insert8
*2div8
*div id#,menu6ateral,8
!enu 6ateral
*2div8
*div id#,rodape,8
CodapT
*2div8
*2"1body8
*2"tml8
3. Na utilizao deste template, importante definir o que ser colocado no template nos trechos
dinmicos. Neste caso o nico trecho dinmico o contedo. Portanto a pgina index, cujo cdigo est
mostrado a seguir possui apenas a definio do contedo, o
os que foram definidos no template.
*ui1composition xmlns1ui#,"ttp122java.sun.com2js&2&acelets,
template#,.2QE@
xmlns #,"ttp122333.34.org2'ZZZ2x"tml,8
*ui1de&ine name#,conteudo,8
;Ngina inicial
*2ui1de&ine8
*2ui1composition8
4. Ao executar a pgina index do projeto, deve ser exibida uma pgina semelhante a imagem a seguir.
importante perceber que a pgina exibida possui trechos definid
index.
*ui1insert name#,conteudo,8Aontecdo*2ui1insert8
*div id#,menu6ateral,8
!enu 6ateral
*div id#,rodape,8
Na utilizao deste template, importante definir o que ser colocado no template nos trechos
dinmicos. Neste caso o nico trecho dinmico o contedo. Portanto a pgina index, cujo cdigo est
mostrado a seguir possui apenas a definio do contedo, o menu, rodap e cabealho exibidos sero
os que foram definidos no template.
*ui1composition xmlns1ui#,"ttp122java.sun.com2js&2&acelets,
template#,.2QE@9I$F2templates2template.x"tml,
xmlns #,"ttp122333.34.org2'ZZZ2x"tml,8
*ui1de&ine name#,conteudo,8
;Ngina inicial
*2ui1de&ine8
*2ui1composition8
4. Ao executar a pgina index do projeto, deve ser exibida uma pgina semelhante a imagem a seguir.
importante perceber que a pgina exibida possui trechos definidos no template e na pgina
Rosiclia Frasson
119
Na utilizao deste template, importante definir o que ser colocado no template nos trechos
dinmicos. Neste caso o nico trecho dinmico o contedo. Portanto a pgina index, cujo cdigo est
menu, rodap e cabealho exibidos sero
*ui1composition xmlns1ui#,"ttp122java.sun.com2js&2&acelets,
I$F2templates2template.x"tml,
4. Ao executar a pgina index do projeto, deve ser exibida uma pgina semelhante a imagem a seguir.
os no template e na pgina
Captulo 11 - Facelets
5. O posicionamento de cada trecho deve ser feito utilizando CSS.
6. Para simplificar a construo das pginas, tambm possvel que as mesmas sejam divididas. No
exemplo mostrado o menu poderia ser criado em uma pgina distinta e incluso no template.
*ui1composition xmlns1ui#,"ttp122java.sun.com2js&2&acelet
5. O posicionamento de cada trecho deve ser feito utilizando CSS.
^topo {
position1 relative;
bac%ground9color1 ^-4=&ab;
padding1 Ipx;
margin1 -px -px '-px -px;
^rodape {
position1 relative;
bac%ground9color1 ^c0d&e&;
padding1 Ipx;
margin1 '-px -px -px -px;
^menu6ateral {
&loat1 le&t;
bac%ground9color1 ^ece4aI;
padding1 Ipx;
3idt"1 'I-px;
^conteudo {
&loat1 rig"t;
bac%ground9color1 ^cc&&cc;
padding1 Ipx;
3idt"1 UI-px;
6. Para simplificar a construo das pginas, tambm possvel que as mesmas sejam divididas. No
exemplo mostrado o menu poderia ser criado em uma pgina distinta e incluso no template.
*ui1composition xmlns1ui#,"ttp122java.sun.com2js&2&acelet
Rosiclia Frasson
120
6. Para simplificar a construo das pginas, tambm possvel que as mesmas sejam divididas. No
exemplo mostrado o menu poderia ser criado em uma pgina distinta e incluso no template.
*ui1composition xmlns1ui#,"ttp122java.sun.com2js&2&acelets,
Captulo 11 - Facelets
xmlns #,"ttp122333.34.org2'ZZZ2x"tml,
xmlns1"#,"ttp122xmlns.jcp.org2js&2"tml,8
*"1&orm8
*ul8
*li8Aadastro*2li8
*li8Celatario*2li8
*2ul8
*2"1&orm8
*2ui1composition8
7. Na pgina onde o menu deve ser incluso, neste caso, o template, deve ser adicionado o comando a
seguir.
xmlns #,"ttp122333.34.org2'ZZZ2x"tml,
xmlns1"#,"ttp122xmlns.jcp.org2js&2"tml,8
*"1&orm8
*ul8
*li8Aadastro*2li8
*li8Celatario*2li8
*2ul8
*2"1&orm8
*2ui1composition8
pgina onde o menu deve ser incluso, neste caso, o template, deve ser adicionado o comando a
*div id#,menu6ateral,8
*ui1include src#,menu.x"tml,28
*2div8
Rosiclia Frasson
121
pgina onde o menu deve ser incluso, neste caso, o template, deve ser adicionado o comando a
Captulo 12 - Filtros Rosiclia Frasson
122
Filtros
Lanados na especificao Servlet 2.3, os filtros so classes que permitem que cdigos
sejam executados antes da requisio e depois que a resposta gerada, ou seja, eles permitem
que os objetos HTTPServletRequest e HTTPServletResponse sejam acessados antes dos
servlets. Os filtros interceptam requisies e respostas, sendo totalmente transparentes para os
clientes e para os servlets.
A nvel de implementao um filtro uma classe Java que implementa a interface
javax.servlet.Filter.
public class G;EFilter implements Filter{
A interface Filter exige a implementao de trs mtodos: init, destroy e doFilter.
@Dverride
public void init(FilterAon&ig &ilterAon&ig) t"ro3s ServletException {
@Dverride
public void doFilter(ServletCe<uest re<uestJ ServletCesponse responseJ FilterA"ain c"ain) t"ro3s
IDExceptionJ ServletException {
@Dverride
public void destroy() {
init: mtodo executado quando o filtro carregado pelo container. Como parmetro
passado um FilterConfig. Um objeto FilterConfig representa a configurao para o filtro.
Desse objeto possvel obter o nome do filtro, os parmetros de inicializao e o
ServletContext.
destroy: mtodo executado quando o filtro descarregado no container. Este mtodo avisa
o filtro que ele est sendo desativado, para que o mesmo possa liberar eventuais recursos
da memria.
doFilter: mtodo que executa a filtragem. O mtodo doFilter recebe trs parmetros:
ServletRequest, ServletResponse e FilterChain. Os objetos ServletRequest e
ServletResponse so os mesmos que sero passados a um servlet.
No interessante que um filtro processe toda a requisio. A grande utilidade dos filtros
a interceptao de vrios requests semelhantes, sendo assim, os filtros so interessantes para
encapsular tarefas recorrentes. Cada filtro encapsula apenas uma responsabilidade. Porm, eles
podem ser concatenados ou encadeados para permitir que uma requisio passe por mais de um
filtro.
O objeto FilterChain utilizado pelo Filter para executar o prximo filtro, ou, se este for o
ltimo, indicar ao container que este deve seguir seu processamento. Sendo assim, os comandos
Captulo 12 - Filtros Rosiclia Frasson
123
colocados antes da chamada chain.doFilter so executados na ida e os comandos colocados
aps so executados na volta.
c"ain.doFilter(re<uestJ response);
importante ressaltar que em todas as requisies feitas ao container verificado se
existe um filtro associado ao recurso solicitado. Em caso afirmativo, a requisio redirecionada
para o filtro. Este por sua vez executa os seus comandos e aps permite que o processamento
normal do request prossiga. Os filtros tambm podem ser utilizados para tomada de decises, ou
seja, eles podem decidir se uma requisio executada ou se interrompem o caminho normal da
requisio.
O uso de filtros permite que informaes sejam armazenadas na requisio. Para efetuar
este armazenamento utilizado o mtodo setAttribute no request. O mtodo setAttribute necessita
de uma identificao para o objeto que est sendo armazenado na requisio e o objeto que deve
ser guardado. Para acessar este objeto utilizado o mtodo getAttribute.
re<uest.setEttribute(,Entity!anager,J manager);
Para funcionar os filtros devem ser registrados. Esse registro pode ser feito no web.xml ou
atravs de anotao. A seguir est sendo demonstrado como registrar um filtro atravs de
anotao. O atributo servletNames define os servlets que sero filtrados pelo filtro.
@QebFilter(servlet$ames # ,Faces Servlet,)
PASSO-A-PASSO
Conexo com banco de dados com Filter
A inicializao e finalizao de uma unidade de persistncia deve ser efetuada apenas uma
vez durante a execuo da aplicao. Como j mencionado, os filtros possuem esta caracterstica.
Eles so carregados quando a aplicao executada e destrudos quando a aplicao
finalizada. Sendo assim, ser demonstrado a utilizao de um filtro para a criao da fbrica de
conexo e controle das transaes com a base de dados.
1. Aps criar um novo projeto, o primeiro passo a criao da unidade de persistncia. No
Netbeans possvel a criao de uma unidade de persistncia de forma automtica como
mostrado no captulo 1. O cdigo da unidade de persistncia deve ficar similar ao cdigo abaixo.
*+xml version#,'.-, encoding#,./F9B,+8
*persistence version#,0.-, xmlns#,"ttp122java.sun.com2xml2ns2persistence,
xmlns1xsi#,"ttp122333.34.org20--'25!6Sc"ema9instance,
xsi1sc"ema6ocation#,"ttp122java.sun.com2xml2ns2persistence
"ttp122java.sun.com2xml2ns2persistence2persistence707-.xsd,8
*persistence9unit name#,Aap''Aonexao@ancoFiltro;., transaction9
Captulo 12 - Filtros Rosiclia Frasson
124
type#,CESD.CAE76DAE6,8
*provider8org."ibernate.ejb.:ibernate;ersistence*2provider8
*properties8
*property name#,"ibernate."bm0ddl.auto,
value#,update,28
*property name #,"ibernate.dialect,
value #,org."ibernate.dialect.!ySF6?ialect,28
*property name #,javax.persistence.jdbc.driver,
value #,com.mys<l.jdbc.?river,28
*property name #,javax.persistence.jdbc.user,
value #,root,28
*property name #,javax.persistence.jdbc.pass3ord,
value #,,28
*property name #,javax.persistence.jdbc.url,
value #,jdbc1mys<l122local"ost144-=2Aap'0Aonexao@ancoFiltro,28
*2properties8
*2persistence9unit8
*2persistence8
2. Com o persistence.xml criado, necessrio criar uma classe, neste exemplo, com o nome de
JPAFilter dentro do pacote filter. Essa classe deve implementar a interface javax.servlet.Filter.
import javax.servlet.Filter;
public class G;EFilter implements Filter{
3. A interface Filter exige que sejam implementados os mtodos init, destroy e doFilter.
@Dverride
public void init(FilterAon&ig &ilterAon&ig) t"ro3s ServletException {
@Dverride
public void doFilter(ServletCe<uest re<uestJ ServletCesponse responseJ FilterA"ain c"ain) t"ro3s
IDExceptionJ ServletException {
@Dverride
public void destroy() {
4. A classe EntityManagerFactory descobre quem cria as conexes e necessrio uma varivel
para armazenar uma instncia da mesma.
private Entity!anagerFactory &actory;
5. Para obter uma instncia de EntityManagerFactory utilizado o mtodo
Captulo 12 - Filtros Rosiclia Frasson
125
createEntityManagerFactory indicando qual a persistence-unit que foi definida no
persistence.xml, no nosso caso Cap11ConexaoBancoFiltro. Esse procedimento feito no mtodo
init.
public void init(FilterAon&ig &ilterAon&ig) t"ro3s ServletException {
t"is.&actory # ;ersistence.createEntity!anagerFactory(,Aap''Aonexao@ancoFiltro;.,);
6. O mtodo destroy responsvel por destruir a instncia de EntityManagerFactory.
public void destroy() {
t"is.&actory.close();
7. O mtodo doFilter abre a conexo, armazena o gerenciador de entidades no request, inicializa
os recursos da transao com o mtodo begin. O mtodo commit confirma a transao caso no
ocorra algum erro ou rollback caso algum erro ocorrer.
public void doFilter(ServletCe<uest re<uestJ ServletCesponse responseJ FilterA"ain c"ain) t"ro3s
IDExceptionJ ServletException {
Entity!anager manager # t"is.&actory.createEntity!anager();
re<uest.setEttribute(,Entity!anager,J manager);
manager.get/ransaction().begin();
c"ain.doFilter(re<uestJ response);
try {
manager.get/ransaction().commit();
catc" (Exception e) {
manager.get/ransaction().rollbac%();
&inally {
manager.close();
8. Para funcionar, o filtro tem que ser registrado. A anotao exibida a seguir indica que o filtro
ser aplicado no Faces Servlet, que o servlet do JSF.
@QebFilter(servlet$ames # ,Faces Servlet,)
9. Com o intuito de testar o filtro, ser construda a aplicao completa. Sendo assim, o prximo
passo criar os beans da aplicao. Neste caso, ser simulado um software para utilizao de um
rh para controle dos funcionrios. Os beans j esto com as anotaes da JPA.
pac%age br.com.rosicleia&rasson.cap'0conexaobanco&iltro.model;
import javax.persistence.Entity;
Captulo 12 - Filtros Rosiclia Frasson
126
import javax.persistence.(enerated)alue;
import javax.persistence.Id;
import javax.persistence.6ob;
@Entity
public class Aargo {
@Id
@(enerated)alue
private int codigo;
private String nome;
@6ob
private String descricao;
22(ets e sets
pac%age br.com.rosicleia&rasson.cap''conexaobanco&iltro.model;
import javax.persistence.Entity;
import javax.persistence.(enerated)alue;
import javax.persistence.Id;
@Entity
public class Endereco {
@Id
@(enerated)alue
private int codigo;
private String endereco;
private String bairro;
private String cidade;
private String estado;
private int numero;
private String complemento;
22(ets e sets
pac%age br.com.rosicleia&rasson.cap''conexaobanco&iltro.model;
import java.util.?ate;
import javax.persistence.Aascade/ype;
import javax.persistence.Aolumn;
import javax.persistence.Entity;
import javax.persistence.(enerated)alue;
import javax.persistence.Id;
import javax.persistence.!any/oDne;
import javax.persistence.Dne/oDne;
import javax.persistence./emporal;
import javax.persistence./emporal/ype;
Captulo 12 - Filtros Rosiclia Frasson
127
@Entity
public class Funcionario {
@Id
@(enerated)alue
private int codigo;
private String nome;
private String cp&;
@/emporal(/emporal/ype.?E/E)
private ?ate data$ascimento;
@!any/oDne
private Aargo cargo;
private String tele&one;
private String email;
@Dne/oDne(cascade # Aascade/ype.E66)
private Endereco endereco;
public Funcionario() {
endereco # ne3 Endereco();
22(ets e sets
10. A camada de persistncia ser construda utilizando um DAO genrico. Dessa forma deve
conter uma interface com todos os mtodos comuns e a implementao desta. importante
perceber que diferente do CRUD apresentado no captulo 2, com a utilizao de filtros a classe
DAOJPA no possui os comandos referentes ao controle de transaes. Este controle est
implementado no JPAFilter.
Tambm no necessria a criao de uma classe para servir como fbrica de EntityManager,
esta fbrica tambm est embutida no JPAFilter.
pac%age br.com.rosicleia&rasson.cap''conexaobanco&iltro.model.persistencia.dao;
import java.io.Seriali>able;
import java.util.6ist;
public inter&ace ?ED*/J I extends Seriali>able8 {
void save(/ entity);
void remove(Alass*/8 classeJ I p%);
/ get@yId(Alass*/8 classeJ I p%);
6ist*/8 getEll(Alass*/8 classe);
pac%age br.com.rosicleia&rasson.cap''conexaobanco&iltro.model.persistencia;
Captulo 12 - Filtros Rosiclia Frasson
128
import br.com.rosicleia&rasson.cap''conexaobanco&iltro.model.persistencia.dao.?ED;
import java.io.Seriali>able;
import java.util.6ist;
import javax.persistence.Entity!anager;
import javax.persistence.$oCesultException;
import javax.persistence.Fuery;
public class ?EDG;E*/J I extends Seriali>able8 implements ?ED*/J I8 {
private Entity!anager manager;
public ?EDG;E(Entity!anager manager) {
t"is.manager # manager;
@Dverride
public void save(/ entity) {
t"is.manager.merge(entity);
@Dverride
public void remove(Alass*/8 classeJ I p%) {
/ entity # t"is.get@yId(classeJ p%);
t"is.manager.remove(entity);
@Dverride
public / get@yId(Alass*/8 classeJ I p%) {
try {
return t"is.manager.&ind(classeJ p%);
catc" ($oCesultException e) {
return null;
@Dverride
public 6ist*/8 getEll(Alass*/8 classe) {
Fuery < # t"is.manager.createFuery(,select x &rom ,
M classe.getSimple$ame() M , x,);
return <.getCesult6ist();
11. Para que as entidades possam utilizar o DAO genrico, necessrio criar a interface e sua
implementao para cada uma delas.
pac%age br.com.rosicleia&rasson.cap''conexaobanco&iltro.model.persistencia.dao;
import br.com.rosicleia&rasson.cap''conexaobanco&iltro.model.Aargo;
public inter&ace Aargo?ED extends ?ED*AargoJ Integer8{
Captulo 12 - Filtros Rosiclia Frasson
129
pac%age br.com.rosicleia&rasson.cap''conexaobanco&iltro.model.persistencia;
import br.com.rosicleia&rasson.cap''conexaobanco&iltro.model.Aargo;
import br.com.rosicleia&rasson.cap''conexaobanco&iltro.model.persistencia.dao.Aargo?ED;
import javax.persistence.Entity!anager;
public class Aargo?EDG;E extends ?EDG;E*AargoJ Integer8 implements Aargo?ED {
public Aargo?EDG;E(Entity!anager manager) {
super(manager);
pac%age br.com.rosicleia&rasson.cap''conexaobanco&iltro.model.persistencia.dao;
import br.com.rosicleia&rasson.cap''conexaobanco&iltro.model.Endereco;
public inter&ace Endereco?ED extends ?ED*EnderecoJ Integer8{
pac%age br.com.rosicleia&rasson.cap''conexaobanco&iltro.model.persistencia;
import br.com.rosicleia&rasson.cap''conexaobanco&iltro.model.Endereco;
import br.com.rosicleia&rasson.cap''conexaobanco&iltro.model.persistencia.dao.Endereco?ED;
import javax.persistence.Entity!anager;
public class Endereco?EDG;E extends ?EDG;E*EnderecoJ Integer8 implements Endereco?ED {
public Endereco?EDG;E(Entity!anager manager) {
super(manager);
pac%age br.com.rosicleia&rasson.cap''conexaobanco&iltro.model.persistencia.dao;
import br.com.rosicleia&rasson.cap''conexaobanco&iltro.model.Funcionario;
public inter&ace Funcionario?ED extends ?ED*FuncionarioJ Integer8{
pac%age br.com.rosicleia&rasson.cap''conexaobanco&iltro.model.persistencia;
Captulo 12 - Filtros Rosiclia Frasson
130
import br.com.rosicleia&rasson.cap''conexaobanco&iltro.model.Funcionario;
import br.com.rosicleia&rasson.cap''conexaobanco&iltro.model.persistencia.dao.Funcionario?ED;
import javax.persistence.Entity!anager;
public class Funcionario?EDG;E extends ?EDG;E*FuncionarioJ Integer8 implements Funcionario?ED {
public Funcionario?EDG;E(Entity!anager manager) {
super(manager);
12. Aps a construo da camada de persistncia, necessria a construo dos managed beans
para interagir com as telas da aplicao. Segue o cdigo da classe CargoBean.
pac%age br.com.rosicleia&rasson.cap'0conexaobanco&iltro.controller;
import br.com.rosicleia&rasson.cap'0conexaobanco&iltro.model.Aargo;
import br.com.rosicleia&rasson.cap'0conexaobanco&iltro.model.persistencia.Aargo?EDG;E;
import br.com.rosicleia&rasson.cap'0conexaobanco&iltro.model.persistencia.dao.Aargo?ED;
import java.util.6ist;
import javax.&aces.bean.!anaged@ean;
import javax.&aces.context.ExternalAontext;
import javax.&aces.context.FacesAontext;
import javax.persistence.Entity!anager;
import javax.servlet."ttp.:ttpServletCe<uest;
@!anaged@ean
public class Aargo@ean {
private Aargo cargo;
private 6ist*Aargo8 listaAargos;
public Aargo@ean() {
cargo # ne3 Aargo();
public String insere() {
Entity!anager manager # t"is.get!anager();
Aargo?ED dao # ne3 Aargo?EDG;E(manager);
dao.save(cargo);
t"is.cargo # ne3 Aargo();
t"is.listaAargos # null;
return ,2paginas2lista9cargos.x"tml,;
public String preparaElteracao() {
Entity!anager manager # t"is.get!anager();
Aargo?ED dao # ne3 Aargo?EDG;E(manager);
t"is.cargo # dao.get@yId(Aargo.classJ cargo.getAodigo());
return ,2paginas2cargo.x"tml,;
Captulo 12 - Filtros Rosiclia Frasson
131
public void remove() {
Entity!anager manager # t"is.get!anager();
Aargo?ED dao # ne3 Aargo?EDG;E(manager);
dao.remove(Aargo.classJ cargo.getAodigo());
t"is.listaAargos # null;
private Entity!anager get!anager() {
FacesAontext &c # FacesAontext.getAurrentInstance();
ExternalAontext ec # &c.getExternalAontext();
:ttpServletCe<uest re<uest # (:ttpServletCe<uest) ec.getCe<uest();
return (Entity!anager) re<uest.getEttribute(,Entity!anager,);
public Aargo getAargo() {
return cargo;
public void setAargo(Aargo cargo) {
t"is.cargo # cargo;
public 6ist*Aargo8 get6istaAargos() {
i& (t"is.listaAargos ## null) {
Entity!anager manager # t"is.get!anager();
Aargo?ED dao # ne3 Aargo?EDG;E(manager);
t"is.listaAargos # dao.getEll(Aargo.class);
return listaAargos;
13. Na classe FuncionarioBean exibida a seguir, importante perceber que efetuada uma busca
na base de dados para que o cargo escolhido seja atribudo ao funcionrio. Uma alternativa a
essa busca seria a criao de um conversor da classe Cargo.
pac%age br.com.rosicleia&rasson.cap'0conexaobanco&iltro.controller;
import br.com.rosicleia&rasson.cap'0conexaobanco&iltro.model.Aargo;
import br.com.rosicleia&rasson.cap'0conexaobanco&iltro.model.Funcionario;
import br.com.rosicleia&rasson.cap'0conexaobanco&iltro.model.persistencia.Aargo?EDG;E;
import br.com.rosicleia&rasson.cap'0conexaobanco&iltro.model.persistencia.Funcionario?EDG;E;
import br.com.rosicleia&rasson.cap'0conexaobancmodel.persistencia.dao.Aargo?ED;
import br.com.rosicleia&rasson.cap'0conexaobanco&iltro.model.persistencia.dao.Funcionario?ED;
import java.util.6ist;
import javax.&aces.bean.!anaged@ean;
import javax.&aces.context.ExternalAontext;
import javax.&aces.context.FacesAontext;
import javax.persistence.Entity!anager;
import javax.servlet."ttp.:ttpServletCe<uest;
Captulo 12 - Filtros Rosiclia Frasson
132
@!anaged@ean
public class Funcionario@ean {
private Funcionario &uncionario;
private 6ist*Funcionario8 listaFuncionarios;
private int cargoId;
public Funcionario@ean() {
&uncionario # ne3 Funcionario();
public String insere() {
Entity!anager manager # t"is.get!anager();
Aargo?ED cargo?ao # ne3 Aargo?EDG;E(manager);
Funcionario?ED dao # ne3 Funcionario?EDG;E(manager);
i& (t"is.cargoId R# -) {
Aargo cargo # cargo?ao.get@yId(Aargo.classJ cargoId);
t"is.&uncionario.setAargo(cargo);
dao.save(&uncionario);
&uncionario # ne3 Funcionario();
t"is.listaFuncionarios # null;
return ,2paginas2lista9&uncionarios.x"tml,;
public String preparaElteracao() {
Entity!anager manager # t"is.get!anager();
Funcionario?ED dao # ne3 Funcionario?EDG;E(manager);
t"is.&uncionario # dao.get@yId(Funcionario.classJ &uncionario.getAodigo());
return ,2paginas2&uncionario.x"tml,;
public void remove() {
Entity!anager manager # t"is.get!anager();
Funcionario?ED dao # ne3 Funcionario?EDG;E(manager);
dao.remove(Funcionario.classJ &uncionario.getAodigo());
private Entity!anager get!anager() {
FacesAontext &c # FacesAontext.getAurrentInstance();
ExternalAontext ec # &c.getExternalAontext();
:ttpServletCe<uest re<uest # (:ttpServletCe<uest) ec.getCe<uest();
return (Entity!anager) re<uest.getEttribute(,Entity!anager,);
public Funcionario getFuncionario() {
return &uncionario;
public void setFuncionario(Funcionario &uncionario) {
Captulo 12 - Filtros
t"is.&uncionario # &uncionario;
public int getAargoId() {
return cargoId;
public void setAargoId(int cargoId) {
t"is.cargoId # cargoId;
public 6ist*Funcionario8 get6istaFuncionarios() {
i& (t"is.listaFuncionarios ##
Entity!anager manager # t"is.get!anager();
Funcionario?ED dao # ne3 Funcionario?EDG;E(manager);
t"is.listaFuncionarios # dao.getEll(Funcionario.class);
return listaFuncionarios;
14. Dentro da pasta Pginas Web necessrio criar a seguinte estrutura de pastas.
15. A camada de visualizao do aplicativo deve ser iniciada com a criao do arquivo template. A
estrutura das pginas da aplicao deve ser similar a imagem seguinte.
Sendo assim, o template deve possuir os blocos estticos cabealho, menu lateral e rodap e o
# &uncionario;
public void setAargoId(int cargoId) {
public 6ist*Funcionario8 get6istaFuncionarios() {
i& (t"is.listaFuncionarios ## null) {
Entity!anager manager # t"is.get!anager();
Funcionario?ED dao # ne3 Funcionario?EDG;E(manager);
t"is.listaFuncionarios # dao.getEll(Funcionario.class);
ntro da pasta Pginas Web necessrio criar a seguinte estrutura de pastas.
15. A camada de visualizao do aplicativo deve ser iniciada com a criao do arquivo template. A
estrutura das pginas da aplicao deve ser similar a imagem seguinte.
o assim, o template deve possuir os blocos estticos cabealho, menu lateral e rodap e o
Rosiclia Frasson
133
ntro da pasta Pginas Web necessrio criar a seguinte estrutura de pastas.
15. A camada de visualizao do aplicativo deve ser iniciada com a criao do arquivo template. A
o assim, o template deve possuir os blocos estticos cabealho, menu lateral e rodap e o
Captulo 12 - Filtros Rosiclia Frasson
134
bloco dinmico contedo. Por questes de organizao e para facilitar uma posterior manuteno
o menu lateral ser codificado em uma pgina distinta e incluso no template. A seguir constam os
cdigos do template, menu e da pgina index.
*+xml version#]'.-] encoding#]./F9B] +8
*R?DA/S;E "tml ;.@6IA ,922Q4A22?/? 5:/!6 '.- /ransitional22E$,
,"ttp122333.34.org2/C2x"tml'2?/?2x"tml'9transitional.dtd,8
*"tml xmlns#,"ttp122333.34.org2'ZZZ2x"tml,
xmlns1"#,"ttp122xmlns.jcp.org2js&2"tml,
xmlns1ui#,"ttp122xmlns.jcp.org2js&2&acelets,8
*"1"ead8
*title8(estHo de Cecursos :umanos*2title8
*"1outputStyles"eet library#,css, name#,style.css,28
*2"1"ead8
*"1body8
*div id#,cabecal"o,8
*"'8(estHo de Cecursos :umanos*2"'8
*p8)ersHo '.-*2p8
*2div8
*div id#,pagina,8
*div id#,conteudo,8
*ui1insert name#,conteudo,8
*2ui1insert8
*2div8
*div id#,menu6ateral,8
*ui1include src#,..2menu.x"tml,8
*2ui1include8
*2div8
*2div8
*div style#,clear1bot",8knbsp;*2div8
*div id#,rodape,8
*p8kcopy;0-'U Ell Cig"ts Ceserved knbsp;kbull;knbsp; CosiclTia Frasson*2p8
*2div8
*2"1body8
*2"tml8
* *ui1composition xmlns1ui#,"ttp122xmlns.jcp.org2js&2&acelets,
xmlns #,"ttp122333.34.org2'ZZZ2x"tml,
xmlns1"#,"ttp122xmlns.jcp.org2js&2"tml,8
Captulo 12 - Filtros Rosiclia Frasson
135
!enu
*2ui1composition8
*ui1composition xmlns1ui#,"ttp122xmlns.jcp.org2js&2&acelets,
template#,.2QE@9I$F2templates2template.x"tml,
xmlns #,"ttp122333.34.org2'ZZZ2x"tml,8
*ui1de&ine name#,conteudo,8
;Ngina inicial
*2ui1de&ine8
*2ui1composition8
16. Executando o projeto deve ser exibida uma pgina similar a imagem a seguir.
17. Para melhorar o aspecto da pgina sero inclusas algumas regras no arquivo style.css.
body{
margin1 -;
padding1 -;
bac%ground1 ^F=F=F=;
&ont9si>e1 'Upx;
text9align1 justi&y;
body inputJ textareaJ selectJ option{
&ont9&amily1 ErialJ :elveticaJ sans9seri&;
color1 ^B4B0=E;
&ont9si>e1 '0px;
Captulo 12 - Filtros Rosiclia Frasson
136
body input{
3idt"1 0--px;
"'J "0J "4{
&ont9&amily1 ErialJ :elveticaJ sans9seri&;
&ont93eig"t1 normal;
color1 ^======;
"' {
letter9spacing1 90px;
&ont9si>e1 4em;
pJul{
line9"eig"t1 0--V;
a{
color1 ^4U@E-';
a1"over{
color1 ^4U@E-';
^cabecal"o{
3idt"1 Z0-px;
"eig"t1 '--px;
margin1 - auto;
^cabecal"o "'J p{
margin1 -;
padding1 -;
^cabecal"o "'{
&ont9si>e1 I0px;
color1 ^0-E--';
^cabecal"o p{
margin9top1 9'Ipx;
padding1 -px -px -px Upx;
&ont9si>e1 0-px;
&ont93eig"t1 normal;
color1 ^B=EE==;
text9trans&orm1 lo3ercase;
Captulo 12 - Filtros Rosiclia Frasson
137
^pagina{
3idt"1 Z0-px;
margin1 - auto;
bac%ground1 ^&&&&&&;
border9radius1 '-px;
box9s"ado31 -px -px '-px ^cccccc;
position1 relative;
^conteudo{
3idt"1 ==-px;
margin1 -;
color1 ^======;
&loat1 rig"t;
^menu6ateral{
bac%ground1 ^B=EE==;
3idt"1 0--px;
color1 ^FFFFFF;
border9radius1 '-px - - '-px;
border1 '-px solid ^&&&&&&;
^rodape{
3idt"1 B--px;
margin1 - auto;
"eig"t1 I-px;
text9align1 center;
&ont9si>e1 ''px;
&ont9&amily1 ErialJ :elveticaJ sans9seri&;
color1 ^B=EE==;
margin9bottom1 0_px;
18. Ao executar a aplicao possvel perceber que o aspecto da pgina melhorou
consideravelmente.
19. O prximo passo implementar o menu. Seguem os comandos do arquivo menu.xhtml e as
Captulo 12 - Filtros Rosiclia Frasson
138
regras de estilo aplicadas ao menu.
*ui1composition xmlns1ui#,"ttp122java.sun.com2js&2&acelets,
xmlns #,"ttp122333.34.org2'ZZZ2x"tml,
xmlns1"#,"ttp122xmlns.jcp.org2js&2"tml,8
*"1&orm8
*ul8
*li8
*"08Aadastros*2"08
*ul8
*li8*"1command6in% value#,Aargo,
action#,2&aces2paginas2cargo.x"tml,28*2li8
*li8*"1command6in% value#,FuncionNrio,
action#,2&aces2paginas2&uncionario.x"tml,28*2li8
*2ul8
*2li8
*li8
*"086istagens*2"08
*ul8
*li8*"1command6in% value#,Aargo,
action#,2&aces2paginas2lista9cargos.x"tml,28*2li8
*li8*"1command6in% value#,FuncionNrio,
action#,2&aces2paginas2lista9&uncionarios.x"tml,28*2li8
*2ul8
*2li8
*li8
*"08Celatarios*2"08
*ul8
*li8*"1command6in% value#,Aargo, 28*2li8
*li8*"1command6in% value#,FuncionNrio, 28*2li8
*2ul8
*2li8
*2ul8
*2"1&orm8
*2ui1composition8
^menu6ateral ul{
margin1 '-px;
padding1 -;
list9style1 none;
^menu6ateral li{
Captulo 12 - Filtros Rosiclia Frasson
139
margin1 -;
padding1 -;
^menu6ateral li ul{
margin9bottom1 U-px;
padding1 - 'Ipx;
^menu6ateral li ul li{
margin1 -;
padding1 -;
line9"eig"t1 4Ipx;
border9bottom1 'px ^E4F4BZ das"ed;
^menu6ateral "0{
3idt"1 'B-px;
"eig"t1 40px;
padding9le&t1 '-px;
bac%ground9image1 93eb%it9gradient(linearJle&t topJle&t bottomJ color9stop(-J ^'?Z@-')Jcolor9stop('J
^4I@E-'));
bac%ground9image1 9o9linear9gradient(bottomJ ^'?Z@-' -VJ ^4I@E-' '--V);
bac%ground9image1 9mo>9linear9gradient(bottomJ ^'?Z@-' -VJ ^4I@E-' '--V);
bac%ground9image1 93eb%it9linear9gradient(bottomJ ^'?Z@-' -VJ ^4I@E-' '--V);
bac%ground9image1 9ms9linear9gradient(bottomJ ^'?Z@-' -VJ ^4I@E-' '--V);
bac%ground9image1 linear9gradient(to bottomJ ^'?Z@-' -VJ ^4I@E-' '--V);
&ont9si>e1 'Bpx;
color1 ^FFFFFF;
^menu6ateral a{
text9decoration1 none;
color1 ^FFFFFF;
&ont93eig"t1 bold;
^menu6ateral a1"over{
text9decoration1 none;
20. Ao executar a aplicao, possvel observar o menu criado.
Captulo 12 - Filtros Rosiclia Frasson
140
21. Criado o menu, necessrio construir as pginas correspondentes a manuteno dos cargos
e funcionrios do aplicativo. Inicialmente ser construdo a pgina referente ao cadastro de cargo.
Segue o cdigo correspondente.
*ui1composition xmlns1ui#,"ttp122xmlns.jcp.org2js&2&acelets,
template#,..2QE@9I$F2templates2template.x"tml,
xmlns #,"ttp122333.34.org2'ZZZ2x"tml,
xmlns1"#,"ttp122xmlns.jcp.org2js&2"tml,8
*ui1de&ine name#,conteudo,8
*"1&orm acceptc"arset#,ISD9BBIZ9',8
*"1messages errorStyle#,color1red, layout#,table,28
*"1input:idden value#,^{cargo@ean.cargo.codigo,28
*&ieldset8
*legend8Aadastro de Aargo*2legend8
*"1panel(rid columns#,4,8
*"1output6abel value#,$ome1 , &or#,nome,28
*"1input/ext id#,nome,
value#,^{cargo@ean.cargo.nome, si>e#,=4,
re<uired#,true,
re<uired!essage#,l necessNrio in&ormar o nome do cargo.,28
*"1message &or#,nome, errorStyle#,color1red; display1bloc%,28
Captulo 12 - Filtros Rosiclia Frasson
141
*"1output6abel value#,?escri`Ho1 , &or#,descricao,28
*"1input/extarea id#,descricao,
value#,^{cargo@ean.cargo.descricao,
cols#,I-, ro3s#,'-,28
*"1output6abel28
*2"1panel(rid8
*2&ieldset8
*br 28
*"1panel(roup8
*"1command@utton value#,Salvar,
action#,^{cargo@ean.insere, access%ey#,S,
styleAlass#,botao,28
*"1command@utton value#,Aancelar, type#,reset, styleAlass#,botao,28
*2"1panel(roup8
*2"1&orm8
*2ui1de&ine8
*2ui1composition8
.
22. Ao executar a aplicao e acessar o menu cadastro cargo deve ser exibido na rea reservada
ao contedo um formulrio similar ao apresentado na figura a seguir.
23. Com o intuito de melhorar a aparncia deste sero inclusas algumas regras CSS.
.botao{
bac%ground193eb%it9gradient( linearJ le&t topJ le&t bottomJ color9stop(-.-IJ ^'-Bc--)J color9stop('J
^4_b&-') );
Captulo 12 - Filtros Rosiclia Frasson
142
bac%ground19mo>9linear9gradient( center topJ ^'-Bc-- IVJ ^4_b&-' '--V );
&ilter1progid1?5Image/rans&orm.!icroso&t.gradient(startAolorstr#]^'-Bc--]J endAolorstr#]^4_b&-']);
bac%ground9color1^'-Bc--;
93eb%it9border9top9le&t9radius1=px;
9mo>9border9radius9tople&t1=px;
border9top9le&t9radius1=px;
93eb%it9border9top9rig"t9radius1=px;
9mo>9border9radius9toprig"t1=px;
border9top9rig"t9radius1=px;
93eb%it9border9bottom9rig"t9radius1=px;
9mo>9border9radius9bottomrig"t1=px;
border9bottom9rig"t9radius1=px;
93eb%it9border9bottom9le&t9radius1=px;
9mo>9border9radius9bottomle&t1=px;
border9bottom9le&t9radius1=px;
text9indent1-;
border1'px solid ^dcdcdc;
display1inline9bloc%;
color1^&&&&&&;
&ont9&amily1arial;
&ont9si>e1'4px;
&ont93eig"t1normal;
&ont9style1normal;
"eig"t14-px;
line9"eig"t1I-px;
3idt"1B-px;
text9decoration1none;
text9align1center;
.botao1"over {
bac%ground193eb%it9gradient( linearJ le&t topJ le&t bottomJ color9stop(-.-IJ ^4_b&-')J color9stop('J
^'-Bc--) );
bac%ground19mo>9linear9gradient( center topJ ^4_b&-' IVJ ^'-Bc-- '--V );
&ilter1progid1?5Image/rans&orm.!icroso&t.gradient(startAolorstr#]^4_b&-']J endAolorstr#]^'-Bc--]);
bac%ground9color1^4_b&-';
.botao1active {
position1relative;
top1'px;
^conteudo{
padding1 0-px;
&ieldset{
border9radius1 Ipx;
24. Ao executar a aplicao possvel perceber que o formulrio ficou com aspecto melhor.
Captulo 12 - Filtros Rosiclia Frasson
143
25. Neste momento, possvel testar se os dados inseridos no formulrio esto sendo persistidos
na base de dados.
26. Alm da insero, importante que os dados cadastrados possam ser visualizados no
aplicativo. Tambm so necessrias as opes de edio e remoo de dados cadastrados.
Neste exemplo, as funcionalidades citadas esto implementadas na pgina lista-cargos.
No cdigo a seguir merece destaque a tag f:setPropertyActionListener que passa a classe
CargoBean o cargo selecionado.
Captulo 12 - Filtros Rosiclia Frasson
144
*ui1composition xmlns1ui#,"ttp122xmlns.jcp.org2js&2&acelets,
template#,..2QE@9I$F2templates2template.x"tml,
xmlns #,"ttp122333.34.org2'ZZZ2x"tml,
xmlns1"#,"ttp122xmlns.jcp.org2js&2"tml,
xmlns1&#,"ttp122xmlns.jcp.org2js&2core,8
*ui1de&ine name#,conteudo,8
*"1&orm acceptc"arset#,ISD9BBIZ9',8
*"1data/able value#,^{cargo@ean.listaAargos,
var#,cargo,
styleAlass#,tabela,
"eaderAlass#,cabecal"o,
cellpadding #,'-,8
*&1&acet name#,"eader,8
*"1output/ext value#,Aargos, 28
*2&1&acet8
*"1column8
*&1&acet name#,"eader,8
*"1output/ext value#,Aadigo, 28
*2&1&acet8
*"1output/ext value#,^{cargo.codigo,28
*2"1column8
*"1column8
*&1&acet name#,"eader,8
*"1output/ext value#,Aargo, 28
*2&1&acet8
*"1output/ext value#,^{cargo.nome,28
*2"1column8
*"1column8
*&1&acet name#,"eader,8
*"1command6in% action#,2&aces2paginas2cargo.x"tml,8
*"1grap"icImage library#,imagens, name#,add.png, 28
*2"1command6in%8
*2&1&acet8
*"1command6in%
action#,^{cargo@ean.preparaElteracao,8
*&1set;ropertyEction6istener value#,^{cargo,
target#,^{cargo@ean.cargo,28
*"1grap"icImage library#,imagens, name#,edit.png,28
*2"1command6in%8
*"1command6in%
action#,^{cargo@ean.remove,8
*&1set;ropertyEction6istener value#,^{cargo,
target#,^{cargo@ean.cargo,28
*"1grap"icImage library#,imagens, name#,delete.png,28
*2"1command6in%8
*2"1column8
*2"1data/able8
Captulo 12 - Filtros Rosiclia Frasson
145
*2"1&orm8
*2ui1de&ine8
*2ui1composition8
27. Para melhorar o aspecto da tabela devem ser inclusas algumas imagens - add, delete e edit -
e regras CSS para formatao da tabela.
.tabela{
margin1-px;padding1-px;
3idt"1'--V;
box9s"ado31 Ipx Ipx 0px ^BBBBBB;
border1'px solid ^4&_&--;
.tabela table{
border9collapse1 collapse;
border9spacing1 -;
3idt"1'--V;
"eig"t1'--V;
margin1-px;
padding1-px;
.tabela tr1nt"9c"ild(odd){
bac%ground9color1^dU&&aa;
.tabela tr1nt"9c"ild(even){
bac%ground9color1^&&&&&&;
.tabela td{
vertical9align1middle;
border1'px solid ^4&_&--;
border93idt"1-px 'px 'px -px;
text9align1center;
padding1_px;
&ont9si>e1'0px;
&ont9&amily1Erial;
&ont93eig"t1normal;
color1^------;
.tabela tr1last9c"ild td{
border93idt"1-px 'px -px -px;
.tabela tr td1last9c"ild{
border93idt"1-px -px 'px -px;
Captulo 12 - Filtros Rosiclia Frasson
146
.tabela tr1last9c"ild td1last9c"ild{
border93idt"1-px -px -px -px;
.tabela .cabecal"o{
bac%ground19o9linear9gradient(bottomJ ^I&b&-- IVJ ^4&_&-- '--V); bac%ground193eb%it9gradient(
linearJ le&t topJ le&t bottomJ color9stop(-.-IJ ^I&b&--)J color9stop('J ^4&_&--) );
bac%ground19mo>9linear9gradient( center topJ ^I&b&-- IVJ ^4&_&-- '--V );
&ilter1progid1?5Image/rans&orm.!icroso&t.gradient(startAolorstr#,^I&b&--,J endAolorstr#,^4&_&--,);
bac%ground1 9o9linear9gradient(topJ^I&b&--J4&_&--);
bac%ground9color1^I&b&--;
border1-px solid ^4&_&--;
text9align1center;
border93idt"1-px -px 'px 'px;
&ont9si>e1'Upx;
&ont9&amily1Erial;
&ont93eig"t1bold;
color1^&&&&&&;
.tabela tr1&irst9c"ild td1&irst9c"ild{
border93idt"1-px -px 'px -px;
.tabela tr1&irst9c"ild td1last9c"ild{
border93idt"1-px -px 'px 'px;
28. Ao executar a aplicao possvel verificar os cargos cadastrados e testar a edio e
remoo dos dados.
29. As telas de cadastro e listagem tambm devem ser codificadas para o funcionrio.
*ui1composition xmlns1ui#,"ttp122xmlns.jcp.org2js&2&acelets,
template#,..2QE@9I$F2templates2template.x"tml,
Captulo 12 - Filtros Rosiclia Frasson
147
xmlns #,"ttp122333.34.org2'ZZZ2x"tml,
xmlns1"#,"ttp122xmlns.jcp.org2js&2"tml,
xmlns1&#,"ttp122xmlns.jcp.org2js&2core,8
*ui1de&ine name#,conteudo,8
*"1&orm acceptc"arset#,ISD9BBIZ9',8
*"1messages errorStyle#,color1red, layout#,table,28
*"1input:idden value#,^{&uncionario@ean.&uncionario.codigo,28
*&ieldset8
*legend8Aadastro de FuncionNrio*2legend8
*"1panel(rid columns#,0,8
*"1output6abel value#,$ome1 , &or#,nome,28
*"1panel(roup8
*"1input/ext id#,nome,
value#,^{&uncionario@ean.&uncionario.nome,
re<uired#,true,
re<uired!essage#,l necessNrio in&ormar o nome do &uncionNrio. ,28
*"1message &or#,nome, errorStyle#,color1red,28
*2"1panel(roup8
*"1output6abel value#,A;F1 , &or#,cp&,28
*"1panel(roup8
*"1input/ext id#,cp&,
value#,^{&uncionario@ean.&uncionario.cp&,
re<uired#,true,
re<uired!essage#,l necessNrio in&ormar o A;F.,28
*"1message &or#,cp&, errorStyle#,color1red,28
*2"1panel(roup8
*"1output6abel value#,?ata de $ascimento1 , &or#,dt$ascimento,28
*"1panel(roup8
*"1input/ext id#,dt$ascimento,
value#,^{&uncionario@ean.&uncionario.data$ascimento,
re<uired#,true,
re<uired!essage#,l necessNrio in&ormar a data de nascimento.,
converter!essage#,?ata no &ormato invNlido. .tili>e dd2mm2aaaa,8
*&1convert?ate/ime pattern#,dd2!!2yyyy, type#,date,28
*2"1input/ext8
*"1message &or#,dt$ascimento, errorStyle#,color1red,28
*2"1panel(roup8
*"1output6abel value#,Aargo1 , &or#,cargo,28
*"1selectDne!enu id#,cargo,
value#,^{&uncionario@ean.cargoId,8
*&1selectItems value#,^{cargo@ean.listaAargos, var#,cargo,
item6abel#,^{cargo.nome, item)alue#,^{cargo.codigo,28
*2"1selectDne!enu8
Captulo 12 - Filtros Rosiclia Frasson
148
*"1output6abel value#,/ele&one1 , &or#,tele&one,28
*"1input/ext id#,tele&one,
value#,^{&uncionario@ean.&uncionario.tele&one,28
*"1output6abel value#,Email1 , &or#,email,28
*"1input/ext id#,email,
value#,^{&uncionario@ean.&uncionario.email,28
*2"1panel(rid8
*"r 28
*"1output/ext value#,Endere`o,28
*"1panel(rid columns#,U,8
*"1output6abel value#,Endere`o1 , &or#,endereco,28
*"1input/ext id#,endereco, value#,^{&uncionario@ean.&uncionario.endereco.endereco,28
*"1output6abel value#,$cmero1 , &or#,numero,28
*"1panel(roup8
*"1input/ext id#,numero,
value#,^{&uncionario@ean.&uncionario.endereco.numero,
validator!essage#,D ncmero nHo pode ser negativo.,8
*&1validate6ongCange minimum#,-,28
*2"1input/ext8
*"1message &or#,numero,28
*2"1panel(roup8
*"1output6abel value#,Aomplemento1 , &or#,complemento,28
*"1input/ext id#,complemento,
value#,^{&uncionario@ean.&uncionario.endereco.complemento,28
*"1output6abel value#,@airro1 , &or#,bairro,28
*"1input/ext id#,bairro, value#,^{&uncionario@ean.&uncionario.endereco.bairro,28
*"1output6abel value#,Estado1 , &or#,estado,28
*"1input/ext id#,estado, value#,^{&uncionario@ean.&uncionario.endereco.estado,28
*"1output6abel value#,Aidade1 , &or#,cidade,28
*"1input/ext id#,cidade, value#,^{&uncionario@ean.&uncionario.endereco.cidade,28
*2"1panel(rid8
*2&ieldset8
*br 28
*"1panel(roup8
*"1command@utton value#,Salvar,
action#,^{&uncionario@ean.insere,
styleAlass#,botao,28
*"1command@utton value#,Aancelar, type#,reset, styleAlass#,botao,28
*2"1panel(roup8
*2"1&orm8
*2ui1de&ine8
Captulo 12 - Filtros Rosiclia Frasson
149
*2ui1composition8
*ui1composition xmlns1ui#,"ttp122xmlns.jcp.org2js&2&acelets,
template#,..2QE@9I$F2templates2template.x"tml,
xmlns #,"ttp122333.34.org2'ZZZ2x"tml,
xmlns1"#,"ttp122xmlns.jcp.org2js&2"tml,
xmlns1&#,"ttp122xmlns.jcp.org2js&2core,8
*ui1de&ine name#,conteudo,8
*"1&orm acceptc"arset#,ISD9BBIZ9',8
*"1data/able value#,^{&uncionario@ean.listaFuncionarios,
var#,&uncionario,
styleAlass#,tabela,
"eaderAlass#,cabecal"o,8
*&1&acet name#,"eader,8
*"1output/ext value#,FuncionNrios,28
*2&1&acet8
*"1column8
*&1&acet name#,"eader,8
*"1output/ext value#,Aadigo, 28
*2&1&acet8
*"1output/ext value#,^{&uncionario.codigo,28
*2"1column8
*"1column8
*&1&acet name#,"eader,8
*"1output/ext value#,$ome, 28
*2&1&acet8
*"1output/ext value#,^{&uncionario.nome,28
*2"1column8
*"1column8
*&1&acet name#,"eader,8
*"1output/ext value#,?ata de nascimento, 28
*2&1&acet8
*"1output/ext value#,^{&uncionario.data$ascimento,8
*&1convert?ate/ime pattern#,dd2!!2yyyy, type#,date,28
*2"1output/ext8
*2"1column8
*"1column8
*&1&acet name#,"eader,8
*"1output/ext value#,Aargo, 28
*2&1&acet8
*"1output/ext value#,^{&uncionario.cargo.nome,28
*2"1column8
*"1column8
*&1&acet name#,"eader,8
*"1command6in% action#,2&aces2paginas2&uncionario.x"tml,8
*"1grap"icImage library#,imagens, name#,add.png, 28
Captulo 12 - Filtros Rosiclia Frasson
150
*2"1command6in%8
*2&1&acet8
*"1command6in%
action#,^{&uncionario@ean.preparaElteracao,8
*&1set;ropertyEction6istener value#,^{&uncionario,
target#,^{&uncionario@ean.&uncionario,28
*"1grap"icImage library#,imagens, name#,edit.png,28
*2"1command6in%8
*"1command6in%
action#,^{&uncionario@ean.remove,8
*&1set;ropertyEction6istener value#,^{&uncionario,
target#,^{&uncionario@ean.&uncionario,28
*"1grap"icImage library#,imagens, name#,delete.png,28
*2"1command6in%8
*2"1column8
*2"1data/able8
*2"1&orm8
*2ui1de&ine8
*2ui1composition8
30. A aparncia das telas responsveis pela manuteno dos funcionrios devem ser similares as
imagens a seguir.
Captulo 12 - Filtros Rosiclia Frasson
151
PASSO-A-PASSO
Mecanismo de Autenticao
Em aplicaes comerciais necessrio que o aplicativo possua um mecanismo de
autenticao de usurios. Com JSF existem diversas maneiras de efetuar a autenticao. No
exemplo apresentado a seguir utilizado o Filter para este controle.
1. Algumas alteraes no projeto criado anteriormente devem ser efetuadas. Primeiramente
necessria a insero dos campos login e senha na classe Funcionario.
pac%age br.com.rosicleia&rasson.cap'0autenticacao&iltro.model;
import java.util.?ate;
import javax.persistence.Aascade/ype;
import javax.persistence.Aolumn;
import javax.persistence.Entity;
import javax.persistence.(enerated)alue;
import javax.persistence.Id;
import javax.persistence.!any/oDne;
import javax.persistence.Dne/oDne;
import javax.persistence./emporal;
import javax.persistence./emporal/ype;
@Entity
public class Funcionario {
@Id @(enerated)alue
private int codigo;
private String nome;
private String cp&;
@/emporal(/emporal/ype.?E/E)
private ?ate data$ascimento;
@!any/oDne
private Aargo cargo;
private String tele&one;
private String email;
@Dne/oDne(cascade # Aascade/ype.E66)
Captulo 12 - Filtros Rosiclia Frasson
152
private Endereco endereco;
@Aolumn(uni<ue # true)
private String login;
private String sen"a;
public Funcionario() {
endereco # ne3 Endereco();
22(ets e sets
2. Os campos login e senha devem ser inclusos na pgina de cadastro de funcionrios.
*"r 28
*"1panel(roup id#,dados6ogin,8
*"1panel(rid columns#,U,8
*"1output6abel &or#,login, value#,6ogin1 ,28
*"1input/ext id#,login, value#,^{&uncionario@ean.&uncionario.login, 28
*"1output6abel &or#,sen"a, value#,Sen"a1 ,28
*"1input/ext id#,sen"a, value#,^{&uncionario@ean.&uncionario.sen"a,28
*2"1panel(rid8
*2"1panel(roup8
3. Um filtro para o controle de acesso deve ser criado.
pac%age br.com.rosicleia&rasson.cap'0autenticacao&iltro.&ilter;
import java.io.IDException;
import javax.servlet.Filter;
import javax.servlet.FilterA"ain;
import javax.servlet.FilterAon&ig;
import javax.servlet.ServletException;
import javax.servlet.ServletCe<uest;
import javax.servlet.ServletCesponse;
import javax.servlet."ttp.:ttpServletCe<uest;
import javax.servlet."ttp.:ttpServletCesponse;
import javax.servlet."ttp.:ttpSession;
public class AontroleEcessoFilter implements Filter {
@Dverride
public void init(FilterAon&ig &ilterAon&ig) t"ro3s ServletException {
@Dverride
public void doFilter(ServletCe<uest re<uestJ ServletCesponse responseJ FilterA"ain c"ain) t"ro3s
Captulo 12 - Filtros Rosiclia Frasson
153
IDExceptionJ ServletException {
try {
:ttpServletCe<uest "ttpCe< # (:ttpServletCe<uest) re<uest;
:ttpServletCesponse "ttpCes # (:ttpServletCesponse) response;
:ttpSession session # "ttpCe<.getSession(true);
String url # "ttpCe<.getCe<uest.C6().toString();
i& (session.getEttribute(,usuario6ogado,) ## null kk precisaEutenticar(url)) {
"ttpCes.sendCedirect("ttpCe<.getAontext;at"() M ,2&aces2login.x"tml,);
else {
c"ain.doFilter(re<uestJ response);
catc" (Exception e) {
e.printStac%/race();
@Dverride
public void destroy() {
private boolean precisaEutenticar(String url) {
return Rurl.contains(,login.x"tml,) kk Rurl.contains(,javax.&aces.resource,);
4. Na existncia de mais de um filtro em uma aplicao, recomendado que o registro dos filtros seja
feito no web.xml ao invs de utilizar anotaes.
*&ilter8
*&ilter9name8AontroleEcesso*2&ilter9name8
*&ilter9class8br.com.rosicleia&rasson.r".&ilter.AontroleEcesso*2&ilter9class8
*2&ilter8
*&ilter9mapping8
*&ilter9name8AontroleEcesso*2&ilter9name8
*servlet9name8Faces Servlet*2servlet9name8
*2&ilter9mapping8
*&ilter8
*&ilter9name8G;EFilter*2&ilter9name8
*&ilter9class8br.com.rosicleia&rasson.r".&ilter.G;EFilter*2&ilter9class8
*2&ilter8
*&ilter9mapping8
*&ilter9name8G;EFilter*2&ilter9name8
*servlet9name8Faces Servlet*2servlet9name8
*2&ilter9mapping8
5. Para verificar se o usurio que est tentando se autenticar est cadastrado, necessrio efetuar
uma busca na base de dados. Deste modo, as classes FuncionarioDAO e FuncionarioDAOJPA
devem ser alteradas.
pac%age br.com.rosicleia&rasson.cap'0autenticacao&iltro.model.persistencia.dao;
Captulo 12 - Filtros Rosiclia Frasson
154
import br.com.rosicleia&rasson.cap'0autenticacao&iltro.model.Funcionario;
public inter&ace Funcionario?ED extends ?ED*FuncionarioJ Integer8 {
boolean login(String usuarioJ String sen"a);
pac%age br.com.rosicleia&rasson.cap'0autenticacao&iltro.model.persistencia;
import br.com.rosicleia&rasson.cap'0autenticacao&iltro.model.Funcionario;
import br.com.rosicleia&rasson.cap'0autenticacao&iltro.model.persistencia.dao.Funcionario?ED;
import javax.persistence.Entity!anager;
import javax.persistence.Fuery;
public class Funcionario?EDG;E extends ?EDG;E*FuncionarioJ Integer8 implements Funcionario?ED {
private Entity!anager manager;
public Funcionario?EDG;E(Entity!anager manager) {
super(manager);
t"is.manager # manager;
@Dverride
public boolean login(String loginJ String sen"a) {
Fuery < # t"is.manager.createFuery(,select & &rom Funcionario & 3"ere &.login # 1login and &.sen"a #
1sen"a,J Funcionario.class);
<.set;arameter(,sen"a,J sen"a);
<.set;arameter(,login,J login);
i& (<.getCesult6ist().si>e() 8 -) {
return true;
return &alse;
6. O passo seguinte a construo de um managed bean para controlar a autenticao do usurio.
pac%age br.com.rosicleia&rasson.cap'0autenticacao&iltro.controller;
import br.com.rosicleia&rasson.cap'0autenticacao&iltro.model.persistencia.Funcionario?EDG;E;
import br.com.rosicleia&rasson.cap'0autenticacao&iltro.model.persistencia.dao.Funcionario?ED;
import javax.&aces.application.Faces!essage;
import javax.&aces.bean.!anaged@ean;
import javax.&aces.bean.SessionScoped;
import javax.&aces.context.ExternalAontext;
import javax.&aces.context.FacesAontext;
import javax.persistence.Entity!anager;
import javax.servlet."ttp.:ttpServletCe<uest;
import javax.servlet."ttp.:ttpSession;
Captulo 12 - Filtros Rosiclia Frasson
155
@!anaged@ean
@SessionScoped
public class 6ogin@ean {
private String usuario;
private String sen"a;
public String autentica() {
FacesAontext &c # FacesAontext.getAurrentInstance();
Entity!anager manager # t"is.get!anager();
Funcionario?ED dao # ne3 Funcionario?EDG;E(manager);
i& (dao.login(usuarioJ sen"a)) {
ExternalAontext ec # &c.getExternalAontext();
:ttpSession session # (:ttpSession) ec.getSession(&alse);
session.setEttribute(,usuario6ogado,J true);
return ,2paginas2cargo.x"tml,;
else {
Faces!essage &m # ne3 Faces!essage(,.suario e2ou sen"a invNlidos,);
&m.setSeverity(Faces!essage.SE)ECI/S7ECCDC);
&c.add!essage(nullJ &m);
return ,2login,;
public String registraSaida() {
FacesAontext &c # FacesAontext.getAurrentInstance();
ExternalAontext ec # &c.getExternalAontext();
:ttpSession session # (:ttpSession) ec.getSession(&alse);
session.removeEttribute(,usuario,);
return ,2login,;
private Entity!anager get!anager() {
FacesAontext &c # FacesAontext.getAurrentInstance();
ExternalAontext ec # &c.getExternalAontext();
:ttpServletCe<uest re<uest # (:ttpServletCe<uest) ec.getCe<uest();
return (Entity!anager) re<uest.getEttribute(,Entity!anager,);
public String get.suario() {
return usuario;
public void set.suario(String usuario) {
t"is.usuario # usuario;
public String getSen"a() {
return sen"a;
public void setSen"a(String sen"a) {
Captulo 12 - Filtros Rosiclia Frasson
156
t"is.sen"a # sen"a;
7. Para que o usurio possa efetuar a autenticao necessria a pgina de login, exibida a seguir.
*+xml version#]'.-] encoding#]./F9B] +8
*R?DA/S;E "tml ;.@6IA ,922Q4A22?/? 5:/!6 '.- /ransitional22E$,
,"ttp122333.34.org2/C2x"tml'2?/?2x"tml'9transitional.dtd,8
*"tml xmlns#,"ttp122333.34.org2'ZZZ2x"tml,
xmlns1"#,"ttp122xmlns.jcp.org2js&2"tml,
xmlns1pt#,"ttp122xmlns.jcp.org2js&2passt"roug",8
*"1"ead8
*title8(estHo de Cecursos :umanos*2title8
*"1outputStyles"eet library#,css, name#,style.css,28
*2"1"ead8
*"1body8
*div id#,pagina6ogin,8
*"086D(I$ *2"08
*"1&orm8
*"1panel(rid columns#,',8
*"1input/ext value#,^{login@ean.usuario, id#,usuario, pt1place"older#,.suNrio, 28
*br 28
*"1inputSecret value#,^{login@ean.sen"a, id#,sen"a, pt1place"older#,Sen"a,28
*br 28
*"1command@utton value#,Dm, action#,^{login@ean.autentica, styleAlass#,botao6ogin,28
*2"1panel(rid8
*2"1&orm8
*"1messages 28
*2div8
*2"1body8
*2"tml8
8. Com o intuito de melhorar a aparncia da pgina de login, devem ser aplicadas algumas regras
CSS.
^pagina6ogin{
position1absolute;
le&t1I-V;
top1I-V;
Captulo 12 - Filtros Rosiclia Frasson
157
margin9le&t19'-Ipx;
margin9top19'--px;
3idt"1 0'-px;
bac%ground1 ^&&&&&&;
border9radius1 '-px;
box9s"ado31 -px -px '-px ^cccccc;
padding1 0-px;
^pagina6ogin .botao6ogin{
&ont1bold 'Bpx ErialJ :elveticaJ sans9seri&;
&ont9style1normal;
color1^&&&&&&;
bac%ground1^IeIeIU;
border1-px solid ^&&&&&&;
text9s"ado319'px 9'px 'px ^000000;
box9s"ado310px 0px Ipx ^------;
9mo>9box9s"ado310px 0px Ipx ^------;
93eb%it9box9s"ado310px 0px Ipx ^------;
border9radius1-px '-px '-px '-px;
9mo>9border9radius1-px '-px '-px '-px;
93eb%it9border9radius1-px '-px '-px '-px;
3idt"1__px;
"eig"t1 U-px;
padding1'-px 0-px;
cursor1pointer;
margin1- auto;
^pagina6ogin input{
"eig"t1 0-px;
9. importante acrescentar no template um link para que o usurio possa fazer o logout. Dessa
forma, dentro do cabealho deve existir a div seo exibida a seguir.
*div id#,secao,8
*"1&orm8
*"1outputFormat value#,DlN {-,8
*&1param value#,^{login@ean.usuario, 28
*2"1outputFormat8
*br 28
*"1command6in% value#,6ogout, action#,^{login@ean.registraSaida, 28
*2"1&orm8
*2div8
10. Para alinhar corretamente a div seo algumas regras CSS.
^cabecal"o ^secao{
margin9top1 90-px;
Captulo 12 - Filtros Rosiclia Frasson
158
&loat1 rig"t;
^cabecal"o ^secao a{
text9decoration1 none;
^cabecal"o ^secao a1"over{
text9decoration1 underline;
Captulo 13 - )i*liotecas +e coponentes Rosiclia Frasson
159
Bibliotecas de componentes
O JSF possui em sua implementao padro todos os componentes bsicos da HTML. Em
muitos casos esses componentes so suficientes, embora a tecnologia permite que os
desenvolvedores criem seus prprios componentes que podem ser utilizados em diversos
projetos. O uso de componentes prontos melhora a qualidade visual da aplicao alm de
aumentar a produtividade.
Devido a grande demanda por componentes mais robustos surgiram diversas bibliotecas
prontas para uso em projetos JSF. Entre as bibliotecas mais utilizadas pelos desenvolvedores
podem ser citadas: ADF Faces, IceFaces, Primefaces e RichFaces.
RichFaces
O RichFaces uma biblioteca de responsabilidade da JBoss que pertence ao grupo Red
Hat. Possui cdigo aberto, suporte a ajax e em torno de 60 componentes prontos para utilizao.
O desenvolvedor tambm pode criar seus prprios componentes. No showcase, os componentes
so exibidos juntamente com o cdigo necessrio para a sua utilizao.
Dentre os componentes mais importantes podem ser citados calendrio, auto complete,
tabela com paginao e o menu dropdow.
O esquema de cores apresentadas pelos componentes da biblioteca pode ser alterado
com a utilizao de temas. Atualmente no showcase do primefaces existem 7 temas definidos.
A documentao do framework bastante diversificada contendo alm do guia do
desenvolvedor, FAQ e screeencasts. Tambm contm um frum para esclarecimento de dvidas.
Captulo 13 - )i*liotecas +e coponentes Rosiclia Frasson
160
Icefaces
O Icefaces uma biblioteca de componentes open source desenvolvida pela IceSoft
(http://www.icesoft.org/java/projects/ICEfaces/overview.jsf). Possui como finalidade a integrao
entre as tecnologias JSF e ajax de forma nativa. Sendo assim, todos os componentes do icefaces
do suporte a ajax.
Possui em torno de 40 componentes dentre os quais podem ser citados tabela com
paginao, calendrio, campos de texto com mscara, barra de progresso e gerao de grficos
estatsticos. O show case pode ser acessado em: http://icefaces-showcase.icesoft.org e possui a
descrio do componente, ilustrao, cdigo fonte para utilizao e um link para a documentao.
A documentao extensa contendo tutoriais, vdeos e documentao no formato wiki.
Alm de disponibilizar frum e chat para apoio.
Primefaces
O primefaces desenvolvido pela Prime Teknoloji (Turquia) e pode ser acessado em:
http://www.primefaces.org. um framework open source. Possui suporte nativo a ajax e em torno
de 150 componentes em seu showcase, sendo considerada a biblioteca de componentes mais
avanada do mercado.
O framework prov uma verso melhorada de praticamente todos os componentes JSF -
entrada e sada de textos, menus de seleo e botes. Alm disso, o primefaces possui uma
ampla gama de recursos diferenciados como captcha, gerador de grficos estatsticos, galeria de
imagens, barra de progresso, entre outros. Um detalhe importante que no showcase todos os
componentes so apresentados juntamente com as linhas de cdigo necessrias para a sua
utilizao. O primefaces possui tambm cerca de 30 temas pr-definidos que alteram a aparncia
dos componentes. O framework ainda disponibiliza uma verso para dispositivos mveis.
Captulo 13 - )i*liotecas +e coponentes Rosiclia Frasson
161
A documentao do primefaces de fcil acesso contendo a demonstrao de todos os
componentes. O framework conta ainda com frum e extensa comunidade com ativa participao
e colaborao.
Uma grande vantagem da utilizao do primefaces a sua facilidade de configurao.
Para utiliz-lo apenas um nico arquivo jar necessrio. No necessrio nenhum arquivo xml
de configurao e no h dependncias.
Captulo 14 - Prie,aces Rosiclia Frasson
162
Primefaces
Como descrito no captulo anterior, o primefaces atualmente uma boa escolha para uma
biblioteca de componentes. Embora dentre os frameworks de componentes utilizados, o
primefaces seja o mais recente, a sua utilizao cresceu drasticamente nos ltimos anos. A seguir
est ilustrada uma pesquisa feita por meio do Google Trends que indica a popularidade do
framework.
Pelos motivos citados, o primefaces ser a biblioteca de componentes utilizada neste
material.
Componentes
O rico conjunto de componentes presente na biblioteca do primefaces um dos principais
motivos de sua ascenso. Em virtude da quantidade de componentes nem todos sero citados
neste material. Porm, todo o conjunto pode ser consultado no showcase da biblioteca:
http://www.primefaces.org/showcase/ui/home.jsf.
Alguns componentes citados existem no JSF puro. No entanto, utilizando os componentes
do primefaces, podem ser aproveitados os conjuntos de skins que a biblioteca oferece. Para
utilizar os componentes do primefaces necessrio incluir o namespace:
xmlns1p#,"ttp122prime&aces.org2ui,
A seguir, alguns componentes do primefaces:
Componente Descrio
p:panel Painel onde podem ser alocados outros componentes. O painel pode conter
um cabealho.
*p1panel "eader#,Aadastro de Aargo,8
Captulo 14 - Prie,aces Rosiclia Frasson
163
*2p1panel8
p:inputText Campo de entrada de dados com apenas uma linha.
*p1input/ext id#,nome, si>e#,I-,
value#,^{cargo@ean.cargo.nome,
re<uired#,true,
re<uired!essage#,l necessNrio in&ormar o nome do cargo.,28
p:selectOneMen
u
Componente conhecido como combo box.
*p1selectDne!enu id#,cargo, value#,^{&uncionario@ean.cargoId,
style#,3idt"1'I-px;,8
*&1selectItem item6abel#,Selecione, item)alue#,, 28
*&1selectItems value#,^{cargo@ean.listaAargos, var#,cargo,
item6abel#,^{cargo.nome, item)alue#,^{cargo.codigo,28
*2p1selectDne!enu8
*
p:calendar Componente de entrada usado para selecionar uma data.
*p1calendar id#,dt$ascimento,
value#,^{&uncionario@ean.&uncionario.data$ascimento,
re<uired#,true,
re<uired!essage#,l necessNrio in&ormar a data de nascimento.,
converter!essage#,?ata no &ormato invNlido. .tili>e dd2mm2aaaa,
pattern#,dd2!!2yyyy,8
*&1convert?ate/ime pattern#,dd2!!2yyyy, type#,date,28
*2p1calendar8
Captulo 14 - Prie,aces Rosiclia Frasson
164
*
p:inputMask Campo de entrada de texto que permite a adio de uma mscara.
*p1input!as% id#,tele&one,
value#,^{&uncionario@ean.&uncionario.tele&one,
mas%#,(ZZ) ZZZZ9ZZZZ,28
*
p:inputTextarea Campo de entrada de texto composto por mais de uma linha.
*p1input/extarea id#,descricao,
value#,^{cargo@ean.cargo.descricao,
cols#,I-, ro3s#,'-,28
*
p:password Campo de senha.
*p1pass3ord id#,sen"a, value#,^{&uncionario@ean.&uncionario.sen"a,
&eedbac%#,true,28
Captulo 14 - Prie,aces Rosiclia Frasson
165
p:commandButt
on
Boto utilizado para envio de dados em um formulrio.
*p1command@utton
action#,^{cargo@ean.remove, icon#,ui9icon9close,8
*&1set;ropertyEction6istener value#,^{cargo,
target#,^{cargo@ean.cargo,28
*2p1command@utton8
p:dataTable Tabela. Neste componente podem ser includas informaes como
quantidade de linhas, paginao, ordenao de elementos, pesquisa, entre
outros.
*p1data/able id#,tabela, var#,cargo, value#,^{cargo@ean.listaAargos,
sort!ode#,multiple, ro3s#,B, paginator#,true,8
*&1&acet name#,"eader,8
Aargos
*2&1&acet8
*p1column sort@y#,codigo, "eader/ext#,Aadigo,8
*"1output/ext value#,^{cargo.codigo, 28
*2p1column8
*p1column sort@y#,nome, "eader/ext#,$ome,8
*"1output/ext value#,^{cargo.nome, 28
*2p1column8
*p1column8
*&1&acet name#,"eader,8
*p1command@utton action#,2&aces2paginas2cargo.x"tml, icon#,ui9icon9
plus,8
*2p1command@utton8
*2&1&acet8
*p1command@utton
action#,^{cargo@ean.preparaElteracao, icon#,ui9icon9pencil,8
*&1set;ropertyEction6istener value#,^{cargo,
target#,^{cargo@ean.cargo,28
*2p1command@utton8
*p1command@utton
action#,^{cargo@ean.remove, icon#,ui9icon9close,8
*&1set;ropertyEction6istener value#,^{cargo,
target#,^{cargo@ean.cargo,28
*2p1command@utton8
Captulo 14 - Prie,aces Rosiclia Frasson
166
*2p1column8
*2p1data/able8
p:layout Componente utilizado para a montagem de layouts. O componente layoutUnit
permite a diviso da pgina em blocos.
*p1layout &ull;age#,true,8
*p1layout.nit position#,nort", si>e#,'--, "eader#,(estHo de Cecursos
:umanos, 8
*"1grap"icImage library#,imagens, name#,logo.png, 28
*2p1layout.nit8
*p1layout.nit position#,sout", si>e#,4I, "eader#,kcopy;0-'U /odos os
direitos reservados knbsp;kbull;knbsp; CosiclTia Frasson, style#,text9align1
center,8
*2p1layout.nit8
*p1layout.nit position#,3est, si>e#,0--, resi>able#,true, closable#,true,
collapsible#,true,8
*ui1include src#,..2menu.x"tml,28
*2p1layout.nit8
*p1layout.nit position#,center,8
*div id#,conteudo,8
*ui1insert name#,conteudo,8
*2ui1insert8
*2div8
*2p1layout.nit8
*2p1layout8
Captulo 14 - Prie,aces Rosiclia Frasson
167
Icons
O jquery possui uma srie de cones que podem ser utilizados com o primefaces. Esses
cones podem ser obtidos em: http://jqueryui.com/themeroller/.
interessante optar por estes cones j que a aparncia dos mesmos alterada conforme
o tema da pgina.
Captulo 14 - Prie,aces Rosiclia Frasson
168
Skins
O primefaces possui integrao com o framework ThemeRoller do JQuery. Atualmente
existem 24 temas disponveis para serem utilizados nas aplicaes.
Alm dos temas existentes na pgina do primefaces, possvel criar novos temas na
pgina: http://jqueryui.com/themeroller/.
PASSO-A-PASSO
Configurao
1. Para utilizar o primefaces necessrio efetuar o download da biblioteca no site do projeto:
Captulo 14 - Prie,aces Rosiclia Frasson
169
http://primefaces.org/downloads. interessante fazer o download da verso 4.0.
2. O projeto criado da mesma forma que um projeto JSF puro. No entanto, na aba frameworks
necessrio apontar como framework de componentes o primefaces. Vale lembrar que durante a
criao do primeiro projeto utilizando o primefaces necessrio acionar o boto Mais e apontar
para a biblioteca que foi efetuado o download.
3. importante perceber que o Netbeans cria automaticamente as pginas index e
welcomePrimefaces. O arquivo welcomePrimefaces possui algumas tags da biblioteca.
*R?DA/S;E :/!6 ;.@6IA ,922Q4A22?/? :/!6 U.-' /ransitional22E$,
,"ttp122333.34.org2/C2"tmlU2loose.dtd,8
*"tml xmlns#,"ttp122333.34.org2'ZZZ2x"tml,
xmlns1"#,"ttp122java.sun.com2js&2"tml,
xmlns1&#,"ttp122java.sun.com2js&2core,
xmlns1ui#,"ttp122java.sun.com2js&2&acelets,
xmlns1p#,"ttp122prime&aces.org2ui,8
*&1vie3 content/ype#,text2"tml,8
*"1"ead8
*&1&acet name#,&irst,8
*meta content#]text2"tml; c"arset#./F9B] "ttp9e<uiv#,Aontent9/ype,28
*title8;rimeFaces*2title8
*2&1&acet8
*2"1"ead8
Captulo 14 - Prie,aces Rosiclia Frasson
170
*"1body8
*p1layout &ull;age#,true,8
*p1layout.nit position#,nort", si>e#,'--, resi>able#,true, closable#,true, collapsible#,true,8
:eader
*2p1layout.nit8
*p1layout.nit position#,sout", si>e#,'--, closable#,true, collapsible#,true,8
Footer
*2p1layout.nit8
*p1layout.nit position#,3est, si>e#,'_I, "eader#,6e&t, collapsible#,true,8
*p1menu8
*p1submenu label#,Cesources,8
*p1menuitem value#,?emo, url#,"ttp122333.prime&aces.org2s"o3case9
labs2ui2"ome.js&, 28
*p1menuitem value#,?ocumentation,
url#,"ttp122333.prime&aces.org2documentation."tml, 28
*p1menuitem value#,Forum, url#,"ttp122&orum.prime&aces.org2, 28
*p1menuitem value#,/"emes, url#,"ttp122333.prime&aces.org2t"emes."tml, 28
*2p1submenu8
*2p1menu8
*2p1layout.nit8
*p1layout.nit position#,center,8
Qelcome to ;rimeFaces
*2p1layout.nit8
*2p1layout8
*2"1body8
*2&1vie38
*2"tml8
4. Ao executar o projeto a pgina renderizada deve ser similar a imagem seguinte.
Captulo 14 - Prie,aces Rosiclia Frasson
171
5. A pgina apresentada possui o tema padro do primefaces. Para alterar o mesmo necessrio
efetuar o download do jar na pgina do primefaces:
http://repository.primefaces.org/org/primefaces/themes/. Neste exemplo, ser utilizada a biblioteca
dot-luv.
6. O prximo passo adicionar a biblioteca ao projeto. No menu propriedade, biblioteca, adicionar
jar/pasta, selecione o jar correspondente a biblioteca.
Captulo 14 - Prie,aces Rosiclia Frasson
172
7. O web.xml tambm deve ser alterado para indicar que o tema deve ser alterado.
*context9param8
*param9name8prime&aces./:E!E*2param9name8
*param9value8dot9luv*2param9value8
*2context9param8
8. Ao executar o projeto possvel perceber a alterao feita na pgina.
Captulo 14 - Prie,aces Rosiclia Frasson
173
PASSO-A-PASSO
Aplicativo RH
Como o intuito apenas demonstrar os componentes da biblioteca, este projeto ter as
mesmas funcionalidades do projeto apresentado no captulo anterior. Dessa forma, apenas a
codificao referente a visualizao deve ser alterada. As demais camadas do projeto continuam
as mesmas.
1. Como j mencionado, as alteraes sero efetuadas apenas na camada de visualizao. O
primeiro arquivo a ser modificado o template, que a base para outras pginas. importante
perceber que as divs foram substitudas pelo componente layoutUnit.
*+xml version#]'.-] encoding#]./F9B] +8
*R?DA/S;E "tml ;.@6IA ,922Q4A22?/? 5:/!6 '.- /ransitional22E$,
,"ttp122333.34.org2/C2x"tml'2?/?2x"tml'9transitional.dtd,8
*"tml xmlns#,"ttp122333.34.org2'ZZZ2x"tml,
xmlns1"#,"ttp122xmlns.jcp.org2js&2"tml,
xmlns1ui#,"ttp122xmlns.jcp.org2js&2&acelets,
xmlns1p#,"ttp122prime&aces.org2ui,8
Captulo 14 - Prie,aces Rosiclia Frasson
174
*"1"ead8
*title8(estHo de Cecursos :umanos*2title8
*"1outputStyles"eet library#,css, name#,style.css,28
*2"1"ead8
*"1body8
*p1layout &ull;age#,true,8
*p1layout.nit position#,nort", si>e#,'--, "eader#,(estHo de Cecursos :umanos, 8
*"1grap"icImage library#,imagens, name#,logo.png, 28
*2p1layout.nit8
*p1layout.nit position#,sout", si>e#,4I, "eader#,kcopy;0-'U /odos os direitos reservados
knbsp;kbull;knbsp; CosiclTia Frasson, style#,text9align1 center,8
*2p1layout.nit8
*p1layout.nit position#,3est, si>e#,0--, resi>able#,true, closable#,true, collapsible#,true,8
*ui1include src#,..2menu.x"tml,28
*2p1layout.nit8
*p1layout.nit position#,center,8
*div id#,conteudo,8
*ui1insert name#,conteudo,8
*2ui1insert8
*2div8
*2p1layout.nit8
*2p1layout8
*2"1body8
*2"tml8
2. O arquivo menu.xhtml deve ser alterado para a utilizao de um menu do primefaces.
*ui1composition xmlns1ui#,"ttp122java.sun.com2js&2&acelets,
xmlns #,"ttp122333.34.org2'ZZZ2x"tml,
xmlns1"#,"ttp122xmlns.jcp.org2js&2"tml,
xmlns1p#,"ttp122prime&aces.org2ui,8
*"1&orm8
*p1panel!enu style#,3idt"1 'Z4px;,8
*p1submenu label#,Edministra`Ho,8
*p1menuitem value#,Aargos, url#,2&aces2paginas2lista9cargos.x"tml,28
*p1menuitem value#,FuncionNrios, url#,2&aces2paginas2lista9&uncionarios.x"tml,28
*2p1submenu8
Captulo 14 - Prie,aces Rosiclia Frasson
175
*p1submenu label#,Cecrutamento e Sele`Ho,8
*p1menuitem value#,@anco de AurrLculos, url#,^, 28
*p1menuitem value#,Evalia`Hoes, url#,^, 28
*p1menuitem value#,;rocessos Seletivos, url#,^, 28
*2p1submenu8
*p1submenu label#,Servi`os,8
*p1menuitem value#,/reinamento e ?esenvolvimento, url#,^, 28
*p1menuitem value#,Fol"a de ;agamento, url#,^, 28
*p1menuitem value#,;onto Eletrnnico, url#,^, 28
*p1menuitem value#,(estHo de @ene&Lcios, url#,^, 28
*2p1submenu8
*p1submenu label#,Celatarios (erenciais,8
*p1menuitem value#,Cotatividade, url#,^, 28
*p1menuitem value#,;rodutividade, url#,^, 28
*p1menuitem value#,Austo, url#,^, 28
*2p1submenu8
*2p1panel!enu8
*2"1&orm8
*2ui1composition8
3. Para melhorar a aparncia das pginas, deve ser alterado o tema das pginas. Vale lembrar
que a biblioteca correspondente ao tema escolhido deve estar adicionada ao projeto. Neste
exemplo, est sendo utilizado o skin rocket.
*context9param8
*param9name8prime&aces./:E!E*2param9name8
*param9value8roc%et*2param9value8
*2context9param8
4. Executando o projeto a pgina apresentada deve ser similar a imagem a seguir.
Captulo 14 - Prie,aces Rosiclia Frasson
176
5. As pginas de cadastro e listagem de cargos e funcionrios tambm devem ser alteradas.
Seguem a codificao e a aparncia das pginas.
*ui1composition xmlns1ui#,"ttp122xmlns.jcp.org2js&2&acelets,
template#,..2QE@9I$F2templates2template.x"tml,
xmlns #,"ttp122333.34.org2'ZZZ2x"tml,
xmlns1"#,"ttp122xmlns.jcp.org2js&2"tml,
xmlns1p#,"ttp122prime&aces.org2ui,8
*ui1de&ine name#,conteudo,8
*"1&orm acceptc"arset#,ISD9BBIZ9',8
*p1messages id#,messages, closable#,true,28
*"1input:idden value#,^{cargo@ean.cargo.codigo,28
*p1panel "eader#,Aadastro de Aargo,8
*"1panel(rid columns#,0,8
*"1output6abel value#,$ome1 , &or#,nome,28
*p1input/ext id#,nome, si>e#,I-,
value#,^{cargo@ean.cargo.nome,
re<uired#,true,
re<uired!essage#,l necessNrio in&ormar o nome do cargo.,28
*"1output6abel value#,?escri`Ho1 , &or#,descricao,28
*p1input/extarea id#,descricao,
value#,^{cargo@ean.cargo.descricao,
cols#,I-, ro3s#,'-,28
Captulo 14 - Prie,aces Rosiclia Frasson
177
*"1output6abel28
*p1panel8
*p1command@utton ajax#,&alse,
value#,Salvar,
action#,^{cargo@ean.insere,28
*p1command@utton value#,Aancelar,
type#,reset,28
*2p1panel8
*2"1panel(rid8
*2p1panel8
*2"1&orm8
*2ui1de&ine8
*2ui1composition8
*ui1composition xmlns1ui#,"ttp122xmlns.jcp.org2js&2&acelets,
template#,..2QE@9I$F2templates2template.x"tml,
xmlns #,"ttp122333.34.org2'ZZZ2x"tml,
xmlns1"#,"ttp122xmlns.jcp.org2js&2"tml,
xmlns1&#,"ttp122xmlns.jcp.org2js&2core,
xmlns1p#,"ttp122prime&aces.org2ui,8
*ui1de&ine name#,conteudo,8
*"1&orm acceptc"arset#,ISD9BBIZ9', id#,&orm,8
*p1data/able id#,tabela, var#,cargo, value#,^{cargo@ean.listaAargos, sort!ode#,multiple,
ro3s#,B, paginator#,true,8
*&1&acet name#,"eader,8
Aargos
*2&1&acet8
*p1column sort@y#,codigo, "eader/ext#,Aadigo,8
Captulo 14 - Prie,aces Rosiclia Frasson
178
*"1output/ext value#,^{cargo.codigo, 28
*2p1column8
*p1column sort@y#,nome, "eader/ext#,$ome,8
*"1output/ext value#,^{cargo.nome, 28
*2p1column8
*p1column8
*&1&acet name#,"eader,8
*p1command@utton action#,2&aces2paginas2cargo.x"tml, icon#,ui9icon9plus,8
*2p1command@utton8
*2&1&acet8
*p1command@utton
action#,^{cargo@ean.preparaElteracao, icon#,ui9icon9pencil,8
*&1set;ropertyEction6istener value#,^{cargo,
target#,^{cargo@ean.cargo,28
*2p1command@utton8
*p1command@utton
action#,^{cargo@ean.remove, icon#,ui9icon9close,8
*&1set;ropertyEction6istener value#,^{cargo,
target#,^{cargo@ean.cargo,28
*2p1command@utton8
*2p1column8
*2p1data/able8
*2"1&orm8
*2ui1de&ine8
*2ui1composition8
*ui1composition xmlns1ui#,"ttp122xmlns.jcp.org2js&2&acelets,
template#,..2QE@9I$F2templates2template.x"tml,
xmlns #,"ttp122333.34.org2'ZZZ2x"tml,
xmlns1"#,"ttp122xmlns.jcp.org2js&2"tml,
xmlns1&#,"ttp122xmlns.jcp.org2js&2core,
xmlns1p#,"ttp122prime&aces.org2ui,8
Captulo 14 - Prie,aces Rosiclia Frasson
179
*ui1de&ine name#,conteudo,8
*"1&orm acceptc"arset#,ISD9BBIZ9',8
*p1panel "eader#,Aadastro de FuncionNrio,8
*p1messages id#,messages, closable#,true,28
*"1input:idden value#,^{&uncionario@ean.&uncionario.codigo,28
*p1&ieldset legend#,?ados ;essoais, toggleable#,true,8
*"1panel(rid columns#,U, 3idt"#,'--V,8
*"1output6abel value#,$ome1 , &or#,nome,28
*p1input/ext id#,nome, si>e#,I-,
value#,^{&uncionario@ean.&uncionario.nome,
re<uired#,true,
re<uired!essage#,l necessNrio in&ormar o nome do &uncionNrio.,28
*"1output6abel value#,A;F1 , &or#,cp&,28
*p1input!as% id#,cp&,
value#,^{&uncionario@ean.&uncionario.cp&,
re<uired#,true,
re<uired!essage#,l necessNrio in&ormar o A;F.,
mas%#,ZZZ.ZZZ.ZZZ9ZZ,28
*"1output6abel value#,?ata de $ascimento1 , &or#,dt$ascimento,28
*p1calendar id#,dt$ascimento,
value#,^{&uncionario@ean.&uncionario.data$ascimento,
re<uired#,true,
re<uired!essage#,l necessNrio in&ormar a data de nascimento.,
converter!essage#,?ata no &ormato invNlido. .tili>e dd2mm2aaaa,
pattern#,dd2!!2yyyy,8
*&1convert?ate/ime pattern#,dd2!!2yyyy, type#,date,28
*2p1calendar8
*"1output6abel value#,Aargo1 , &or#,cargo,28
*p1selectDne!enu id#,cargo, value#,^{&uncionario@ean.cargoId, style#,3idt"1'I-px;,8
*&1selectItem item6abel#,Selecione, item)alue#,, 28
*&1selectItems value#,^{cargo@ean.listaAargos, var#,cargo, item6abel#,^{cargo.nome,
item)alue#,^{cargo.codigo,28
*2p1selectDne!enu8
*"1output6abel value#,/ele&one1 , &or#,tele&one,28
*p1input!as% id#,tele&one,
value#,^{&uncionario@ean.&uncionario.tele&one,
mas%#,(ZZ) ZZZZ9ZZZZ,28
*"1output6abel value#,Email1 , &or#,email,28
*p1input/ext id#,email, si>e#,I-,
value#,^{&uncionario@ean.&uncionario.email,28
*2"1panel(rid8
Captulo 14 - Prie,aces Rosiclia Frasson
180
*2p1&ieldset8
*p1&ieldset legend#,Endere`o, toggleable#,true, 8
*"1panel(rid columns#,U, 3idt"#,'--V,8
*"1output6abel value#,Endere`o1 , &or#,endereco,28
*p1input/ext id#,endereco, value#,^{&uncionario@ean.&uncionario.endereco.endereco,
si>e#,II,28
*"1output6abel value#,$cmero1 , &or#,numero,28
*p1input!as% id#,numero,
value#,^{&uncionario@ean.&uncionario.endereco.numero,
validator!essage#,D ncmero nHo pode ser negativo.,
mas%#,Z+ZZZZZZZ,8
*&1validate6ongCange minimum#,-,28
*2p1input!as%8
*"1output6abel value#,Aomplemento1 , &or#,complemento,28
*p1input/ext id#,complemento,
value#,^{&uncionario@ean.&uncionario.endereco.complemento, si>e#,II,28
*"1output6abel value#,@airro1 , &or#,bairro,28
*p1input/ext id#,bairro, value#,^{&uncionario@ean.&uncionario.endereco.bairro,
si>e#,II,28
*"1output6abel value#,Estado1 , &or#,estado,28
*p1input/ext id#,estado, value#,^{&uncionario@ean.&uncionario.endereco.estado,
si>e#,II,28
*"1output6abel value#,Aidade1 , &or#,cidade,28
*p1input/ext id#,cidade, value#,^{&uncionario@ean.&uncionario.endereco.cidade,
si>e#,II,28
*2"1panel(rid8
*2p1&ieldset8
*p1&ieldset legend#,?ados de Ecesso, toggleable#,true,8
*"1panel(rid columns#,U,8
*"1output6abel &or#,login, value#,6ogin1 ,28
*p1input/ext id#,login, value#,^{&uncionario@ean.&uncionario.login, 28
*"1output6abel &or#,sen"a, value#,Sen"a1 ,28
*p1pass3ord id#,sen"a, value#,^{&uncionario@ean.&uncionario.sen"a, &eedbac%#,true,28
*2"1panel(rid8
*2p1&ieldset8
*p1panel8
*p1command@utton ajax#,&alse,
value#,Salvar,
action#,^{&uncionario@ean.insere,28
Captulo 14 - Prie,aces Rosiclia Frasson
181
*p1command@utton value#,Aancelar,
type#,reset,28
*2p1panel8
*2p1panel8
*2"1&orm8
*2ui1de&ine8
*2ui1composition8
*ui1composition xmlns1ui#,"ttp122xmlns.jcp.org2js&2&acelets,
template#,..2QE@9I$F2templates2template.x"tml,
xmlns #,"ttp122333.34.org2'ZZZ2x"tml,
xmlns1"#,"ttp122xmlns.jcp.org2js&2"tml,
xmlns1&#,"ttp122xmlns.jcp.org2js&2core,
xmlns1p#,"ttp122prime&aces.org2ui,8
*ui1de&ine name#,conteudo,8
*"1&orm acceptc"arset#,ISD9BBIZ9',8
*p1data/able value#,^{&uncionario@ean.listaFuncionarios, sort!ode#,multiple, ro3s#,0I,
paginator#,true,
var#,&uncionario,8
*&1&acet name#,"eader,8
*"1output/ext value#,FuncionNrios,28
*2&1&acet8
*p1column8
*&1&acet name#,"eader,8
*"1output/ext value#,Aadigo, 28
*2&1&acet8
*"1output/ext value#,^{&uncionario.codigo,28
Captulo 14 - Prie,aces Rosiclia Frasson
182
*2p1column8
*p1column8
*&1&acet name#,"eader,8
*"1output/ext value#,$ome, 28
*2&1&acet8
*"1output/ext value#,^{&uncionario.nome,28
*2p1column8
*p1column8
*&1&acet name#,"eader,8
*"1output/ext value#,?ata de nascimento, 28
*2&1&acet8
*"1output/ext value#,^{&uncionario.data$ascimento,8
*&1convert?ate/ime pattern#,dd2!!2yyyy, type#,date,28
*2"1output/ext8
*2p1column8
*p1column8
*&1&acet name#,"eader,8
*"1output/ext value#,Aargo, 28
*2&1&acet8
*"1output/ext value#,^{&uncionario.cargo.nome,28
*2p1column8
*p1column8
*&1&acet name#,"eader,8
*p1command@utton action#,2&aces2paginas2&uncionario.x"tml, icon#,ui9icon9plus,8
*2p1command@utton8
*2&1&acet8
*p1command@utton
action#,^{&uncionario@ean.preparaElteracao, icon#,ui9icon9pencil,8
*&1set;ropertyEction6istener value#,^{&uncionario,
target#,^{&uncionario@ean.&uncionario,28
*2p1command@utton8
*p1command@utton
action#,^{&uncionario@ean.remove, icon#,ui9icon9close,8
*&1set;ropertyEction6istener value#,^{&uncionario,
target#,^{&uncionario@ean.&uncionario,28
*2p1command@utton8
*2p1column8
*2p1data/able8
*2"1&orm8
*2ui1de&ine8
*2ui1composition8
Captulo 14 - Prie,aces Rosiclia Frasson
183
184
Bibliografia
Core Java Server Faces
Autor: Geary, David / Horstmann, Cay
Editora:Prentice Hall
Publicao:2010
Edio: 3
Beginning JSF 2 APIs and JBoss Seam
Autor: TONG, Kent Ka Iok
Editora: Apress
Publicao: 2009
Pro JSF e Ajax
Autor: JACOBI, Jonas/ FALLOWS, John R.
Editora: Cincia Moderna
Publicao: 2006
185
JSF 2.0 Cookbook
Autor: LEONARD, Anghel
Editora: Packt
Publicao: 2010
W3 Schools
http://www.w3schools.com/