Desenvolvimento Web Com Javaserver Faces

DWJSF
Desenvolvimento Web com JavaServer Faces
www.algaworks.com
PDF created with pdfFactory Pro trial version www.pdffactory.com
Apostila do curso de JavaServer Faces
Conhea mais sobre nossos cursos Java e Scrum
ALGAWORKS SOFTWARES E TREINAMENTOS
DWJSF

40 Horas/Aula
2a Edio
Setembro/2010
www.algaworks.com
+55 (34) 3255-9898
treinamentos@algaworks.com
Av. Monsenhor Eduardo, 983, Sala 06 A, Bairro Bom Jesus
Uberlndia-MG, CEP. 38400-748
www.algaworks.com
softwares e treinamentos
Aprenda muito mais com nosso treinamento presencial
Sobre a empresa
A AlgaWorks uma empresa localizada em Uberlndia/MG, que trabalha para fornecer
treinamentos em TI de qualidade e softwares que realmente funcionam.
Estamos no mercado desde 2004 trabalhando com treinamentos e consultorias sobre a
plataforma Java.
Nossa misso
Capacitar pessoas em tecnologias e metodologias de desenvolvimento de software e
fornecer aplicativos na internet de baixo custo que contribuem para a organizao da vida de
milhares de usurios, micro e pequenas empresas de todo o mundo.
Nossa viso
Ser reconhecida como uma das principais empresas de treinamentos em TI do Brasil e
como a principal exportadora de software web de baixo custo para indivduos e pequenas
empresas do mundo.
Nossos valores
Honestidade
Transparncia
Respeito
Excelncia
Simplicidade
Origem de nosso nome

"As algas produzem energia necessria ao seu prprio metabolismo atravs da
fotossntese ... As algas azuis foram os primeiros serem vivos a aparecerem na Terra, e
acredita-se que tenham tido um papel fundamental na formao do oxignio da atfosmera."
funciona, que tem sucesso.

AlgaWorks foi o nome dado para a nossa empresa, e quer dizer que:
Queremos ser uma empresa independente, que atravs de nosso prprio esforo
conseguimos produzir uma energia suficiente para a nossa sobrevivncia;
No queremos depender de investidores externos que no agregam conhecimento
ao negcio;
Desejamos criar alianas com empresas, autnomos, estudantes e profissionais e
transmitir todo o nosso conhecimento em tecnologia;
Fornecemos softwares que funcionam e agregam valor ao negcio, sem
complicaes;
Tudo isso deve funcionar com sucesso para ajudar nossos clientes, parceiros,
fornecedores, colaboradores e acionistas serem mais felizes.
www.algaworks.com
Nossos cursos
Conhea nossos cursos abaixo ou acesse www.algaworks.com/treinamentos para mais
informaes.
Java Bsico e Orientao a Objetos

[24 horas]
Java Avanado
[32 horas]
Migrando para o Java 5
[8 horas]
Desenvolvimento Web com HTML, CSS e JavaScript
[12 horas]
Desenvolvimento Web com Servlets e JSP
[36 horas]
Desenvolvimento da Camada de Persistncia com Hibernate
[24 horas]
[40 horas]
Desenvolvimento de Relatrios com JasperReports e iReport
[24 horas]
Desenvolvimento Avanado com Java EE
[32 horas]
Preparatrio para Certificao de Programador Java
[32 horas]
Modelagem UML
[28 horas]
Gerenciamento gil de Projetos com Scrum
[16 horas]
www.algaworks.com
Sobre esta apostila

Esta apostila faz parte do material didtico distribudo pela AlgaWorks para ministrar o
curso Desenvolvimento Web com JavaServer Faces.
Apesar da distribuio desta apostila para fins no-comerciais ser permitida,
recomendamos que voc sempre prefira compartilhar o link da pgina de download
(http://www.algaworks.com/treinamentos/apostilas) ao invs do arquivo, pois atualizamos nosso
material didtico constantemente para corrigir erros e incluir melhorias.
Para voc realmente aproveitar o contedo desta apostila e aprender a tecnologia
JavaServer Faces, necessrio que voc j tenha conhecimento prvio da plataforma Java,
Orientao a Objetos, banco de dados e desenvolvimento web com JSP.
Se voc quiser se especializar ainda mais em JSF ou outras tecnologias, sugerimos
que faa os cursos presenciais na AlgaWorks, pois, alm de usarmos este material didtico ou
outros com qualidade semelhante, voc ficar por dentro das ltimas novidades e ter a
chance de aprender com a experincia de nossos instrutores.
Licena desta obra

O contedo desta apostila est protegido nos termos da licena
Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported
(http://creativecommons.org/licenses/by-nc-nd/3.0/deed.pt_BR)
para
a
AlgaWorks Softwares, Treinamentos e Servios Ltda, CNPJ 10.687.566/0001-97. Isso
significa que voc pode compartilhar (copiar, distribuir e transmitir) esta obra para uso nocomercial, desde que sempre atribua os crditos AlgaWorks. vedado a criao de materiais
derivados, portanto, voc no pode alterar, transformar ou criar algo em cima dessa obra.
Para qualquer reutilizao ou distribuio, voc deve deixar claro a terceiros os termos
da licena a que se encontra submetida esta obra.
Qualquer das condies acima pode ser renunciada se voc obtiver permisso da
AlgaWorks. Para uso comercial, voc dever comprar os direitos de uso limitados a um nmero
especfico de alunos. Neste caso, fale com nossa rea comercial.
Encontrou erros ou gostaria de sugerir melhorias?

Se voc encontrar algum erro neste material ou tiver alguma sugesto, crtica ou
elogio, por favor, envie um e-mail para treinamentos@algaworks.com.
www.algaworks.com
Sobre o autor
Thiago Faria de Andrade (thiago.faria@algaworks.com) fundador e diretor da
AlgaWorks. Iniciou seu interesse por programao aos 14 anos, quando desenvolveu um
software para entretenimento e se tornou um dos mais populares no Brasil e outros pases de
lngua portuguesa.
Graduado em Sistemas de Informao e certificado como programador Java pela
Sun/Oracle (SCJP), Thiago trabalhou em consultorias para grandes empresas de
Uberlndia/MG, co-fundou a OpenK Tecnologia e trabalhou como diretor de tecnologia e
treinamentos nesta empresa por quase 6 anos.
Fundou a AlgaWorks aps adquirir 100% das cotas da OpenK Treinamentos, e no ano
de 2010, possua experincia profissional de mais de 10 anos, sendo 7 dedicados tecnologia
Java.
Alm de programar, Thiago ministra cursos, palestras e presta consultorias sobre Java
para rgos do governo, universidades, pequenas e grandes empresas e pessoas fsicas,
tendo acumulado aproximadamente 2.500 horas em salas de aulas e auditrios, at o ano de
2010.
www.algaworks.com
Contedo do DVD
O DVD que acompanha o material de estudo do curso DWJSF contm arquivos teis para o
aprendizado.
Os seguintes arquivos e programas so disponibilizados atravs deste DVD:
Bibliotecas do Hibernate, JFreeChart, MySQL JDBC, Mojarra (implementao JSF da
Sun), JSTL, Facelets, Richfaces, Commons BeanUtils, Commons Digester, Commons
Logging, Log4j e SL4J Log4j
[DVD]:\Bibliotecas
Documentao do Hibernate, JFreeChart, JSF, Facelets e Richfaces
[DVD]:\Documentao
Eclipse, NetBeans, JBoss Tools, EMS SQL Manager for MySQL, Toad for MySQL e
MySQL GUI Tools
[DVD]:\Ferramentas
Servidor MySQL
[DVD]:\MySQL Server
Kit de desenvolvimento Java
[DVD]:\JDK
Apache Tomcat
[DVD]:\Tomcat
* DVD distribudo apenas para clientes do curso.
www.algaworks.com
ndice
1. Objetivo do curso .................................................................................................................. 12
2. Introduo ............................................................................................................................. 13
2.1. O que JavaServer Faces?........................................................................................... 15
2.2. Principais componentes ................................................................................................. 15
2.3. Componentes adicionais ................................................................................................ 16
2.4. Renderizao de componentes ..................................................................................... 17
3. Ambiente de desenvolvimento .............................................................................................. 19
3.1. Escolhendo a ferramenta de desenvolvimento .............................................................. 19
3.2. Escolhendo um container web ....................................................................................... 21
3.3. Instalando e configurando o Eclipse .............................................................................. 22
3.4. Instalando e configurando o Apache Tomcat................................................................. 24
3.5. Integrando o Eclipse com o Apache Tomcat ................................................................. 26
4. Primeiro projeto JSF ............................................................................................................. 30
4.1. Introduo....................................................................................................................... 30
4.2. Escolhendo uma implementao de JSF ....................................................................... 30
4.3. Criando um novo projeto ................................................................................................ 30
4.4. Codificando a primeira aplicao JSF ............................................................................ 34
4.5. Implantao e execuo da aplicao ........................................................................... 40
4.6. Gerando um WAR da aplicao ..................................................................................... 42
5. Desvendando o mistrio ....................................................................................................... 45
5.1. Introduo....................................................................................................................... 45
5.2. Managed bean UsuarioBean.......................................................................................... 45
5.3. Arquivo faces-config.xml ................................................................................................ 47
5.4. Pgina ola.jsp ................................................................................................................. 49
5.5. Arquivo web.xml ............................................................................................................. 51
5.6. Conhecendo mais sobre o diretrio WEB-INF ............................................................... 52
5.7. Como funciona nos bastidores ....................................................................................... 52
5.8. JSF apenas isso? ........................................................................................................ 54
6. Ciclo de vida ......................................................................................................................... 56
7. Managed beans .................................................................................................................... 58
7.1. Introduo....................................................................................................................... 58
7.2. Configurando beans ....................................................................................................... 58
7.3. Expresses de ligao de valor ..................................................................................... 58
7.4. Escopo dos beans .......................................................................................................... 59
7.5. Backing beans ................................................................................................................ 59
7.6. Definindo valores de propriedades ................................................................................ 60
7.7. Inicializando listas e mapas............................................................................................ 60
7.8. Usando expresses compostas ..................................................................................... 61
www.algaworks.com

7.9. Usando expresses de ligao de mtodo .................................................................... 62
7.10. Aplicao de exemplo .................................................................................................... 62
8. Navegao ............................................................................................................................ 66
8.1. Introduo....................................................................................................................... 66
8.2. Navegao simplificada ................................................................................................. 66
8.3. Filtro pela viso de origem ............................................................................................. 67
8.4. Navegao dinmica ...................................................................................................... 68
8.5. Filtro pela ao de origem .............................................................................................. 71
8.6. Usando redirecionamentos ............................................................................................ 71
8.7. Usando padres ............................................................................................................. 72
9. Componentes bsicos .......................................................................................................... 73
9.1. Introduo....................................................................................................................... 73
9.2. Formulrios..................................................................................................................... 73
9.3. Um pouco sobre os atributos comuns ............................................................................ 74
9.4. Entrada de textos ........................................................................................................... 77
9.5. Sada de textos .............................................................................................................. 79
9.6. Imagens .......................................................................................................................... 80
9.7. Menus, caixas de listagem e item de seleo ................................................................ 81
9.8. Campos de checagem e botes rdio ........................................................................... 85
9.9. Itens de seleo ............................................................................................................. 88
9.10. Botes e links ................................................................................................................. 90
9.11. Painis ............................................................................................................................ 92
9.12. Mensagens ..................................................................................................................... 95
10. Tabela de dados ................................................................................................................... 99
10.1. O componente h:dataTable ............................................................................................ 99
10.2. Cabealhos e rodaps ................................................................................................. 101
10.3. Componentes dentro de clulas................................................................................... 102
10.4. Aplicando estilos tabela ............................................................................................. 103
11. Internacionalizao ............................................................................................................. 105
11.1. Usando message bundles ............................................................................................ 105
11.2. Pacotes de mensagens para outras localidades ......................................................... 106
12. Converso e validao ....................................................................................................... 108
12.1. Introduo..................................................................................................................... 108
12.2. Conversores padro de nmeros e datas .................................................................... 109
12.3. Alternativas para definir conversores ........................................................................... 114
12.4. Customizando mensagens de erro de converso ....................................................... 115
12.5. Usando validadores ...................................................................................................... 119
12.6. Customizando mensagens de erros de validao ....................................................... 120
12.7. Ignorando validaes com o atributo immediate.......................................................... 121
12.8. Criando conversores personalizados ........................................................................... 122
www.algaworks.com

12.9. Criando validadores personalizados ............................................................................ 125
13. Manipulando eventos .......................................................................................................... 128
13.1. Introduo..................................................................................................................... 128
13.2. Capturando eventos de ao ....................................................................................... 128
13.3. Capturando eventos de mudana de valor .................................................................. 129
14. Sistema financeiro com JSF e Hibernate ........................................................................... 133
14.1. Introduo..................................................................................................................... 133
14.2. O que persistncia de dados? .................................................................................. 133
14.3. Mapeamento objeto relacional (ORM) ......................................................................... 133
14.4. Hibernate e JPA ........................................................................................................... 134
14.5. Preparando o ambiente ................................................................................................ 135
14.6. Nosso modelo de domnio............................................................................................ 135
14.7. Criando as classes de domnio .................................................................................... 136
14.8. Criando as tabelas no banco de dados ........................................................................ 139
14.9. Mapeando classes de domnio para tabelas do banco de dados ................................ 139
14.10. Configurando o Hibernate ......................................................................................... 141
14.11. Criando a classe HibernateUtil ................................................................................. 143
14.12. Implementando classes de negcio .......................................................................... 144
14.13. Criando uma folha de estilos e incluindo imagens ................................................... 146
14.14. Traduzindo as mensagens padro do JSF ............................................................... 148
14.15. Configurando managed beans e regras de navegao ............................................ 148
14.16. Conversor genrico para tipo Enum ......................................................................... 149
14.17. Conversor para entidade Pessoa ............................................................................. 150
14.18. Construindo uma tela de menu do sistema .............................................................. 151
14.19. Construindo a tela para cadastro de contas ............................................................. 151
14.20. Construindo a tela para consulta de contas ............................................................. 155
14.21. Um sistema financeiro funcionando! ......................................................................... 158
15. Data Access Object ............................................................................................................ 160
15.1. Introduo..................................................................................................................... 160
15.2. Criando um DAO genrico ........................................................................................... 160
15.3. Criando DAOs especficos ........................................................................................... 161
15.4. Criando uma fbrica de DAOs ..................................................................................... 163
15.5. Instanciando e usando os DAOs .................................................................................. 164
15.6. Valeu a pena usar DAO? ............................................................................................. 165
16. JBoss RichFaces e AJAX ................................................................................................... 166
16.1. Introduo..................................................................................................................... 166
16.2. Configurando e testando o ambiente ........................................................................... 166
16.3. Adicionando suporte AJAX em componentes no-AJAX ............................................ 170
16.4. Adicionando suporte AJAX no cadastro de contas ...................................................... 171
16.5. Componente de calendrio .......................................................................................... 171
www.algaworks.com
10

16.6. Componente de caixa de sugesto .............................................................................. 172
16.7. Componente de painel com abas ................................................................................ 174
16.8. Componente de tabela de dados ................................................................................. 175
16.9. Componente de paginao de dados .......................................................................... 177
16.10. Clicar e arrastar com JBoss Tools ............................................................................ 178
17. Facelets .............................................................................................................................. 179
17.1. Introduo..................................................................................................................... 179
17.2. Instalando Facelets no projeto ..................................................................................... 179
17.3. Adequando nossas pginas para XHTML ................................................................... 180
17.4. Reutilizao com templating ........................................................................................ 181
17.5. Reutilizao com composition ...................................................................................... 183
18. Segurana com JAAS ......................................................................................................... 185
18.1. Introduo..................................................................................................................... 185
18.2. Criando tabelas de segurana no banco de dados ..................................................... 185
18.3. Configurando o domnio de segurana ........................................................................ 186
18.4. Integrando a aplicao ao domnio de segurana ....................................................... 187
18.5. Validando a segurana ................................................................................................. 189
18.6. Criando o formulrio de login e personalizando telas de erro ..................................... 189
18.7. Protegendo componentes contra aes dos usurios ................................................. 192
18.8. Exibindo o nome do usurio logado e criando um link para logout ............................. 193
19. Conhecendo o JFreeChart ................................................................................................. 194
19.1. Introduo..................................................................................................................... 194
19.2. Criando grficos em pginas JSF ................................................................................ 195
20. Concluso ........................................................................................................................... 201
21. Bibliografia .......................................................................................................................... 202
22. Fique atualizado! ................................................................................................................. 203
23. Livros recomendados.......................................................................................................... 204
www.algaworks.com
11
1. Objetivo do curso
As constantes evolues da tecnologia exigem das pessoas um freqente
aperfeioamento de seus conhecimentos profissionais. No dia-a-dia, muitas pessoas no
conseguem acompanhar as mudanas e novidades nas tecnologias.
Para estes profissionais, a AlgaWorks oferece treinamentos personalizados,
ministrados por pessoas com larga experincia no mercado de software. O contedo
programtico de nossos cursos se adequam realidade, abordando os temas com aulas
presenciais realizadas com muita prtica.
Tudo isso garante um investimento em TI que se traduz num diferencial competitivo
para a empresa, pois sua equipe estar totalmente capacitada a extrair todo seu potencial.
Este curso tem o objetivo de apresentar a JavaServer Faces e alguns frameworks,
bibliotecas e especificaes, como Hibernate, Richfaces, Facelets, JAAS e JFreeChart,
utilizados amplamente para desenvolvimento de sistemas em todo o mundo.
Aps a concluso deste curso, os alunos devero estar aptos a:
Entender e criar managed beans;
Entender o ciclo de vida do JSF;
Utilizar navegao entre pginas;
Entender e utilizar os principais componentes;
Trabalhar com validao de campos;
Criar pginas com internacionalizao;
Utilizar componentes de projetos open-source, como Richfaces;
Criar sistemas que utilizem AJAX;
Utilizar Facelets para templating de pginas JSF;
Efetuar download e configurao do Hibernate;
Mapear classes com Hibernate;
Entender e utilizar o padro de projeto DAO;
Desenvolver classe de DAO genrico;
Recuperar, gravar e consultar objetos com Hibernate;
Criar grficos com dados dinmicos usando JFreeChart;
Implementar sistemas que suportem autenticao e autorizao usando JAAS;
Desenvolver um projeto completo usando boas prticas de programao, padres de
projetos e frameworks de mercado, com separao em camadas.
www.algaworks.com
12
2. Introduo
Com o avano da tecnologia sobre redes de computadores e com o crescimento da
internet, as pginas web esto se tornando cada vez mais atraentes e cheias de recursos que
aumentam a interatividade com o usurio. So verdadeiras aplicaes rodando sobre a web.
Quando falamos em aplicaes web, estamos nos referindo a sistemas onde toda a
programao fica hospedada em servidores na internet, e o usurio (cliente) normalmente no
precisa ter nada instalado em sua mquina para utiliz-los, alm de um navegador (browser). O
acesso s pginas (telas) desses sistemas feita utilizando um modelo chamado de requestresponse, ou seja, o cliente solicita que alguma ao seja realizada (request) e o servidor a
realiza e responde para o cliente (response). Na plataforma Java, esse modelo foi
implementado inicialmente atravs da API de Servlets e JSP (JavaServer Pages). Um Servlet
estende a funcionalidade de um servidor web para servir pginas dinmicas aos navegadores,
utilizando o protocolo HTTP. J o JSP, utilizando-se de uma sintaxe especial, permite que
desenvolvedores web criem pginas que possuam programao Java, semelhante ao PHP e
ASP, porm muito mais robusto e padronizado.
A interao entre o cliente e uma aplicao web ilustrada no diagrama abaixo.
Uma aplicao web em Java

O cliente envia uma requisio HTTP ao servidor web. No mundo Java os servidores
web so chamados de Servlet Container, pois implementam a especificao de Servlet e JSP.
O servidor converte a requisio (request) em um objeto do tipo HttpServletRequest. Este
objeto ento passado aos componentes web, que podem interagir com JavaBeans ou mesmo
um banco de dados, para que possa ser gerado um contedo dinmico. Em seguida, o
componente web gera um objeto HttpServletResponse, que representa a resposta (response)
ao cliente. Este objeto utilizado para que o contedo dinmico gerado seja enviado ao
navegador (usurio).
Desde o lanamento de Servlets e JSPs, outras tecnologias Java e frameworks foram
surgindo com o objetivo de melhorar a produtividade e recursos no desenvolvimento de
aplicaes web. Atualmente JavaServer Faces a tecnologia do momento, requisitada na
maioria das oportunidades de emprego para desenvolvedores Java. Esta tecnologia foi
baseada em outras j existentes, como pode ver na imagem abaixo.
www.algaworks.com
13
Veja que Servlet a base de todas as aplicaes Java para web. As outras tecnologias
criam um nvel de abstrao sobre Servlets, criando aplicaes mais fceis de manuteno,
escalveis e robustas. Vrios outros frameworks baseados em Servlets foram desenvolvidos
sobre propriedade de alguma empresa ou open-source, e muitos deles fizeram sucesso por
muito tempo, mas JSF revolucionou o desenvolvimento web e agora est em grande expanso.
Voc aprender como instalar, configurar e desenvolver sistemas utilizando JavaServer
Faces, a tecnologia que foi criada para que o desenvolvimento de aplicaes web fosse
parecido com o de aplicaes clientes desktop em termos de produtividade e funcionalidades.
O conceito bsico deste framework a existncia de classes que representam os componentes
(formulrios, botes, campos de entrada, tabelas e etc) de sua pgina JSP. Veremos muitos
mais detalhes sobre esta tecnologia adiante.
Em aplicaes corporativas, extremamente importante gravar os dados de cadastros,
transaes e etc. Os bancos de dados vieram para facilitar a vida dos programadores. Hoje
existem diversos sistemas gerenciadores de banco de dados (SGBD) no mercado, uns
trazendo facilidades de administrao, outros com suporte a grandes quantidades de dados,
alguns totalmente gratuitos e outros muito caros! Enfim, o importante saber que, como
programador, voc certamente ter que utilizar algum banco de dados.
Como veremos nesta apostila, existem frameworks que facilitam a vida de um
programador orientado a objetos (sim, para voc estar lendo esta apostila, voc deve ser um
programador orientado a objetos) para trabalhar com banco de dados.
O Hibernate um excelente framework que trabalha entre o banco de dados e sua
aplicao Java. A figura abaixo ilustra como isso ocorre.
Com o Hibernate, ganhamos muito em agilidade e tornamos nossos produtos muito

mais flexveis, pois como veremos, fica muito fcil trocar o banco de dados inteiro com quase
nenhum esforo.
O objetivo desta apostila lhe ensinar JavaServer Faces, porm ensinaremos tambm
como criar uma aplicao usando JSF e Hibernate. Voc j deve conhecer pelo menos o
bsico de Hibernate. Abordaremos tambm outros padres e conceitos importantes no
desenvolvimento de software, como por exemplo, o DAO (Data Access Object), utilizado na
camada de persistncia, o famoso MVC (Model, View e Controller) e outros.
O que ns desejamos que voc tenha um timo aprendizado e que entre mais
preparado neste mercado de trabalho, que necessita rapidamente de profissionais cada vez
mais qualificados.
www.algaworks.com
14

Sinta-se a vontade em voltar a esta apostila sempre que tiver dvidas. Nos primeiros
dias voc poder achar alguns cdigos estranhos, mas ao longo do tempo vai ver que tudo se
encaixa perfeitamente!
2.1. O que JavaServer Faces?

JavaServer Faces, tambm conhecido como JSF, uma tecnologia para
desenvolvimento web que utiliza um modelo de interfaces grficas baseado em eventos. Esta
tecnologia foi definida pelo JCP (Java Community Process), o que a torna um padro de
desenvolvimento e facilita o trabalho dos fornecedores de ferramentas ao criarem produtos que
valorizem a produtividade no desenvolvimento de interfaces visuais, inclusive com recursos de
drag-and-drop.
JSF baseado no padro de projeto MVC (Model-View-Controller), o que torna o
desenvolvimento de sistemas menos complicado, pois a separao entre a visualizao e
regras de negcio muito clara.
O padro MVC separa o sistema em trs responsabilidades (modelo, visualizao e
controle), onde o modelo responsvel por representar os objetos de negcio, manter o estado
da aplicao e fornecer ao controlador o acesso aos dados. A visualizao responsvel pela
interface do usurio. Ela que define a forma como os dados so apresentados e encaminha as
aes do usurio para o controlador. O controlador responsvel por ligar o modelo e a
visualizao, interpretando as solicitaes do usurio, traduzindo para uma operao no
modelo (onde so realizadas efetivamente as mudanas no sistema) e retornando a
visualizao adequada solicitao.
Em JSF, o controle feito atravs de um servlet chamado Faces Servlet, por arquivos
XML de configurao e por vrios manipuladores de aes e observadores de eventos. O
Faces Servlet recebe as requisies dos usurios na web, redireciona para o modelo e envia
uma resposta. Os arquivos de configurao possuem informaes sobre mapeamentos de
aes e regras de navegao. Os manipuladores de eventos so responsveis por receber os
dados da camada de visualizao, acessar o modelo e devolver o resultado para o usurio
atravs do Faces Servlet.
O modelo representado por objetos de negcio, que executa uma lgica de negcio
ao receber dados oriundos da camada de visualizao.
A visualizao composta por uma hierarquia de componentes (component tree), o
que torna possvel unir componentes para construir interfaces mais ricas e complexas.
Arquitetura do JavaServer Faces baseada no MVC
2.2. Principais componentes

O verdadeiro poder de JavaServer Faces est em seu modelo de componentes de
interface do usurio, onde aplicaes so desenvolvidas com um conjunto de componentes
que podem ser renderizados em diversas formas para vrios tipos de clientes, como por
exemplo para um browser da web, celular, etc.
www.algaworks.com
15

JSF similar tecnologia proprietria ASP.NET, pois o modelo de componentes
oferece alta produtividade aos desenvolvedores, permitindo a construo de interfaces para
web usando um conjunto de componentes pr-construdos, ao invs de criar interfaces
inteiramente do zero. Existem vrios componentes de visualizao JSF, desde os mais
simples, como um outputLabel, que apresenta simplesmente um texto, ou um dataTable, que
representa dados tabulares de uma coleo que pode vir do banco de dados.
A especificao do JSF fornece um conjunto de componentes visuais bsicos em sua
implementao de referncia. Ela inclui duas bibliot
responsvel por tarefas comuns no desenvolvimento de sistemas, como internacionalizao,
validao e converso de dados de entrada. Alm de fornecer uma biblioteca base de
componentes, a API da JSF suporta a extenso e criao de novos componentes, que podem
fornecer funcionalidades adicionais.
Os principais componentes que a implementao de referncia do JSF fornece so:
Formurio
Campos de entrada de texto
Campo de entrada de senha
Rtulos com textos
Textos de uma nica linha
Links
Botes
Mensagens
Painis
Tabela HTML
Tabela de dados (grid)
Coluna de tabela de dados
Etc
2.3. Componentes adicionais

Atualmente existem diversas empresas que trabalham na criao de componentes
personalizados. Como exemplo, podemos citar a Oracle, com o ADF Faces Rich Client, IceSoft,
com o IceFaces, JBoss (Redhat), com o Richfaces, e etc. Muitos desses componentes incluem
mltiplos renderizadores para diversos tipos de clientes, tabelas avanadas, componentes para
captura de datas e cores, menus suspensos, botes, barras de progresso, telas suspensas
para seleo de valores e etc.
Veja alguns exemplos de sistemas usando diversas bibliotecas de componentes:
Aplicao de exemplo usando ADF Faces Rich Client
www.algaworks.com
16
Aplicao de exemplo usando IceFaces
Software de gesto de projetos usando Richfaces
2.4. Renderizao de componentes

A tecnologia JSF possui capacidade de utilizar renderizadores de componentes
plugveis. Isso se traduz na capacidade dos componentes se apresentarem diferentes
dependendo do tipo do cliente que est sendo utilizado. Por exemplo, um browser como o
www.algaworks.com
17

Firefox ou Internet Explorer, deve receber cdigo HTML para que possa ser exibido ao usurio,
enquanto um dispositivo mvel como um celular poder ser capaz de exibir apenas contedos
WML.
Um mesmo componente JSF pode se adequar aos dois tipos de contedos,
dependendo do que for adequado no momento. Isso possvel graas ao desacomplamento
dos componentes visuais do cdigo de renderizao, tornando possvel criar mltiplos
renderizadores para um mesmo componente. Diferentes renderizadores podem ento ser
associados ao componente e em tempo de execuo decidido qual renderizador ser
utilizado, baseado no tipo do cliente que enviou a requisio.
Um componente de tabela de dados sendo renderizado para clientes WML e HTML
www.algaworks.com
18
3. Ambiente de desenvolvimento
3.1. Escolhendo a ferramenta de desenvolvimento
Atualmente existem vrias ferramentas que suportam o desenvolvimento com JSF.
Algumas delas possuem um ambiente visual que exibe uma representao grfica da tela em
desenvolvimento e permite arrastar e soltar componentes a partir de uma paleta. Outras
ferramentas apiam mais na edio do arquivo de configurao e na escrita de cdigos e
templates.
Eclipse
Eclipse com plugins do JBoss Tools
www.algaworks.com
19
MyEclipse IDE
NetBeans
www.algaworks.com
20
JDeveloper
Vrias ferramentas so baseadas no Eclipse, como o JBoss Developer Studio (que

basicamente o Eclipse + JBoss Tools) e o MyEclipse IDE, pois o Eclipse considerado uma
plataforma muito flexvel e atualmente a mais usada em todo o mundo.
Disponibilizamos os arquivos de instalao das IDEs grtis mais importantes na
comunidade no DVD que acompanha esta apostila, porm utilizaremos o Eclipse para
desenvolver os exemplos e exerccios da apostila.
O Eclipse distribudo para desenvolvedores Java EE no possui recursos visuais
interessantes para criar pginas JSF, porm apia visualmente na configurao da aplicao
nesta tecnologia. Nossa escolha pelo Eclipse pelo fato de ser uma ferramenta rpida e com
excelente suporte a edio de cdigo Java e JSP (isso inclui JSF).
Antes de terminar nosso estudo, instalaremos o plugin JBoss Tools para trabalharmos
co
-eO Eclipse pode ser baixado em http://www.eclipse.org, mas felizmente j possumos o
arquivo de instalao no DVD. A instalao dessa ferramenta ser apresentada em um prximo
tpico.
3.2. Escolhendo um container web

Para executar aplicaes desenvolvidas em JSF, voc precisar de um servidor com
um container web instalado. Um container web um programa que recebe requisies HTTP,
executa componentes Java (Servlets) e devolve para o usurio (browser) cdigo HTML, alm
de todos os outros recursos necessrios (como imagens, vdeos, folhas de estilo e etc). Na
verdade, trata-se de um servidor web (como o Apache HTTPD), porm com outras
funcionalidades para executar cdigo Java de acordo com a especificao Java EE.
A JavaServer Faces foi construda baseada na tecnologia de Servlets e JSP, mas voc
no obrigado a saber sobre elas para desenvolver em JSF, apesar de ser recomendado.
Existem diversos containers web (e outros containers completos, que tambm no
deixam de ser web) disponveis para download, e o melhor, sem custo algum para implantar
em produo. Apesar de tantas ofertas gratuitas de excelentes produtos, algumas empresas
ainda vendem licenas de seus prprios servidores, pois oferecem suporte diferenciado ao
cliente e normalmente implementam funcionalidades que os servidores gratuitos talvez no
possuam.
www.algaworks.com
21

Dentre os vrios servidores que so containeres web, podemos destacar os mais
conhecidos:
Apache Tomcat
Jetty
JBoss AS
Glassfish
JOnAS
Apache Geronimo
IBM WebSphere Application Server
Oracle WebLogic Server (antigo BEA WebLogic Server)
Oracle Application Server
Para desenvolver nossos cdigos, usaremos o Apache Tomcat, pois mais leve, grtis
e possui tudo que precisamos para executar nossos exemplos.
Como estes servidores so baseados nas especificaes da tecnologia Java EE, voc
pode implantar os softwares que desenvolveremos neste curso em qualquer servidor mais atual
compatvel com a Java EE.
O download do Apache Tomcat pode ser feito em http://tomcat.apache.org. O DVD que
acompanha a apostila j possui o arquivo de instalao desse servidor, e aprenderemos a
instal-lo ainda neste captulo.
3.3. Instalando e configurando o Eclipse

A instalao do Eclipse simples, basta descompactar o arquivo de instalao (com
extenso .zip) no local desejado.
Para iniciar o Eclipse, voc j deve ter a Java SDK 5 ou superior instalada em seu
co
ferramenta ser iniciada.
www.algaworks.com
22
Aparecer uma tela solicitando um diretrio onde o Eclipse gravar seus projetos, que
chamado de workspace. Pressione o boto OK para usar o diretrio sugerido ou selecione
outro local.
ocorreu com sucesso.
www.algaworks.com
23
3.4. Instalando e configurando o Apache Tomcat

O processo de instalao do Apache Tomcat simples, basta descompactar o arquivo
Uma vez finalizado, tem-se um servidor de aplicaes pronto para produo. De

qualquer forma, o site disponibiliza toda a documentao necessria para resolver problemas
encontrados e esclarecer dvidas com relao ao processo de instalao e configurao do
servidor.
Para entender um pouco sobre o funcionamento do Tomcat, examine os diretrios
criados durante o processo de instalao. Os principais so:
bin
Executveis, incluindo os aplicativos para iniciar e para encerrar a execuo do

servidor.
conf
define uma srie de parmetros para a execuo do servidor, como por
exemplo, a porta onde o servidor ir receber requisies (essa porta , por
default, 8080), devendo ser examinado com cuidado e modificado conforme as
necessidades.
logs
Arquivos de log do servidor. Alm de gerar arquivos de log contendo entradas

para cada requisio recebida, como qualquer servidor web, o Tomcat tambm
pode gerar arquivos de log com tudo o que as aplicaes desenvolvidas
enviam para a sada padro do sistema.
work
Diretrio temporrio do Tomcat. Esse diretrio utilizado, por exemplo, para

realizar a recompilao automtica de pginas JSP.
webapps
Nesse diretrio so instaladas as diversas aplicaes web desenvolvidas.
para iniciar o servidor. Voc j deve ter a Java

SDK 5 ou superior instalada em seu computador para efetuar este passo.
www.algaworks.com
24
Uma console ser exibida e os passos da inicializao do servidor sero impressos

nela.
Abra um browser (pode ser o Firefox, que melhor que o Internet Explorer) e acesse o
endereo http://localhost:8080. Se a tela abaixo aparecer para voc, parabns, o Tomcat est
instalado e funcionando em seu computador.
www.algaworks.com
25
, ou na console do servidor, pressione em conjunto as teclas Ctrl + C.
3.5. Integrando o Eclipse com o Apache Tomcat

Para tornar nosso estudo mais prtico, iremos integrar o Apache Tomcat ao Eclipse.
Desta forma, voc poder iniciar e parar o Tomcat e implantar as aplicaes a partir do
ambiente de desenvolvimento.
Window Preferences
Runtime Environments
www.algaworks.com
26

Environment
para seleo do servidor.
Localize e selecione a verso que mais se aproxima da que usaremos, neste caso,
www.algaworks.com
27
Para testar a integrao do Eclipse com o Tomcat, localize e clique sobre aba
Se no encontrar esta aba ou ela estiver desaparecido,

Others
Pronto. Agora clique com o boto direito na rea
www.algaworks.com
28
O Tomcat aparecer na lista de servidores integrados ao Eclipse. Clique com o boto

direito sobre este
Neste momento, o Apache Tomcat est funcionando integrado ao Eclipse. Voc pode
parar, configurar ou publicar aplicaes no servidor a partir do ambiente de desenvolvimento.
www.algaworks.com
29
4. Primeiro projeto JSF

4.1. Introduo
Nossa primeira aplicao em JSF ser bem simples. O objetivo que voc consiga
preparar o ambiente de um novo projeto e deixe-o funcionando no servidor.
aprofundaremos em cada detalhe
da tecnologia.
4.2. Escolhendo uma implementao de JSF

A JSF foi criada atravs do Java Community Process (JCP), que uma entidade
formada pelas mais importantes empresas de tecnologia do mundo e especialistas em diversos
assuntos.
O JCP composto por vrios grupos de trabalho, que so chamados de JSR (Java
Specification Request). Uma JSR um projeto de desenho de uma nova tecnologia. O artefato
produzido atravs das JSRs so documentaes, interfaces e algumas classes que
especificam como deve funcionar um novo produto.
A JSF foi criada e controlada pelo JCP atravs de JSRs (uma para cada verso).
Quando uma JSR finalizada, empresas fornecedoras de tecnologia tm a chance de entender
a especificao e implementar um produto final compatvel com o proposto pela especificao.
No caso da JSF, as implementaes mais conhecidas atualmente so a da prpria
Sun, conhecida como Mojarra, e a da Apache, chamada de MyFaces Core.
Todas as implementaes devem fazer a mesma coisa, mas o que diferencia uma da
outra a qualidade que foi desenvolvido o produto, documentao disponvel, suporte
oferecido pela empresa e principalmente pela comunidade, etc.
Usaremos neste curso a implementao da Sun, a Mojarra verso 1.2.x. O DVD que
acompanha esta apostila possui o arquivo distribudo pela Sun, mas caso voc tenha interesse
em conhecer o site e at mesmo baixar a ltima verso disponvel, acesse
https://javaserverfaces.dev.java.net/.
4.3. Criando um novo projeto

Para comear, crie uma nova
www.algaworks.com
30
A nova tela que aparece apresenta algumas informaes sobre o nome do contexto da
www.algaworks.com
31
referenciar os pacotes (JARs) da implementao JSF.
instalao da Mojarra.
est disponvel no DVD.
www.algaworks.com
32
Nosso projeto agora utilizar a biblioteca cadastrada.
www.algaworks.com
33
4.4. Codificando a primeira aplicao JSF

Nossa primeira aplicao ser uma tela com um campo de entrada de texto e um
boto. O usurio deve informar o nome no campo e pressionar o boto. Uma mensagem de
boas vindas ser dada ao usurio, transformando o nome digitado em letras maisculas.
,
,
.
ogia JSF foi construda baseada na
JSP.
www.algaworks.com
34
O Eclipse nos fornece alguns templates (modelos de cdigos prontos) para facilitar
O Eclipse ir gerar um cdigo JSF com um contedo que comum em praticamente

todas as telas que desenvolvemos. Isso facilita para no precisarmos digitar tudo.
Altere o ttulo da tela na tag HTML <title>.
www.algaworks.com
35
Dentro da tag <f:view>, digite o cdigo a seguir:

<h:form>
<h:outputLabel value="Seu nome: "/>
<h:inputText value="#{usuarioBean.nome}"/>
<h:commandButton value="Enviar"
actionListener="#{usuarioBean.enviar}"/>
<br/>
<h:outputText value="Bem vindo a primeira aplicao JSF, #{usuarioBean.nome}"
rendered="#{usuarioBean.nome != null}"/>
</h:form>
duas vezes sobre ele. Um editor visual deste arquivo ser apresentado.
-con
.
www.algaworks.com
36
Voc criar uma nova classe responsvel por controlar os componentes da tela. Digite
com.algaworks
www.algaworks.com
37
O Eclipse far o mapeamento necessrio para que a classe que estamos criando
consiga realmente
sem ajuda do Eclipse. Nosso objetivo agora apenas deixar funcionando a primeira tela.
www.algaworks.com
38

-
Ctrl + S. Se tiver curiosidade,
configurao.
Crie um atributo priva

getters e
setters para este atributo. O Eclipse possui um gerador de mtodos getters e setters atravs da
Crie um mtodo pblico, sem retorno e

ActionEvent. A importao deste tipo deve
ser feita atravs do pacote javax.faces.event.
www.algaworks.com
39
os
passar o nome digitado para maisculo, por isso, voc pode deixar este mtodo da seguinte
forma:
public void enviar(ActionEvent event) {
this.setNome(this.getNome().toUpperCase());
}
Nossa tela est pronta!
4.5. Implantao e execuo da aplicao

Para testar a tela que criamos, precisamos adicionar o projeto ao Tomcat que j est
transfira-o para a lista de projetos configurados.
www.algaworks.com
40
Abra um browser e acesse a primeira tela que desenvolvemos atravs do endereo:

http://localhost:8080/PrimeiroProjeto/faces/ola.jsp.
www.algaworks.com
41
Veja que o nome digitado foi transformado para maisculo, e a mensagem de boas
vindas foi apresentada.
4.6. Gerando um WAR da aplicao

A integrao que o Eclipse faz com o Tomcat facilita bastante o desenvolvimento de
sistemas, mas voc no ter o Eclipse no servidor de produo que executar as aplicaes.
Para voc distribuir suas aplicaes de forma elegante e de fcil instalao, voc deve
gerar um pacote nico que contm tudo necessrio para o funcionamento, sem complicaes.
Esse pacote chamado de WAR (Web Application Archive).
.
O Eclipse possui uma ferramenta para gerar arquivos WAR. Clique sobre o boto
eto (incluindo o nome do
www.algaworks.com
42
web em qualquer servidor de

aplicaes. No caso do Tomcat, basta copiar esse arquivo para a pasta webapps do servidor.
Para testarmos, inicie o Tomcat por fora do Eclipse. No copie ainda o arquivo WAR
gerado para a pasta webapps.
Depois que o Tomcat for iniciado,
pasta webapps.
Veja que o Tomcat far o deploy automtico do pacote.
www.algaworks.com
43
Agora voc pode acessar o sistema atravs do browser para confirmar se deu tudo
certo.
www.algaworks.com
44
5. Desvendando o mistrio
5.1. Introduo
Para entender o que acabamos de desenvolver, precisamos conhecer o que o Eclipse
gerou de cdigo para ns e tambm as programaes que fizemos.
Estudaremos basicamente o managed bean UsuarioBean, os arquivos facesconfig.xml , ola.jsp e web.xml , alm dos demais contedos do diretrio WEB-INF .
5.2. Managed bean UsuarioBean

Antigamente (h no muito tempo atrs), alguns programadores desenvolviam todo o
comportamento de uma tela no prprio arquivo de layout, na verdade ainda existem
programadores que fazem isso. Em JSF, no fazemos isso! O arquivo JSP deve possuir tags
HTML e JSF que definem o layout da pgina. O comportamento da tela deve ser implementado
em cdigo Java, em uma classe caracterizada como um managed bean.
Os managed beans nada mais que Java Beans, que servem como canais entre a
interface grfica (a tela) e o back-end da aplicao (regras de negcio, acesso ao banco de
dados, etc).
Um Java Bean uma classe Java implementada de acordo com algumas convenes
que determinam como devem ser escritas propriedades e os mtodos pblicos que as
acessam.
A
especificao
completa
pode
ser
encontrada
em
http://www.oracle.com/technetwork/java/javase/documentation/spec-136004.html.
Os managed beans no JSF podem ser criados e configurados sem programao
(atravs de arquivos XML de configurao, que veremos adiante). Em JSF, usa-se beans para
conectar classes Java com pginas web ou arquivos de configurao.
Os beans so muito importantes para os desenvolvedores JSF, portanto,
fundamental entender a especificao JavaBean. Nesta seo veremos as partes relevantes
para o desenvolvimento com JSF.
As caractersticas mais importantes de um bean so suas propriedades. Uma
propriedade tem:
Um nome;
Um tipo;
Mtodos para obter (getter) e/ou definir (setter) o valor da propriedade.
Veja que os JavaBeans so classes Java, portanto, propriedades so os atributos
desta classe.
Uma propriedade no deve ser acessada diretamente, mas atravs dos mtodos de
acesso (getters e setters). Algumas linguagens de programao permitem isso (inclusive o
Java), porm, na especificao JavaBean isso no correto.
Uma propriedade de um JavaBean pode ser:
Leitura/escrita, somente-leitura ou somente-escrita;
Simples, ou seja, contm apenas um valor, ou indexado, quando representa uma
lista de valores.
Para obter o resultado de uma propriedade, o bean precisa ter um mtodo da seguinte
forma:
public ClasseDaPropriedade getPropriedade() { ... }
E para alterar uma propriedade:
public setPropriedade(ClasseDaPropriedade propriedade) { ... }
www.algaworks.com
45
A especificao ainda exige que a classe bean tenha pelo menos um construtor
padro, ou seja, sem parmetros.
O exemplo abaixo ilustra um bean Pessoa com as propriedades nome, idade e
profissoes.
package com.algaworks.dwjsf.dominio.Pessoa;
import java.util.List;
public class Pessoa {
private String nome;
private Long idade;
private List profissoes;
public Pessoa() {
}
public Pessoa(String nome, Long idade, List profissoes) {
this.nome = nome;
this.idade = idade;
this.profissoes = profissoes;
}
public String getNome() {
return this.nome;
}
public void setNome(String nome) {
this.nome = nome;
}
public Long getIdade() {
return this.idade;
}
public void setIdade(Long idade) {
this.idade = idade;
}
public List getProfissoes() {
return this.profissoes;
}
public void setProfissoes(List profissoes) {
this.profissoes = profissoes;
}
}
Uma propriedade possui apenas o mtodo getter para somente-leitura, somente o
mtodo setter para somente-escrita ou ambos os mtodos para leitura e escrita.
Os nomes e as assinaturas dos mtodos devem coincidir precisamente com o padro,
ou seja, comear com get ou set, como apresentado no exemplo acima. Um mtodo get
deve ter um valor de retorno e nenhum parmetro. Um mtodo set deve ter um parmetro e
nenhum valor de retorno.
www.algaworks.com
46

A regra para a criao do nome do mtodo colocar set ou get na frente do nome da
propriedade com sua primeira letra maiscula, ou seja, uma propriedade nome teria os
mtodos com nomes getNome e setNome. Uma exceo a est regra ocorre quando o nome
da propriedade est em maiscula, por exemplo, uma propriedade URL teria os mtodos com
nomes getURL e setURL. Repare que a propriedade referenciada no uRL.
Uma propriedade do tipo boolean tem uma varincia no seu mtodo getter. Por
exemplo, uma propriedade de nome ativo do tipo boleano, poderia ser tanto:
boolean isAtivo()
Quanto:
boolean getAtivo()
Nosso bean UsuarioBean possui apenas a propriedade nome.
public class UsuarioBean {
...
return nome;
}
this.nome = nome;
}
}
Uma vantagem de se utilizar os mtodos de acesso s propriedades a possibilidade
de manipular seus valores atravs estes mtodos, ou seja, podem-se converter dados, acessar
um banco de dados, fazer validaes e vrias outras coisas.
Voltando tela que desenvolvemos, o bean UsuarioBean possui apenas o atributo
nome porque o nico campo que inclumos na tela.
O mtodo enviar(...) recebe como parmetro um objeto do tipo ActionEvent,
que aprenderemos em outro captulo. Neste momento voc s precisa saber que este mtodo
pelo usurio. Esse mtodo ento um
manipulador de eventos, que no nosso exemplo, altera o nome digitado para maisculo.
public void enviar(ActionEvent event) {
this.setNome(this.getNome().toUpperCase());
}
5.3. Arquivo faces-config.xml

Para instanciar um managed bean e determinar seu escopo, utiliza-se um arquivo de
configurao XML.
Este arquivo processado quando a aplicao iniciada. Quando uma pgina
referencia um bean, a implementao do JSF o inicializa de acordo com as configuraes
contidas neste arquivo.
O arquivo de configurao mais utilizado
-INF/facesporm
possvel mudar este nome e at utilizar vrios arquivos em conjunto.
www.algaworks.com
47

Para configurar um bean necessrio no mnimo o nome, a classe e o escopo do bean
(que ser visto mais adiante).
No ltimo exemplo, configuramos o bean atravs de uma ferramenta visual do Eclipse,
mas poderamos ter feito manualmente. Para ver o cdigo gerado pelo Eclipse, acesse a aba
-
O XML de configurao dos beans deve-se parecer com este:

<?xml version="1.0" encoding="UTF-8"?>
<faces-config ...>
<managed-bean>
<managed-bean-name>usuarioBean</managed-bean-name>
<managed-bean-class>
com.algaworks.dwjsf.view.UsuarioBean
</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
</faces-config>
O XML acima declara que teremos um managed bean
referente a classe com.algaworks.dwjsf.view.UsuarioBean, ou seja, sempre que
usar
classe UsuarioBean.
A propriedade managed-bean-scope define o escopo do bean. Neste caso, o escopo
request, o que significa que o estado do bean ser mantido a cada requisio do cliente.
Veremos outros escopos em outro captulo.
www.algaworks.com
48
5.4. Pgina ola.jsp

Toda tela de usurio deve possuir um arquivo JSP com cdigos HTML e tags JSF.
Normalmente,
desenvolvemos, o nome des
Veja o cdigo da tela do ltimo exemplo:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Minha primeira aplicao</title>
</head>
<body>
<f:view>
<h:form>
<br/>
<h:outputText
value="Bem vindo a primeira aplicao JSF, #{usuarioBean.nome}"
</h:form>
</f:view>
</body>
</html>
Observe que grande parte deste arquivo possui tags HTML. Isso prova que voc pode
misturar cdigos HTML com tags JSF na maioria dos casos.
Agora veremos o que cada trecho de cdigo significa para a construo da tela.
Comeamos pelas declaraes das bibliotecas de tags (taglibs) do JSF:
<%@ taglib prefix="f"
<%@ taglib prefix="h"
uri="http://java.sun.com/jsf/core"%>
uri="http://java.sun.com/jsf/html"%>
As declaraes acima dizem para o framework do JSF que queremos usar as

bibliotecas de tags html e core. A biblioteca html contm todas as tags (componentes) para
trabalhar com itens especficos da HTML, como formulrios, campos de entrada de dados,
botes e etc. A biblioteca core contm lgicas para validaes, converses e outras coisas
especficas da JSF.
Todas as pginas JSF devem possuir uma tag <f:view>. Essa tag diz ao JSF que
voc quer gerenciar os componentes que estiverem em seu corpo, em outras palavras, todos
os componentes filhos de <f:view> podem ser gerenciados.
<f:view>
...
</f:view>
Se voc no colocar a tag <f:view>, o JSF no poder construir a rvore de

componentes gerenciveis da pgina, e isso impossibilitaria uma futura localizao dos
componentes criados na tela, ou seja, voc deve sempre incluir a tag <f:view> englobando
todos os seus componentes JSF para que tudo funcione da maneira desejada.
www.algaworks.com
49

A tag <h:form> diz que voc quer um formulrio da HTML neste local.
<f:view>
<h:form>
...
</h:form>
</f:view>
Os componentes de entrada de dados e tambm os que permitem comandos (aes)

dos usurios (como os botes e links) sempre devem estar dentro da tag <h:form>, pois
assim os valores digitados pelos usurios nos campos e os estmulos aos comandos podem
ser enviados para o servidor fazer o processamento.
Usamos o componente <h:inputText> para apresentar um campo de entrada de
texto e um componente <h:commandButton> para um boto.
Os delimitadores #{...} sero explicados no prximo captulo com mais detalhes.

Esses delimitadores podem ser chamados de expresses de ligao ou JSF EL (JavaServer
managed bean que
Faces Expression Language)
Esta propriedade acessada usando o mtodo getNome e alterada usando o mtodo
setNome, por isso to importante o padro Java Beans.
Quando a pgina exibida, o mtodo getNome chamado para obter o valor atual da
setNome
chamado para alterar o valor que foi digitado pelo usurio atravs do campo de entrada.
A tag <h:commandButton> possui o atributo actionListener, que liga a ao
sobre este boto ao mtodo enviar da classe UsuarioBean, ou seja, quando o usurio clicar
so
mtodo enviar do bean. Este mtodo por sua vez tem a chance de fazer qualquer
processamento do lado do servidor. No caso de nosso exemplo, apenas mudamos o nome
digitado no campo de entrada para letras maisculas.
A tag <h:outputLabel> apenas apresenta um texto (rtulo) digitado no atributo
value. Nada de extraordinrio.
Voc deve ter percebido que a mensagem de boas vindas s foi apresentada depois
porque inclumos um componente chamado <h:outputText> que s apresentado
(renderizado) quando o nome no for nulo.
A tag <h:outputText> apresenta textos contidos no atributo value. Esse atributo
pode conter textos estticos (fixos), como a mensagem de boas vindas, e tambm textos
dinmicos, como o nome digitado pelo usario.
<h:outputText
value="Bem vindo a primeira aplicao JSF, #{usuarioBean.nome}"
O atributo rendered do componente <h:outputText> utilizado incluindo uma

expresso boleana (que retorna true ou false). O componente s renderizado se essa
expresso for verdadeira. Nossa expresso s ser verdadeira se o nome for diferente de nulo,
ou seja, apenas se o usurio digitar o seu nome no campo de entrada.
www.algaworks.com
50
5.5. Arquivo web.xml

configuraes para funcionarem. Normalmente este arquivo o mesmo na maioria das
aplicaes. No exemplo que desenvolvemos, o Eclipse criou e configurou este arquivo de
acordo com as informaes que passamos para ele.
Para entender um pouco mais, abra o cdigoda
<?xml version="1.0" encoding="UTF-8"?>
<web-app ...>
<display-name>PrimeiroProjeto</display-name>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
</web-app>
Todas as pginas JSF so processadas por um servlet do prprio framework. Este

<servlet>.
<servlet>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
Este servlet chamado toda vez que o caminho da URL iniciar por /faces/*. Esta
regra foi definida atravs da tag <servlet-mapping> e, portanto, pode ser alterada para
outro padro que voc gostar mais.
<servlet-mapping>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
Voc no pode simplesmente chamar o endereo sem incluir /faces , como:

http://localhost:8080/PrimeiroProjeto/ola.jsp
www.algaworks.com
51

Veja o resultado se isso acontecer:
Quando voc chama o arquivo JSP diretamente, o Faces Servlet no executado, e

por isso o JSF no inicializa seu contexto e o view root (os componentes dentro da tag
<f:view>) antes de exibir a pgina.
Experimente mudar o mapeamento do Faces Servlet para o padro *.jsf.
<servlet-mapping>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>
Agora podemos chamar nossa pgina usando a URL:

http://localhost:8080/PrimeiroProjeto/ola.jsf
5.6. Conhecendo mais sobre o diretrio WEB-INF

ontm arquivos de configurao e outros necessrios para o
funcionamento da aplicao web. Todas as classes (arquivos .class) e bibliotecas (arquivos
.jar) devem ficar dentro desse diretrio. Este diretrio vital para sua aplicao, e ela no
funcionar sem isso.
Alm dos arquivos web.xml e faces-config.xml , o diretrio WEB-INF pode possuir
os sub, tais como os
managed beans, Java beans, regras de negcio, acesso a banco de dados e etc, e o diretrio
o funcionamento de seu software,
como para gerao de grficos e relatrios, driver JDBC, bibliotecas para leitura e escrita de
arquivos PDF ou XLS, etc.
5.7. Como funciona nos bastidores

Voc j conhece alguns dos principais conceitos do JSF e sabe como preparar o
ambiente para desenvolvimento, inclusive j criou uma tela simples neste framework. Agora
vamos estudar o que acontece nos bastidores da execuo da nossa aplicao de exemplo.
www.algaworks.com
52

Quando voc digita o endereo da aplicao no browser e acessa a tela do sistema
pela primeira vez, o servlet da JSF (Faces Servlet) intercepta a requisio, l o arquivo JSP e
efetua o processamento. No nosso caso, o arquivo JSP o ola.jsp . Esse arquivo contm tags
de componentes, como o formulrio, o campo de entrada de texto, o boto e etc.
Cada tag possui uma classe que a representa, chamada de tag handler, executada
assim que a pgina processada. Essas classes trabalham em conjunto e constroem uma
hierarquia de componentes na memria do servidor, seguindo o que foi programado no arquivo
JSP.
A hierarquia de componentes representa os elementos da interface visual presentes na
pgina. Esses componentes so responsveis por gerenciar seus estados e comportamentos.
Veja como ficou a hierarquia dos componentes do ltimo exemplo:
O componente UIViewRoot representa a raiz dos componentes gerenciados pelo

JSF, especificado atravs da tag <f:view>, o UIForm representa o formulrio (<f:form>),
UIOutput significa o label de escrita de textos definido como <h:outputLabel>, os
componentes UIInputText so os campos de entrada de texto (<h:inputText>) e
UICommand o boto, especificado pela tag <h:commandButton>.
Ainda durante o processamento do arquivo JSP, uma pgina HTML renderizada e
enviada para o seu browser. Os componentes JSF so convertidos para cdigo HTML.
Cada componente JSF possui um renderizador, que responsvel por gerar cdigo
HTML refletindo o estado de seu componente. Por exemplo, o componente <h:inputText>
poderia ser representado no HTML pelo seguinte cdigo, de acordo com seu renderizador,
aps o usurio digitar o seu nome e submeter ao servidor:
<input type="text" name="j_id_jsp_436522555_1:j_id_jsp_436522555_3"
value="THIAGO FARIA"/>
O nome do componente HTML

foi definido com vrios caracteres e
nmeros estranhos. Esse nome gerado automaticamente pelo framework JSF, e chamado
de identificador nico, ou unique ID. Voc pode especificar o unique ID que deseja utilizar, mas
se no fizer isso, o JSF ir gerar um para voc, como no ltimo exemplo.
Veja abaixo como ficaria o cdigo HTML gerado pelos renderizadores dos
www.algaworks.com
53
Entre a requisio do usurio e a resposta dada pelo servidor, existem vrias outras
coisas executadas que no abordamos neste tpico. Voc aprender tudo sobre a sequncia
5.8. JSF apenas isso?

JavaServer Faces muito mais do que apenas isso! Este framework oferece diversos
outros servios para o desenvolvimento da camada visual de sua aplicao, como:
Converso de dados: facilita a converso de textos digitados pelos usurios para
tipos especficos, como por exemplo, quando o usurio digita sua data de
nascimento, o servidor recebe um texto, que deve ser convertido para um objeto do
tipo Date representando o que o usurio informou.
Validao: diversas validaes de dados bsicas podem ser feitas antes de suas
regras de negcio ser executadas, como, por exemplo, sobre obrigatoriedade de
campos, aceitao de apenas nmeros ou validao de documentos, como CPF e
CNPJ. O JSF nos ajuda nesta tarefa, e aprenderemos como utilizar este recurso
mais a frente.
Componentes customizados: voc pode criar ou baixar da internet componentes
customizados para enriquecer o desenvolvimento de suas aplicaes. Os
componentes podem ser reutilizados em todas as aplicaes de sua empresa, e o
designer das pginas no precisa conhecer como ele foi feito para utiliz-lo. Por
exemplo, voc poderia criar um componente para exibir um teclado virtual para
digitao de senhas. Veja um exemplo de como o designer de pginas poderia
utiliz-lo:
<aw:teclado value="#{loginBean.senha}" tipo="alfanumerico"/>
Renderizadores: o JSF gera cdigo HTML por padro, porm o framework suporta
a incluso de outros renderizadores plugveis que podem produzir cdigos em
outras linguagens para visualizadores de diferentes tipos, como celulares (WML),
Telnet, Flash, etc.
www.algaworks.com
54

Internacionalizao: com JSF, muito fcil voc desenvolver aplicaes multiidiomas com o recurso de i18n (abreviao para internacionalization).
www.algaworks.com
55
6. Ciclo de vida
Voc pode desenvolver uma aplicao completa em JSF sem conhecer todos os
detalhes deste framework, porm quanto mais voc souber sobre ele, melhor e mais produtivo
voc se tornar. Por isso, estudaremos agora um assunto que nem todos os desenvolvedores
JSF conhecem: o ciclo de vida.
Ao executar uma pgina construda usando componentes JSF, ela passar por um
ciclo de vida de processamento bem definido, constitudo por 6 fases, como seguem:
1. Restaurar viso
2. Aplicar valores de requisio
3. Processar validaes
4. Atualizar os valores do modelo
5. Invocar a aplicao
6. Renderizar a resposta
Veja abaixo uma ilustrao deste ciclo:
Agora vamos estudar o que cada fase do ciclo de vida processa.

1. Restaurar viso
A fase de restaurao da viso recupera a hierarquia de componentes para a pgina
solicitada, se ela foi exibida anteriormente, ou constri uma nova hierarquia de componentes,
se for a primeira exibio.
Se a pgina j tiver sido exibida, todos os componentes so recuperados em seu
estado anterior. Isso d condies dos dados de um formulrio submetido ao servidor serem
recuperados, caso ocorra algum problema de validao ou restrio de regra de negcio. Por
exemplo, se um formulrio solicita campos obrigatrios que no so totalmente preenchidos,
porm enviados pelo usurio, o mesmo formulrio deve aparecer novamente com os campos
que no estavam vazios j preenchidos, porm com mensagens de erro indicando os campos
requeridos.
2. Aplicar valores de requisio
Nesta fase, cada componente tem a chance de atualizar seu prprio estado com
informaes que vieram da requisio
www.algaworks.com
56

3. Processar validaes
Nesta fase, os valores submetidos so convertidos em tipos especficos e anexados
aos componentes. Quando voc programa uma pgina em JSF, voc pode incluir validadores
para criticarem os valores recebidos pelos usurios. Neste momento, os validadores entram em
ao e, se ocorrerem erros de converso ou de validao, a fase de renderizao de resposta
invocada imediatamente, pulando todas as outras fases, e exibindo a pgina atual
novamente, para que o usurio possa corrigir os erros e submeter os dados mais uma vez.
4. Atualizar os valores do modelo
Durante esta fase, os valores anexados (chamados de valores locais) aos
componentes so atualizados nos objetos do modelo de dados e os valores locais so limpos.
5. Invocar a aplicao
Na quinta fase, os eventos que originaram o envio do formulrio ao servidor so
executados. Por exemplo, ao clicar em um boto para submeter um cadastro, a programao
do evento deste boto deve ser executada. Em alguns casos, a execuo do evento pode
retornar um identificador dizendo qual a prxima pgina a ser exibida, ou simplesmente no
retornar nada para re-exibir a mesma pgina.
6. Renderizar a resposta
Por ltimo, a fase de renderizao da resposta gera a sada com todos os
componentes nos seus estados atuais e envia para o cliente. O ciclo recomea sempre que o
usurio interage com a aplicao e uma requisio enviada ao servidor.
www.algaworks.com
57
7. Managed beans
7.1. Introduo
O entendimento de beans no desenvolvimento de aplicaes Java de modo geral e
principalmente em conjunto com o JSF essencial para um bom programador. No contexto das
pginas JSF, os beans fazem a separao entre a apresentao e a lgica de negcios, ou
seja, todo o cdigo de implementao fica no bean e as pginas apenas os referenciam.
Voc j aprendeu o que um Java Bean e tambm um managed bean em um captulo
anterior. Agora, aprender como configurar os managed beans atravs do arquivo XML.
7.2. Configurando beans

Os beans usados para vincular s pginas JSF so chamados de managed beans.
Geralmente, utiliza-se um arquivo XML para configurao desses beans e seus escopos.
Este arquivo processado quando a aplicao iniciada. Quando uma pgina
referencia um bean, a implementao do JSF o inicializa de acordo com as configuraes
obtidas.
O arquivo de co
-INF/facesuma maior organizao do cdigo, comum fazer uma separao em vrios arquivos,
agrupando-os por funcionalidades como navegao, converses e beans. Para isto, basta
acrescentar
ao
arqu
<web-app>
<context-param>
<param-name>javax.faces.CONFIG_FILES</param-name>
<param-value>
WEB-INF/navigation.xml, WEB-INF/beans.xml
</param-value>
</context-param>
...
</web-app>
O assunto de navegao e converses ser abordado mais tarde.
Para configurar um bean necessrio no mnimo o nome, a classe e o escopo do bean
(que ser estudado mais adiante). O cdigo abaixo ilustra um exemplo de configurao:
<faces-config>
<managed-bean>
<managed-bean-name>meuBean</managed-bean-name>
<managed-bean-class>com.algaworks.MeuBean</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
</faces-config>
As instrues de configurao acima esto dizendo para o framework JSF construir um
objeto da classe com.algaworks.MeuBean, dar um nome a ele de meuBean e manter este
objeto no escopo de sesso do usurio, ou seja, durante toda a navegao do usurio no
sistema.
7.3. Expresses de ligao de valor

Depois que o managed bean definido no arquivo XML, ele pode ser acessado pelos
componentes das pginas do sistema.
www.algaworks.com
58

A maioria dos componentes JSF possui propriedades que nos permitem especificar um
valor ou uma ligao a um valor que est associado a um bean.
Por exemplo, pode-se especificar um valor definitivo (esttico) no componente
<h:outputText/>:
<h:outputText value="Hello, World!"/>
Ou tambm uma ligao de valor (dinmico):
<h:outputText value="#{meuBean.nome}"/>
Quando o componente for renderizado, o mtodo getter da propriedade nome ser
invocado. J o mtodo setter da propriedade ser invocado quando o usurio digitar algo no
componente de entrada de texto e submeter a pgina ao servidor.
7.4. Escopo dos beans

-INF/faces<managed-bean-scope> define o escopo no qual o bean armazenado.
Os quatro escopos permitidos so: none, request, session e application. Se o
escopo for definido como none, ento o bean receber uma nova instncia a cada vez que for
referenciado.
O escopo de request (requisio) tem vida curta. Ele comea quando uma requisio
HTTP submetida e termina quando a resposta enviada de volta ao cliente.
Para uma aplicao onde as transaes com o usurio so importantes, utiliza-se o
escopo session, por exemplo, para um sistema de comrcio eletrnico, que detm um
carrinho de compras virtual.
O escopo application persiste por toda a durao da execuo da aplicao web.
Este escopo compartilhado por todas as requisies e por todas as sesses de todos os
usurios, portanto, tome muito cuidado ao us-lo.
7.5. Backing beans

Em algumas ocasies, seu bean pode precisar ter acesso aos componentes da
pgina JSF. O acesso direto aos componentes diferente do acesso aos valores. Este acesso
d a possibilidade de inspecionar e at modificar propriedades do componente que est sendo
renderizado para o usurio, que as vezes pode at no estar disponvel como um atributo da
tag JSF. Por exemplo, um componente de entrada de texto <h:inputText/>, representado
como objeto Java do tipo UIInput, pode ter a propriedade disabled ou required
modificadas em tempo de execuo pelo cdigo Java, atravs do acesso direto a este objeto.
Para esta ligao entre os componentes da pgina e propriedades de beans,
precisamos criar um backing bean. Um bean deste tipo igual ao managed bean. A nica
diferena que ele, alm de fazer ligaes de valor, pode tambm fazer ligao de
componentes, porm a forma de configurPara um bean ser caracterizado como um backing bean, no cdigo-fonte da pgina
feita uma amarrao (melhor chamado de binding) em uma tag de um componente JSF para
uma propriedade de um backing bean. Para conectar os componentes do formulrio com as
propriedades do bean, usa-se o atributo binding:
<h:outputText binding="#{meuBean.nomeComponente}"/>
temos a propriedade e os mtodos de acesso:
private UIOutput nomeComponente;
public UIOutput getNomeComponente() {
www.algaworks.com
59

return nomeComponente;
}
public void setNomeComponente(UIComponent value) {
this.nomeComponente = value;
}
Neste caso, o componente <h:outputText/> representado como objeto Java do
tipo UIOutput. Em qualquer mtodo do bean, poderamos acessar as propriedades do
componente, como por exemplo, para ler o valor, chamaramos o mtodo getter da propriedade
value:
this.nomeComponente.getValue();
Apesar de poderoso, este recurso deve ser usado com bastante cuidado. O uso
excessivo pode deixar o cdigo-fonte grande e difcil de entender, alm de que, se seu bean
tiver escopo de sesso ou aplicao, seus componentes visuais podem ficar presos na
memria por bastante tempo e consumir muitos recursos do servidor.
7.6. Definindo valores de propriedades

No momento em que se configura um bean, possvel definir alguns valores iniciais
para as suas propriedades, como mostrado no exemplo abaixo:
<managed-bean>
<managed-property>
<property-name>idade</property-name>
<property-value>18</property-value>
</managed-property>
<managed-property>
<property-name>sexo</property-name>
<property-value>masculino</property-value>
</managed-property>
</managed-bean>
Quando o bean for invocado, seu construtor padro MeuBean() chamado e em
seguida os mtodos setIdade e setSexo so executados, passando o nmero 18 para a
. Para inicializar uma propriedade com valor nulo, utiliza-se o
elemento <null-value/>. Por exemplo:
<managed-property>
<property-name>nome</property-name>
<null-value/>
</managed-property>
7.7. Inicializando listas e mapas

Freqentemente, as propriedades dos beans so listas ou mapas, da Collections API.
. O exemplo
Voc pode inicializ-las a partir do arquivo de configurao
abaixo apresenta a inicializao de uma lista:
<managed-bean>
www.algaworks.com
60

<managed-property>
<property-name>sexos</property-name>
<list-entries>
<value-class>java.lang.String</value-class>
<value>Masculino</value>
<value>Feminino</value>
</list-entries>
</managed-property>
</managed-bean>
A lista pode conter uma mistura de elementos value e null-value. O value-class
opcional, se for omitido uma lista de String produzida.
Mapas so um pouco mais complexos. Lembre-se que os mapas so formados com
chave (key) e valor (value). Opcionalmente especificam-se os elementos key-class e
value-class. Caso forem omitidos, o valor default String utilizado. Em seguida, aplica-se
uma seqncia de elementos map-entry cada um dos quais seguidos de um elemento key e
um elemento value ou null-value. Por exemplo:
<map-entries>
<key-class>java.lang.Integer</key-class>
<map-entry>
<key>1</key>
<value>Pedro</value>
</map-entry>
<map-entry>
<key>2</key>
<value>Maria</value>
</map-entry>
</map-entries>
7.8. Usando expresses compostas

Os operadores que podem ser utilizados em uma expresso de ligao de valor so:
Operadores aritmticos + - * / %. Os dois ltimos tambm podem ser utilizados
utilizando as variantes alfabticas div e mod.
Operadores relacionais < <= > => == != e suas variantes alfabticas lt le
gt ge ne.
Operadores lgicos && || ! e suas variantes alfabticas and or not.
O operador empty, para verificar se uma varivel nula ou vazia ou uma coleo
ou array de tamanho igual a zero.
O operador de seleo ternrio condicao ? se_verdadeiro : se_falso.
A precedncia dos operadores segue a mesma regra que em Java.
No uma boa prtica inserir muitas regras de negcio nas pginas web. Isso violaria
a separao entre apresentao e lgica de negcio. Portanto, tome cuidado ao inserir
expresses muito complexas para fazer muitos clculos nas pginas, onde elas deveriam estar
nos objetos de negcio.
Uma situao onde muito comum utilizar os operadores no momento em que se
deseja fazer sumir um campo caso a propriedade de outro seja falso. Por exemplo:
<h:inputText rendered="#{!meuBean.solteiro}"
value="#{meuBean.nomeEsposa}"/>
www.algaworks.com
61

Quando a propriedade solteiro de meuBean for false, ento a expresso acima
no renderizada.
Para concluir este tpico, voc pode concatenar strings com expresses de ligao de
valor, simplesmente colocando-as lado a lado, por exemplo:
<h:outputText value"#{meuBean.nome}, #{meuBean.sobrenome}"/>
7.9. Usando expresses de ligao de mtodo

Alguns componentes tambm podem chamar um mtodo em um managed bean, por
exemplo:
<h:commandButton action="#{meuBean.efetivarTransacao}"/>
Quando o usurio clicar no boto, o mtodo do bean ser invocado. Para este caso o
mtodo deve ter a seguinte assinatura:
public String efetivarTransacao()
A String retornada ser passada para o handler de navegao (discutido em outro
captulo), que definir para qual tela ser redirecionado.
So quatro os atributos de componentes que podem ser usados com uma expresso
de ligao de mtodo (todos sero apresentados em outros captulos):
action
validator
actionListener
valueChangeListener
Os tipos de parmetros e de retorno do mtodo dependem de qual maneira foi utilizada
a ligao do mtodo (qual atributo de componente foi utilizado).
7.10. Aplicao de exemplo

Para demonstrar as funcionalidades descritas at agora, ser apresentada uma
aplicao de agenda de contatos. O sistema deve contemplar:
Uma tela de cadastro para o usurio entrar com o nome, endereo, sexo e
profisso;
Os dados digitados sero apresentados em uma grid;
O sistema no armazenar os cadastros em banco de dados, mas apenas na
memria.
Para comear, crie no Eclipse um projeto com o nome Agenda e configure o ambiente
para a aplicao JSF.
Crie a classe Contato, conforme o cdigo abaixo:
package com.algaworks.dwjsf.dominio;
public class Contato {
private String endereco;
private String sexo;
www.algaworks.com
62

return nome;
}
this.nome = nome;
}
public String getEndereco() {
return endereco;
}
public void setEndereco(String endereco) {
this.endereco = endereco;
}
public String getSexo() {
return sexo;
}
public void setSexo(String sexo) {
this.sexo = sexo;
}
}
A classe Contato um JavaBean que representa o modelo de dados de um contato.
Isso quer dizer que cada contato includo na agenda ser uma instncia dessa classe.
Agora crie a classe do managed bean, chamada AgendaContatoBean:
package com.algaworks.dwjsf.visao;
import java.util.ArrayList;
import java.util.List;
import javax.faces.event.ActionEvent;
import com.algaworks.dwjsf.dominio.Contato;
public class AgendaContatoBean {
private List<Contato> contatos;
private Contato contato;
public AgendaContatoBean() {
this.setContatos(new ArrayList<Contato>());
this.setContato(new Contato());
}
public void incluirContato(ActionEvent event) {
this.getContatos().add(this.getContato());
this.setContato(new Contato());
}
public List<Contato> getContatos() {
return contatos;
}
public void setContatos(List<Contato> contatos) {
this.contatos = contatos;
}
public Contato getContato() {
return contato;
}
public void setContato(Contato contato) {
this.contato = contato;
www.algaworks.com
63

}
}
Configure o managed bean da agenda de contatos, incluindo o cdigo abaixo no
<managed-bean>
<managed-bean-name>agendaContatoBean</managed-bean-name>
com.algaworks.dwjsf.visao.AgendaContatoBean
</managed-bean>
Crie agora o arquivo JSP referente a tela da agenda de contatos. Este arquivo pode se
:
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<html>
<f:view>
<head>
<title>Agenda de Contatos</title>
</head>
<body>
<h:form>
<h:outputText value="Nome: " />
<h:inputText value="#{agendaContatoBean.contato.nome}"/>
<br/>
<h:outputText value="Endereo: " />
<h:inputText value="#{agendaContatoBean.contato.endereco}" />
<br/>
<h:outputText value="Sexo: " />
<h:inputText value="#{agendaContatoBean.contato.sexo}" />
<br/>
<h:commandButton
actionListener="#{agendaContatoBean.incluirContato}"
value="Incluir" />
<br/><br/>
<h:dataTable var="obj" value="#{agendaContatoBean.contatos}"
border="1" width="100%">
<h:column>
<f:facet name="header">
<h:outputText value="Nome"/>
</f:facet>
<h:outputText value="#{obj.nome}" />
</h:column>
<h:column>
<h:outputText value="Endereo"/>
</f:facet>
www.algaworks.com
64

<h:outputText value="#{obj.endereco}" />
</h:column>
<h:column>
<h:outputText value="Sexo"/>
</f:facet>
<h:outputText value="#{obj.sexo}" />
</h:column>
</h:dataTable>
</h:form>
</body>
</f:view>
</html>
Veja que as ligaes de valores dos campos de entrada foram feitas para um atributo
da classe Contato, atravs de outro atributo chamado contato na classe
AgendaContatoBean.
Os detalhes de componentes mais avanados, como o <h:dataTable>, ser visto em
captulos posteriores. Neste momento, basta perceber como so feitas as expresses de
ligaes de valores com o managed bean.
O mtodo incluirContato(ActionEvent event) ser invocado quando o boto
for pressionado, pois foi feita a ligao de mtodo usando o atributo actionListener
(estudaremos melhor este atributo mais tarde).
Adicione o projeto da agenda no Tomcat, inicie o servio e teste a incluso de contatos.
www.algaworks.com
65
8. Navegao
8.1. Introduo
A JSF possibilita a configurao de regras de navegao, o que permite voc definir a
conexo entre as pginas. Por exemplo, quando um usurio clica em um boto para se
inscrever em um site, qual tela ele dever ver? Se os dados estiverem incompletos,
provavelmente dever visualizar a mesma tela, com as mensagens de erro apropriadas, porm
se tudo estiver correto e a inscrio for efetuada com sucesso, ele poder ver uma tela de boas
vindas ao servio. Isso chamado de regras de navegao, e voc pode configur-las no
-
8.2. Navegao simplificada

Em vrias aplicaes web, normalmente so necessrias algumas regras de
navegaes simplificadas (estticas). Um exemplo desse tipo de navegao quando o
usurio clica sobre um boto ou link para se inscrever em um determinado servio de seu site,
que sempre apresenta a tela de inscrio online. Neste caso, a regra para seleo e exibio
da tela simples, pois no se deseja que seja exibida outra tela, independente do que possa
acontecer.
regra de navegao, como o exemplo abaixo:
<navigation-rule>
<navigation-case>
<from-outcome>ajuda</from-outcome>
<to-view-id>/ajudaOnline.jsp</to-view-id>
</navigation-case>
</navigation-rule>
com o atributo action referenciando-a, conforme o trecho de cdigo abaixo:

<h:commandButton value="Preciso de ajuda!" action="ajuda"/>
regra de navegao e inclua o boto em uma outra pgina. Clique neste boto e veja que voc
ser encaminhado para a pgina de ajuda.
www.algaworks.com
66
8.3. Filtro pela viso de origem

No ltimo exemplo, configuramos uma regra para atender toda a aplicao em relao
a pgina de ajuda, ou seja, qualquer pgina poderia refe
Imagine agora se precisssemos criar uma
pgina de ajuda para cada tela do sistema (o que muito comum em aplicaes mdias e
grandes). Poderamos resolver essa questo simplesmente configurando vrias regras de
navegao:
<navigation-rule>
<navigation-case>
<from-outcome>ajudaAgenda</from-outcome>
<to-view-id>/ajudaAgenda.jsp</to-view-id>
</navigation-case>
<navigation-case>
<from-outcome>ajudaRelatorios</from-outcome>
<to-view-id>/ajudaRelatorios.jsp</to-view-id>
</navigation-case>
<navigation-case>
<from-outcome>ajudaConfiguracao</from-outcome>
<to-view-id>/ajudaConfiguracao.jsp</to-view-id>
</navigation-case>
</navigation-rule>
Na pgina da agenda, voc pode incluir o boto:
<h:commandButton value="Ajuda" action="ajudaAgenda"/>
Na pgina de relatrios, o boto:
<h:commandButton value="Ajuda" action="ajudaRelatorios"/>
E assim por diante.
Essa estratgia funciona, porm pode no ser a melhor. O JSF pode fazer muito mais
por voc, com o elemento from-view-id.
Com este elemento, voc pode
<navigation-rule>
<from-view-id>/agendaContato.jsp</from-view-id>
<navigation-case>
<to-view-id>/ajudaAgenda.jsp</to-view-id>
</navigation-case>
</navigation-rule>
<navigation-rule>
<from-view-id>/relatorio.jsp</from-view-id>
<navigation-case>
<to-view-id>/ajudaRelatorios.jsp</to-view-id>
</navigation-case>
</navigation-rule>
<navigation-rule>
<from-view-id>/configuracao.jsp</from-view-id>
<navigation-case>
<to-view-id>/ajudaConfiguracao.jsp</to-view-id>
</navigation-case>
</navigation-rule>
www.algaworks.com
67

Essas regras dizem que se a ao dos botes for igual
encaminhado para alguma das pginas de ajuda, dependendo de onde ele estiver. Por
exemplo, se o usurio estiver visualizando a pgina da agenda de contato, ele ser
framework JSF validar qual regra deve ser usada para encaminhar para a pgina adequada:
<h:commandButton value="Ajuda" action="ajuda"/>
8.4. Navegao dinmica

Na maioria dos casos, voc precisar que o fluxo das pginas no dependa apenas do
boto clicado, mas tambm das entradas fornecidas pelo usurio e/ou das regras de negcio
da aplicao. Quando essa necessidade surgir, voc precisar configurar a navegao
dinmica.
Por exemplo, se voc estiver desenvolvendo uma tela para seus clientes se
inscreverem em uma promoo de sua empresa, fornecendo apenas o nome e e-mail, esse
cadastro pode ser bem sucedido ou no, dependendo do que o usurio digitar. Se ele fornecer
um e-mail invlido ou um nome muito curto, voc deve negar a inscrio e solicitar a correo
dos dados, se o e-mail digitado j estiver cadastrado, voc no pode permitir duplicatas, e por
isso deve avis-lo sobre o ocorrido, mas se aparentemente os dados estiverem corretos e sem
duplicidade, o cadastro deve ser realizado e o usurio deve ser encaminhado para uma pgina
de sucesso. Veja que o encaminhamento do usurio para alguma pgina dinmico, conforme
o fluxo abaixo:
Agora vamos ver como ficariam os cdigos para criar este fluxo dinmico. No
trataremos ainda sobre as mensagens de erro do JSF, por isso faremos de uma forma que no
o mais indicado, mas fique tranqilo, pois abordaremos este assunto em outro captulo.
<navigation-rule>
<from-view-id>/inscricao.jsp</from-view-id>
<navigation-case>
<from-outcome>duplicado</from-outcome>
<to-view-id>/duplicado.jsp</to-view-id>
</navigation-case>
<navigation-case>
<from-outcome>sucesso</from-outcome>
www.algaworks.com
68

<to-view-id>/sucesso.jsp</to-view-id>
</navigation-case>
</navigation-rule>
Definimos que, quando o usurio estiver na pgina de inscrio, existir uma regra que
precisamos criar uma regra para encaminhar para a prpria pgina, e voc j descobrir o
motivo.
Criamos a classe do managed bean:
package com.algaworks.dwjsf.visao;
public class InscricaoBean {
private String email;
private String mensagem;
public String inscrever() {
if (nome == null || nome.length() < 10
|| "".equals(email.trim())) {
this.setMensagem("Informe corretamente o nome "
+ "e e-mail!");
return null;
}
//verifica se cadastro duplicado
boolean duplicado = false;
if (duplicado) {
return "duplicado";
}
//armazena inscrio, limpa atributos do formulrio
//e retorna com sucesso
//...
return "sucesso";
}
return nome;
}
this.nome = nome;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getMensagem() {
return mensagem;
}
public void setMensagem(String mensagem) {
this.mensagem = mensagem;
}
}
O mtodo inscrever() retorna uma String como resultado. O retorno do mtodo ser
usado pelo handler de navegao para encontrar a regra adequada para o encaminhamento.
www.algaworks.com
69
nulo, a mesma pgina re-exibida.

Configuramos tambm o managed bean
<managed-bean>
<managed-bean-name>inscricaoBean</managed-bean-name>
com.algaworks.dwjsf.visao.InscricaoBean
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
E criamos o arquivo JSP da pgina de inscrio:
<f:view>
<h:form>
<h:outputText value="#{inscricaoBean.mensagem}"
rendered="#{not empty inscricaoBean.mensagem}" />
<br/>
<h:outputText value="Nome: " />
<h:inputText value="#{inscricaoBean.nome}"/>
<br/>
<h:outputText value="E-mail: " />
<h:inputText value="#{inscricaoBean.email}"/>
<br/>
<h:commandButton action="#{inscricaoBean.inscrever}"
value="Inscrever" />
</h:form>
</f:view>
O componente de sada de texto (h:outputText) da mensagem s ser renderizado
caso a mensagem no seja vazia.
Para fazer referncia ao mtodo inscrever(), o boto foi criado da seguinte forma:
<h:commandButton action="#{inscricaoBean.inscrever}"
value="Inscrever" />
inscrio, informando entradas corretas e incorretas.
www.algaworks.com
70
8.5. Filtro pela ao de origem

A definio do elemento navigation-case nos d outras possibilidades mais
complexas para configurao das regras. Com o elemento from-action, possvel separar
dois mtodos de managed beans que retornam a mesma string de ao.
Imagine que precisamos colocar o cancelamento de inscrio no nosso ltimo exemplo.
Podemos criar um mtodo cancelarInscricao() no managed bean InscricaoBean, que
inscrever()
sucesso de cada mtodo deve ter um significado diferente, encaminhando o usurio para
<navigation-rule>
...
<navigation-case>
<from-action>#{inscricaoBean.inscrever}</from-action>
</navigation-case>
<navigation-case>
<from-action>
#{inscricaoBean.cancelarInscricao}
</from-action>
<to-view-id>/cancelado.jsp</to-view-id>
</navigation-case>
</navigation-rule>
Agora o handler de navegao ir comparar o nome do mtodo que est dentro dos
delimitadores #{} para encontrar a regra a ser usada no encaminhamento do usurio.
8.6. Usando redirecionamentos

O elemento <redirect/>, colocado aps <to-view-id>, diz ao handler de
navegao que deve ser feito um redirecionamento, e no um encaminhamento.
O redirecionamento muda a URL no navegador, enquanto o encaminhamento no faz
essa atualizao. O redirecionamento tambm mais lento que o encaminhamento, pois
precisa trafegar mais informaes entre o servidor e cliente.
Para testar o redirecionamento, altere a regra de navegao para incluir este novo
elemento:
<navigation-case>
<from-action>#{inscricaoBean.inscrever}</from-action>
<redirect/>
</navigation-case>
Execute a tela de inscrio, preencha todos os dados e submeta o formulrio. Veja que
o endereo no browser foi alterado.
www.algaworks.com
71
Esta tcnica importante para quando voc deseja que o usurio possa incluir a URL
nos favoritos do browser. Com encaminhamento, isso no se torna possvel.
8.7. Usando padres

Voc pode agrupar regras de navegao usando padres no elemento <from-viewid>, como:
<navigation-rule>
<from-view-id>/admin/*</from-view-id>
<navigation-case>
...
</navigation-case>
</navigation-rule>
Essa regra diz que os casos de navegao sero aplicados apenas para as pginas
.
www.algaworks.com
72
9. Componentes bsicos
9.1. Introduo
Para desenvolver um sistema em JSF completo, voc deve conhecer pelo menos os
principais componentes bsicos. Quando falamos em componentes bsicos, queremos dizer os
componentes da implementao de referncia do JSF, ou seja, aqueles que j fazem parte do
framework, sem ter que instalar bibliotecas adicionais. At o final deste curso, aprenderemos a
utilizar bibliotecas de componentes adicionais, porm os componentes bsicos so essenciais
para o desenvolvimento de qualquer sistema.
As bibliotecas de tags JSF so divididas em HTML e fundamentais (core).
A biblioteca HTML possui componentes que geram contedo visual, como formulrios,
campos de entrada, rtulos de sada de textos, botes, links, selees, painis, tabela de
dados, mensagens e etc. Aprenderemos a maioria destes componentes neste captulo.
A biblioteca fundamental existe para dar suporte biblioteca HTML, e no possui
componentes visuais, mas apenas auxiliares. Aprenderemos esta biblioteca no decorrer do
curso, sempre que for necessrio.
Para usar as bibliotecas da JSF, temos que import-las com diretivas taglib, como no
exemplo abaixo:
Importamos as tags fundamentais e HTML e as nomeamos com o prefixo f e h,

respectivamente. Este nome (prefixo) pode ser modificado para qualquer outro, mas melhor
que use f e h, que so prefixos convencionados.
9.2. Formulrios
O uso de formulrios comum em qualquer sistema web, usando qualquer tecnologia.
O framework JSF possui um componente para renderizar formulrios HTML chamado h:form.
Veja um exemplo abaixo que inclui um formulrio:
<html>
<body>
<f:view>
<h:form>
...campos do formulrio aqui...
</h:form>
</f:view>
</body>
</html>
O cdigo-fonte gerado ao executar esta pgina ser:
<html>
<body>
<form id="j_id_jsp_2057641978_1" name="j_id_jsp_2057641978_1"
method="post"
action="/Agenda/faces/teste.jsp"
enctype="application/x-www-form-urlencoded">
www.algaworks.com
73

<input type="hidden" name="j_id_jsp_2057641978_1"
value="j_id_jsp_2057641978_1" />
...campos do formulrio aqui...
<input type="hidden" name="javax.faces.ViewState"
id="javax.faces.ViewState" value="j_id1:j_id2" />
</body>
</html>
</form>
A tag h:form gerou um elemento form da HTML. Apesar da tag form da HTML
possuir os atributos method e action, a tag f:form do JSF no possui, pois sempre
ver no cdigo gerado.
A tag h:form possui vrios atributos, sendo que a maioria deles so referentes aos
eventos da DHTML. O Eclipse pode te ajudar a descobrir todos os atributos, basta pressionar
Ctrl + Espao dentro do cdigo da tag.
Estudaremos no prximo tpico os atributos comuns da maioria dos componentes, que

servem inclusive para o h:form.
9.3. Um pouco sobre os atributos comuns

As tags dos componentes possuem atributos que dizem como eles devem funcionar.
Os atributos podem ser bsicos, quando so compartilhados pela maioria das tags, HTML,
tambm conhecido como pass-through HTML, quando representam os mesmos atributos dos
elementos HTML, e eventos DHTML, quando do suporte a scripts de eventos, como ao clicar,
ao passar o mouse por cima, etc.
O atributo id
O atributo id, presente em todos os componentes, nos permite identificar os
componentes da pgina para acesso posterior atravs de classes Java ou outros componentes
JSF, alm de poder acessar os elementos da HTML atravs de scripts. Para exemplificar,
criaremos uma pgina com um campo de entrada de texto e um boto. Apenas para simplificar,
o boto no ser criado usando componentes JSF. Ao clicar no boto, um cdigo JavaScript ir
alterar o contedo do campo de entrada.
<html>
<body>
www.algaworks.com
74
<script language="JavaScript">
function alterarValorCampo() {
document.getElementById('meuForm:meuCampo')
.value = 'Valor alterado';
}
</script>
<f:view>
<h:form id="meuForm">
<h:inputText id="meuCampo"/>
<input type="button" value="Testar"
onclick="alterarValorCampo();"/>
</h:form>
</f:view>
</body>
</html>
Veja que criamos uma funo JavaScript chamada alterarValorCampo(). Esta
funo chamada no evento onclick d
O campo que inclumos renderizado em HTML da seguinte forma:
<input id="meuForm:meuCampo" type="text" name="meuForm:meuCampo" />
Veja que o id do elemento INPUT foi configurado para meuForm:meuCampo
id
do formulrio foi juntado com o id especificado para o campo de entrada e definido como o
identificador do elemento HTML. Com este identificador, usamos a seguinte programao
JavaScript para acess-lo:
document.getElementById('meuForm:meuCampo').value = 'Valor alterado';
alterado.
O atributo binding
O atributo binding pode ser especificado com uma expresso ligao que referencia
uma propriedade do bean do tipo do componente. Usamos este atributo em um captulo
anterior, quando aprendemos sobre backing beans. Este atributo est presente em todos os
componentes da biblioteca HTML.
O atributo rendered
O atributo rendered tambm est presente na maioria das tags. Este atributo controla
a renderizao do componente. Se o valor dele for false, o componente no ser exibido, e
se for true, ser renderizado para o browser do usurio. Voc pode usar uma expresso de
ligao que referencia uma propriedade do bean para controlar quando o componente ser
www.algaworks.com
75

renderizado. J usamos este atributo em um exemplo anterior, quando criamos nossa primeira
aplicao JSF.
Os atributos style e styleClass

possvel utilizar estilos CSS (Cascade Style Sheet) em suas pginas JSF de modo
inline ou em classes. Sempre que for possvel, prefira criar os estilos em um arquivo separado
e us-los em classes. O exemplo a seguir mostra o uso das duas formas.
a chamada
.campo {
background-color: #CCCCCC;
color: white;
}
para configurar a cor de fundo e da fonte de campos de entrada.

Em seguida, criamos uma pgina simples em JSF com apenas um campo para
testarmos o uso desta classe e tambm especificarmos outros estilos adicionais inline.
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/estilo.css"/>
</head>
<body>
<f:view>
<h:form>
<h:inputText styleClass="campo"
style="border-color: blue; border-style: dotted;" />
</h:form>
</f:view>
</body>
</html>
Veja que no componente inputText, usamos o atributo styleClass para referenciar
o nome da classe que criamos no arquivo CSS e o atributo style para declarar outras
caractersticas do mesmo componente, como cor e estilo da borda.
Ao executar a pgina, voc ver o campo com fundo cinza, cor de fonte branca e
bordas azuis pontilhadas.
A maioria dos componentes da biblioteca HTML possuem os atributos style e

styleClass.
www.algaworks.com
76

Os atributos da HTML
Os atributos da HTML, tambm conhecidos como pass-through HTML, representam
exatamente os atributos de elementos da prpria HTML. No vamos listar todos eles aqui, mas
apenas usar alguns como exemplos. Caso voc precise usar algum atributo prprio de um
elemento da HTML e no souber se existe, tente descobrir usando as teclas Ctrl + Espao
dentro da tag, que o Eclipse ir lhe auxiliar.
Em uma pgina JSF, criamos um campo de entrada com o seguinte cdigo:
<h:inputText size="40" maxlength="60"
title="Informe seu nome neste campo" />
Veja como este componente renderizado para o usurio:
<input type="text"
name="j_id_jsp_2057641978_1:j_id_jsp_2057641978_2"
maxlength="60" size="40"
title="Informe seu nome neste campo" />
Os atributos maxlength, size e title simplesmente foram repassados para o
cdigo de sada, por isso so chamados de pass-through HTML.
Os atributos de eventos DHTML

Ao desenvolver sistemas para web, diversas vezes surge a necessidade de criar scripts
que rodam no cliente (client-side), como validaes, criao de elementos da HTML
dinamicamente, exibio ou ocultamento de algum elemento, etc. Os atributos que suportam
scripts so chamados de atributos de eventos DHTML. Quase todas as tags da biblioteca
HTML possuem esses atributos, mas novamente no iremos listar todos, pois basta voc
solicitar auxlio ao Eclipse para descobri-los.
No campo de entrada do exemplo abaixo, usamos os atributos onclick, onchange,
onmouseover e onmouseout para incluir cdigos JavaScript para tratar eventos do elemento.
<h:inputText onclick="this.value = '';"
onchange="this.value = this.value.toUpperCase();"
onmouseover="this.style.backgroundColor = 'yellow';"
onmouseout="this.style.backgroundColor = 'white';" />
Os cdigos JavaScript sero renderizados na sada para o cliente. Quando o usurio
clicar sobre o campo, seu valor ser alterado para vazio, ao alterar o valor do campo, ele ser
modificado para caixa alta (tudo em maisculo), ao passar o mouse por cima do campo, a cor
de fundo ser alterada para amarelo e ao retirar o mouse de cima do campo, a cor de fundo
voltar para branco.
Este exemplo bem simples, porm mostra como funcionam os eventos da DHTML.
9.4. Entrada de textos

Existem trs tipos de componentes que renderizam campos de entrada de texto:
h:inputText, h:inputSecret e h:inputTextarea.
O componente h:inputText
O componente h:inputText renderiza um campo de entrada de texto simples,
representado pelo elemento input
anteriormente para apresentar a expresso de ligao e os atributos comuns. No exemplo a
seguir, o campo de entrada representa o atributo nome do bean meuBean.
www.algaworks.com
77
<h:inputText value="#{meuBean.nome}"/>
O componente h:inputSecret
O componente h:inputSecret renderiza um campo de entrada de senha,
representado pelo elemento input
apresentado de forma secreta. O atributo redisplay, do tipo boleano, define se o campo
deve reter e re-exibir o seu valor quando o formulrio for submetido. Por exemplo, em uma tela
de login, quando o usurio errar a senha, voc quer que ela seje retida no campo ou que
apresente o campo vazio para nova digitao? Se escolher reter a senha, informe true no
atributo redisplay.
<h:inputSecret value="#{loginBean.senha}" redisplay="true"/>
O componente h:inputTextarea
O componente h:inputTextarea renderiza um campo de entrada de textos maiores, que
podem ter vrias colunas e linhas, e representado pelo elemento textarea na HTML. Os
atributos cols e rows definem o tamanho de colunas e linhas da rea do texto, respectivamente.
O cdigo abaixo cria uma rea de texto com 3 linhas e 40 colunas:
<h:inputTextarea cols="40" rows="3"
value="#{cadastroUsuarioBean.resumoCurriculo}"/>
Exemplo usando os trs tipos de campos de entrada de texto

Agora vamos ver um nico exemplo com o uso dos trs tipos de campos de entrada de
texto.
<html>
<body>
<f:view>
<h:form>
<h:outputText value="Nome:"/> <br/>
<h:inputText value="#{cadastroUsuarioBean.nome}" size="40"
maxlength="80"/>
<br/>
<h:outputText value="E-mail:"/> <br/>
<h:inputText value="#{cadastroUsuarioBean.email}" size="40"
maxlength="250"/>
<br/>
www.algaworks.com
78
<h:outputText value="Senha:"/> <br/>

<h:inputSecret value="#{cadastroUsuarioBean.senha}"
size="20"/>
<br/>
<h:outputText value="Resumo do currculo:"/> <br/>
<h:inputTextarea cols="40" rows="3"
value="#{cadastroUsuarioBean.resumoCurriculo}" />
<br/>
<h:commandButton value="Enviar"/>
</h:form>
</f:view>
</body>
</html>
Para testar este ltimo exemplo, crie um bean com os atributos nome, email, senha e
resumoCurriculo (todos do tipo String) e registre-o como um managed bean no arquivo
-
9.5. Sada de textos

Existem trs tipos de componentes que renderizam sadas de textos: h:outputText,
h:outputFormat e h:outputLabel.
O componente h:outputText
O componente h:outputText renderiza textos simples na pgina.
<h:outputText value="Bem-vindo "/>
<h:outputText value="#{segurancaBean.nomeUsuarioLogado}" />
O exemplo acima renderiza o texto a seguir, sendo que NOME seria substitudo pelo
nome do usurio logado, caso tivssemos desenvolvido esta funcionalidade.
Bem-vindo NOME
www.algaworks.com
79

Perceba que o texto gerado no est envolto por nenhum elemento da HTML. Quando
usamos algum atributo que deve ser refletido no cdigo HTML, como o id ou style, o texto
gerado dentro da tag span. Por exemplo:
<h:outputText value="Bem-vindo " id="txtBemVindo"/>
<h:outputText value="#{segurancaBean.nomeUsuarioLogado}"
style="color: red"/>
Os componentes acima so renderizados como:
<span id="frm:txtBemVindo">Bem-vindo </span>
<span style="color: red">NOME</span>
O componente h:outputFormat
O componente h:outputFormat renderiza textos parametrizados na pgina. Os
textos parametrizados so compostos por espaos reservados (placeholder) que so
substitudos por valores no momento da renderizao.
Os valores parametrizados so definidos com nmeros entre chaves, iniciando a partir
do nmero zero. As definies dos valores so feitas atravs da tag f:param da biblioteca
fundamental (core).
<h:outputFormat value="Oi {0}! Existem {1} tarefas pendentes.">
<f:param value="#{tarefaBean.nomeUsuario}" />
<f:param value="#{tarefaBean.qtdeTarefasPendentes}" />
</h:outputFormat>
a sada em HTML ser:

Oi Manoel! Existem 8 tarefas pendentes.
O componente h:outputLabel
O componente h:outputLabel renderiza o elemento label da HTML. Os
componentes h:outputLabel so vinculados com outros atravs do atributo for. O uso
deste componente justificado para rotular principalmente campos de seus formulrios.
<h:outputLabel value="Nome:" for="nomeCampo" id="nomeLabel"/>
<br/>
<h:inputText id="nomeCampo" value="#{cadastroUsuarioBean.nome}"/>
O cdigo acima renderiza a seguinte sada em HTML:
<label id="frm:nomeLabel" for="frm:nomeCampo">
Nome:</label> <br/>
<input id="frm:nomeCampo" type="text" name="frm:nomeCampo" />
9.6. Imagens
O componente h:graphicImage renderiza o elemento img da HTML, que exibe uma
imagem na pgina. O endereo da imagem deve ser informado no atributo value ou url, pois
um atalho para o outro. Este componente lhe permite usar o caminho relativo ao contexto, ou
seja, voc no precisa informar o nome da aplicao, pois colocado automaticamente. Veja o
exemplo:
www.algaworks.com
80

<h:graphicImage value="/imagens/logo_algaworks.gif" width="81"
height="35"/>
<img src="/Agenda/imagens/logo_algaworks.gif" height="35"
width="81" />
9.7. Menus, caixas de listagem e item de seleo

Existem 4 componentes que renderizam elementos de menus e caixas de listagem:
h:selectOneMenu,
h:selectManyMenu,
h:selectOneListbox,
h:selectManyListbox.
O componente h:selectOneMenu e a tag f:selectItem

O componente h:selectOneMenu renderiza um menu de seleo nica, representado
pelo elemento select da HTML, com o atributo size igual a 1 e sem o atributo multiple,
que permitiria selees mltiplas.
Todas as tags de seleo, com exceo da h:selectBooleanCheckbox (que
estudaremos logo mais) devem receber a relao de itens que aparecero na lista. Para
especificar os itens, usamos a tag fundamental f:selectItem.
<h:outputLabel value="Time de futebol favorito: "
for="timeFutebol"/>
<h:selectOneMenu value="#{cadastroTorcedorBean.timeFavorito}"
id="timeFutebol" >
<f:selectItem itemValue="Corinthians"/>
<f:selectItem itemValue="Flamengo"/>
<f:selectItem itemValue="Palmeiras"/>
<f:selectItem itemValue="Santos"/>
<f:selectItem itemValue="So Paulo"/>
<f:selectItem itemValue="Vasco"/>
<f:selectItem itemValue="Outro"/>
</h:selectOneMenu>
<label for="frm:timeFutebol">Time de futebol favorito: </label>
<select id="frm:timeFutebol" name="frm:timeFutebol" size="1">
<option value="Corinthians">Corinthians</option>
<option value="Flamengo">Flamengo</option>
<option value="Palmeiras">Palmeiras</option>
<option value="Santos">Santos</option>
<option value="São Paulo">São Paulo</option>
<option value="Vasco">Vasco</option>
<option value="Outro">Outro</option>
</select>
O valor especificado no atributo itemValue da tag f:selectItem do item
selecionado passado para o atributo correspondente do managed bean, por isso, precisamos
criar este atributo com seus getters e setters.
private String timeFavorito;
public String getTimeFavorito() {
return timeFavorito;
www.algaworks.com
81

}
public void setTimeFavorito(String timeFavorito) {
this.timeFavorito = timeFavorito;
}
O resultado no browser o seguinte:
Os valores especificados na tag f:selectItem so usados tambm como rtulos dos

itens do menu. Algumas vezes temos necessidade de ter os valores diferentes dos rtulos, e
por isso a tag f:selectItem possui o atributo itemLabel. Veja um exemplo:
<h:selectOneMenu value="#{cadastroTorcedorBean.timeFavorito}"
id="timeFutebol" >
<f:selectItem itemValue="Corinthians" itemLabel="Timo"/>
<f:selectItem itemValue="Flamengo" itemLabel="Mengo"/>
<f:selectItem itemValue="Palmeiras" itemLabel="Porco"/>
<f:selectItem itemValue="Vasco" itemLabel="Vasco"/>
</h:selectOneMenu>
Este cdigo ser renderizado como:
<label for="frm:timeFutebol">Time de futebol favorito:</label>
<option value="Corinthians">Timão</option>
<option value="Flamengo">Mengão</option>
<option value="Palmeiras">Porco</option>
<option value="Vasco">Vascão</option>
</select>
O resultado ser:
www.algaworks.com
82

O componente h:selectManyMenu
O componente h:selectManyMenu renderiza um menu de seleo mltipla,
representado pelo elemento select da HTML, com o atributo size igual a 1 e com o atributo
multiple igual a true.
for="timeFutebol"/>
<h:selectManyMenu value="#{cadastroTorcedorBean.timesFavoritos}"
id="timeFutebol" >
</h:selectManyMenu>
<select id="frm:timeFutebol" name="frm:timeFutebol"
multiple="multiple" size="1">
</select>
Como este componente possibilita a seleo de mais de um item da seleo, o
managed bean deve possuir um atributo de array para comportar os elementos selecionados.
No caso deste exemplo, precisamos criar um atributo do tipo String (array) com o nome
timesFavoritos.
private String[] timesFavoritos;
public String[] getTimesFavoritos() {
return timesFavoritos;
}
public void setTimesFavoritos(String[] timesFavoritos) {
this.timesFavoritos = timesFavoritos;
}
Este componente no apresentado corretamente por vrios navegadores. O Internet
Explorer exibe um menu com setas, porm o Firefox no. Apesar de existir, este um
componente que certamente voc no deve utilizar.
Componente renderizado no Firefox:
Componente renderizado no Internet Explorer:
www.algaworks.com
83
O componente h:selectOneListbox
Este componente renderiza um elemento HTML select de qualquer tamanho
(especificado) e sem o atributo multiple, ou seja, possvel selecionar apenas um item da
seleo.
for="timeFutebol"/>
<h:selectOneListbox value="#{cadastroTorcedorBean.timeFavorito}"
id="timeFutebol" size="4">
</h:selectOneListbox>
O cdigo acima gera o seguinte fragmento HTML:
</select>
O valor 4 para o atributo size especifica o tamanho da lista, que deve possuir apenas
4 elementos visveis.
O componente h:selectManyListbox
Este componente renderiza um elemento HTML select de qualquer tamanho (especificado) e
com o atributo multiple, ou seja, possvel selecionar vrios itens da seleo.
for="timeFutebol"/>
<h:selectManyListbox id="timeFutebol" size="4"
value="#{cadastroTorcedorBean.timesFavoritos}">
www.algaworks.com
84

</h:selectManyListbox>
O cdigo acima gera o seguinte fragmento HTML:
<select id="frm:timeFutebol" name="frm:timeFutebol"
multiple="multiple" size="6">
</select>
O usurio pode selecionar nenhum, um ou vrios itens da seleo. Lembre-se de criar
o atributo como um array no managed bean, pois o componente possibilita seleo mltipla dos
itens.
9.8. Campos de checagem e botes rdio

Existem 3 componentes que renderizam elementos de campos de checagem e botes
rdio: h:selectOneRadio, h:selectBooleanCheckbox e h:selectManyCheckbox.
O componente h:selectOneRadio
Este componente renderiza um elemento HTML input do tipo radio, usado quando
voc deseja exibir uma lista de opes que podem ser selecionadas unicamente.
<h:selectOneRadio id="sexo">
<f:selectItem itemValue="M" itemLabel="Masculino"/>
<f:selectItem itemValue="F" itemLabel="Feminino"/>
</h:selectOneRadio>
O seguinte cdigo HTML renderizado:
<table id="frm:sexo">
<tr>
<td>
<input type="radio" name="frm:sexo"
id="frm:sexo:0" value="M" />
<label for="frm:sexo:0">Masculino</label>
</td>
<td>
<input type="radio" name="frm:sexo"
id="frm:sexo:1" value="F" />
<label for="frm:sexo:1"> Feminino</label>
</td>
</tr>
www.algaworks.com
85

</table>
Voc deve ter percebido que os elementos input so gerados dentro de colunas de
uma tabela da HTML. Os elementos so exibidos horizontalmente.
possvel alterar o layout no qual os itens so apresentados, especificando o atributo

layout. Os valores possveis para este atributo so pageDirection e lineDirection
(padro). Veja um exemplo com o layout pageDirection.
<h:selectOneRadio id="sexo" layout="pageDirection">
<f:selectItem itemValue="M" itemLabel="Masculino"/>
<f:selectItem itemValue="F" itemLabel="Feminino"/>
</h:selectOneRadio>
O layout pageDirection exibe os itens na vertical:
O componente h:selectBooleanCheckbox
O componente h:selectBooleanCheckbox renderiza o elemento da
HTML input do tipo checkbox. Use este componente para definir opes boleanas, onde
<h:selectBooleanCheckbox id="aceite"
value="#{cadastroUsuarioBean.termoAceito}" />
<h:outputLabel value="Li e aceito os termos e condies"
for="aceite"/>
O exemplo acima renderiza o seguinte trecho em HTML:
<input id="frm:aceite" type="checkbox" name="frm:aceite"
checked="checked" />
<label for="frm:aceite">Li e aceito os termos e
condições</label>
No managed bean, voc deve criar um atributo boleano para receber a opo do
usurio. Se o campo for selecionado, o atributo receber o valor true, caso contrrio, receber
o valor false.
private boolean termoAceito;
public boolean isTermoAceito() {
return termoAceito;
}
public void setTermoAceito(boolean termoAceito) {
this.termoAceito = termoAceito;
}
www.algaworks.com
86

Veja como fica o resultado no browser do usurio.
O componente h:selectManyCheckbox
Este componente renderiza uma lista de campos de checagem (elemento input do
tipo checkbox). O usurio pode selecionar nenhum, um ou vrios itens.
<h:selectManyCheckbox id="assuntos"
value="#{cadastroUsuarioBean.assuntosInteresse}" >
<f:selectItem itemValue="1" itemLabel="Java"/>
<f:selectItem itemValue="2" itemLabel=".NET"/>
<f:selectItem itemValue="3" itemLabel="UML"/>
<f:selectItem itemValue="4" itemLabel="Arquitetura"/>
<f:selectItem itemValue="5" itemLabel="Anlise"/>
<f:selectItem itemValue="6" itemLabel="Gesto de Projetos"/>
</h:selectManyCheckbox>
O fragmento de cdigo acima gera o seguinte HTML:
<table id="frm:assuntos">
<tr>
<td>
<input name="frm:assuntos" id="frm:assuntos:0"
value="1" type="checkbox" />
<label for="frm:assuntos:0"> Java</label>
</td>
<td>
<label for="frm:assuntos:1"> .NET</label>
</td>
<td>
<label for="frm:assuntos:2"> UML</label>
</td>
<td>
value="4" type="checkbox"/>
<label for="frm:assuntos:3"> Arquitetura</label>
</td>
<td>
<label for="frm:assuntos:4"> Análise</label>
</td>
<td>
<label for="frm:assuntos:5"> Gestão de
Projetos</label>
</td>
</tr>
</table>
www.algaworks.com
87

Os valores dos itens da seleo so numricos e o usurio pode selecionar mltiplos
elementos da lista, por isso criamos um atributo no managed bean que um array de inteiros.
private Integer[] assuntosInteresse;
public Integer[] getAssuntosInteresse() {
return assuntosInteresse;
}
public void setAssuntosInteresse(Integer[] assuntosInteresse) {
this.assuntosInteresse = assuntosInteresse;
}
Veja agora o resultado no navegador do usurio:
possvel alterar o layout no qual os itens so apresentados, especificando o atributo

layout. Os valores possveis para este atributo so pageDirection e lineDirection
(padro). Veja um exemplo com o layout pageDirection.
<h:selectManyCheckbox id="assuntos" layout="pageDirection"
value="#{cadastroUsuarioBean.assuntosInteresse}" >
<f:selectItem itemValue="1" itemLabel="Java"/>
<f:selectItem itemValue="2" itemLabel=".NET"/>
<f:selectItem itemValue="3" itemLabel="UML"/>
<f:selectItem itemValue="4" itemLabel="Arquitetura"/>
<f:selectItem itemValue="5" itemLabel="Anlise"/>
<f:selectItem itemValue="6" itemLabel="Gesto de Projetos"/>
</h:selectManyCheckbox>
O layout pageDirection exibe os itens na vertical:
9.9. Itens de seleo

Existem situaes que precisamos que uma lista de itens seja obtida dinamicamente,
para disponibilizar ao usurio a seleo em qualquer um dos componentes que vimos nos
ltimos tpicos. Esta lista pode vir de um banco de dados, de um arquivo ou de qualquer outra
origem. Quando existe essa necessidade, precisamos da tag fundamental f:selectItems
(no plural).
Neste exemplo, criaremos uma lista de opes com nomes de cidades. Na pgina JSF,
inclumos o componente h:selectOneListbox.
<h:selectOneListbox size="8"
value="#{cadastroUsuarioBean.cidadeNatal}" >
<f:selectItems value="#{cadastroUsuarioBean.cidades}"/>
</h:selectOneListbox>
www.algaworks.com
88
Especificamos o atributo value da tag f:selectItems referenciando a propriedade

cidades do managed bean. A propriedade cidades do tipo List<SelectItem>, pois
representa uma lista de itens de seleo. Veja como ficou a declarao dos atributos do
managed bean, seus getters e setters e a inicializao da lista de itens no construtor.
private Integer cidadeNatal;
private List<SelectItem> cidades;
public CadastroUsuarioBean() {
this.cidades = new ArrayList<SelectItem>();
//poderia buscar as cidades do banco de dados
this.cidades.add(new SelectItem(1, "Uberlndia"));
this.cidades.add(new SelectItem(2, "Uberaba"));
this.cidades.add(new SelectItem(3, "Belo Horizonte"));
this.cidades.add(new SelectItem(4, "So Paulo"));
this.cidades.add(new SelectItem(5, "Campinas"));
this.cidades.add(new SelectItem(6, "So Jos dos Campos"));
this.cidades.add(new SelectItem(7, "Rio de Janeiro"));
this.cidades.add(new SelectItem(8, "Goinia"));
this.cidades.add(new SelectItem(9, "Porto Alegre"));
}
public Integer getCidadeNatal() {
return cidadeNatal;
}
public void setCidadeNatal(Integer cidadeNatal) {
this.cidadeNatal = cidadeNatal;
}
public List<SelectItem> getCidades() {
return cidades;
}
public void setCidades(List<SelectItem> cidades) {
this.cidades = cidades;
}
O construtor da classe SelectItem recebe como parmetro o valor e o rtulo do item,
por isso informamos um cdigo da cidade no primeiro parmetro e o nome da cidade no
segundo.
O resultado no browser uma listagem com os itens gerados a partir da classe Java
que representa o managed bean.
www.algaworks.com
89
9.10. Botes e links

Qualquer aplicao web precisa de botes e links para receber as aes do usurio.
Aprenderemos agora como trabalhar com eles em JSF, atravs dos componentes
h:commandButton, h:commandLink e h:outputLink.
O componente h:commandButton
Este componente gera um elemento input da HTML do tipo submit, image ou reset.
O atributo type pode ser especificado com submit (padro) ou reset. Para botes
representados por imagens, basta informar o caminho no atributo image, que o tipo do
elemento alterado automaticamente para image.
Nos botes de comando, os atributos action ou actionListener podem ser
especificados para aes de navegao ou referncia a mtodos de managed beans. J
usamos e continuaremos usando estes atributos, porm vamos estud-los melhor em outro
captulo.
<h:commandButton id="cadastrar" value="Cadastrar" type="submit"
actionListener="#{cadastroUsuarioBean.cadastrar}"/>
<h:commandButton id="limpar" value="Limpar" type="reset"/>
<h:commandButton id="voltar" value="Voltar"
image="/imagens/voltar.gif" action="cancelar"/>
O cdigo acima renderiza o seguinte HTML:
<input type="submit" name="frm:cadastrar"
value="Cadastrar" />
<input type="reset" name="frm:limpar"
value="Limpar" />
<input type="image" src="/Agenda/imagens/voltar.gif"
name="frm:voltar" />
E o resultado visual o seguinte:
O componente h:commandLink
O componente h:commandLink gera uma ncora em HTML (link) que funciona como
um boto de submisso de formulrio. Veja alguns exemplos de uso.
<h:commandLink id="cadastrar" value="Cadastrar"

<h:commandLink id="voltar" action="cancelar">
<h:graphicImage value="/imagens/voltar.gif"
style="border: none;"/>
<h:outputText value="Voltar"/>
</h:commandLink>
Para os links reagirem como um boto, o framework JSF gera vrios cdigos em
JavaScript. Veja a sada em HTML de nosso ltimo exemplo.
<script type="text/javascript" language="Javascript">
www.algaworks.com
90

//vrios cdigos JavaScript gerados pelo framework JSF
</script>
<a id="frm:cadastrar" href="#" onclick="if(typeof jsfcljs ==
'function'){jsfcljs(document.getElementById('frm'),{'frm:cadastr
ar':'frm:cadastrar'},'');}return false">Cadastrar</a>

<a id="frm:voltar" href="#" onclick="if(typeof jsfcljs ==
'function'){jsfcljs(document.getElementById('frm'),{'frm:voltar'
:'frm:voltar'},'');}return false">
<img src="/Agenda/imagens/voltar.gif"
style="border: none;" />Voltar</a>
A execuo do ltimo exemplo exibir:
O componente h:outputLink
Os componentes h:commandButton e h:commandLink submetem requisies ao
servidor. Em determinadas situaes, voc pode precisar simplesmente de um link comum da
HTML. Para este caso, existe o componente h:outputLink.
<h:outputLink value="http://www.algaworks.com" target="_blank">
<h:graphicImage value="/imagens/logo_algaworks.gif"
style="border: none;"/>
</h:outputLink>
<br/><br/>
<h:outputLink value="http://twitter.com/algaworks">
<h:outputText value="Twitter da AlgaWorks"/>
</h:outputLink>
O primeiro exemplo um link em uma imagem para o site da AlgaWorks e o segundo
um link em um texto para o Twitter da AlgaWorks. Veja a sada em HTML:
<a href="http://www.algaworks.com" target="_blank">
<img src="/Agenda/imagens/logo_algaworks.gif"
style="border: none;" /></a>
<br/><br/>
<a href="http://twitter.com/algaworks">Twitter da
AlgaWorks</a>
No browser, voc ver:
O componente h:outputLink facilita a construo de URLs com parmetros

(querystring). Os parmetros so especificados usando a tag fundamental f:param. Veja um
exemplo:
<h:outputLink target="_blank"
value="http://www.algaworks.com/treinamentos">
<f:param name="codigo" value="931"/>
www.algaworks.com
91

<f:param name="grupo" value="Java"/>
<h:outputText value="Treinamentos da AlgaWorks"/>
</h:outputLink>
Ao clicar no link gerado pelo cdigo acima, somos redirecionados para o endereo
especificado,
codigo
grupo
9.11. Painis
O framework JSF possui componentes que te ajudam a organizar seus layouts. O que
voc faria para criar um formulrio com rtulos e campos, com um bom alinhamento? Sem
aprender os componentes JSF para auxlio na construo de layouts, podemos escrever
cdigos HTML manualmente, como o exemplo abaixo:
<table>
<thead>
<tr>
<th colspan="2">
<h:outputText value="Dados para cadastro"/>
</th>
</tr>
</thead>
<tr>
<td><h:outputText value="Nome:"/></td>
<td>
<h:inputText value="#{cadastroUsuarioBean.nome}"/>
</td>
</tr>
<tr>
<td><h:outputText value="E-mail:"/></td>
<td>
<h:inputText value="#{cadastroUsuarioBean.email}"
size="40" maxlength="250"/>
</td>
</tr>
<tr>
<td><h:outputText value="Senha:"/></td>
<td>
size="20"/></td>
</tr>
<tr>
<td></td>
<td colspan="2">
<h:commandButton id="cadastrar"
value="Cadastrar
</td>
</tr>
</table>
Conseguimos fazer o que queramos. Veja o que o usurio visualizar no navegador.
www.algaworks.com
92
Apesar de ter funcionado, escrever cdigos extensos em HTML tedioso, por isso
aprenderemos sobre o componente h:panelGrid, que pode nos auxiliar nisso.
O componente h:panelGrid
O componente h:panelGrid renderiza uma tabela da HTML. Ele funciona como um
organizador de itens no layout da pgina, e pode acomodar qualquer componente JSF.
O ltimo exemplo poderia ser escrito da seguinte forma usando o componente
h:panelGrid.
<h:panelGrid columns="2">
</f:facet>
<h:outputText value="Nome:"/>
<h:outputText value="E-mail:"/>
<h:outputText value="Senha:"/>
size="20"/>
<h:outputText/>
<h:commandButton id="cadastrar" value="Cadastrar"
</h:panelGrid>
O resultado final o mesmo, porm no precisa nem dizer o quanto mais fcil usar o
componente h:panelGrid, certo?
O atributo columns opcional, mas se voc no especificar, o nmero de colunas
ser igual a 1. O renderizador do h:panelGrid
da esquerda para a direita e de cima para baixo. Cada componente que estiver dentro do
h:panelGrid ser acomodado em uma clula da tabela. Quando precisamos pular uma
clula, podemos incluir um componente sem valor algum ou que no gera informaes visuais,
como foi o caso de <h:outputText/>.
possvel alterar a espessura da borda, o espaamento entre clulas, cores e vrias
outras coisas, da mesma forma que voc tambm pode fazer com as tabelas HTML.
Voc pode tambm especificar o cabealho e rodap da tabela usando a tag f:facet.
Esta tag define um fragmento de cdigo que faz algum sentido para o componente. Por
exemplo, para definir o cabealho do h:panelGrid, o nome do facet
h:panelGrid, e por
isso no podem ser mudados.
O componente h:panelGroup
O componente h:panelGr
componente deve ser usado especialmente em situaes onde desejado a incluso de vrios
www.algaworks.com
93

componentes em um lugar onde apenas um permitido, por exemplo, como uma nica clula
do h:panelGrid.
Vamos demonstrar como faramos para incluir uma imagem ao lado de um campo de
entrada de texto usando h:panelGrid para organizar os componentes. Antes, vamos tentar
fazer isso sem o auxlio do h:panelGroup.
Queremos colocar um cone de ajuda ao lado do campo de nome do usurio.
</f:facet>
<h:graphicImage value="/imagens/ajuda.gif"/>
size="20"/>
<h:outputText/>
</h:panelGrid>
Alm de no funcionar, veja que o formulrio ficou totalmente desconfigurado. O cone
ara frente.
Eis o componente h:panelGroup, que agrupa todos os seus filhos em um s lugar.

</f:facet>
<h:panelGroup>
<h:graphicImage value="/imagens/ajuda.gif"/>
</h:panelGroup>
size="20"/>
<h:outputText/>
www.algaworks.com
94

</h:panelGrid>
Agora o resultado ficou como esperamos, com o campo do nome e o cone de ajuda
lado-a-lado.
9.12. Mensagens
Qualquer aplicao precisa tratar entradas do usurio, process-las e exibir
mensagens de sucesso, erros, advertncias e etc. Estudaremos em outro captulo sobre
validao e converso de dados, mas j podemos trabalhar com todos os tipos mensagens,
pois os managed beans
momento pode ser exibida na tela.
Vamos alterar nosso ltimo exemplo para adicionarmos restries e mensagens no
mtodo cadastrar(). Se o usurio informar um nome menor que 10 caracteres,
entenderemos que ele no foi informado completo, e por isso adicionaremos uma mensagem
de erro solicitando a correo
domingo (isso mesmo, se tentar usar o sistema no dia que era para estar descansando),
tambm no aceitaremos. Veja como fica o mtodo cadastrar() no managed bean.
public void cadastrar(ActionEvent event) {
FacesContext context = FacesContext.getCurrentInstance();
if (this.getNome() != null
&& this.getNome().length() < 10) {
context.addMessage("frm:nome",
new FacesMessage(FacesMessage.SEVERITY_ERROR,
"Nome incompleto!",
"Favor informar seu nome completo."));
}
if (Calendar.getInstance().get(Calendar.DAY_OF_WEEK)
== Calendar.SUNDAY) {
context.addMessage(null,
new FacesMessage(FacesMessage.SEVERITY_WARN,
"Dia da semana invlido!",
"Voc no pode cadastrar usurios no
domingo."));
}
...
}
Para incluir mensagens na fila, precisamos antes de tudo pegar uma instncia de
FacesContext. Esta classe responsvel por manter as informaes da requisio atual.
FacesContext context = FacesContext.getCurrentInstance();
Quando a validao do tamanho do nome falhar, precisamos incluir uma mensagem
indicando que o nome completo deve ser informado.
www.algaworks.com
95

context.addMessage("frm:nome",
new FacesMessage(FacesMessage.SEVERITY_ERROR,
"Nome incompleto!",
"Favor informar seu nome completo."));
Veja acima que chamamos o mtodo addMessage() de FacesContext. O primeiro
parmetro deve ser informado com o ID gerado para o elemento HTML para o qual queremos
anexar esta mensagem. Como neste caso a mensagem referente ao campo de nome,
in
se a mensagem no fosse direcionada a nenhum componente.
O segundo parmetro recebe uma instncia de FacesMessage, que representa uma
mensagem JSF. O primeiro parmetro do construtor de FacesMessage recebe a severidade
da mensagem, que pode ser SEVERITY_FATAL (fatal), SEVERITY_ERROR (erro),
SEVERITY_WARN (advertncia) e SEVERITY_INFO (informao). O segundo parmetro recebe
uma descrio resumida da mensagem e o terceiro uma descrio detalhada.
Fizemos a mesma coisa para caso o dia da semana for domingo, porm no
informamos o ID de nenhum componente, pois esta validao no referente a nenhum
campo da tela.
context.addMessage(null,
new FacesMessage(FacesMessage.SEVERITY_WARN,
"Dia da semana invlido!",
"Voc no pode cadastrar usurios no domingo." ));
Como programamos a incluso de mensagens em uma fila do JSF, naturalmente
iremos querer exib-las na tela. Os componentes responsveis por exibir mensagens so
h:messages e h:message, que iremos estudar agora.
O componente h:messages exibe todas as mensagens adicionadas na fila, e
h:message exibe uma nica mensagem para um componente especificado no atributo for.
Vejamos um exemplo.
<h:messages layout="table" errorStyle="color: red"
infoStyle="color: green" warnStyle="color: orange"
fatalStyle="color: gray"/>
<h:panelGrid columns="2" >
</f:facet>
<h:panelGroup>
<h:inputText id="nome"
value="#{cadastroUsuarioBean.nome}"/>
<h:message for="nome"/>
</h:panelGroup>
<h:outputText id="email" value="E-mail:"/>
<h:panelGroup>
<h:inputText size="40" maxlength="250"
value="#{cadastroUsuarioBean.email}"/>
<h:message for="email"/>
</h:panelGroup>
<h:panelGroup>
<h:inputSecret id="senha" size="20"
value="#{cadastroUsuarioBean.senha}"/>
<h:message for="senha"/>
</h:panelGroup>
www.algaworks.com
96

<h:outputText/>
</h:panelGrid>
Informamos cores de fonte diferentes para cada tipo de mensagem atravs dos
atributos errorStyle, infoStyle, warnStyle e fatalStyle do componente
h:messages. O atributo layout
sendo que o primeiro exibe as mensagens uma de baixo da outra, e o segundo as exibe uma
na frente da outra.
O componente h:message foi usado sempre aps um campo para exibir mensagens
de erro referente ao mesmo campo. Veja que o atributo for especificado com o ID do
componente de entrada de dados.
Ao executarmos a tela, informarmos um nome incompleto, ao e clicar no boto
Perceba que o resumo da mensagem apareceu no topo, onde usamos h:messages, e

a mensagem detalhada apareceu ao lado do campo, onde usamos h:message.
Se quisermos exibir a mensagem detalhada no topo, inclumos o atributo showDetail
fatalStyle="color: gray" showDetail="true"/>
O resumo e a mensagem detalhada so exibidos agora.
No domingo no podemos usar este sistema, lembra? Veja o que acontece quando
insistimos em us-lo neste dia.
www.algaworks.com
97
As duas mensagens foram exibidas, porm a mensagem da restrio do dia da

semana apareceu apenas no topo, pois no referenciamos nenhum componente com
h:message.
E se quisssemos exibir no topo apenas as mensagens que no fazem referncia a
outros componentes, mas continuar exibindo as mensagens ao lado dos campos, para deixar a
globalOnly
na tag h:messages.
fatalStyle="color: gray" showDetail="true"
globalOnly="true"/>
Agora apenas a mensagem da restrio do dia da semana apareceu no topo, mas a
mensagem de validao do tamanho do nome continua aparecendo ao lado do campo.
www.algaworks.com
98
10.
Tabela de dados
10.1. O componente h:dataTable

O componente h:dataTable gera uma tabela HTML que pode ser associada a um
managed bean para obter dados dinamicamente.
Nosso exemplo ser de uma tabela de dados de clientes. Para isso, precisamos antes
preparar o projeto com algumas classes e configuraes. Primeiramente, criamos um
JavaBean Cliente para armazenar os dados de clientes.
public class Cliente {
private Integer codigo;
private String cidade;
public Cliente(Integer codigo, String nome,
String cidade) {
super();
this.codigo = codigo;
this.nome = nome;
this.cidade = cidade;
}
public Integer getCodigo() {
return codigo;
}
public void setCodigo(Integer codigo) {
this.codigo = codigo;
}
return nome;
}
this.nome = nome;
}
public String getCidade() {
return cidade;
}
public void setCidade(String cidade) {
this.cidade = cidade;
}
}
Agora criamos o managed bean ConsultaClienteBean. Esta classe tem um atributo
chamado clientes para armazenar a lista de clientes que devem aparecer na tabela e um
mtodo consultar() que popula a lista de clientes com dados informados manualmente.
public class ConsultaClienteBean {
private List<Cliente> clientes = new ArrayList<Cliente>();
public void consultar(ActionEvent event) {
this.getClientes().clear();
this.getClientes().add(new Cliente(1,
"Joo da Silva", "Uberlndia"));
www.algaworks.com
99
"Manoel Souza", "Uberaba"));

"Cristina Melo", "So Paulo"));
"Sebastio Cardoso", "Belo Horizonte"));
"Francisco Borges", "Uberlndia"));
"Juliano Messias", "Rio de Janeiro"));
"Maria Helena", "Uberlndia"));
public List<Cliente> getClientes() {

return this.clientes;
}
}
Configuramos o managed bean
<managed-bean>
<managed-bean-name>consultaClienteBean</managed-bean-name>
com.algaworks.dwjsf.visao.ConsultaClienteBean
</managed-bean>
Veja agora a forma de usar o componente h:dataTable.
<h:form id="frm">
<h:commandButton value="Consultar"
actionListener="#{consultaClienteBean.consultar}"/>
<h:dataTable value="#{consultaClienteBean.clientes}"
var="item" border="1"
rendered="#{not empty consultaClienteBean.clientes}" >
<h:column>
<h:outputText value="#{item.codigo}"/>
</h:column>
<h:column>
<h:outputText value="#{item.nome}"/>
</h:column>
<h:column>
<h:outputText value="#{item.cidade}"/>
</h:column>
</h:dataTable>
</h:form>
Quando o componente h:dataTable executado, cada item da lista, referenciada
atravs do atributo value, fica disponvel dentro do corpo da tag. O nome de cada item da lista
definido com o atributo var, possibilitando o acesso dentro das colunas.
No corpo da tag h:dataTable definimos trs colunas com h:column. Dentro de cada
coluna, podemos incluir qualquer quantidade de componentes. No caso deste exemplo,
inserimos apenas um h:outputText em cada coluna.
Ao executar a tela, apenas o boto aparecer, pois dissemos para a tabela no ser
aparecem os dados em uma tabela simples.
www.algaworks.com
100

Desenvolvimento Web Com Javaserver Faces

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Desenvolvimento Web Com Javaserver Faces

Enviado por

Direitos autorais:

Formatos disponíveis

DWJSF

Desenvolvimento Web com JavaServer Faces

PDF created with pdfFactory Pro trial version www.pdffactory.com

Apostila do curso de JavaServer Faces

Conhea mais sobre nossos cursos Java e Scrum

ALGAWORKS SOFTWARES E TREINAMENTOS

Desenvolvimento Web com JavaServer Faces

PDF created with pdfFactory Pro trial version www.pdffactory.com

Apostila do curso de JavaServer Faces

Aprenda muito mais com nosso treinamento presencial

Origem de nosso nome

funciona, que tem sucesso.

PDF created with pdfFactory Pro trial version www.pdffactory.com

Apostila do curso de JavaServer Faces

Conhea mais sobre nossos cursos Java e Scrum

Java Bsico e Orientao a Objetos

PDF created with pdfFactory Pro trial version www.pdffactory.com

Apostila do curso de JavaServer Faces

Aprenda muito mais com nosso treinamento presencial

Sobre esta apostila

Licena desta obra

Encontrou erros ou gostaria de sugerir melhorias?

PDF created with pdfFactory Pro trial version www.pdffactory.com

Apostila do curso de JavaServer Faces

Conhea mais sobre nossos cursos Java e Scrum

PDF created with pdfFactory Pro trial version www.pdffactory.com

Apostila do curso de JavaServer Faces

Aprenda muito mais com nosso treinamento presencial

* DVD distribudo apenas para clientes do curso.

PDF created with pdfFactory Pro trial version www.pdffactory.com

Apostila do curso de JavaServer Faces

Conhea mais sobre nossos cursos Java e Scrum

PDF created with pdfFactory Pro trial version www.pdffactory.com

Apostila do curso de JavaServer Faces

Aprenda muito mais com nosso treinamento presencial

PDF created with pdfFactory Pro trial version www.pdffactory.com

Apostila do curso de JavaServer Faces

Conhea mais sobre nossos cursos Java e Scrum

PDF created with pdfFactory Pro trial version www.pdffactory.com

Apostila do curso de JavaServer Faces

Aprenda muito mais com nosso treinamento presencial

PDF created with pdfFactory Pro trial version www.pdffactory.com

Apostila do curso de JavaServer Faces

Conhea mais sobre nossos cursos Java e Scrum

PDF created with pdfFactory Pro trial version www.pdffactory.com

Apostila do curso de JavaServer Faces

Aprenda muito mais com nosso treinamento presencial

Uma aplicao web em Java

PDF created with pdfFactory Pro trial version www.pdffactory.com

Apostila do curso de JavaServer Faces

Conhea mais sobre nossos cursos Java e Scrum

Com o Hibernate, ganhamos muito em agilidade e tornamos nossos produtos muito

PDF created with pdfFactory Pro trial version www.pdffactory.com

Apostila do curso de JavaServer Faces

Aprenda muito mais com nosso treinamento presencial

2.1. O que JavaServer Faces?

Arquitetura do JavaServer Faces baseada no MVC

2.2. Principais componentes

PDF created with pdfFactory Pro trial version www.pdffactory.com

Apostila do curso de JavaServer Faces

Conhea mais sobre nossos cursos Java e Scrum

2.3. Componentes adicionais

Aplicao de exemplo usando ADF Faces Rich Client

PDF created with pdfFactory Pro trial version www.pdffactory.com