©algaworks softwares e treinamentos DWJSF Desenvolvimento Web com JavaServer Faces www.algaworks.comApostila do curso de JavaServer Faces Conheca mais sobre noseos cursos Javaescum ©algaworks ALGAWORKS SOFTWARES E TREINAMENTOS DWJSF — Desenvolvimento Web com JavaServer Faces 40 Horas/Aula 22 Edigao ‘Setembro/2010 www.algaworks.com +55 (34) 3255-9898 treinamentos@algaworks.com Av. Monsenhor Eduardo, 983, Sala 06 A, Bairro Bom Jesus Uberlandia-MG, CEP. 38400-748 wwwalgaworks.com + softwares e treinamentosApostila do curso de JavaServer Faces Aprenda muito mais com nosse treinamento presencial ©) algaworks Sobre a empresa ‘A AlgaWorks é uma empresa localizada em Uberlandia/MG, que trabalha para forecer 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 melodologias de desenvolvimento de software fornecer aplicativos na internet de baixo custo que contribuem para a organizagao da vida de milhares de usudrios, micro e pequenas empresas de todo o mundo. Nossa viséo Ser reconhecida como uma das principais empresas de treinamentos em TI do Brasil ¢ como a principal exportadora de software web de baixo custo para individuos ¢ pequenas empresas do mundo. Nossos valores Honestidade Transparéncia Respeito Exceléncia Simplicidade Origem de nosso nome s algas produzem energia necessaria ao seu proprio metabolismo através da fotossintese .. As algas azuis foram os primeiros serem vivos a aparecerem na Terra, € acredita-se que tenham tido um papel fundamental na formagao do oxigénio da atfosmera.” ‘A palavra em inglés Works", além de trabalho, pode ser traduzide como algo que funciona, que tem sucesso. ‘AlgaWorks foi o nome dado para a nossa empresa, e quer dizer que: + Queremos ser uma empresa independente, que através de nosso proprio esforgo Conseguimos produzir uma energia suficiente para a nossa sobrevivencia; + Nao queremos depender de investidores externas que nao agregam conhecimento a0 negécio; + Desejamos criar aliangas com empresas, auténomos, estudantes e profissionais transmitir todo o nosso conhecimento em tecnologia; + Fomecemos softwares que funcionam e agregam valor ao negécio, sem complicacoes; * Tudo isso deve funcionar com sucesso para ajudar nossos clientes, parceiros, fornecedores, colaboradotes e acionistas serem mais felizes. wow algaworks.com + softwares e treinamentos 3Apostila do curso de JavaServer Faces Conheca mais sobre noseos cursos Javaescum ©algaworks Nossos cursos Conhega nossos cursos abaixo ou acesse www.algaworks.comitreinamentos para mais informacoes. 6806006600000 Java Basico e Orientagao a Objetos [24 horas] Java Avangado [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 Persisténcia com Hibernate [24 horas] Desenvolvimento Web com JavaServer Faces [40 horas] Desenvolvimento de Relatérios com JasperReports e iReport [24 horas] Desenvolvimento Avangado com Java EE [82 horas] Preparatério para Certificacao de Programador Java [82 horas] Modelagem UML [28 horas] Gerenciamento Agil de Projetos com Scrum [16 horas] wow algaworks.com + softwares e treinamentos 4Apostila do curso de JavaServer Faces Aprenda muito mais com nosse treinamento presencial ©) algaworks Sobre esta apostila Esta apostila faz parte do material didatico distribuldo pela AlgaWorks para ministrar 0 curso Desenvolvimento Web com JavaServer Faces. Apesar da distribuigo desta apostila para fins nao-comerclals ser permitida recomendamos que voc8 sempre prefita compartilhar o link da pagina de download (http://mww.algaworks.com/treinamentos/apostilas) ao invés do arquivo, pois atualizamos nosso material didatico constantemente para corrigir etros e incluit melhorias. Para_vooé realmente aproveitar 0 conteiido desta apostila ¢ aprender a tecnologia JavaServer Faces, é necessario que vocé jé tenha conhecimento prévio da plataforma Java Orientagao a Objetos, banco de dados e desenvolvimento web com JSP. Se voc quiser se especializar ainda mais em JSF ou outras tecnologias, sugerimos que faga 0s cursos presenciais na AlgaWorks, pois, além de usarmos este material didatico ou outros ‘com qualidade semelhante, vocé ficaré por dentro das ultimas novidades e tera a chance de aprender com a experiéncia de nossos insirutores. Licenga desta obra © conteiido desta apostila esta protegido nos termos da licenga Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported :/fcreativecommons orglicensesiby-nend/3.0/deed.pt BR) para a AlgaWorks Softwares, Treinamentos e Servicos Ltda, CNPJ 10.687.566/0001-97. Isso significa que vocé pode comparlhar (copiar, distribuir e transmitir) esta obra para uso nao- comercial, desde que sempre atribua os créditos a AlgaWorks. E vedado a criagao de materiais derivados, portanto, vocé nao pode alterar, transformar ou criar algo em cima dessa obra Para qualquer reutiizagao ou distribuicéo, vocé deve deixar claro a terceiros os termos da licenga a que se encontra submetida esta obra. Qualquer das condigées acima pode ser renunciada se vocé obtiver permisséo da AlgaWorks. Para uso comercial, vacé devera comprar os direitos de uso limitados a um numero especifico de alunos. Neste caso, fale com nossa area comercial. Encontrou erros ou gostaria de sugerir melhorias? Se vocé encontrar algum erro neste material ou tiver alguma sugestdo, critica ou elogio, por favor, envie um e-mail para treinamentos@algaworks.com. wow algaworks.com + softwares e treinamentos 3Apostila do curso de JavaServer Faces Conhega mais sobre nossos cursos Javaescrum Qalgaworks Sobre o autor Thiago Faria de Andrade (‘hiago.faria@algaworks.com) 6 fundador e diretor da AlgaWorks. Iniciou seu interesse por programagao aos 14 anos, quando desenvolvew um software para entretenimento ¢ se tornou um dos mais populares no Brasil e outros paises de lingua portuguesa, Gracluado em Sistemas de Informacao e certiicado como programador Java pela Sun/Oracle (SCJP), Thiago trabalhou em consultorias para grandes empresas de Uberiandia/MG, co-fundou a OpenK Tecnologia e trabalhou como diretor de tecnologia e treinamentos nesta empresa por quase 6 anos. Fundou a AlgaWorks apés adquirir 100% das cotas da OpenK Treinamentos, ¢ no ano de 2010, possula experiéncia profissional de mais de 10 anos, sendo 7 dedicados a tecnologia Javal Além de programar, Thiago ministra cursos, palestras presta consultorias sobre Java para érgdos do governo, universidades, pequenas e grandes empresas e pessoas fisicas, tendo acumulado aproximadamente 2.500 horas em salas de aulas e auditérios, até o ano de 2010. wow algaworks.com + softwares e treinamentos 6Apostila do curso de JavaServer Faces Aprenda muito mais com nosse treinamento presencial ©) algaworks Contetido do DVD (© DVD que acompanha o material de estudo do curso DWJSF contém arquivos titeis para 0 aprendizado. Os seguintes arquivos e programas so disponibilizados através deste DVD: + Bibllotecas do Hibernate, JFreeChart, MySQL JDBC, Mojarra (Implementagao JSF da Sun), JSTL, Facelets, Richfaces, Commons BeanUtils, Commons Digester, Commons Logging, Logaj e SL4J Logaj [DVD}\Bibliotecas + Documentacao do Hibernate, JFreeChart, JSF, Facelets e Richfaces [DVD]\Documentagao + Eclipse, NetBeans, JBoss Tools, EMS SQL Manager for MySQL, Toad for MySQL e MySQL GUI Tools [DVO}\Ferramentas + Servidor MySL [DVD}sMySQL Server + Kit de desenvolvimento Java [DVD}\JDK = Apache Tomcat [DVO}\Tomcat * DVD distribuido apenas para clientes do curso. wow algaworks.com + softwares e treinamentos 7Apostila do curso de JavaServer Faces Conheca mais sobre noseos cursos Javaescum ©algaworks indice 1. Objetivo do curso. 2. Introdugao. 13 2.1, O que 6 JavaServer Faces?. nn. 2.2. Principals componentes 23. Componentes adicionais... 2.8, Renderizagao de componentes 3. Ambiente de desenvolvimento. 8.1. Escolhendo a ferramenta de desenvolvimento. 19 3.2. Escolhendo um container web 13. Instalando e configurando o Eclipse 22 3.4, Instalando e configurando o Apache Tomcat. 35. Integrando o Eclipse com o Apache Tomcat 4. Primeiro projeto USF... 4.1. Introdugio. 30 4.2. Escolhendo uma implementagao de JSF. 43. Criando um novo projeto 4.4, Codificando a primeira aplicagao JSF. 4.5. Implantagao e execugao da aplicacao.. 4.6. Gerando um WAR da aplicagio 5. Desvendando 0 mistério.... 5A. Introdugd0.. ss ome 2 5.2. Managed bean UsuarioBean. 45 5.3. Arquivo faces-contig.xm... 5.4, Pagina olajsp... 5.5. Arquivo web.xml. 5.6. Conhecendo mais sobre o diretério WEB-INF. 5.7. Como funciona nos bastidores.... 5.8. JSF é apenas isso? 6. Ciclo de vida Managed beans... 7.1. Introdugao. 7.2. Configurando beans 7.3. Expressdes de ligagdo de valor 7.4. Escopo dos beans. 7.5. Backing beans... 7.6. Definindo valores de propriedades 7.7. Inicializando listas e mapas... 7.8. Usando expressies compostas... on 34 wow algaworks.com + softwares e treinamentos 3Apostila do curso de JavaServer Faces Aprenda muito mais com nosse treinamento presencial ©) algaworks 7.9. Usando expressées de ligagao de método 62 7.10. Aplicagao de exemplo... 62 8 Navegacao. 66 8.1. Introdugao.. 66 8.2. Navegacdo simplificada 66 67 68 83. Fillro pela visdo de origem.... 8.4. Navegacao dinamica, 85. Fillro pela aco de origem.. a 86. Usando redirecionamentos nm 8.7. Usando padrées... 72 9. Componentes basicos 73 A, IMtOdUGEO. ne nerenrnnennne : . 3 9.2. Formularios. 73 9.3. Um pouco sobre os atributos comuns.. 74 9.4. Entrada de textos... td 95. Saida de textos ... 79 96. Imagens. 80 9.7. Menus, caixas de listagem e item de selecd 81 9.8. Campos de checagem e botées radio 85 9.9. tens de selecdo.. 88 9.10. Botées e links... 90 9.11, Painéis... 92 9.12, Mensagens. 95 10, Tabela dé dad0s wnsninnnnnnnn : earner 99 10.1.0 componente hidataTable 99 10.2, Cabegalhos e rodapés ... 10.3. Componentes dentro de células. 10.4, Aplicando estilos a tabela... 101 102 103 11. Intemacionalizagao. 105 11.1. Usando message bundles. 105 11.2, Pacotes de mensagens para outras localidades 106 12. Conversa e validagao . 108 12.1. Introdugao. sot aerate 108 12.2. Conversores padrao de nimeros e datas. 109 12.3. Altemativas para definir conversores. 114 12.4, Customizando mensagens de erro de conversio ... " = 15 12.5. Usando validadores. 119 12.6, Customizando mensagens de erros de validaca.. 120 12.7. Ignorando validagdes com o atributo immediate...... 121 12.8. Criando conversores personalizados... wow algaworks.com + softwares e treinamentos 9Apostila do curso de JavaServer Faces Conheca mais sobre noseos cursos Javaescum ©algaworks 12.9. Criando validadores personalizados. 125 19, Manipulando eventos. 128 13.1. Introdugdo. 128 13.2, Capturando eventos de ago. 128 13.3, Capturando eventos de mudanga de valor 129 14, Sistema financeiro com JSF e Hibernate ... “i : canmetey 133 14.1. Introdugdo. 133 14.2. O que é persisténcia de dados? 193 14.3, Mapeamento objeto relacional (ORM) 133 14.4, Hibernate e JPA... 134 14.5, Preparando o ambiente. 135 14.6, Nosso modelo de dominio. 135 14.7. Criando as classes de dominio 136 14.8. Criando as tabelas no banco de dados. 199 14.9, Mapeando classes de dominio para tabelas do banco de dados 139 14.10. Configurando o Hibernate... 141 14.11. Criando a classe HibemateUtil 143 14.12, Implementando classes de negécio.. 144 14.13. Criando uma folha de estilos ¢ incluindo imagens, 146 14.14. Traduzindo as mensagens padrao do JSF 148 14.15. Configurando managed beans e regras de navegacao. 148 14.16. Conversor genético 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 consulla de contas 155 14.21. Um sistema financeiro funcionando! 158 15. Data Access Object... 160 15.1. Introdugdo. 160 15.2, Criando um DAO genérico : . 160 15.3, Criando DAOs especificos 161 15.4, Criando uma fabrica de DAQs .. 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 INMODUGEO. estnnnnnennnnn “ 188 16.2. Confiqurando e testando o ambiente 166 18.3. Adicionando suporte AJAX em componentes nao-AJAX..... 170 16.4, Adicionando suporte AJAX no cadastro de contas.... 171 16.5, Componente de calendatio... 171 www algaworks.com + — softwares e treinamentos 10Apostila do curso de JavaServer Faces Aprenda muito mais com nosse treinamento presencial ©) algaworks 16.6. Componente de caixa de sugestao 172 16.7. Componente de painel com abas..... 174 16.8, Componente de tabela de dados 175 16.9, Componente de paginagao de dados 7 16.10. Clicar ¢ arrastar com JBoss Tools. 178 17, Facelets .. scr : earner 179 17.4. Introdugao. 179 17.2, Instalando Facelets no projeto.. 179 17.3, Adequando nossas paginas para XHTML. 180 17.4, Reutlizagao com templating 181 17.5, Reutilizagao com composition 183 18, Seguranga com JAAS...nnnn e earner 185 18.1. Introdugao. 185 18.2, Criando tabelas de seguranca no banco de dads .... 185 18.3, Configurando o dominio de seguranga “ 186 18.4, Integrando a aplicagao ao dominio de seguranca... 187 18.5. Validando a seguranga 189 18.6. Criando o formulario de login ¢ personalizando telas de erro... 189 18.7. Protegendo componentes contra ages dos usuarios 192 18.8, Exibindo 0 nome do usuario logado e criando um link para logout. 193 19. Conhecendo o JFreeChart 194, 19.1, Introdugao.. 194 19.2. Criando graficos em paginas JSF 195 20. Conelusao scr : . 201 21. Bibliogratia 202 22. Fique atualizado!. 203, 23, Livros recomendados.... 204 www algaworks.com + — softwares e treinamentos iApostila do curso de JavaServer Faces Conheca mais sobre noseos cursos Javaescum ©algaworks 1. Objetivo do curso ‘As constantes evolugdes da tecnologia exigem das pessoas um treqiiente aperfeigoamento de seus conhecimentos profissionais. No dia-a-dia, muitas pessoas nao ‘conseguem acompanhar as mudangas e novidades nas tecnologias, Para estes profissionais, a AlgaWorks oferece treinamentos_personalizados, ministrados por pessoas oom larga experiéncia no mercado de software. O contetido programatico de nossos cursos se adequam a realidade, abordando os temas com aulas presenciais realizadas com muita pratica. Tudo isso garante um investimento em TI que se traduz num diferencial competitive para a empresa, pois sua equipe estaré totalmente capacitada a extrair todo seu potencial. Este curso tam o objetivo de apresentar a JavaServer Faces e alguns frameworks, bibliotecas e especilicagdes, como Hibernate, Richfaces, Facelets, JAAS e JFreeChart, utiizados ampiamente para desenvolvimento de sistemas em todo o mundo. ‘Apés a conclusao deste curso, os alunos devergo estar aptos a: = Entender e criar managed beans: = Entender o ciclo de vida do JSF; * Utilizar navegagao entre paginas: + Entender e utilizar os principais componentes + Trabalhar com validagao de campos; * Criar paginas com internacionalizagao; * Utilzar componentes de projetos open-source, como Richfaces; * Criar sistemas que utiizem AJAX; * Utilizar Facelets para templating de paginas JSF; = Efetuar download ¢ configuragao do Hibernate; = Mapear classes com Hibernate: * Entender e utilizar 0 padrao de projeto DAO: = Desenvolver classe de DAO genético; = Recuperar, gravar e consultar objetos com Hibernate; * Griar gratficos com dados dinémicos usando JFreeChart; += Implementar sistemas que suportem autenticagao ¢ autorizagao usando JAAS; = Desenvolver um projeto completo usando boas praticas de programagao, padrées de projetos e frameworks de mercado, com separagao em camadas. www algaworks.com + — softwares e treinamentos 2Apostila do curso de JavaServer Faces Aprenda muito mais com nosse treinamento presencial ©) algaworks 2. Introdugao Com 0 avanco da tecnologia sobre redes de computadores e com o crescimento da internet, as paginas web estao se tornando cada vez mais atraentes ¢ cheias de recursos que aumentam a interatividade com 0 usuario. S4o verdadeiras aplicacdes rodando sobre a web. Quando falamos em aplicagdes web, estamos nos referindo a sistemas onde toda a programacao fica hospedada em servidores na internet, e usuario (cliente) normalmente no precisa ter nada instalado em sua maquina para utilizé-los, além de um navegador (browser). O acesso as paginas (telas) desses sistemas ¢ feta utlizando um modelo chamado de request- response, ou seja, 0 cliente solicita que alguma acao seja realizada (request) e 0 servidor a realiza e responde para o cliente (response). Na plataforma Java, esse modelo foi implementado inicialmente através da API de Servlets e JSP (JavaServer Pages). Um Serviet estende a funcionalidade de um servidor web para servir paginas dindmicas aos navegadores, utiizando o protocolo HTTP. Ja o JSP, utilizando-se de uma sintaxe especial, permite que desenvolvedores web criem paginas que possuam programagao Java, semelhante ao PHP & ASP, porém muito mais robusto e padronizado. ‘A interagdo entre o cliente e uma aplicagao web ¢ ilustrada no diagrama abaixo. use Request Web Conon) HITPSorviet Led ec Uma aplicagao web em Java O cliente envia uma requisigéo HTTP ao servidor web. No mundo Java os servidores web séo chamados de Servlet Container, pois implementam a especificacao de Servlet e JSP. servidor converte a requisi¢ao (request) em um objeto do tipo HtipServietRequest. Este objeto é entéo passado aos componentes web, que podem interagir com JavaBeans ou mesmo um banco de dados, para que possa ser gerado um contedido dinamico. Em seguida, o ‘componente web gera um objeto HitpServletResponse, que representa a resposta (response) ao cliente. Este objeto é utiizado para que 0 conteiido dinamico gerado seja enviado ao navegador (usuario). Desde o langamento de Serviets © JSPs, outras tecnologias Java e frameworks foram sutgindo com 0 objetivo de melhorar a produtividade e recursos no desenvolvimento de aplicagées web. Alualmente JavaServer Faces ¢ a tecnologia do momento, requisitada na maioria das oportunidades de emprego para desenvolvedores Java. Esta tecnologia foi baseada em outras |4 existentes, como pode ver na Imagem abaixo. www algaworks.com + — softwares e treinamentos BApostila do curso de JavaServer Faces Conheca mais sobre noseos cursos Javaescum ©algaworks Ray Standard Tag Libr: Wavaserver Faces. RES Td REVERS Veja que Servlet 6 a base de todas as aplicacdes Java para web. As outras tecnologias criam_um nivel de abstracdo sobre Serviels, criando aplicagées mais faceis de manutencao, escaldveis e robustas. Varios outros frameworks baseados em Servlets foram desenvolvidos sobre propriedade de alguma empresa ou open-source, @ muitos deles fizeram sucesso por muito temipo, mas JSF revolucionou o desenvolvimento web e agora esta em grande expansao. Vocé aprender como instalar, configurar e desenvolver sistemas utlizando JavaServer Faces, a tecnologia que foi criada para que 0 desenvolvimento de aplicacées. web fosse parecido com o de aplicagées clientes desktop em termos de produtividade e funcionalidades. conceita basico deste framework 6 a existéncia de classes que representam os componentes (formularios, botées, campos de entrada, tabelas ¢ etc) de sua pagina JSP. Veremos muitos ais detalhes sobre esta tecnologia adiante, Em aplicagies corporativas, é extremamente importante gravar os dados de cadastros, transagées e etc. Os banoos de dados vieram para lacilitar a vida dos programadores. Hoje existe diversos sistemas gerenciadores de banco de dados (SGBD) no mercado, uns trazendo facilidades de administracao, outros com suporte a grandes quantidades de dados, alguns totalmente graluitos e outros muito caros! Enfim, o importante € saber que, como programador, vocé certamente tera que utilizar algum banco de dados. Como veremos nesta apostila, existem frameworks que faciltam a vida de um programador orientado a objetos (sim, para vocé estar lendo esta apostila, vooé deve ser um programador orientado a objetos) para trabalhar com banco de dados. © Hibemate & um excelente framework que trabalha entre o banco de dados ¢ sua aplicagao Java. A figura abaixo ilustra como isso ocorre, i : 4 | Appitcation i Hibernate t 1! [omno] | (Selon { 1 [Serer ' Transaction || Compson ' pero : 1 Les? ! Query Com 0 Hibernate, ganhamos muito em agilidade e tornamos nossos produtos muito mais tlexiveis, pois como veremos, fica muito facil trocar o banco de dados inteiro com quase nenhum esforgo O objetivo desta apostila & Ihe ensinar JavaServer Faces, porém ensinaremos também como criar uma aplicagéo usando JSF @ Hibernate. Vocé j4 deve conhacer pelo menos 0 basico de Hibernate. Abordaremos também outros padrées © concellos importantes no desenvolvimento de software, como por exemplo, o DAO (Data Access Object), utilizado na camada de persisténcia, o famoso MVC (Model, View e Controller) ¢ outros. © que nés desejamos & que vooé tenha um étimo aprendizado e que entre mais preparado neste mercado de trabalho, que necesita rapidamente de profissionais cada vez mais qualificacdos. www algaworks.com + — softwares e treinamentos 4Apostila do curso de JavaServer Faces Aprenda muito mais com nosse treinamento presencial ©) algaworks Sinta-se a vontade em voltar a esta apostila sempre que tiver dividas. Nos primeiros dias vocé poderd achar alguns cédigos estranhos, mas ao longo do tempo vai ver que tudo se encaixa perfeitamente! 21. O que é JavaServer Faces? JavaServer Faces, também conhecido como JSF, & uma tecnologia para desenvolvimento web que utiliza um modelo de interfaces grdficas baseado em eventos. Esta tecnologia foi definida pelo JCP (Java Community Process), 0 que a torna um padréo de desenvolvimento ¢ facilita 0 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 padrdo de projeto MVC (Model-View-Controller), 0 que torna o desenvolvimento de sistemas menos complicado, pois a separagao entre a visualizagao e regras de negécio é muito clara. © padre MVC separa o sistema em trés responsabilidades (modelo, visualizagéo & controle), onde 0 modelo é responsavel por representar os objetos de negdcio, manter o estado da aplicagao e fornecer ao controlador o acesso aos dados. A visualizagao é responsavel pela interface do usuatio. Ela que define a forma como os dados so apresentados e encaminha as agdes do usuario para 0 controlador. Q controlador & responsavel por ligar 0 modelo e a visualizagao, interpretando as solicitagdes do usuario, traduzindo para uma operacao no modelo (onde séo realizadas efetivamente as mudangas no sistema) e retornando a Visualizagéo adequada a solicitagao. Em JSF, 0 controle ¢ feito através de um servlet chamado Faces Servlet, por arquivos XML de configuracao e por varios manipuladores de agdes e observadores de eventos. Faces Servlet recebe as requisicoes dos usuarios na web, redireciona para o modelo e envia uma resposta. Os arquivos de configuragdo possuem informagées sobre mapeamentos de ages e regras de navegago. Os manipuladores de eventos s4o responsdveis por raceber os dados da camada de visualizagao, acessar o modelo e devolver o resultado para 0 usudirio através do Faces Servlet. O modelo é representado por objetos de negécio, que executa uma légica de negécio ao receber dados oriundos da camada de visualizagao, ‘A visualizagao ¢ composta por uma hierarquia de componentes (component tree), 0 que torna possivel nir componentes para construir interfaces mais ricas e complexas. Controller View Model ee) = =| =a) ee Clients J2EE Container Application Data Arquitetura do JavaServer Faces baseada no MVC 2.2. Principais componentes © verdadeiro poder de JavaServer Faces esté em seu modelo de componentes de interface do usuario, onde aplicagdes so desenvolvidas com um conjunto de components que podem ser renderizados em diversas formas para varios tipos de clientes, como por exemplo para um browser da web, celular, etc. www algaworks.com + — softwares e treinamentos 5Apostila do curso de JavaServer Faces Conheca mais sobre noseos cursos Javaescum ©algaworks JSF é similar & tecnologia proprietéria ASP.NET, pois 0 modelo de componentes oferece alta produtividade aos desenvolvedores, permitindo a construgao de interfaces para web usando um conjunto de componentes pré-construidos, ao invés de criar interfaces iteiramente do zero. Existem varios componentes de visualizacao JSF, desde os mais simples, como um oufputLabel, que apresenta simplesmente um texto, ou um dataTable, que representa dados tabulares de uma colegio que pode vir do banco de dados. A especificagao do JSF fornece um conjunto de componentes visuais basicos em sua implementacao de referéncia. Ela inclui duas bibiotecas de componentes, como a “HTML”, que possui componentes que representam diversos elementos HTML e a biblioteca “Core”. que Tesponsavel por tarefas comuns no desenvolvimento de sistemas, como internacionalizacao, validacéo e converséo de dados de entrada. Além de forecer uma biblioteca base de ‘componentes, a API da JSF suporta a extensao e criacao de novos componentes, que podem fornacer funcionalidades adicionais, Os principais componentes que a implementagao de referéncia do JSF fornece sao: Formuario Campos de entrada de texto Campo de entrada de senha Rtuios com textos Textos de uma tinica linha Links Botdes Mensagens Paingis Tabela HTML Tabela de dados (arid) Coluna de tabela de dados Fte 2.3. Componentes adicionais Atualmente existem diversas empresas que trabalham na criagdo de componentes personalizados. Como exemplo, podemos citar a Oracle, com 0 ADF Faces Rich Client, IceSoft, com 0 IceFaces, JBoss (Rechat), com 0 Richfaces, ¢ etc. Muitos desses componentes incluem miiliplos renderizadores para diversos tipos de clientes, tabelas avancadas, componentes para captura de datas e cores, menus suspensos, botdes, barras de progressdo, telas suspensas para selegao de valores e ete. Veja alguns exemplos de sistemias usando diversas bibliotecas de componentes: Aplicagao de exemplo usando ADF Faces Rich Client www algaworks.com + — softwares e treinamentos 6Apostila do curso de JavaServer Faces Aprenda muito mais com nosso treinamento presencial ® algawo| rks 63 ees seen rie iat ena sanju | Pur hincoteice a watchin gl Reues os ad we a isk yore 3 Bizeressae om sah eile ser 9 Bases ae ae eo e= Sgeareerearree ara) Aplicagao de exemplo usando IceFaces Hig. Gesta de Projetos Proiaos Facts Evoke Farid Gone Samos Somehow tos Togs Fats Andrade i Gc sshboard do Projeto ‘arianet 3 o ued ‘obinomaa tab) (ems jaune Ww Treen rast own Software de gestao de projetos usando Richtaces, 2.4. Renderizagao de componentes A tecnologia JSF possui capacidade de utilizar renderizadores de componentes plugaveis. Isso se traduz na capacidade dos componentes se apresentarem diferentes dependendo do tipo do cliente que esta sendo utlizado. Por exemplo, um browser como 0 www algaworks.com + — softwares e treinamentos 7Apostila do curso de JavaServer Faces Conheca mais sobre noseos cursos Javaescum ©algaworks Firefox ou Internet Explorer, deve receber cédigo HTML pata que possa ser exibido ao usuario, enquanto um dispositive mével como um celular podera ser capaz de exibir apenas conteiidos WML. Um mesmo componente JSF pode se adequar aos dois tipos de conteiidos, dependendo do que for adequado no momento. Isso é possivel gragas ao desacomplamento dos componentes visuais do cédigo de renderizacdo, tomando possivel criar miliplos renderizadores para um mesmo componente. Diferentes renderizadores podem entio ser associados ao componente e em tempo de execugéo é decidido qual renderizador sera utiizado, baseado no tipo do cliente que enviou a requisi¢ao. Wireless Client HTML Browser Um componente de tabela de dados sendo renderizado para clientes WML e HTML. www algaworks.com + — softwares e treinamentos 8Apostila do curso de JavaServer Faces Aprenda muito mais com nosse treinamento presencial ©) algaworks 3. Ambiente de desenvolvimento 3.1. Escolhendo a ferramenta de desenvolvimento ‘Atualmente existem vérias ferramentas que suportam o desenvolvimento com JSF. Algumas delas possuem um ambiente visual que exibe uma representagao grafica da tela em desenvolvimento e permite arrastar e soltar componentes a partir de uma paleta. Outras ferramentas apdiam mais na edigéo do arquivo de contiguragdo e na escrita de cédigos e templates, Wg $OR ae" @e4: 818 Dep-wer AW @ ¥-0-8-|0-|be- 26 7/0/4)2-\p NOs Hla Re EHS Presses Eclipse com plugins do JBoss Tools wwwalgaworks.com + softwares e treinamentos 13Apostila do curso de JavaServer Faces Conheca mais sobre noseos cursos Javaescum ©algaworks Cee Fle fat Sauce vests Seach Projet Myedoee fun Won He (MBO £8 F 8-8 216 wwe Gave ie be ee TEDL B 1 + A) @ | sstiracetem Designer Toolbar Dn from design view (Tide | Content ‘Timestamp Fdenid) | iemie) | viding Bade to index ueet#ipost porte! vareiten" bosdesot2" cell MyEclipse IDE 2ag8 90 TW) e-o- ~ aan ee nn | neds fo eaten IERIE tert naence pear fae one iene emrsoy 4 tne of jae Bie a “ “| cam NetBeans www algaworks.com + — softwares e treinamentos 20Apostila do curso de JavaServer Faces Aprenda muito mais com nosse treinamento presencial ©) algaworks SRS 85 Rear Ba rigs RERS)eae me Developer Varias ferramentas séo baseadas no Eclipse, como 0 JBoss Developer Studio (que & basicamente o Eclipse + JBoss Tools) e o MyEclipse IDE, pois 0 Eclipse é considerado uma plataforma mutt flexivel e atualmente a mais usada em todo o mundo. Disponibilizamos os arquivos de instalagao das IDEs gratis mais importantes na comunidade no DVD que acompanha esta apostila, porém utlizaremos o Eclipse para desenvolver os exemplos e exercicios da apostila, (© Eclipse distribuido para desenvolvedores Java EE néo possui recursos visuais interessantes para criar paginas JSF, porém apéia visualmente na configuragao da aplicagao nesta tecnologia. Nossa escolha pelo Eclipse é pelo falo de ser uma ferramenta répida ¢ com excelente suporte a edicao de cédigo Java e JSP (isso inclui JSF). ‘Antes de terminar nosso estudo, instalaremos o plugin JBoss Tools para trabalharmos com a biblioteca Richfaces, e al tiraremos provelto da funclonalidade “arrastar-e-soltar”. O Eclipse pode ser baixado em hitp:!www.eclipse.org, mas felizmente ja possuimos 0 arquivo de instalagao no DVD. A instalagao dessa ferramenta sera apresentada em um préximo topico. 3.2. Escolhendo um container web Para executar aplicagées desenvolvidas em JSF, vocé precisara de um servidor com um container web instalado. Um container web é um programa que recabe requisicdes HTTP, executa componentes Java (Serviets) e devolve para o usuérrio (browser) cbdigo HTML, além de todos os outros recursos necessarios (como imagens, videos, folhas de estilo @ etc). Na verdade, trata-se de um servidor web (como o Apache HTTPD), porém com outras funcionalidades para executar cédigo Java de acordo com a especificacao Java EE. ‘A JavaServer Faces foi construida baseada na tecnologia de Servlets e JSP, mas voce no é obrigado a saber sobre elas para desenvolver em JSF, apesar de ser recomendado. Existem diversos containers web (e outros containers completos, que também néo deixam de ser web) disponiveis para download, e o melhor, sem custo algum para implantar em produgo. Apesar de tantas ofertas gratuitas de excelentes produtos, algumas empresas ainda vendem licengas de seus proprios servidores, pois oferecem suporte diferenciado ao cliente © normalmente implementam funcionalidades que os servidores gratuitos talvez nao possuam. www algaworks.com + — softwares e treinamentos 2Apostila do curso de JavaServer Faces Conheca mais sobre noseos cursos Javaescum ©algaworks Dentte 0s varios servidores que so containeres web, podemos destacar os mais conhesidos: ‘Apache Tomeat vetty JBoss AS Glassfish JOnAS ‘Apache Geronimo IBM WebSphere Application Server Oracle WebLogic Server (antigo BEA WebLogic Server) Oracle Application Server Para desenvolver nossos cédigos, usaremos o Apache Tomcat, pois mais leve, gratis «¢ possui tudo que precisamos para executar nossos exemplos. Como estes servidores sdo baseados nas especificagées da tecnologia Java EE, vocé pode implantar os softwares que desenvolveremos neste curso em qualquer servidor mais atual compativel com a Java EE. O download do Apache Tomeat pode ser feito em http /tomeat.apache.org. O DVD que acompanha a apostila jé possui o arquivo de instalacdo desse servidor, e aprenderemos a instalé-lo ainda neste capitulo. 3.3. Instalando e configurando 0 Eclipse A instalagao do Eclipse simples, basta descompactar o arquivo de instalagao (com extenso .zip] no local desejado. wineip eG Evhasing aeuthin Para iniciar 0 Eclipse, vocé ja deve ter a Java SDK § ou superior instalada em seu computador. Execute o arquivo “eclipse.exe” na pasta “eclipse” que foi descompactada e a ferramenta seré iniciada, Bp centiossten =] arcane we ferues ea] 2 Bo shushe B reine sctoeniaet ites Te encouct te ‘s oe apse ‘ots renee seou.sie [Heh ) Fetoccocurent ne me retice Hook Fret Cement 78 www algaworks.com + — softwares e treinamentos 22Apostila do curso de JavaServer Faces Aprenda muito mais com nosso treit amento presencia Qalgaworks Aparecera uma tela solicitando um ditetério onde o Eclipse gravard seus projetos, que € chamado de workspace. Pressione 0 botéo OK para usar 0 diretério sugerido ou selecione outro local Select a workspace 7 sa laf 22: your poles n afl ald avenue, {hlows Sheraton tetera bk aac GANYMEDE Aguarde 0 carregamento e a tela ‘Welcome" aparecera, ocorrau com sucesso. www algaworks.com + — softwares e treinamentos 2Apostila do curso de JavaServer Faces Conheca mais sobre noseos cursos Javaescum ©algaworks 4, Instalando e configurando o Apache Tomcat O processo de instalagao do Apache Tomcat é simples, basta descompactar o arquivo com extensao “zip” no local desejado. @ te cont of wee pw S- RELEASENOTES AUNHING. aawe esx | Sorumente de testo ore 3 Uma vez finalizado, tem-se um servidor de aplicagées pronto para produao. De qualquer forma, o site disponibiliza toda a documentagao necesséria para resolver problemas encontrados e esclarecer duividas com relagao ao proceso de instalagao e configuragao do servidor. Para entender um pouco sobre 0 funcionamento do Tomcat, examine os diretérios criados durante o processo de instalacao. Os principals sao: bin Executaveis, incluindo os aplicativos para iniciar e para encerrar a execugao do servidor. cont Arquivos de configura¢ao do Tomcat. O arquivo “server.xmI”, em particular, define uma série de parametros para a execugao do servidor, como por exemplo, a porta onde o servidor ir receber requisigées (essa porta 6, por default, 8080), devendo ser examinado com cuidado e modificado conforme as necessidades. logs Arquivos de log do servidor. Além de gerar arquivos de log contendo entradas para cada requisigao recebida, como qualquer servidor web, o Tomeat também pode gerar arquivos de log com tudo o que as aplicacdes desenvolvidas enviam para a saida padrao do sistema. work Diretério temporario do Tomcat. Esse diretério é utiizado, por exemplo, para realizar a recompilagao automatica de paginas JSP. webapps —_Nesse diretério sao instaladas as diversas aplicagdes web desenvolvidas. Para verificar se a instalacéo fol bem sucedida, acesse o diretorio "bin" e execute 0 arquivo “startup.bat" (ou "startup sh’ para Linux) para iniciar 0 servidor. Vocé jé deve ter a Java ‘SDK 5 ou superior instalada em seu computador para efetuar este paso. www algaworks.com + — softwares e treinamentos 24Apostila do curso de JavaServer Faces Aprenda muito mais com nosse treinamento presencial ©) algaworks egemescar wm [O) En ese eon io @) secice cg) Sea PG] RR a nao a] jr ies = [BE ee art one Zo & oe (ma es Ne Een og) fats qa: acon oh etn tat saan sh or [owe eecres [RY Set Uma console seré exibida e 0s passos da inicializagao do servidor serdo impressos nela. EOF TET gage evshnscareyfenyest emer iit PRE gc Ht wae RINSE MRREOORTRE TE IES oe Siegal Bat Ta Sear eer eo ee slot tah Cae oer ae oe rgnmosdntel Ley ieee Since Prauivae de Eau Aiutep se neu Geond rst me progr: man tue Metts ddatatctey MIP Fe a ot iat ate. canttn tent ocpanarh al gs horeeovave Tater GER sein coe Segetetn Ine: “ScancinaSenuet Ensane’ Apache foneat/4.0c4]™. ets ie Ete atte ee Etctaeemeet seme INFO; “Starcing covoue tithes Ton hee 8e80 See entries tie stares ana i 10-8 tinesorst onfigenull ni-apgehe-catatina.startup.Catalinn stare eartup oe ‘Abra um browser (pode ser 0 Firefox, que é melhor que o Internet Explorer) e acesse o enderego htio:/ocalhost:8080. Se a tela abaixo aparecer para vocé, parabéns, o Tomcat esta instalado e funcionando em seu computador. www algaworks.com + — softwares e treinamentos 2Apostila do curso de JavaServer Faces Conheca mais sobre noseos cursos Javaescum ©algaworks pace Toneat eee lPecte Software Foundat hetp://www.apache.org/ Ityeuite seeing this pace via aweb browser. tmeane you've setup Tomeat successful ‘Congratulations! As yeumayhave guesseaty ru, 6 este at cetautTerestnome page. ean = teura onthe cea ScATALIUA_Molz/wobappo/AcoT/ index.htm ohare SCATALINA HOVE" pte oe Toneat zal sieyou doit saan youre wxingtis aan, o case please rea fan stuns ne he Tem:aiDocumeteason armors sstalee sep and ad stan i= STALL he Incded wi i eegey ts aoe of sane Suate ead ISPe (nl aseociand cou cad) ‘Agora interrompa a execucéo do Tomcat executando 0 arquivo “shutdown.bat” (‘shuwdown.sh” no Linux), ou na console do servidor, pressione em conjunto as teclas Ctrl + C. Integrando o Eclipse com o Apache Tomcat Para tornar nosso estudo mais pratico, iremos integrar o Apache Tomcat ao Eclipse. Desta forma, vocé poderé iniciar e parar 0 Tomeat e implantar as aplicagées a partir do ambiente de desenvolvimento. ‘Acesse 0 menu “Window”, depois em “Runtime Environments’ “Preferences”. Na tela que se abre, clique em “Server” e aa Fypefter et ‘Server Runtime Environments 1p Gere Dbmersnagomont Serer rntre exstenrens nd, enone 3a sere rine vores hae Tee Fon coronene emct Stems furbstup ‘hi sense Plnes Tee Uiageostecsledar laldsen web Wie sven Wot www algaworks.com + — softwares e treinamentos 26Apostila do curso de JavaServer Faces Aprenda muito mais com nosse treinamento presencial ©) algaworks Clique sobre 0 botdo “Add... A tela "New Server Runtime Environment” sera aberta para selegao do servidor. eee New Server Runtime Environment Dafne seen unine enema Side thetpect untne envionment ype ee a muna pacevie foatecus footed fata oom oom Bees sects Clepate a enized rer Localize @ selecione a verso que mais se aproxima da que usaremos, neste caso, “Apache Tomcat v6.0". Pressione "Next >”. eee Spey th tlt dct [Recaro seorketonet 0.14 (Donne ard na Iitwencdak eS www algaworks.com + — softwares e treinamentos wrApostila do curso de JavaServer Faces Conheca mais sobre noseos cursos Javaescum ©algaworks Clique sobre 0 botdo "Browse." ¢ localize 0 Instalado, em seguida pressione Finish” e depols “OK”. Para testar a integragéo do Eclipse com o Tomcat, localize e clique sobre aba “Servers” iretorio raiz onde 0 Apache Tomcat foi Ps Dade) Prgms Re Seres] BE Date Sure Excerpts ear! teseren = esnurce Path est Te Se nao encontrar esta aba ou ela estiver desaparecido, acesse o menu "Window", “Show view" ¢ “Others”. Localize a op¢do “Servers” ¢ clique em “OK” Sai ype ter test Teo 2S Debug eB Help © save © dave Bronsing 2B Javascript & Jovaserver Faces 2 PA 2S Mn eB Pe DG POE Runtime 2 Ramte System: © SQL Devercpment 2 Tean a (Ure Fi bu display the deect tion fara selected view, Cencel Pronto, Agora clique com 0 botdo direito na area branca, selecione “New” ¢ clique em “Server”. (Exheinw © toss Photos| Snes (9 paSauce tne) 5 Sree | some www algaworks.com + — softwares e treinamentos 28Apostila do curso de JavaServer Faces Aprenda muito mais com nosse treinamento presencial ©) algaworks Selecione a opcdo “Tomcat 6.0 Server” e clique em “Finish” (Pei [ites [Erect [sera Wdaatarcctine] sec] Ofmp== © Tomcat aparecera na lista de servidores integrados ao Eclipse. Clique com o botao direito sobre este servidor e selecione a opco “Start”, WG ose scarce Epler) £ snposte Neste momento, o Apache Tomeat esta funcionando integrado ao Eclipse. Voc8 pode parat, contigurar ou publicar aplicagSes no servidor a partir do ambiente de desenvolvimento. www algaworks.com + — softwares e treinamentos 2Apostila do curso de JavaServer Faces © al igaworks Conhega mais sobre nossos cursos Java e Scrum 4. Primeiro projeto JSF 1. Introdugao Nossa primeira aplicagao em JSF sera bem simples. O objetivo é que vocé consiga reparar 0 ambiente de um novo projeto ¢ deixe-o funcionando no servidor. \Vocé poderd ficar com varias diividas do tipo “como funciona isso?”. “porque tive que escrever aquilo?”. Ndo se preocupe! Nos proximos capitulos aprofundaremos em cada detalhe da tecnologia, 4.2. Escolhendo uma implementacao de JSF A USF foi criada através do Java Community Process (JCP), que 6 uma entidade formada pelas mais importantes empresas de tecnologia do mundo e especialistas em diversos assuntos. © JCP @ composto por varios grupos de trabalho, que séio chamados de JSR (Java Specification Request). Uma JSR é um projeto de desenho de uma nova tecnologia. O artefato produzido através das JSRs séo documentagées, interfaces e algumas classes que especificam como deve funcionar um novo produto. A SF foi criada e é controlada pelo JCP através de JSRs (uma para cada versao) Quando uma JSR é finalizada, empresas fornecedoras de tecnologia tém a chance de entender a especiticagao e implementar um produto final compativel com 0 proposto pela especificagao. No caso da JSF, as implementacdes mais conhecidas atualmente so a da propria ‘Sun, conhecida como Mojarra, ¢ a da Apache, chamada de MyFaces Core. Todas as implementacdes devem fazer a mesma coisa, mas o que diferencia uma da outta é a qualidade que foi desenvolvide 0 produto, documentagao disponivel, suporte oferecido pela empresa ¢ principalmente pela comunidade, ete Usaremos neste curso a implementacao da Sun, a Mojarra versao 1.2.x. O DVD que acompanha esta apostila possui o arquivo distribuido pela Sun, mas caso vocé tenha interesse em conhecer o site e até mesmo baixar a ultima versdo disponivel, acesse https:/javaservertaces dev java.net 4.3. Criando um novo projeto Para comecar, ctie uma nova aplicagéo web no Eclipse, seleclonando a op¢éo “File”, “New” e ‘Dynamic Web Project” no menu da ferramenta. Digite 0 nome do projeto (por exemplo “PrimeiroProjeto’) e na secao “Configuration” selecione “JavaServer Faces V1.2 Project”. Pressione 0 botdo “Next”. www algaworks.com + — softwares e treinamentos 30Apostila do curso de JavaServer Faces Aprenda muito mais com nosse treinamento presencial ©) algaworks Pe wippaecineennreigovonnon i El uessvaue (ern a ae (sears ENR Ces eDrme Hot elents EFA eaten Anova tela que aparece apresenta algumas informagdes sobre o nom 1e do contexto da aplicagao e nomes dos diretérios de conteudos web e fontes Java. Apenas pressione “Next”. Wieb Mode Dimes dey dont wwwalgaworks.com + softwares e treinamentos 3Apostila do curso de JavaServer Faces Conheca mais sobre noseos cursos Javaescum ©algaworks A proxima tela sollcita as configuragées da JSF para o seu projeto. Em “JSF Libraries”, selecione a segunda alternativa, selecione a opcdo ‘Deploy’ e clique no botao “New...” Iremos referenciar os pacotes (JARs) da implementagao JSF. ee 35F Capabilities (@ 4.5" rplowertation trary hazrocboen chosen Ser teares: © server speed JSF imphmentaton 3) concorer-Lteares brary flame 25 Centigurabon Pies JWEDARE racesrcrtia. ml id Se Sevettane: [Faces Ser ] {sr set cfcename: | jv.oces webapp Racerserlet LL Meeing Patterns: ‘em “Version Supported”. clique sobre 0 botdo “Add...” e selecione os arquivos ‘jsf- apijar’ e “jsf-impljar’, que se encontram dentro do diretorio “li” distribuido no arquivo de instalago da Mojarra. Clique novamente em “Add...” ¢ Inclua 0 arquivo “jstjar", que tambem est disponivel no DVD. Clique no botéo “Finish, www algaworks.com + — softwares e treinamentos EdApostila do curso de JavaServer Faces Aprenda muito mais com nosse treinamento presencial ©) algaworks wrap uawes [mre {ergonsiroore rary tas DF epbie = CopenkrenavertosisFnarar.2 12H) air -sopent rst NF naar. 1 O salar clopont(trenarencstown3e See JSF Capabilities: st 5Feapmleste even tet eben (© Server Spied JSF Ing hmtaton Olin seizure by cagenert branes Peploy brary Mane 1 Cononabon Plt [WPM Rece cian —d Serine [Fas Servet ] spores csemanes | ava fese.taps.Fecessuret Lc arrngatams: |e Ee www algaworks.com + — softwares e treinamentos aApostila do curso de JavaServer Faces Conheca mais sobre noseos cursos Javaescum ©algaworks Quando o projeto for criado, vocé o vera em “Project Explorer” cial a & |e ee Gs egy Dean Pcl “28 ova Resources: sre (8 BA JeveScret Suppert, but (8 WebContent ES Servers 4.4. Codificando a primeira aplicacao JSF Nossa primeira aplicagdo ser uma tela com um campo de enirada de texto e um oto, O usuario deve informar o nome no campo e pressionar 0 boléo. Uma mensagem de boas vindas ser dada ao usuario, transformando o nome digitado em letras maitisculas. Clique com 0 botdo direito sobre a pasta ‘WebContent’, selecione “New” e “JSP”. Fy BSle” = Bnerohite 1 DepiraneDeserptar:Prmetebroes BB teva Resource: ie (a Bh devas Sure ai ae : el?" tao one gr (Bh Posts hi (02 Felder Woe oo aa ae are a on ach Evert, aoe a an : ree ; Saawn °F resces asst Em ‘File name”, digite 0 nome de nossa primeira pagina JSF, como por exemplo, “ola jsp", @ clique no botéo “Next”. A extensdo do arquivo deve ser “jsp”, pois a tecnologia JSF foi construida baseada na JSP. www algaworks.com + — softwares e treinamentos ctApostila do curso de JavaServer Faces Aprenda muito mais com nosse treinamento presencial ©) algaworks ee Siscmee O Eclipse nos fornece alguns templates (modelos de cédigos prontos) para facilitar nosso trabalho. Selecione um template JSF com tags HTML, como 0 “New JavaServer Faces (JSF) Page (html)". Clique no botdo “Finish”. ec JP ete File ti Teles iepaelon ate Enter © Eclipse ird gerar um cédigo JSF com um contetido que comum em praticamente todas as telas que desenvolvemos. Isso facilita para ndo precisarmos digitar tudo. Altere o titulo da tela na tag HTML <é:view> text/html; charset=1S0-2859-1"> tLabel value="Seu nome: "/> xt value="#{usuarioBean.nome}*/> b prefixe"h" uri="http: //java.sun.cam/3sf/bumt"\> ‘As declaragées acima dizem para o framework do JSF que queremos usar as bibliotecas de tags him! e core. A biblicteca him! contém todas as tags (componentes) para trabalhar com itens especificos da HTML, como formulérios, campos de entrada de dados, botées e etc. A biblioteca core contém légicas para validagdes, conversdes e outras coisas especificas da JSF. Todas as paginas JSF deve possuir uma tag . Essa tag diz ao JSF que voc quer gerenciar 0s componentes que estiverem em seu corpo, em outras palavras, todos ‘08 componentes filhos de podem ser gerenciados. , 0 JSF ndo poderé construir a arvore de componentes gerencidveis da pagina, e isso impossibitaria uma futura localizagao dos componentes criados na tela, ou seja, voos deve sempre incluir a tag englobando todos os seus componentes JSF para que tudo funcione da maneira desejada, www algaworks.com + — softwares e treinamentos amApostila do curso de JavaServer Faces Conheca mais sobre noseos cursos Javaescum ©algaworks Atag diz que vooé quer um formulério da HTML neste local. , pois assim os valores digitados pelos usuarios nos campos € 0s estimulos aos comandos podem ser enviados para o servidor fazer o processamento. Usamos 0 componente para apresentar um campo de entrada de texto e um componente para um botao. ext valu onmandbutton valu actionListene! {usuariopean. nome }"/> enviar" #iusuariogean. enviar |"/> Os delimitadores #1...) seréo explicados no préximo capitulo com mais detalhes. Esses delimitadores podem ser chamados de expressdes de ligacao ou JSF EL (JavaServer Faces Expression Language). O texto “usuarioBean” esta referenciando 0 managed bean que onfiguramos anteriormente, ¢ “nome” faz referencia a propriedade com mesmo nome no bean. Esta propriedade @ acessada usando 0 método getNome e alterada usando 0 método set Wome, por isso 6 t4o importante o padréo Java Beans. Quando a pagina é exibida, 0 método gettiome 6 chamado para obter o valor atual da propriedade. Quando a pagina @ submetida através do botéo “Enviar”, 0 método setNome & chamado para alterar o valor que foi digitado pelo usuario através do campo de entrada, A tag possui 0 atfibuto actionbistener, que liga a agéo sobre este botdo ao método enviar da classe UsuarioBean, ou Sela, quando o usuario clicar sobre 0 botdo “Enviar”, o servidor identificara este comando e executaré automaticamente 0 método enviar do bean. Este método por sua vez tem a chance de fazer qualquer processamento do lado do servidor. No caso de nosso exemplo, apenas mudamos 0 nome digitado no campo de entrada para letras maiiisculas. A tag apenas apresenta um texto (rétulo) digitado no atributo value. Nada de extraordinario, ch:outputtabel value="seu nome: "/> Vooé deve ter percabido que a mensagem de boas vindas sé foi apresentada depois ‘que 0 nome fol Informado no campo de entrada ¢ o bot8o “Enviar” fol pressionado. Isso ocorreu porque incluimos um componente chamado que sé é apresentado {renderizado) quando o nome nao for nulo. A tag apresenta textos contidos no atributo value. Esse atributo pode conter textos estaticos (fixes), como a mensagem de boas vindas, e também textos dindmicos, como 0 nome digitado pelo ustiario. chi outputrexxt value="Bom vindo 2 primeira aplicacfo JSF, #{usuarioBean.nome]" rendered="#{usuarioBean.nome |= null}"/> © atributo cendered do componente 6 utlzado incluindo uma expresso boleana (que retorna true ou false). © componente s6 6 renderizado se essa ‘expressao for verdadeira. Nossa expresso s6 sera verdadeira se o nome for diferente de nulo, u seja, apenas se o usuario digitar o seu nome no campo de entrada. www algaworks.com + — softwares e treinamentos 50Apostila do curso de JavaServer Faces Aprenda muito mais com nosso treinamento presenci @algaworks 5.5. Arquivo web.xml ‘As aplicagées JSF precisam de um arquivo chamado ‘Webxmi" com algumas configuragdes para funcionarem. Normalmente este arquivo é 0 mesmo na maioria das aplicagées. No exemplo que desenvolvemos, 0 Eclipse criou configurou este arquivo de acordo com as informagdes que passamos para ele. Para entender um pouco mais, abra 0 cédigo-fonte do arquivo ‘web.xmI" (dentro da pasta "WEB:INF?). Ele deve se parecer com 0 seguint dsm version= "2,0" sncoding="OSE-2"2> app. .> play hane>PrimeiroProjeto seervl Paces Servlet javax. faces. webapp. Facer ServLetd vlet—nane>#aces Servlet surl-pattern>/ Faces/* Todas as paginas JSF séo processadas por um servlet do proprio framework. Este servet ¢ implantado no ‘web xmI" atraves da tag . cosrviet> ane>Baces Sarylet coorylet-class>javax. faces. webapp. PaceaservLat Este serviet € chamado toda vez que o caminho da URL iniciar por /taces/*. Esta regra foi definida através da tag e, portanto, pode ser allerada para outro padrao que vocé gostar mais. Keervier nae Paces Serviet /faces/* Vocé nao pode luir faces", como: jplesmente chamar o enderego sem. http:/localhost:8080/PrimeiroP rojeto/ola,jsp www algaworks.com + — softwares e treinamentos 3tApostila do curso de JavaServer Faces © al: igaw ork: s Conhega mais sobre nossos cursos Java e Scrum Veja o resultado se isso acontecer: eee Ba ecetenrecct =a {CORTE Whe een eran eran at evar il ei eendopia(Uscemperenttlessietaqiace, yaya! 672) cevise secvice(Jepestelersev01227) service(sitpseriler. "ee? Quando voce chama o arquivo JSP diretamente, o Faces Serviet nao é executado, ¢ por isso 0 JSF néo inicializa seu contexto e 0 view root (os componentes dentro da tag <£:view>) antes de exibir a pagina, Experimente mudar o mapeamento do Faces Serviet para o padréo +. j st et-mapping> zaces Servlet curl-pattern>*. jef ‘Agora podemos chamar nossa pagina usando a URL: http://localhost:8080/PrimeiroP rojeto/ola.jst 5.6. Conhecendo mais sobre o diretorio WEB-INF 0 diretério “WEB-INF” contém arquivas de configuragao e outros necessérios para o funcionamento da aplicagdo web. Todas as classes (arquivos .class) e bibliotecas (arquivos .jat) devem ficar dentro desse diretério. Este diretorio é vital para sua aplicagao, e ela nao funcionard sem isso. Além dos arquivos “web.xml” e “faces-config.xml", 0 diretério “WEB-INF* pode possuir 05 sub-diretorios “classes” e "lib". O diretorio “classes” contém as classes criadas, tais como os managed beans, Java beans, regras de negécio, acesso a banco de dados e etc, ¢ 0 diretério “lib” possul as biblictecas de tercelros necessérlas para o funcionamento de seu software, como para geragao de graficos e relal6rios, driver JDBC, bibliotecas para leitura e escrita de arquivos POF ou XLS, etc. 5.7. Como funciona nos bastidores Vooé ja conhece alguns dos principais conceitos do JSF e sabe como preparar 0 ambiente para desenvolvimento, inclusive ja criou uma tela simples neste framework. Agora vamos estudar 0 que acontece nos bastidores da execugao da nossa aplicacao de exemplo. www algaworks.com + — softwares e treinamentos 52Apostila do curso de JavaServer Faces Aprenda muito mais com nosse treinamento presencial ©) algaworks Quando vocé digita 0 endereco da aplicacdo no browser e acessa a tela do sistema pela primeira vez, 0 servlet da JSF (Faces Servlet) intercepta a requisicao, Ié 0 arquivo JSP efetua 0 processamento, No nosso caso, 0 arquivo JSP € 0 “olasp”. Esse arquivo contém tags de componentes, como 0 formulario, o campo de entrada de texto, 0 botao e ete Cada tag possui uma classe que a representa, chamada de tag handler, executada assim que a pagina & processada. Essas classes trabalham em conjunio e constroem uma hierarquia de componentes na meméria do servidor, seguindo o que foi programado no arquivo JSP. ‘A hierarquia de componentes representa os elementos da interface visual presentes na pagina. Esses componentes sao responsaveis por gerenciar seus estados e comportamentos. ‘Veja como ficou a hierarquia dos componentes do ultimo exemplo: UlViewRost UiForm UlOutput UlinputText UlCommand uldutput © componente urviewroot representa a raiz dos componentes gerenciados pelo USF, especificado através da tag , 0 ureorm representa 0 formulatio () uroutput significa 0 label de escrita de textos definido como , os componentes urinputText sao 0s campos de entrada de texto (ch:inputText>) e UrCommand 0 botdo, especificado pela tag . Ainda durante 0 processamento do arquivo JSP, uma pagina HTML é renderizada e enviada para o seu browser. Os componentes JSF sao convertidos para codigo HTML. Cada componente JSF possui um renderizador, que & responsavel por gerar oédigo HTML refletindo 0 estado de seu componente. Por exemplo, o componente poderia ser representado no HTML pelo seguinte cédiga, de acordo com seu renderizador. apés 0 usuario digitar 0 seu nome e submeter ao servidor: © nome do componente HTML (atributo “name") foi definido com varios caracteres ¢ nimeros estranhos. Esse nome & gerado automaticamente pelo framework JSF, e ¢ chamado de identificador tinico, ou unique ID. Vocé pode especificar o unique ID que deseja utlizar, mas se nao fizer isso, o JSF iré gerar um para vocé, como no titimo exemplo. Veja abaixo como ficaria 0 cédigo HTML gerado pelos renderizadores dos componentes da pagina “ola jsp": www algaworks.com + — softwares e treinamentos 33Apostila do curso de JavaServer Faces Conheca mais sobre noseos cursos Javaescum ©algaworks ‘rete nttp-equtveconvant~Tyoc" content Ente a requisigéo do usuario e a resposta dada pelo servidor, existem varias outras coisas executadas que nao abordamos neste t6pico. Voce aprendera tudo sobre a sequéncia de processamento no capitulo sobre “Ciclo de Vida’. 5.8. JSF 6 apenas isso? JavaServer Faces é muito mais do que apenas isso! Este framework oferece diversos outros servigos para o desenvolvimento da camada visual de sua aplicacéio, como: Conversao de dados: facilita a converséo de textos digitados pelos usuérios para tipos especificos, como por exemplo, quando o usudrio digita sua data de nascimento, o servidor recebe um texto, que deve ser convertide para um abjeto do tipo Date representando o que o usuario informou. Validagao: diversas validaées de dados basicas padem ser feitas antes de suas regras de negécio ser executadas, como, por exemplo, sobre obrigatoriedade de ‘campos, aceitagao de apenas nuimeros ou validago de documentos, como CPF & CNPU. O USF nos ajuda nesta tarefa, ¢ aprenderemos como utilizar este recurso mais a frente. Componentes customizados: vocé pode criar ou baixar da internet componentes customizados para enriquecer 0 desenvolvimento de suas aplicacdes. Os ‘componentes podem ser reuliizados em todas as aplicacdes de sua empresa, © 0 designer das paginas nao precisa conhecer como ele foi feito para utilizé-lo. Por exeimplo, vocé poderia criar um componente para exibir um teclado virtual para digitacao de senhas. Veja um exemplo de como o designer de paginas poderia utilizé“lo: Renderizadores: o JSF gera cédigo HTML por padrao, porém o framework suporta a incluso de outros renderizadores plugaveis que podem produzir cédigos em outras linguagens para visualizadores de diferentes tipos, como celulares (WML), Telnet, Flash, ete. wow algaworks.com + softwares e treinamentos 4Apostila do curso de JavaServer Faces Aprenda muito mais com nosse treinamento presencial ©) algaworks + Internacionalizacao: com JSF, é muito facil vocé desenvolver aplicagées multi- idiomas com o recurso de i18n (abreviacéo para internacionalization). www algaworks.com + — softwares e treinamentos 35Apostila do curso de JavaServer Faces Conheca mais sobre noseos cursos Javaescum ©algaworks 6. Ciclo de vida Vooé pode desenvolver uma aplicagéo completa em JSF sem conhecer todos os detalhes deste framework, porém quanto mais vocé souber sobre ele, melhor e mais produtivo voo8 se tomard. Por isso, estudaremos agora um assunto que nem todos os desenvalvedores JSF conhecem: o ciclo de vida. ‘Ao executar uma pagina construida usando componentes JSF, ela passara por um ciclo de vida de processamento bem definido, constituido por 6 fases, como seguem: 1. Restaurar visdo 2. Aplicar valores de requisicao 3. Processar validacdes 4. Alualizar 0s valores do modelo 5. Invocar a aplicago 6. Renderizar a resposta Veja abaixo uma ilustragao deste ciclo Requisicgo > Restaurar visao ‘Aplicar valores ‘da requisicao Processar valisagoes 4 Atuaitar 0 valores 60 modelo invocara aplicarao J) Renderizar a fesposta Resposta 4 Agora vamos estudar o que cada fase do ciclo de vida processa 1. Restaurar visa0 A fase de restauragéio da viséo recupera a hierarquia de componentes para a pagina solicitada, se ela foi exibida anteriormente, ou constréi uma nova hierarquia de componentes, se for a primeira exibieao. Se a pagina ja tiver sido exibida, todos os componentes sao recuperados em seu estado anterior. Isso da condigoes dos dados de um formulério submetido ao servidor serem recuperados, caso ocorra algum problema de validagao ou restrigéo de regra de negécio. Por exemplo, se um formulario solicita campos obrigatérios que nao sao totalmente preenchidos, porém enviados pelo usuario, o mesmo formulério deve aparecer novamente com os campos que nao estavam vazios ja preenchidos, porém com mensagens de erro indicando os campos requeridos. 2. Aplicar valores de requisica0 Nesta fase, cada componente tem a chance de atualizar seu proprio estado com informagdes que vieram da requisigéio www algaworks.com + — softwares e treinamentos 36Apostila do curso de JavaServer Faces Aprenda muito mais com nosso treinamento presenci @algaworks 3. Processar validagdes Nesta fase, os valores submetidos sao convertidos em tipos especificos e anexados aos componentes. Quando vocé programa uma pagina em JSF, vocé pode incluir validadores para ctiticarem os valores recebides pelos usuarios. Neste momento, os validadores entram em aco e, se ocorrerem erros de conversao ou de validagao, a fase de renderizagao de resposta & invocada imediatamente, pulando todas as outras fases, e exibindo a pagina atual novamente, para que 0 usuario possa corrigir os ertos 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 sao atualizados nos objetos do modelo de dads e os valores locais sao limpos, 5. Invocar a aplicagao Na quinta fase, os eventos que originaram 0 envio do formulério ao servidor so executados. Por exemplo, ao clicar em um botao para submeter um cadastro, a programagao do evento deste botdo deve ser executada. Em alguns casos, a execugao do evento pode retomnar um identificador dizendo qual é a préxima pagina a ser exibida, ou simplesmente nao retomnar nada para re-exibir a mesma pagina. 6, Renderizar a resposta Por iltimo, a fase de renderizagéo da resposta gera a saida com todos os componentes nos seus estados atuais e envia para o cliente. O ciclo recomega sempre que o tusudrio interage com a aplicagao e uma requisigao é enviada ao servidor. www algaworks.com + — softwares e treinamentos 7Apostila do curso de JavaServer Faces Conheca mais sobre noseos cursos Javaescum ©algaworks 7. Managed beans 1. Introdugao O entendimento de beans no desenvolvimento de aplicacdes Java de modo geral ¢ principalmente em conjunto com o JSF é essencial para um bom programador. No contexto das paginas JSF, os beans fazem a separagao entre a apresentacao e a légica de negécios, ou seja, todo 0 cédigo de implementacdo fica no bean e as paginas apenas os referencia. \Vooe ja aprendeu o que ¢ um Java Bean e também um managed bean em um capitulo anterior. Agora, aprendera como configurar os managed beans através do arquivo XML. 7.2. Configurando beans Os beans usados para vincular as paginas JSF so chamados de managed beans. Geralmente, utiiza-se um arquivo XML para configuragdo desses beans e seus escopos. Este arquivo é€ processado_quando a aplicacao ¢ iniciada. Quando uma pagina referencia um bean, a implementacdo do JSF 0 inicializa de acordo com as configuragoes obtidas. ‘0 arquivo de configuracao mais utilizado ¢ o ‘WEB-INF/faces-config.xm!”, porém para uma maior organizagao do cédigo, é comum fazer uma separagtio em varios arquivos, agrupando-os por funcionalidades como navegacao, conversoes € beans. Para isto, basta acrescentar 20 arquivo “WEB-INFMwebxmi” um parametro de inicializacéo ‘Javax faces. CONFIG_FILES* como mostrado abaixo: javax. faces WEE-INF/navigation.xml, WEB-INE/beans.xm1 FIG_FILES O assunto de navegagéo e conversdes seré abordado mais tarde. Para contigurar um bean é necessério no minimo o nome, a classe e 0 escopo do bean (que sera estudado mais adiante). O codigo abaixo ilustra um exemplo de configuragao: meuBe an eom.algaworks .MeuBeansession: Text value Qu também uma ligagéo de valor (dinamico): xt value="#(meuBean nome )"/> Quando 0 componente for renderizado, 0 método getter da propriedade nome sera invocado. Ja 0 método setter da propriadade seré invocado quando o usuario digitar algo no componente de entrada de texto ¢ submeter a pagina ao servidor. 7.4. Escopo dos beans Conforme mostrado no arquivo de configuracéo “WEB-INF/faces-configxml’, a tag define 0 escopo no qual o bean é armazenado. Os quatro escopos permitidos s40: none, cequest, session @ application. Se 0 escopo for definido como none, entéo o bean receberd uma nova instdncia a cada vez que for referenciaddo, O escopo de request (requisigao) tem vida curta. Ele comega quando uma requisigéo HTTP 6 submetida e termina quando a resposta é enviada de volta ao cliente. Para uma aplicacao onde as transagdes com 0 usuario sao importantes, utiiza-se 0 escopo session, por exemplo, para um sistema de comércio eletrénico, que detém um carrinho de compras virtual O escopo application persiste por toda a duragao da execucao da aplicago web. Este escopo & compartilhado por todas as requisigées e por todas as sessées de todos os usuarios, portanto, tome muito cuidado ao usé-lo. 7.5. Backing beans Em algumas ocasigées, seu bean pode precisar ter acesso aos componentes da pagina USF. O acesso direto aos componentes é diferente do acesso aos valores. Este acesso da a possibilidade de inspecionar e até modificar propriedades do componente que esta sendo renderizado para 0 ustidrio, que as vezes pode até nao estar disponivel como um atributo da tag JSF. Por exemplo, um componente de entrada de texto , representado como objeto Java do tipo urrnput, pode ter a propriedade disabled ou required modificadas em tempo de execugao pelo cédigo Java, através do acesso direto a este objeto. Para esta ligacao entre os componentes da pagina e propriedades de beans, precisamos criar um backing bean. Um bean deste tipo é igual ao managed bean. A tinica diferenga é que ele, além de fazer ligagdes de valor, pode também fazer ligacdo de ‘componentes, porém a forma de configuré-lo no arquivo “faces-config.xmI” ¢ a mesma. Para um bean ser caracterizado como um backing bean, no cédigo-fonte da pagina é feita uma amarragao (melhor chamado de binding) em uma tag de um componente JSF para uma propriedade de um backing bean. Para conectar os componentes do formulario com as propriedades do bean, usa-se 0 atributo bincing: outputText bindin #[meuBean .nomeComponente }"/> No backing bean “meuBean”. temos a propriedade e os métodos de acesso: private Uroutput nomecomponente; public ULoutput getWomecomponente(} { www algaworks.com + — softwares e treinamentos 38Apostila do curso de JavaServer Faces Conheca mais sobre noseos cursos Javaescum ©algaworks return nomeComponente; ) public void setomecomponente (UrComponent value) { this.nomeComponente = value; ) Neste caso, 0 componente é representado como objeto Java do tipo uroutput. Em qualquer método do bean, poderiamos acessar as propriedades do ‘componente, como por exemplo, para ler o valor, chamariamos o método getter da propriedade value: this nomeComponente.getValue(); ‘Apesar de poderoso, este recurso deve ser usado com bastante cuidado. Q uso excessivo pode deixar o eédigo-fonte grande e dificil de entender, além de que, se seu bean tiver escopo de sesso ou aplicagao, seus componentes visuais podem ficar “presos* na ‘meméria por bastante tempo e consumir muitos recursos do servidor. 7.6. Detinindo valores de propriedades No momento em que se configura um bean, é possivel definir alguns valores iniciais para as suas propriedades, como mostrado no exemplo abaixo: d-be name>meuBean ‘com. algaworks .MeuBean pe>session idade 18 sexo masculino Quando 0 bean for invocado, seu construtor padio Meusean() & chamado ¢ em seguida os métodos settdade @ setsexo so executados, passando 0 nimero 18 para a dade e “masculino” para o sexo. Para inicializar uma propriedade com valor nulo, utliza-se 0 elemento . Por exemplo: «managed-property> nome >meuBean >eom. algaworks .MeuBean www algaworks.com + — softwares e treinamentos 60Apostila do curso de JavaServer Faces Aprenda muito mais com nosso treinamento presenci @algaworks <>session sexos entries> java.lang.string Mascul ino<; Feminino A lista pode conter uma mistura de elementos value @ nul1-value. 0 value-class 6 opcional, se for omilido uma lista de String produzida, Mapas so um pouco mais complexos. Lembre-se que os mapas sao formados com chave (key) e valor (value). Opcionalmente especificam-se os elementos key-class & value-class. Caso forem omitides, 0 valor default String é utiizado. Em sequida, aplica-se uma seqiiéncia de elementos map-entry cada um dos quais seguidos de um elemento key € um elemento va1ue ou nuti-value. Por exemplo: java. lang. Integer Pedro: y>1 7.8. Usando expressdes compostas Os operadores que podem ser utilizados em uma expressao de ligagao de valor sao: + Operadores aritméticos + - * / %. Qs dois uiltimes também podem ser utiizados utiizando as variantes alfabéticas div e moa. + Operadores relacionais < <= > => =: gt ge ne. + Operadores légioos «s 11 | e suas variantes alfabétioas and or not. +O operador empty, para verificar se uma varidvel é nula ou vazia ou uma colegao ou array é de tamanho igual a zero. + Ooperador de selecdo tematio condican 2 se_verdadeiro : se_falso = e suas variantes alfabéticas 1: le ‘A precedéncia dos operadores segue a mesma regra que em Java Nao é uma boa prética inserir muitas regras de negécio nas paginas web. Isso violaria a separagao entre apresentagao e ldgica de negdécio. Portanto, tome cuidado ao inserir expressoes muito complexas para fazer muitos célculos nas paginas, onde elas deveriam estar nos objetos de negécio. Uma situagao 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: www algaworks.com + — softwares e treinamentos otApostila do curso de JavaServer Faces Conheca mais sobre noseos cursos Javaescum ©algaworks Quando a propriedade solteiro de meubean for false, entéo a expressaio acima nao é renderizada. Para conoluit este t6pico, voc® pode concatenar strings com expresses de ligagao de valor, simplesmente colocando-as lado a lado, por exemplo: 7.9. Usando expressées de ligagao de método Alguns componentes também podem chamar um método em um managed bean, por exemplo: Quando 0 usuario clicar no botée, 0 métode do bean seré invocado. Para este caso 0 método deve ter a seguinte assinatura: public String efetivarTransacao() A String retornada sera passada para o handler de navegagao (discutido em outro capitulo), que definira para qual tela seré redirecionado. Sao quatro 08 atributos de componentes que podem ser usados com uma expresséio de ligagao de método (todos serdo apresentados em outros capitulos): action validator actionListener valuechangeListener Os tipos de parametros e de retorno do método dependem de qual maneira foi utlizada a ligagao do método (qual atributo de componente foi utlizado) 7.10. Aplicagao de exemplo Para demonstrar as funcionalidades desctitas até agora, seré apresentada uma aplicagao de agenda de contatos. O sistema deve contemplar: + Uma tela de cadastro para o usuério entrar com © nome, enderego, sexo & profissao; + 0s dados digitados serdo apresentados em uma grid: +O sistema ndo armazenaré os cadastros em banco de dados, mas apenas na meméria. Para comegar, crie no Eclipse um projeto com o nome “Agenda” e configure o ambiente para a aplicago JSF. Grie a classe Contato, conforme o cédigo abaixo: package com.algaworks.dwjsf.dominio; public class Contato { private String nome; private String endeveco; private String sexo; www algaworks.com + — softwares e treinamentos 4Apostila do curso de JavaServer Faces Aprenda muito mais com nosso treinamento presenci public String getNome() { return nome; ’ public void setNome (string nome) { ‘this.nome = nome; , public String getendereeca() | return endereco; ’ public void setEndereco (string endereco) ( this.endereco = endereco; ’ public String getSexo() { return sexo; ) Public void setSexo(String sexo] { thia.sexo = sexo; , ) @algaworks Aclasse Contato ¢ um JavaBean que representa 0 modelo de dados de um contato. Isso quer dizer que cada contato incluldo na agenda sera uma instancia dessa classe. ‘Agora crie a classe do managed bean, chamada agenciacontatoBean: package com. algaworks.dwjsf-visao; import java.util-ArrayList; import java-util-List; import javax.faces.event.Actionivent; import com. algaworks .dwjsf-dominio.contato; public class AgendaContatoBean ( private List contatos; Private Contato contato; public AgendaContatosean() { setContato (new Contato ()); public void incluirContato(Action&vent event) ( this.getcontatos().add(this.getcontato ()); this. setContato (new Contato()); , public List getcontatos() { return contatos; ’ public void setcontatos (List contatos) this.contatos = contatoss , public Contato getcontata() | return contato; ’ public void setContate (Contato contato) { this.contato = contato; setContatos (new ArrayList (}); wwwalgaworks.com + softwares e treinamentos 63Apostila do curso de JavaServer Faces Conhega mais sobre nossos cursos Java e Scrum @algaworks ) Configure 0 managed bean da agenda de contatos, incluindo 0 cédigo abaixo no arquivo “faces-config.xm!": d-bean> agendaContatoBean com. algaworks .dw}sf.vieao .AgendacontateBean «managed ean-scope>session Crie agora o arquivo JSP referente a tela da agenda de contatos. Este arquivo pode se chamar “agendaContato,/sp": <2 taglib ue <8@ taglib ur. sheml> "http: //Java.sun.com/jsf/core" prefix: "nttp: //Java.sun.com/jst/html” pre ti: 13> ried Nome: /> ebe/> "#{ agendaContatoBean .contato.endereco}”/>
"#{ agendaContatoBean.contato. sexo
be/>
cfifacet name="headex"> SbzoutputText valu value="#{ agendacontatoean.contates)" 1008"> fome"/> "#1obj nome)" /> "Endereco"/> wow algaworks.com + softwares e treinamentos aApostila do curso de JavaServer Faces Aprenda muito mais com nosse treinamento presencial ©) algaworks utpubText value umn> "#{obj -endereco)" chioutputvext value="sexo"/> chioutputtext value="#{obj.sexo)" /> n: column Veja que as ligagdes de valores dos campos de entrada foram feitas para um atributo da classe Contato, através de outro atributo chamado contato na classe Agendacontatosean, Os detalhes de componentes mais avancados, como 0 , seré visto em ios posteriores. Neste momento, basta perceber como sao feitas as expressées de ligagdes de valores com o managed bean. O método incluircontato (ActionBvent event) seré invocado quando o botéo “Incluir” for pressionado, pois foi feita a ligacdo de método usando 0 atributo act iontistener (estudaremos melhor este atributo mais tarde). Adicione 0 projeto da agenda no Tomcat, inicie 0 servigo e teste a inclusdo de contatos. eo Bi Fupe astven Fegvin fermen Sue Qo- CX & (Dietetecomiotvteniantcnoie =) Glo Z Rena so Sousa Enteeso Nowe (tatereso see | oan as Cowes [lei Fans = [Missa Amancio =U Menceshor Eduard 563,See0@ ‘Reine www algaworks.com + — softwares e treinamentos 6Apostila do curso de JavaServer Faces Conheca mais sobre noseos cursos Javaescum ©algaworks 8. Navegacao 1. Introdugao AUSF possibilita a contiguragao de regras de navegago, o que permite vocé definir a conexao entre as paginas. Por exemplo, quando um usuario clica em um botao para se inscrever em um site, qual tela ele devera ver? Se os dados estiverem incompletos, provavelmente devera visualizar a mesma tela, com as mensagens de erro apropriadas, porém se tudo estiver correto @ a insctigdo for efetuada com sucesso, ele poderd ver uma tela de boas Vindas ao servigo. Isso & chamado de regras de navegagao, e voc8 pode configuré-las no arquivo ‘Taces-config.xmI", como veremos neste capitulo, 8.2. Navegacao simplificada Em varias aplicagdes web, normalmente séo necessérias algumas regras de navegagdes simpiificadas (estaticas). Um exemplo desse tipo de navegagao é quando o uusuério clica sobre um botdo ou link para se inscrever em um determinado servigo de seu site, que sempre apresenta a tela de insctigao online. Neste caso, a regra para selecdo e exibicao da tela é simples, pois ndo se deseja que seja exibida outra tela, independente do que possa acontecer. Para configurar a navegacéo estat regra de navegagao, como o exemplo abaix ‘dite 0 arquivo ‘faces-config.xml” e inciua uma outcome >ajuda/ajudaonline.j sp Para testar, crie uma pagina JSF qualquer com o nome “ajudaOnline jsp”, configure a regra de navegacdo e inclua 0 botéo em uma outra pagina. Clique neste boto e veja que voc8 seré encaminhado para a pagina de ajuda. (Freceodo aude! | “We. Meme Eoeeso" | ote Ga te tke Pein Braves Ae © SX & ( trnateiscstioecstanteeicoita te Agenda de Contato - Ajuda do sistema ‘Tent ajada aga www algaworks.com + — softwares e treinamentos cyApostila do curso de JavaServer Faces © al igawo rks Aprenda muito mais com nosso treinamento presenci 8.3. Filtro pela visdo de origem No citimo exemplo, configuramos uma regra para alender toda a aplicagao em relagéio a pagina de ajuda, ou seja, qualquer pagina poderia referencia a agao “ajuda’ para ser encaminhado para a pagina “ajudaOnline|sp". Imagine agora se precisassemos ctiar uma pagina de ajuda para cada tela do sistema (o que & muito comum em aplicagoes médias grandes). Poderiamos resolver essa questéo simplesmente configurando varias regras de navegagao’ : / ajudaagenda. j sp m-outcome>ajudaRelatorios /ajudarelatorios.jsp ajudaConfiguracac/ajudaConfiguracao .}spajudaagenda Na pagina da agenda, vooé pode ineluir 0 botao: ajuda” action= "ajudaagenda"/> E assim por diante. Essa estratégia funciona, porém pode nao ser a melhor. O JSF pode fazer muito mais por vocé, com o elemento from-view=ia, Com este elemento, vocé pode configurar © segulnte no arqulvo “faces-config.xmI": gation-rule> /agendaContato.4sp snavigation-case> ajudas/from-outcome> /ajudaagenda.j sp |" /relatorio.4sp ajuda /ajudaReLatorios. jap /eonfiguracac.jsp avigation-case> ajuda /ajudaconfigueacao.}sp 8.4. Navegagao dinamica Na maioria dos casos, vocé precisaré que o fluxo das paginas néo dependa apenas do oto clicado, mas também das entradas fomnecidas pelo usuéirio e/ou das regras de negécio da aplicagdo. Quando essa necessidade surgir, vooé precisard configurar a navegagao dinamica. Por exemplo, se vocé esliver desenvolvendo uma tela para seus clientes se inscreverem em uma promogo de sua empresa, fornecendo apenas o nome e e-mail, esse cadastro pode ser bem sucedido ou nao, dependendo do que o usuario digitar. Se ele fornecer um e-mail invalicio ou um nome muito curto, voc8 deve negar a inscrigao e solicitar a correcao dos dados, se 0 e-mail digitado ja estiver cadastrado, vooé nao pode permitir duplicatas, e por isso deve avisé-lo sobre 0 ocorrido, mas se aparentemente os dados estiverem corretos @ sem duplicidade, 0 cadastro deve ser realizado e 0 usuario deve ser encaminhado para uma pagina de sucesso. Veja que 0 encaminhamento do usuério para alguma pagina é dinéimico, conforme (© fluxo abaixo: duplicado jsp sucesso.jsp ‘Agora vamos ver como ficariam os cédigos para criar este fluxo dinamico. Nao trataremos ainda sobre as mensagens de erro do JSF, por isso faremos de uma forma que nao 60 mais indicado, mas fique tranquilo, pois abordaremos este assunto em outro capitulo, No arquivo “faces-config.xm!", configuramos todas as regras de navegacéo: /inserieao.jep duplicade/duplicado.j sp / sucesso. j sp Definimos que, quando o usuario estiver na pagina de inscricdo, existiré uma regra que © encaminhara para a pagina “duplicado jsp" e outra que encaminhara para “sucessojsp”. No recisamos criar uma regra para encaminhar para a propria pagina, e vocé j4 descobrira o motivo. Griamos a classe do managed bean: package com.algaworks .dwjsf visao; public class Inscricaosean | private String nome; private string email; private String mensagem; public String inscrever() ( 4€ (none == null || nome-tength() < 10 I" equals (email-teim())) | thig.setMensagem("Intorme corzetamente o none " +e e-mail!"); return null; , //verifica se cadasteo é duplicado boolean duplicado = false; 4# (duplicado) ( return "duplicado"; , /farmazena inscrigdo, limpa atributos do formulério fe retorna com sucesso return "sucesso"; ) public String getNome() { return nome; ) public void setlome(String nome) ( thia.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 mensajem = mensagem; ) O método inserever() retorna uma String como resultado, O retorno do método sera usado pelo handler de navegagao para encontrar a regra adequada para o encaminhamento. www algaworks.com + — softwares e treinamentos ooApostila do curso de JavaServer Faces Conheca mais sobre noseos cursos Javaescum ©algaworks Por exemplo, se o retomno for “duplicado”, 0 usuario sera encaminhado para “duplicado jsp", se © retomno for “sucesso”, o usuario sera encaminhado para “sucesso|sp”, mas se o retorno for nulo, a mesma pagina é re-exibida, Contiguramos também o managed bean no arquivo “Yaces-config.xmt anaged-bean> an-name>insericaoBean com. algaworks -ciw}sf.visao.InscricaoBean an-scope>request E criamos 0 arquivo JSP da pagina de inscr hifi ue Tex’ #( inscricao8ean.mensagem}* rendered="#/not empty inscricaoBean.mensagem)"/>
sh "#{ insericaoBean.nome)"
< ifs sh value="#( insericaoBean.email)"/>
r jandeutton action="#[inscricaoBean.inscrever|" value="Inserever” © componente de saida de texto (in: outpur'resct) da mensagem s6 seré renderizado caso a mensagem nao seja vazia. Para fazer referéncia ao método inserever |), 0 botéo foi criado da seguinte forma: #|insericaoBean. inserever} sucesso /sueesso.jsp #{inscricaosean.cancelarinscricao) >m-outcome>sucesso /cancelado.jsp, colocado apés , diz ao handler de navegagao que deve ser feito um redirecionamento, e nao um encaminhamento. O redirecionamento muda a URL no navegador, enquanto o encaminhamento nao faz essa atualizagdo. O redirecionamento também € mais lento que o encaminhamento, pois precisa trafegar mais informagées entre 0 servidor e cliente. Para testar o redirecionamento, altere a regra de navegagao para incluir este novo elemento: n>ff{ insericaoBean. inscrever) sucesso / sucesso. Jsp kredirect/> Execule a tela de insctigo, preencha todos os dados e submeta o formulério. Veja que ‘© enderego no browser foi alterado. www algaworks.com + — softwares e treinamentos TiApostila do curso de JavaServer Faces Conheca mais sobre noseos cursos Javaescum ©algaworks arqave tdew eb aténee Favarees Ferrameneas —ajuds @ + SX @ (Citnarntatengnnyeastasosg Sucessol Esta técnica 6 importante para quando vooé deseja que o usuario possa inoluir a URL nos favoritos do browser. Com encaminhamento, isso nao se fora possivel. 8.7. Usando padrées Vocé pode agrupar regras de navegagao usando padrées no elemento , como! view-id>/ admin/* Essa regra diz que os casos de navegagdo serdo aplicados apenas para as paginas que iniciam com “fadmin’” www algaworks.com + — softwares e treinamentos 72Apostila do curso de JavaServer Faces Aprenda muito mais com nosso treinamento presenci @algaworks 9. Componentes basicos Introducao Para desenvolver um sistema em JSF completo, vocé deve conhecer pelo menos os principais componentes basicos. Quando falamos em componentes basioos, queremos dizer os ‘componentes da implementacao de referéncia do JSF, ou seja, aqueles que ja lazem parte do framework, sem ter que instalar bibliotecas adicionais. Até o final deste curso, aprenderemos a utilizar bibliotecas de componentes adicionais, porém os componentes bésicos sao essenciais para o desenvolvimento de qualquer sistema. ‘As bibliotecas de tags JSF sao divididas em HTML e fundamentais (core) A biblioteca HTML possui componentes que geram contetido visual, como formulérios, campos de entrada, rétulos de salda de textos, botdes, links, selegdes, (painéis, tabela de dados, mensagens ¢ etc. Aprenderemos a maioria destes componentes neste capitulo. A biblioteca fundamental existe para dar suporte & biblioteca HTML, ¢ ndo possui componentes visuais, mas apenas auxiliares. Aprenderemos esta biblioteca no decorrer do curso, sempre que for necessario. Para usar as bibliotecas da JSF, temos que importé-las com diretivas taglib, como no exemplo abaixo’ Ag ta: AQ taal http: //Java.stin. com/9#/eorems> wttp://Java tin. com/3st /meml "> Importamos as tags fundamentais e HTML € as nomeamos com o prefixo fe h, respectivamente. Este nome (prefixo) pode ser modificado para qualquer outro, mas é melhor que use fe h, que sao prefixos convencionados, 9.2. Formularios © uso de formulétios ¢ comum em qualquer sistema web, usando qualquer tecnologia. framework JSF possui um componente para renderizar formularios HTML chamado i: form. Veja um exemplo abaixo que inclui um formutario: lib prefix <8@ taglib prefix "£" uri="http://java-sun "hY uri om/jsf/eore"e> “http: //Java. sun. com/3s£/htm)"¥> ++-campos do formulario aqui... O cédigo-fonte gerado ao executar esta pagina sera:

campos do formularie aqui

A tag h:form gerou um elemento form da HTML. Apesar da tag form da HTML possuir 0s atributos method @ action, a tag t: form do JSF ndo possui, pois sempre & considerado 0 método “post” e a acéo igual ao endereco da mesma pagina, como voce pode ver no eédigo gerado. ‘A tag h: form possui varios atributos, sendo que a maioria deles so referentes aos eventos da DHTML. O Eciipse pode te ajudar a descobrir todos os atributos, basta pressionar Ctrl + Espaco dentro do cédigo da tag, SR > vaseint code executed when a perce Boman kad over His slerent. @eceese = CaM @ accoptcharcet @bnang 5 -om/3s£/htmi" peml> www algaworks.com + — softwares e treinamentos 74Apostila do curso de JavaServer Faces Aprenda muito mais com nosse treinamento presencial ©) algaworks language="Zavaseript"> function alterarValorCampo() | document .getElementayid { "meuFrorm:meucampo") value = ‘valor alterado'; Veja que criamos uma fungao JavaScript chamada aiterarvalorcampo(). Esta funco 6 chamada no evento onclick: do botdo “Testar’, e deve alterar o valor do campo para “Valor alterado”. © campo que incluimos renderizado em HTML da seguinte forma: Veja que 0 ici do elemento INPUT oi configurado para “meuForm:meuGampo". © ic do formulrio foi juntado com 0 ia especificado para o campo de entrada e detinido como o identificador do elemento HTML. Com este identificador, usamos a seguinte programagao JavaScript para acessa-to’ document . getElement ById("meuForm:meucampo") value = ‘Valor alterado"; Ao executar a pagina e clicar no botée “Testar”. 0 valor do campo de entrada é alterado. Mozilla Firef Arpivo Edits Exbir Histirco Faw 7Ee¢ Xx @O [Facraterado | Oatributo binding O attibuto binding pode ser especificado com uma exprassao ligagdo que referencia uma propriedade do bean do tipo do componente. Usamos este atributo em um capitulo anterior, quando aprendemos sobre backing beans. Este alributo esta presente em todos os componentes da biblioteca HTML. O atributo rendered O atriouto rendered também esté presente na maioria das tags. Este atributo controla a renderizacao do componente. Se o valor dele for false, 0 componente nao sera exibido, ¢ se for true, sera renderizado para o browser do usuario. Vocé pode usar uma expressao de ligagao que referencia uma propriedade do bean para controlar quando © componente sera www algaworks.com + — softwares e treinamentos 7Apostila do curso de JavaServer Faces Conheca mais sobre noseos cursos Javaescum ©algaworks renderizado. Jé usamos este atributo em um exemplo anterior, quando criamos nossa primeira aplicagao JSF. Os atributos style e styleClass E possivel utilizar estilos CSS (Cascade Style Sheet) em suas paginas JSF de modo inline ou em classes. Sempre que for possivel, prefira criar os estilos em um arquivo separado ce usé-los em classes. O exemplo a seguir mostra o uso das duas formas. Primeiramente, criamos um arquivo CSS de nome “estilo.css” em uma pasta chamada “ess”, com o seguinte conteuido: ampo { background-color: #ecccec; color: white; ) Este arquivo CSS especifica apenas uma classe chamada "campo", que seré usada para configurar a cor de fundo e da fonte de campos de entrada Em seguida, criamos uma pagina simples em JSF com apenas um campo para testarmos 0 uso desta classe e também especificarmos outros estilos adicionais inline, //java.sun.com/jsf/core"s> “http: //java-sun.com/jst/ntmi"%> ‘text/ess” -/ess/estilo.css"/> campo" "border-color: blue; border-style: dotted;" /> Veja que no componente inputrexc, usamos 0 atributo styleciass para referenciar © nome da classe que criamos no arquivo CSS e 0 atributo style para declarar outras caracteristicas do mesmo componente, como cor e estilo da borda, ‘Ao executar a pagina, voc8 verd 0 campo com fundo cinza, cor de fonte branca bordas azuis pontilhadas. Weemanee Arquivo Edter Esl Hs A mai etyleclase. ria dos componentes da biblioteca HTML possuem os atributos style € www algaworks.com + — softwares e treinamentos 7Apostila do curso de JavaServer Faces Aprenda muito mais com nosse treinamento presencial ©) algaworks Os atributos da HTML Os atributos da HTML, também conhecidos como pass-through HTML, representam exatamente os atrioutos de elementos da propria HTML. Nao vamos listar todos eles aqui, mas apenas usar alguns como exemplos. Caso vooé precise usar algum atributo proprio de um elemento da HTML e nao soubsr se existe, tente descobrir usando as teclas Ctr! + Espaco dentro da tag, que 0 Eclipse ira Ihe auxiliar. Em uma pagina JSF, criamas um campo de entrada com 0 seguinte cédigo: Veja como este componente renderizado para o usuario: ext" }_id_jsp_2057641878_1:}_id_jsp_2057641978 2" max length= ‘size="40" ritle="Informe seu nome neste campo" /> Os atributos maxtenath, size e title simplesmente foram repassados para o cédigo de saida, por isso s4o 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 validagdes, criacao de elementos da HTML dinamicamente, exibigéo 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 alributos, mas novamente nao iremos listar todos, pois basta voce solicitar auxilio ao Eclipse para descobri-Ios. No campo de entrada do exemplo abaixo, usamos os atribulos onclick, onchange, onmouseover @ nmouseout para incluir cédigos JavaScript para tratar eventos do elemento. chi inpurtext o1 oe onchange 2 this. value. toUppercase() ;" onmouseover="this.style.backgroundColor = 'yellow';" this. style.backgroundcolor = 'white'; Os cédigos JavaScript seréo renderizados na salda para o cliente. Quando o usuario licar sobre 0 campo, seu valor seré alterado para vazio, ao alterar o valor do campo, ele sera modificado para caixa alta (tudo em maiiisculo), ao passar o mouse por cima do campo, a cor de fundo sera alterada para amarelo ¢ ao retirar 0 mouse de cima do campo, a cor de fundo voltard para branco. Este exemplo é bem simples, porém mostra como funcionam os eventos da DHTML. 9.4, Entrada de textos Existem trés tipos de componentes que renderizam campos de entrada de texto: hsinputText, h:inputSecret eh: inputTextarea, © componente h: input Text © componente h:input'rext renderiza um campo de entrada de texto simples, representado pelo elemento input do tipo “text” da HTML. Ja usamos este componente anteriormente para apresentar a expresso de ligagdo e os atributos comuns. No exemplo a seguir, 0 campo de entrada representa o atributo nome do bean meuBean, www algaworks.com + — softwares e treinamentos 7Apostila do curso de JavaServer Faces Conheca mais sobre noseos cursos Javaescum ©algaworks © componente h: inputSecret © componente h:inputsecret rendetiza um campo de entrada de senha, representado pelo elemento input do tipo “password” da HTML. © texto digitado é apresentado de forma secreta. O atributo redisplay, do tipo boleano, define se 0 campo deve reter e re-exibir 0 seu valor quando o formulrio for submetido. Por exemplo, em uma tela de login, quando 0 usuario errar a senha, vooé quer que ela seje retida no campo ou que apresente 0 campo vazio para nova digitagéo? Se escolher reter a senha, informe true no atributo vedi splay. inputSecret value="#(loginBean.senha}" redisplay="true”/> a O componente h: input Textarea © componente h:inputTextarea tenderiza um campo de entrada de textos maiores, que podem ter varias colunas e linhas, e é representado pelo elemento textarea na HTML. Os atributos cols e rows definem 0 tamanho de colunas e linhas da area do texto, respectivamente. cédigo abaixo cria uma area de texto com 3 linhas e 40 colunas: Formado em Sistemas de Tntormaio pela Facildage... Exemplo usando os trés tipos de campos de entrada de texto ‘Agora vamos ver um Unico exemplo com 0 uso dos trés tipos de campos de entrada de prefixe"£' urpueT nput' B-mail:"/>
"#(cadastroUsuarioBean-email}" size "250"/> inane “max Leng! www algaworks.com + — softwares e treinamentos 78Apostila do curso de JavaServer Faces Aprenda muito mais com nosse treinamento presencial ©) algaworks "senha:"/>
# (cadastroUsuarioBean. senha}" value="Resumo do curriculo:"/>
xtarea cols="40" rows="3" #(cadastroUsuariosean.resumocurriculo)"/> sh ndeutton value="Enviar"/> ‘Morne: E-mail Senha Resume do curicule: Enviar Para testar este Ultimo exemplo, crie um bean com 0s atributos nome, email, senha & resumoCurriculo (tedos do tipe String) e registre-o como um managed bean no arquivo “faces-config.xmr’, 9.5. Saida de textos Existem trés tipos de componentes que renderizam saidas de textos: h:outputrext, h:outputformat e h:outputLabel. © componente h: output Text O componente h: output Text renderiza textos simples na pagina. value="#{ segurancaBean .nomeUsuarioLogado}"/> © exemplo acima renderiza o texto a seguir, sendo que NOME seria substituldo pelo nome do usuario logado, caso tivéssemos desenvolvido esta funcionalidade. Bem-vindo NOME www algaworks.com + — softwares e treinamentos 73Apostila do curso de JavaServer Faces Conheca mais sobre noseos cursos Javaescum ©algaworks Perceba que o texto gerado nao esta envolto por nenhum elemento da HTML. Quando usamos algum atributo que deve ser refletido no cédigo HTML, como o id ou style, 0 texto é gerado dentro da tag span. Por exemplo: utrext value="sem-vindo " id="txtzemvindo"/> Text value="#(segurancaBean .nomeUsuarioLogado}" style="color: req"/> Os components acima sao renderizados como: Bem-vindo NOME © componente h: outputFormat © componente h:outputFormat renderiza texlos parametrizados na pagina. Os textos parametrizados so composts por espacos reservados (placeholder) que sao substituidos por valores no momento da renderizacao, Os valores parametrizados sao definidos com nimeros entre chaves, iniciando a partir do nimero zero. AS definigdes dos valores sao feitas alravés da tag £:param da biblioteca fundamental (core). Considerando que nome do usuario seja "Manoel" e que existem 8 tarefas pendentes, a saida em HTML sera 03 Manoel! Existem 8 tarefas pendentes. © componente h: outputLabel © componente h:outputzabel renderiza o elemento 1abel da HTML. Os componentes h:cutputLabel sao vinculados com outros através do alributo for. O uso deste componente é justificado para rotular principalmente campos de seus formularios
0 cédigo acima renderiza a seguinte saida em HTML:
“Eem:nomecampo" /> 9.6. Imagens (O componente h:graphicrmage renderiza 0 elemento img da HTML, que exibe uma imagem na pagina. O endereco da imagem deve ser informado no atributo value ou uri, pois um 6 atalho para o outro. Este componente Ihe permite usar 0 caminho relativo ao contexto, ou seja, vocé nao precisa informar o nome da aplicacao, pois é colocado automaticamente. Veja 0 exemplo: www algaworks.com + — softwares e treinamentos 80Apostila do curso de JavaServer Faces Aprenda muito mais com nosso treinamento presenci @algaworks "/imagens/logo_algaworks. gif" width="81" © cédigo acima renderiza a seguinte saida em HTML: /Agenda/ imagens/1ogo_algaworks gif" height="35" ai" /> 9.7. Menus, caixas de listagem e item de selecdo Existem 4 componentes que renderizam elementos de menus e caixas de listagem: hiselectonemenu, electManyMenu, hieelectoneListbox, h:selectManyListbox © componente h: selectoneMenu e a tag :selectItem O componente h: se lect onemenu renderiza um menu de selecdo tinica, representado pelo elemento select da HTML, com o atributo ize igual a 1 e sem 0 afributo multiple, que permitiria selacdes mitiplas. Todas as tags de selegdo, com excepéo da h:selectBooleancheckbox (que estudaremos logo mais) devem receber a telagao de itens que aparecerao na lista. Para especiticar os itens, usamos a tag fundamental £: select ten. <€:selectItem itenValue="Flamengo"/> titem ivemValue="Vasco"/> <€:selectItem itenValue="outro"/> 0 cédigo acima renderiza a sequinte saida em HTML: Time de futebol favorito: corinthians F lamengo palmeiras Santos ssatilde;o paulo Vasco 0utro © valor especiticado no atributo itenvalue da tag f:selecttem do item selecionado é passado para o atributo correspondente de managed bean, por isso, precisamos criar este atributo com seus getters e sellers. private String timeravorito: public String getTimePavorito() ( return timeFavarito; www algaworks.com + — softwares e treinamentos IApostila do curso de JavaServer Faces Conheca mais sobre noseos cursos Javaescum ©algaworks ) public void setTimeravorito (string timeravorito) { ‘this.timeFavorito = timeFavorito; ) O resultado no browser é 0 seguinte: Time de fimebel fawerit Fismengo | [Goanthiens Palneias Sentos Sé0 Paula Veseo Ouro. Os valores especificados na tag ¢: se lect 1tem sao usados também como rétulos dos itens do menu. Algumas vezes temos necessidade de ter os valores diferentes dos rétulos, & por isso a tag f:selectTtem possui o atributo itemt.abe1. Veja um exemplo: tIten Corinthians" itemLabel="Pimao"/> selectitem Flamengo" itemLahel="Neng&o"/> Este cédigo sera renderizado como: Time de futebol favorito: Timeatilde;o Mengéatilde;o Porco Santas Séatilde;o Paulo vasegatildeso 0utro O resultado seré: Time de fitebol faverito: [Tima | Timao Porca Santos Sa Paula Veactio Outre www algaworks.com + — softwares e treinamentos 82Apostila do curso de JavaServer Faces Aprenda muito mais com nosso treinamento presenci @algaworks © componente h: selectManyMenu © componente :selectManyMenu renderiza um menu de selecdo milipla, representado pelo elemento select da HTML, com o atributo size igual a 1 com o atributo multiple igual a true. abel value= "Time de futebol favorite: " ‘timePutebol"/> value="#(cadastrovorcedorsean.timesFavoritos)" "EimeFutebol" > corinthians"/> Elamengo"/> ‘Palmeiras"/> ‘santos "/> itemValue="sa0 Paulo"/> ivemvalue="vaseo"/> itenvalue="outro"/> (© cédigo acima renderiza a seguinte saida em HTML: Time de futebol favorito: Corinthians P1lamengo Palmeiras santos Seatilde;o Paulo Flamengo"! > Palmeiras" /> 'santos"/> electitem <€:selectItem <€iselectItem itenValue="outro"/> Time de futebol favorito: corinthians F lamengo Palmeiras Santos séatilde;o paulo vasco Outro O valor 4 para o atributo size especifica o tamanho da lista, que deve possi 4 elementos visiveis, Corinthians | Palmeiras Time de fitebel faverito: Santos © componente h: selectManyListbox Este componente rendetiza um elemento HTML se lect de qualquer tamanho (especificado) com 0 atributo mit iple, ou seja, é possivel selecionar varios itens da selegao. id="timePutebol" size="4" #(eadastroToreedorBean.timesFavoritos) "> ectItem itemValue="Corinthians"/> et item itemValue="Flamengo"/> rselectitem itemValue="Palmeiras"/> elect item itemValue="santos'"/> ctitem itemValue="s40 Paulo"/> ctitem itemValue="Vasco"/> elect Item itemValue="outro"/> wwwalgaworks.com + softwares e treinamentosApostila do curso de JavaServer Faces Aprenda muito mais com nosso treinamento presenci @algaworks Time de futebol favorito: em:timeFutebol" name="frm:timeFutebol" multiple="multiple" size="6"> corinthians F lamengo Palmeiras Santos Séatilde;o Paulo vasco 0utro usuario pode selecionar nenhum, um ou varios itens da selecao. Lembre-se de criar © atributo como um array no managed bean, pois o componente possibilita selegao miiipla dos itens, Palingiras Santos Time de fitebel favonto: Vasco 9.8. Campos de checagem e botées radio Existem 3 componentes que renderizam elementos de campos de checagem e botées radio: h: se 1ectoneRadio, h: select Boo leancheckbox @ h: se lectManyCheckbox. © componente h: selectoneRadio Este componente renderiza um elemento HTML input do tipo radio, usado quando voo8 deseja exibir uma lista de opcSes que podem ser selecionadas unicamente. lectoneRadio id="sexo"> 2" itemLabel="Feminino"/> O seguinte cécigo HTML é renderizado:

www algaworks.com + — softwares e treinamentos 3Apostila do curso de JavaServer Faces Conheca mais sobre noseos cursos Javaescum ©algaworks

Mascul ino

Feminino

Vooé deve ter percebido que os elementos input sao gerados dentro de colunas de uma tabela da HTML. Os elementos sao exibidos horizontalmente.. ® Mascrino O Feminine E possivel altarar o layout no qual os itens sao apresentados, especificando 0 atributo layout. Os valores possiveis para este atributo s40 pageDirection @ lineDirection (padrao). Veja um exemplo com o layout pageDirection O layout pageni rect ion exibe os itens na vertical: © Masculine © Feminine © componente h: selectBooleancheckbox © componente h:selectBooleancheckbox renderiza o elemento da HTM, input do tipo checkbox. Use este componente para definir opdes boleanas, onde © usuatio pode responder alguma pergunta em seu formulatio com *sim” ou "néo” © exemplo acima renderiza o seguinte trecho em HTML: Li © aceito os termos © condisecedil; cotilde;es fem:aceite" No managed bean, vocé deve criat um atribulo boleano para receber a opcdo do usuério. Se 0 campo for selecionado, o atributo receberd o valor true, caso contrério, recebera ovalor false. private boolean termoAceitos public boolean isTermoAceita() ( return termoAceito; ) public void setTermoaceito (boolean termoaceito) ( this.termoAceite = termoRceita; ) www algaworks.com + — softwares e treinamentos 86Apostila do curso de JavaServer Faces Aprenda muito mais com nosso treinamento presenci @algaworks Veja como fica o resultado no browser do ususrio, Lie aveito os termos e condigdes © componente h: selectManyCheckbox Este componente renderiza uma lista de campos de checagem (elemento input do tipo checkbox). O usuario pode selecionar nenhum, um ou varios itens. selectManyCheckbox id="assuntos" value=" {cadastroUsuariopean.assuntosinteresse|"> itemLabel="Arquitetura"/> itembabel="andlise"/> itemLabel="Gestdo de Projetos"/> /hiselectManyCheckbox> O fragmento de cédigo acima gera o seguinte HTML: Ermzassuntos:3"> Arquitetura frm:assuntos" id="frm:assuntos:4" value="5" type="checkbox" /> Angaacute;lise Gestaatildeso de Projetos

Java	frm:assuntos" id="Erm:assuntos:1" "checkbox" /> ssuntos:2" ssuntos" id="frr value="2" type="checkbox" /> UML

www algaworks.com + — softwares e treinamentos 7Apostila do curso de JavaServer Faces Conheca mais sobre noseos cursos Javaescum ©algaworks Os valores dos itens da selegao sdo numéricos € 0 usuario pode selecionar miitiplos elementos da lista, por isso criamos um atriouto no managed bean que é um array de inteiros, private Integer[] assuntosInteresse; public Integer{] getAssuntosInteresse() return agsuntosinteresse; ) public void setAssuntosinteresse(Integer[] assuntosinteresse) ( this.assuntosInteresse = assuntosIntecesse; ) Veja agora o resultado no navegador do usuario: Java 0 NET 1 UML FA Arqnitetura C1) Andise Gestio de Projetos E possivel alterar o layout no qual os itens so apresentados, especificando o atributo layout. Os valores possiveis para este atributo s40 pageDirection @ lineDirection (padrao). Veja um exemplo com o layout pageDirect ion "assuntos" layouts "pageDirection” ng ( cadast roUsuarioBean.ascuntosTnteresse|"> itemLabel="Java"/> itemLabe l=". NET"/> itemLabel="0mL"/> itembabel="arquitetura"/> ‘andlise"/> ="Gestdo de Projetos"/> ivemValue= khox> O layout pageDi rect ion exibe 0s itens na vertical: O Jara 0 wer O UML C0 Aruiietura D Andlise Ci Gestdo de Projetos Itens de selego Existem situagdes que precisamos que uma lista de itens seja obtida dinamicamente, para disporibilizar 20 usuario a selecdo em qualquer um dos componentes que vimos nos Ultimos topicos. 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 £:selectitems (no plural). Neste exemplo, criaremos uma lista de opgdes com nomes de cidades. Na pagina JSF, incluimos 0 componente h:selectoneti stbox cltems value="#|cadastroUsuarioBean.cidades}"/> www algaworks.com + — softwares e treinamentos 38Apostila do curso de JavaServer Faces Aprenda muito mais com nosso treinamento presenci @algaworks Especiticamos 0 atributo value da tag £:selectTtems referenciando a propriedade cidades do managed bean. A propriedade cidades € do tipo List, pois representa uma lista de itens de selecdo. Veja como ficou a declaragao dos atributos do managed bean, seus getters e setters ¢ a inicializacao da lista de itens no construtor. private Integer cidadeatal; private List cidades; public cadastroUsuariogean() ( this.cidades = new AcrayList(); //poderia buscar as cidades da banca de dados this.cidades.add(new SelectItem(1, "Uberlandia"))}: this.cidaces.add(new selectrtem(2, "Uberaba")); this.cidades.add (new SelectItem(3, "Belo Horizonte") ]; this.cidaces.add(new selectrtem(4, "340 Paulo"); this.cidades.add (new SelectItem(5, “Campinas")); this.cidaces.add(new SelectItem(é, "Sao José dos Campos"); this cidades add (new Selectrtem(7, "Rio de Janeiro"))}; this.cidaces.add (new SelectItem(8, "Goiania")); this.cidades.add(new selectrtem(9, "gorto Alegre"); ) publie Integer getCidadematal() ( return cidadellatal; ) public void setCidadeNatal (Integer cidaceNatal) ( thie.cidadewatal = cidadeNatal; } public List getCidades() | return cidases; ) public void setcidades(List cidades) { this.cidades = cidades; ) O construtor da classe select tem recebe como parametro o valor e © rétulo do item, por isso informamos um cédigo da cidade no primeiro parametro e o nome da cidade no segundo. ( resultado no browser 6 uma listagem com os itens gerados a partir da classe Java que representa o managed bean. Ubedancia, Uberaba Belo Horizonte > Campinas Bio José des Campos Pio de Jeneiro Goiénia www algaworks.com + — softwares e treinamentos 3Apostila do curso de JavaServer Faces Conheca mais sobre noseos cursos Javaescum ©algaworks 9.10. Botées e links Qualquer aplicagao web precisa de botdes e links para receber as acdes do usuario. Aprenderemos agora como trabalhar com eles em JSF, através dos componentes h:command@utton, h:commandLink € h:outputhink. © componente h: commandButton Este componente gera um elemento input da HTML do tipo submit, image ou reset, © atributo type pode ser especificado com submit (padréo) ou reset. Para botées tepresentados por imagens, basta informar o caminho no atributo image, que o tipo do elemento ¢ alterado automaticamente para image. Nos botées de comando, os atributos action ou. actiontistener podem ser especificados para agdes de navegacao ou referéncia a métodos de managed beans. Ja usamos e continuaremos usando estes atributos, porém vamos estudé-los melhor em outro capitulo. "reset" name “Limpar” /> em: Limpac" E o resultado visual é 0 sequinte: © componente h: commandl.ink © componente i: commandtink gera uma ancora em HTML (link) que funciona como ‘um botéo de submissdo de formulario, Veja alguns exemplos de uso. nbsp; enbsp; Para os links reagirem como um botéo, o framework JSF gera varios cédigos em JavaScript. Veja a saida em HTML de nosso titimo exemplo. cadastrar anbspj enbsp; Voltar ‘A execugao do tiltimo exemplo exibiré Cadastar lta © componente h: outputLink Os componentes h:commandButton € h:commandiink submetem requisigdes 20 servidor. Em determinadas situagdes, vocé pode precisar simplesmente de um link comum da HTML. Para este caso, existe o componente h: outputLink. Ihetp: //onaw.algaworks.com" target="_blank"> je value=" /imagens/logo_algaworks.gif" http: //twitter.com/algaworks"> O primeira exemplo é um link em uma imagem para o site da AlgaWorks ¢ 0 segundo tum link em um texto pata o Twitter da AlgaWorks. Veja a safda em HTML:
Twitter da Algatforks No browser, vooé vera: ®algaworks Twitter de AlgsWorks © componente h:outputLink facta a construgéo de URLs com parémetros (querystring). Os parémetros sao especificados usando a tag fundamental £:pacam. Veja um exemplo: outputLink target value www algaworks.com + — softwares e treinamentos otApostila do curso de JavaServer Faces Conheca mais sobre noseos cursos Javaescum ©algaworks <€:param name="grupo" value="Java"/> utLink> ‘Ao clicar no link gerado pelo cédigo acima, somos redirecionados para 0 enderego especificado, incluindo os parametros “codigo” e “grupo”. (© hitps/onn.algoworks.com/temamentostcodige=9 Ggrupo= lava 9.11,Painéis © framework JSF possui componentes que te ajudam a organizar seus layouts. O que oes faria para criar um formulério com rétulos ¢ campos, com um bom alinhamento? Sem aprender os componentes JSF para auxilio na construgdo de layouts, podemos escrever cédigos HTML manualmente, como 0 exemplo abaixo: ch:outputTest valu ig-madl:"/> Conseguimos fazer o que querlamos. Veja o que o usuario visualizaré no navegador. www algaworks.com + — softwares e treinamentos 92Apostila do curso de JavaServer Faces Aprenda muito mais com nosso treinamento presenci @algaworks Dados para cadastvo Nome E-mal Senhat Cadastrar Apesar de ter funcionado, escrever cédigos extensos em HTML é tedioso, por isso aprenderemos sobre o componente h: pane 1Grid, que pode nos auxiliar nisso. © componente h:panelcrid ‘© componente h:pane1Grid renderiza uma tabela da HTML. Ele funciona como um organizador de itens no layout da pagina, e pode acomodar qualquer componente JSF. © itimo exemplo poderia ser escrito da seguinte forma usando 0 componente spanelrid. "4 (cadastroUsuarioBean nome }"/> "g-mail:"/> # (cadastroUsuarioBean-email)" 40" maxlength="250"/> resultado final é 0 mesmo, porém nao precisa nem dizer 0 quanto é mais facil usar 0 componente h: pane 1Grid, certo? O atributo columns opsional, mas se voc nao especificar, 0 numero de colunas serd igual a 1. O renderizador do h: pane 16rid organiza os componentes “Tilhos” em colunas, da esquerda para a direita ¢ de cima para baixo. Cada componente que estiver dentro do h:panelceid seré acomodado em uma oélula da tabela. Quando precisamos pular uma Célula, podemos ineluir um componente sem valor algum ou que ndo gera informacées visuais, como toi. caso de . E possivel alterar a espessura da borda, o espacamento entre células, cores e varias outras coisas, da mesma forma que vooé também pode fazer com as tabelas HTML. Voce pode também especiticar o cabegalho e rodapé da tabela usando a tag ¢: face. Esta tag define um fragmento de cédigo que faz algum sentido para o componente. Por ‘exemplo, para definir 0 cabegalho do h:pane Grid, 0 nome do facet deve ser “header”, ¢ 0 Todape “footer”. Estes nomes esto programados dentro do componente h: pane 1Grid, € por isso ndo podem ser mudados. © componente h:panelGroup © componente h:panelGroup é um container que renderiza seus “filhos’. Este ‘componente deve ser usado especialmente em situagdes onde é desejado a inolusdo de varios www algaworks.com + — softwares e treinamentos 33Apostila do curso de JavaServer Faces Conheca mais sobre noseos cursos Javaescum ©algaworks componentes em um lugar onde apenas um é permitido, por exemplo, como uma tinica eélula do h:panelGrid Vamos demonstrar como fariamos para incluir uma imagem ao lado de um campo de entrada de texto usando h:panelGrid para organizar os componente. Antes, vamos tentar fazer isso sem 0 auxilio do h:panelGroup. Queremos colocar um {cone de ajuda ao lado do campo de nome do usu piimputText value="#(cadastroUsuarioBean.nome}"/> Si GragLataage valine /iectpmea eget: gtr/> sh:outputtext/> ‘cadastraz" value: actionnistener="$ (cadastroUsuarioBean.cadastrar}"/> ‘Além de nao funcionar, veja que o formulario ficou totalmente desconfigurado. O icone de ajuda tomou lugar de uma célula, que “empurrou” todas as outras para frente. Dados para cadastro Nome @ E-mail Sta: Coclostror Eis 0 componente h:pane1Group, que agrupa todos os seus filhos em um s6 lugar. chiinputvext value="#(cadastroUsuarioBean nome) "/> ch:autputText value="@-mai2:"/> ch:outputText value="senh: wow algaworks.com + softwares e treinamentos 4Apostila do curso de JavaServer Faces © al: igaw ork: s Aprenda muito mais com nosso treinamento presenci Agora o resultado ficou como esperamos, com 0 campo do nome € 0 icone de ajuda lado-a-lado, Dados para cadastra Nome: | j@ E-mail| Senta | 9.12, Mensagens Quaiquer aplicacao precisa tralar entradas do usuario, processé-las e exibir mensagens de sucesso, erros, adverténcias e etc. Estudaremos em outro capitulo sobre validagao e conversdo de dados, mas jé podemos trabalhar com todos os tipos mensagens, pois 0s managed beans possuem o "poder" de adicionar mensagens a uma flla, que em algum momento pode ser exibida na tela. Vamos alterar nosso itimo exemplo para adicionarmos restrigdes @ mensagens no método cadastrar(). Se 0 usuario informar um nome menor que 10 caracteres, entenderemos que ele nao foi informado completo, e por isso adicionaremos uma mensagem de erro solicitando a corregao ao usuario. Se o usuario tentar chamar 0 botdo “Cadastrar” no domingo (isso mesmo, se tentar usar o sistema no dia que era para estar descansando), também nao aceilaremos. Veja como fica o mélodo caciastrax () no managed bean. public void cadastrar (Actionzvent event) ( PacesContext context = PacesContest. getCurrent Instance); 4£ (thie.getnome() != null &@ this.getNome().length() < 10) { context -addMessage ("frm:nome", new FacesMessage (FacesMessage. SEVERITY ERROR, "ome incompleto!", "payor informar seu nome completo .")); , if (calendar. getrnstance() get (Calendar.nay_oF_weEx) == Calendar. SUNDAY) { contest. addMessage (null, new FacesMessage (FacesMessage. SEVERITY WARN, “pia da semana invalido!", “yooé no pode cadastrar usuarios no domingo."))7 ) Para incluir mensagens na fila, precisamos antes de tudo pegar uma instancia de Facescontext. Esta classe é responsdvel por manter as informagdes da requisigao atual Eacescontext context = Facescontext.getcurzentinstance(}; Quando a validagao do tamanho do nome falhar, precisamos incluir uma mensagem indicando que nome completo deve ser intormado. www algaworks.com + — softwares e treinamentos 35Apostila do curso de JavaServer Faces © al igawo rks Conhega mais sobre nossos cursos Java e Scrum context. addMessage("frm: nome", new FacesMessage [FacesMessage . SEVERITY _BRROR, “Nome incompleto!", neavor informar seu nome completo.")); Veja acima que chamamos 0 método addmessage () de Facescontext. O primeiro pardmetro deve ser informado com o ID gerado para o elemento HTML para o qual queremos anexar esta mensagem. Como neste caso a mensagem é referente 20 campo de nome, informamos ‘rm:nome”. que ¢ 0 ID gerado na saida HTML. Este parémetro poderia ficar nulo se a mensagem nao fosse direcionada a nenhum componente. © segundo parémetro recebe uma instancia de Facesmessage, que representa uma mensagem JSF. O primeiro parametro do construtor de Faceswessage recebe a severidade da mensagem, que pode ser saverrry FATAL (latal), SEVERITY ERROR (e170), SEVERITY_waan (adverténcia) e svER1TY_INFo (informagao). O segundo parametro recebe uma descrigdo resumida da mensagem e o terceiro uma descricao detalhada. Fizemos_a mesma coisa pata caso o dia da semana for domingo, porém néo informamos 0 ID de nenhum componente, pois esta validagao nao é referenie a nenhum campo da tela. context addMessage (mull, new FacesMessage (FacesMessage. SEVERITY WARN, "pia da semana invdlido!", "Vocé nao pode cadastrar usuarios no domingo.")); Como programamos a incluso de mensagens em uma fila do JSF, naturalmente iremos querer exibi-las na tela. Os componentes responsavels por exibit mensagens so himessages € himessage, que iremos estudar agora. © componente h:messages exibe todas as mensagens adicionadas na fila, @ himessage exibe uma Unica mensagem para um componente especificado no atributo for. Vejamos um exemplo. chroutpute "Dados para cadastro"/> value="nNeme:"'/> www algaworks.com + — softwares e treinamentos 96Apostila do curso de JavaServer Faces Aprenda muito mais com nosso treinamento presenci @algaworks "cadastzar" value="Cadastraz" “§ (cadastroUsuarioBean.cadastrar}"/> O resumo e a mensagem detalhada so exibidos agora. Nome incompletol Favor infermar seu nome ceraplete Dados para cadastro Nome | Joo [Favor informar seu nome completo. E-mail: joso@algawork: Senha: Cadastrar No domingo nao podemos usar este sistema, lembra? Veja 0 que acontece quando insistimos em usé-lo neste dia www algaworks.com + — softwares e treinamentos 7Apostila do curso de JavaServer Faces Conheca mais sobre noseos cursos Javaescum ©algaworks ‘Home incempleto! Eavor informer seu nome completo. ia da semana mvékdo! Voc€ nfs pode cadastrar usuarios no domingo. Dados para eadastro ome: dofoavor informar seu nome completo. Bimal jono@algworks. com Senha Cadestrar ‘As duas mensagens foram exibidas, porém a mensagem da restrigo do dia da semana apareceu apenas no topo, pois nao referenciamos nenhum componente com himessage. E se quiséssemos exibir no topo apenas as mensagens que no fazem referéncia a outros componentes, mas continuar exibindo as mensagens ao lado dos campos, para deixar a tela menos “poluida’ de erros? Simplesmente colocamos o atributo qicbalonly igual a “rue” na lag h:messages. Agora apenas a mensagem da restricao do dia da semana apareceu no topo, mas a mensagem de validacao do tamanho do nome continua aparacendo ao lado do campo. Tia da semana invita! Vor nao pode cadastcar umiécins ne domingo Dados para cadastro Nome: |Jo’o Favor informar seu nome complet. E-mail [joso@sigsworks.com Senha Cadosvor www algaworks.com + — softwares e treinamentos 98Apostila do curso de JavaServer Faces © al igawo rks Aprenda muito mais com nosso treinamento presenci 10. Tabela de dados 10.1.0 componente h: dataTable © componente h:dataTable gera uma tabela HTML que pode ser associada a um managed bean para obter dados dinamicamente. Nosso exemplo serd de uma labela de dados de clientes. Para isso, precisamos antes preparar o projeto com algumas classes e configuragdes. Primeiramente, criamos um JavaBean 1 iente para amazenar os dados de olientes. public clase Cliente { private Integer codigo; private String none; private String cidade; public Cliente(Integer codigo, String nome, string cidade) ( super (); this.codige = codigo; thie nome = nome; this.cidade = cidade; ) public Integer getcodigo() | return codig) , public void setcodigo (Integer codigo) { this.codigo = codigos ) public String getNome() { return nome; ) Public void setNome (String nome) { ‘this nome = nome; , public string getcidade() [ return cidade; , public void setCidade (string cidade) { this.cidade = cidade; ’ ) Agora criamos o managed bean consultaClicnteBean. Esta classe tem um atriouto chamado clientes para aimazenar a lista de clientes que devem aparecer na tabela ¢ um método consultar () que popula a lista de clientes com dados informados manualmente. public class Consultaclientesean ( private List clientes = new ArvayList(); public void consultar (ActionEvent event) { this getclientes() .clear( this.getClientes() .add (new Cliente (1, "Jodo da Silva", "Uberlandia")); this.getClientes() .add (new Cliente (2, www algaworks.com + — softwares e treinamentos cyApostila do curso de JavaServer Faces Conheca mais sobre noseos cursos Javaescum ©algaworks "Manoel Souza", "Uberaba")); this.getclientes() .add(new cliente (3, “Cristina Melo", "Sao Paulo") ); this.getclientes().add(new cliente (é, "sebastifo Cardoso", "Belo Horizonte"); this.getClientes() .add(new Cliente (7, “Francisco Borges", "Uberlandia")); this getClientes() .add (new Cliente (10, "guliano Messias", “Rio de Janeiro")); this.getClientes() .add(new Cliente (11, "Maria Helena", "Uberlandia")); ’ public List getclientes() { return this.clientes; , H Configuramos 0 managed bean no arquivo “Taces-config.xm\”. consul taGlienteBean com. algaworks dw} sf.visao.ConsultaclienteBean session Veja agora a forma de usar o componente h:datavable. Quando 0 componente :dataTable ¢ executado, cada item da lista, referenciada através do atributo vai.ue, fica disponivel dentro do corpo da tag. O nome de cada item da lista 6 definido com 0 atributo vac, possibilitando 0 acesso dentro das colunas. No corpo da tag h: = "header "> <£:facet names "header"> utputText valu # item. nome}"/> “header "> ‘ A tag £:tacet suporta apenas um componente dentro dela. Se voc tentar incluir mais de um, apenas primeiro sera considerado, eo restante ignorado. Quando ha a necessidade de incluir mais de um componente no cabegalho, como por exemplo, um texto € uma imagem, deve-se englobar estes componentes dentro de um container, como o h:pane1Group. Fizemos isso no cédigo acima para a coluna *Cédigo”. Veja o resultado. wwwalgaworks.com + softwares e treinamentos 107Apostila do curso de JavaServer Faces Conheca mais sobre noseos cursos Javaescum ©algaworks ‘Nome Cidade [Todo de Siivz | Therdindia [Manoel Souza [Uberaba |Cnstina Melo |S4o Paulo [Sebastiao Cardoso [Belo Horizonte [Francisco Borges [Therlindia [Fulians Messias [Rio de Janzivo 11 [Maria Helena [Tberiinclis 10.3. Componentes dentro de células Voce no é obrigado a colocar apenas textos dentro das tabelas de dados! Se precisar, 6 possivel usar qualquer componente JSF nas colunas de tabelas. Veja um exemplo que usa diversos componentes dentro das colunes. rfacet name="header"> cbink> name="header"> cpuText value="cidade"/> :facet> jataTab: Neste exemplo, colocamos um campo de entrada na coluna “Cédigo", um link para a pesquisa no Googie sobre o nome do cliente e uma imagem da bandeira de Uberiandia, que renderizada apenas se for esta a cidade. wwwalgaworks.com + softwares e treinamentos 102Apostila do curso de JavaServer Faces Aprenda muito mais com nosse treinamento presencial ©) algaworks Consultar Cidade (Ubertindia Teeraba ps [Cristina Melo [S40 Paulo [5 | [Scbastiio Cardoso [Belo Horizonte [7 | [Eeancisco Borges [Uberléndia B& jo fiutiano Mesias [Rso de Janeiro 1 [MariaZelena —|Uberléndia EE) 10.4. Aplicando estilos a tabela Apenas para mostrar que é possivel deixar os sistemas desenvolvidos em JSF mais bonitos, iremos alterar 0 e6digo do iltimo exemplo e incluir estilos CSS na tabela. Primeiro, criamos um arquivo CSS com o seguinte conteddo: tabela { font-family: Arial; font-size: 1opt; alho ( text-align: centers colar: whit background: blue; ) -linhal { background: #c9caco; ) linha2 { background: white; ) ‘Agora alteramos o arquivo JSP para incluir as classes do CSS. panelsroup> chioutputPext value="cSdigo"/> wwwalgaworks.com + softwares e treinamentos 103Apostila do curso de JavaServer Faces Conheca mais sobre noseos cursos Javaescum ©algaworks nttp://mow.google yutputText value="f{ item. nome) "/> acLink> value="#{item.cidade) "/ image valu /imagens /bande: “4_uberlandia Wlitem.cidade eq 'Uberlandia')"/> Especificamos os atribulos styleclacs, headerclass @ rowClasses para incluir uma classe de CSS para a tabela, para o cabecalho e para as linhas da tabela, respectivamente. No atribulo rowc1asses, colocamos nomes de duas classes CSS separados por virgula. Quando fazemos isso, queremos dizer que as linhas da tabela devem intercalar as classes CSS a serem usadas enire as especificadas, dando o efeito, neste caso, de “cor sim cor nao” oaoua Sia Ubetindia BS Manoel Sa Uberaba ‘Chistian Ste Pave Setestiéa Cardoso Bele Horzorto “Franwiece Bowes Ubedndia EE Juliana beasts Rio de Janeio aria Helena Uberténdia ES wwwalgaworks.com + softwares e treinamentos 704Apostila do curso de JavaServer Faces Aprenda muito mais com nosso treinamento presenci @algaworks 11. Internacionalizagio 11.1.Usando message bundles 0 JSF possui um mecanismo de mensagens que permite que vocé deixe sua aplicagdio intemacionalizada, ou seja, com varios idiomas. A intemacionalizagdo, também conhecida por 118n, funciona através de arquivos de propriedades que possuem as mensagens do sistema, chamado de message bundle. Antes de criar um exemplo. para funcionar com varios idiomas, itemos apenas centralizar as mensagens em um Unico lugar, no message bundle (pacote de mensagens). Iremos alterar nasso titimo exemplo da tela de consulta de clientes. Criamos um arquivo chamado —“messages.properties” no _pacote “com.algaworks.dwjst.recursos” com o seguinte conteuido: search=consultar codeacidigo name=Nome Cada linha deste arquivo possui pares de chaves e descrigées, onde as chaves sto usadas apenas como referéncia para quando precisarmos resgalar as descrigdes. Incluimos a tag £:1oadsundie na pagina JSF para carregar o pacote de mensagens que criamos e apelidamos como “msgs”, através do atributo var <£:loadBundle basename="com.algaworks.dwisf. recurses.messages" var="msgs" /> Agora, quando precisarmos de uma descrigéo para incluir a pagina, usamos uma expresso de ligagéio de valor para acessar essa descricao alravés da chave no pacote de mensagens, como por exemplo: Vamos ver como ficou 0 cédigo completo da pagina JSF, agora usando 0 message bundle. d{msgs. search)” actionListener="#{consultaClienteBean.consultar)" /> '#(consultaclientepean.clientes}" "€(not empty consultaclientexean.clientes}" styleClass="tabela” headerClass="cabecalho” rowClasses="Linhal, linha2" width="708"> nane="header"> heep: //ww. go tt name="header"> co value="#[item.cidade) "/> ‘Agora vocé pode executar a tela novamente e verd o mesmo resultado. Visualmente o usuério nao percebe que a aplicagao esta buscando os textos de um arquivo de propriedades. Uber Uoaaba BiaPaik ok Herska Voor Vooiindia 11.2. Pacotes de mensagens para outras localidades Se vocé desenvolver suas aplicagSes usando message bundle, quando surgir a necessidade de interacionalizé-las, bastard vocé criar arquivos de mensagens localizados, ou seja, para um idiomaregiao especifico, Vamos agora disponibilizar nosso exemplo em inglés. Precisamos criar um arquivo de propriedades com as descriges na lingua inglesa. O nome do arquivo, neste caso, sera “messages_en properties, e tera o seguinte contetido: Perceba que fornecemos as descrigdes para todas as chaves que usamos. (© nome do arquivo possul o sufixo “en”, indicando que é um pacote de mensagens em inglés (english). Este sufixo ¢ um cédigo da lingua na norma ISO-639. Poderiamos ter criado um arquivo chamado “messages_en_US.propetties", indicando set um arquivo em inglés (english) dos Estados Unidos (US), mas se fizéssemos isso, este pacote seria restrito apenas a esta localidade, e outros paises que também falam este idioma www algaworks.com + — softwares e treinamentos 106Apostila do curso de JavaServer Faces Aprenda muito mais com nosse treinamento presencial ©) algaworks no iriam ler os textos em inglés, a ndo ser que criéssemos outros pacotes de mensagens para isso. Precisamos dizer ao framework JSF quais so as localidades suportadas e qual é a padréo. Para isso, incluimos 0 seguinte codigo de configuracao no arquivo “taces-config xml Quando 0 browser se comunica com aplicagées web, normaimente ele inclui uma Informacéo chamada “Accept-Language” no cabecalho HTTP, que diz qual é o Idioma preferido do usuério. O JSF usa essa informagdo para encontrar a melhor localizagéio suporlada pela aplicagéo. Para testar nossa aplicagao internacionalizada, alteramos a preferénoia de idiomas no navegador para priorizar a localizacao “en-US”. Teas) Pagnas web sto acasonalnente dsponibtizadas em mais de lumidiome, Selecione an que idiomas deveie exis, Idiomas (na crdem de referSnce}: Peruguts/aved [pt oe] Peruauss [at] Inglés [er] |seecor un dane pu doa Recatregamos a pagina e os textos so apresentados em inglés, pois 0 pacote de mensagens deste idioma foi selecionado, Sabasita Cause Sob Hanae z anak ge ietioda uo suuaeaessas Pose lam i emis (wai wwwalgaworks.com + softwares e treinamentos 107Apostila do curso de JavaServer Faces Conheca mais sobre noseos cursos Javaescum ©algaworks 12. Conversao e validagao 12.1.Introdugao Estudaremos neste capitulo como os dados informados pelos usudrios sao convertidos para objetos Java © como é feita a validagdo desses objetos convertides com JavaServer Faces, Para entender como funciona o processo de converso e validacao, precisamos nos lembrar do ciclo de vida do JSF. Requisiego > Restaurar visto ‘Aplicar valores: a requisir3o_ Processar validagbes Atuallzar os valores 40 modelo, Invocar a aplieagao Rendetizar a resposta Resposta « Quando 0 usuario preenche um campo em um formulétio € 0 submete, a informagao digitada chega ao servidor e & chamada de ‘valor de requisi¢ao” (request value). Na fase “Aplicar valores de requisicao” do ciclo de vida, os valores de requisicao séo anexados em objelos de componentes e chamados de “valor submetido” (submitted value). Cada componente da pagina possui um objeto correspondente na memeéria do servidor, que armazena 0 valor submetido. Os valores de requisi¢ao so do tipo String, pois 0 navegador envia o que o usuario informa como texto. Nao existe outto tipo de dado para esta comunicagao entre o navegador € © servidor. No cédigo Java, precisamos lidar com tipos especificos, como um inteiro (inf), um ponto-flutuante (double ou float), uma data (Date), etc, Existe entéo um processo de conversao que € executado pelo framework que converte os dados do tipo String para seus tipos especificos ainda na fase “Aplicar valores da requisi¢ao”. Essa conversdo ocorre de acordo com configuragdes que podemos fazer nos componentes. Os valores convertides nao sao atribuidos aos beans, mas apenas anexados aos objetos que representam os componentes e chamados de ‘Valores locais” (local values). Neste momento, os objetos dos componentes possuem os valores submetidos em forma de texto e os valores locais ja convertidos para o tipo especifico. © proximo passo no ciclo de vida ¢ executar a fase "Processar validacées". Nesta etapa, entram em ago os validadores, que inspecionam os valores locais anexados aos components e os validam de acordo com o que desejamos. Estudaremos ainda neste capitulo ‘como definir validadores de diferentes tipos, inclusive como criar o nosso préprio validador. ‘ecugao da fase “Atualizar os valores do modelo”, que afribul os valores locais jé validados aos beans. Nesta fase ja € seguro fazer isso, pois a entrada fornecida pelo usuario esté correta, pois jé foi convertida e validada Durante 0 processo de conversao e validagdo, se ocorrer eros ou inconsisténcias, a pagina ¢ reexibida para que o usuario tenha a chance de corrigir 0 problema. Os valores locais 80 atualizados no modelo (nos beans) apenas se todas as conversoes e validagdes forem bem sucedidas. wwwalgaworks.com + softwares e treinamentos 108Apostila do curso de JavaServer Faces Aprenda muito mais com nosse treinamento presencial ©) algaworks Data de nascimento: |13/09/1981 Valor da requisicdo & pasado para valor submetide na components Ulinput (War subrnetide « 1309/1981" _p alos local = objeto Date Converséo ‘Valor local 6 atbuide a0 bean, apie conversao e vallepso Bean (dataNascimento = objets Date Se | 12.2. Conversores padrao de nimeros e datas Converséo € 0 processo que garante que os dados digitados pelos usuarios se transformem em um tipo especitico. SF fornece varios conversores prontos para serem usados. Todos os tipos primitivos, além de BigTnteger @ BigDecimal, Usam conversores padréo do JSF automaticamente. Por exemplo, se vocé colocar um h:input'Teset referenciando um atributo do tipo double de um bean, o valor digitado pelo usuério seré automaticamente convertido para o tipo double para ser atribuido ao bean. public class PedidoBean | private double valorunitario; Para os tipos que néo possuem um conversor padrao e também para os que ja possuem, vocé pode especificar um conversor explcitamente, informando opgdes de conversao. Para testar, criaremios uma tela simples para emissao de pedido, onde o usuario deverd digitar 0 cédigo do produto, a quantidade de itens, o valor unitario do produto, o nimero do cartéo de crédito © @ data do pedido, Ao cllcar no botéo “Enviar’, uma tela de resumo do pedido serd exibida, calculando o valor total do pedico baseado na quantidade de itens e valor unitario. Criamos uma classe chamada PedidoBean e incluimos 08 atributos e métodos getters © setters. Package com. algaworks .dwjsf.visao; import java.util.Date; public class PedidoBean [ www algaworks.com + — softwares e treinamentos 108Apostila do curso de JavaServer Faces Conheca mais sobre noseos cursos Javaescum ©algaworks private int codigoProduto; private short quantidade; Private double valocUnitario; private String cartaccredito; private Date dataPedido; public int getcodigoProduto() return codigoProdutoy ’ public void setCodigoProduto (int codigoProdute) | this.codigoProduto = codigeProduto: ’ public short getQuantidade() { return quantidade; ) public void setQuantidade (short quantidade) | thie.quantidade = quantidade; , public double getvalortmitario() { return valorUnitario; , public void setValocUnitario(double valorUnitario) { this.valorUnitario = valorUnitario; ) Public String getCartaccredito() { return cartaccredito; ) public void setCartaccredito (string cartaccredito) | this.cartaocredito = cartaocredita; , public Date gerDataPedide() | return dataPedido; , public void setDataPedido (Date dataPedido) ( this.dataPedido = dataPedidos 1 ) Registramos a classe Fedidonean como um managed bean e incluimos uma regra de navegagao para a visao “resumoPedido jsp” no arquivo “faces-config.xmI” ed-bean-name>pedidoBeans/managed-bean-name> com.algaworks -dwjsf.visao.PedidoBean request cope> enviarPedido /resumoPedido .j sp wwwalgaworks.com + softwares e treinamentos 110Apostila do curso de JavaServer Faces Aprenda muito mais com nosso treinamento presenci Oalgaworks Agora criamos a pagina com o formulrio para emissao de pedidos: <8@ taglib preti: <8@ taglib prefix "f" uris"http: //java.sun.com/jsf/core"s> http: //Java. sun. com/jst/ntml"4> cb:outputtext value="Data do pedido:"/> vane 1Group> wwwalgaworks.com + softwares e treinamentos WWApostila do curso de JavaServer Faces Conheca mais sobre noseos cursos Javaescum ©algaworks Nao especificamos nenhum conversor para 0 campo de cédigo do produto, pois sera configurado automaticamente um conversor de inteitos. O mesmo acontece para o campo de quantidade, porém neste caso, um conversor de nlimeros short sera incluido automaticamente. Para 0 campo de valor unitatio, vinculamos um conversor numérico ¢ dizemos para formatar 0 valor com no minimo 2 casas decimais. Veja que para especificar o conversor numérico, usamos a tag f :convert umber. <€:convertNumber minFractionDigits="2"/> (O campo do niimero do cartio de crédito nao possui um conversor, pois 0 tipo de dado 6 String. © campo de data do pedido usa um conversor de data*hora. Especificamos o atributo pattern para definir 0 formato da data que 0 usuario devera digitar. Os possiveis pattems podem ser estudados na documentagao da classe java.text .SimplepateFornat. Para exibir as mensagens de erro de conversao (caso 0 usuario digite alguma informacao incoerente), incluimos em varios pontos da tela a tag in:mesage, vinculando com ‘campos do formulatio. Criamos a pagina de resumo do pedido, que serd usada apenas para exibir os dados digitados pelo usuario, com o valor total do pedido calculado. uris"attp://java. sun. com/3s£/ntmi"3> wwwalgaworks.com + softwares e treinamentos TeApostila do curso de JavaServer Faces Aprenda muito mais com nosso treinamento presenci Oalgaworks ‘Quantidade: "g(pedidopean.quantidade)"/> utputrext value="Vvalor unitério:"/> utputvext value="¥ (pedidoBean.valorunitario)"> <£:convertNumber type="currency” currencyCode="BRE"/> utputvext value="Valor total:"/> utputText value="¥(pedidoBean.valorunitario * pedidoBean .quantidade}"> utput Text Data do pedido © cédigo do produto, a quantidade e 0 niimeto do cartéo de crédito sao exibidos normalmente, sem nenhum conversor. #( pedidoBean .quantidade) "/> © valor unitétio e valor total sao exibidos usando um formatador de moeda. Para isso, incluimos 0 atributo type igual a currency @ 0 currencyCode igual a SRL. O cédigo “BRL” é uma representacao da moeda brasileira de acordo com 0 padrao internacional ISO 4217, que define cédigos de moedas, valor unitdrio:"/> #( pedidoBean .valorUnitario)" type="currency" currencycod wwwalgaworks.com + softwares e treinamentos 113Apostila do curso de JavaServer Faces Conheca mais sobre noseos cursos Javaescum ©algaworks A data do pedido especificada com o conversor de datahora, usando um padrao diferente do usado para entrada da informagao pelo usuério. Este padrao exibe a data com 0 més por extenso. ‘Data do pedido: "/> gime pattern="dd, Mem yyyy"/> Para testar, executamos a pagina “pedido jsp" e preenchemos todos os campos. Erramos no preenchimento do campo de quantidade e data do pedido de propésito, para vermos as mensagens de erro’ Informacées sobr o pedido: (Céd, do produ: [08 Quanidace: rita epeuso Sterquantdede: ‘inna » pouse! uct he s mater consining of ane or were dite. Valor itirio (TR Carlie de erélto, SONI4344N91TEZ2 Dainde pestis. [Z0a32000 | midatPesido 20.09-2009 endnote vadentood a ade Agora pr nchemos corretamente @ clicamos no botéo “Enviar”. Informacées sobre o pedido: (Céd. do peodhto: 33 Quamidade 8 Valor wntirio TR Casto de crédito: S03834344493371222 | Disa do pedide. 20/2003 A pagina “tesumoPedido,jsp" ¢ exibida, Vela que os conversores entraram em acéo para formatar 0s valores monelarios e a dala. Informacées sobre o pedido: Cd do produto. 89 Quamtiade 8 ‘Valor mibirio: -RE1BAE Valortota RS 147,48 Canto de erétio: 5033343444333 1202 Data de pedido: 211, Setembro 2009 12.3, Alternativas para definir conversores Vooé pode especificar um conversor explicitamente em um componente adicionando 0 atributo converter na tag do componente, informando um ID do conversor como valor para este atributo. Por exemplo’ wwwalgaworks.com + softwares e treinamentos 14Apostila do curso de JavaServer Faces Aprenda muito mais com nosso treinamento presenci @algaworks utText value="#(pedidoBean.codigoProduto)" converter="javax. faces. Integer"/> O framework USF jé possui alguns IDs de conversores pré-definidos, como: + javax. faces .uumber + javax. faces.Bo0lean + javax.faces.syte + javax. faces. Character ©) javax. faces nouble + javax.faces.Ploat * javax. faces. Integer + javax.faces-Long © javax.taces.short © javax.taces.sigvecimal © javax. faces. BigInteger © javax. faces .nateTime Outra forma de explictar um conversor em um componente é usando a tag trconverter, especificando o ID do conversor no atribulo converterid. 12.4. Customizando mensagens de erro de conversdo Vocé pode precisar customizar as mensagens de ertos, pois as que véem no framework sao razoavelmente feias. Estudaremos agora como mudar estas mensagens para nosso idioma. Primeiramente iremos customizar as mensagens de erro de converséo de campos do tipo de data. Para comecar, criamos um arquivo de messages bundle € incluimos 0 seguinte contetido dentro dele: Javax. faces.converter.pateTimeConverter.DATE=Data invslida javax.faces.converter.DateTimeConverter -DATE_detai, campo '(2)"" n&o foi informado com uma data valida. Este arquivo foi colocado dentro do pacote com. algaworks .dw) =f recursos, com ‘© nome “messages properties”. Customizamos. as mensagens de erro de resumo e delalhe para converséo de datavhora. Incluimos 0 sequinte cédigo no arquive “faces-configxmt", para que este messages bunale seja carregado pela aplicagao. com. algaworks -dwjsf.cecursos.messages

Вам также может понравиться

• Educação Fora Da Caixa

  

  Документ324 страницы

  Educação Fora Da Caixa

  fkbs04

  100% (2)
• Exercícios Excel PDF

  

  Документ7 страниц

  Exercícios Excel PDF

  fkbs04

  0% (1)
• Modelo Relacional

  

  Документ18 страниц

  Modelo Relacional

  fkbs04

  Оценок пока нет
• • Журналы
  • Подкасты
  • Нотное издание
• Apostila Completa de Linux PDF

  

  Документ221 страница

  Apostila Completa de Linux PDF

  Luciano Domingues

  Оценок пока нет
• Apostila de Matemática - Ens Fund - Caderno 03 Proporção

  

  Документ48 страниц

  Apostila de Matemática - Ens Fund - Caderno 03 Proporção

  Matemática Mathclassy

  100% (3)
• CP Didatica

  

  Документ58 страниц

  CP Didatica

  fkbs04

  Оценок пока нет
• Mer - Estendido

  

  Документ14 страниц

  Mer - Estendido

  fkbs04

  Оценок пока нет
• University of Chicago Press Fall 2010

  

  От Everand

  University of Chicago Press Fall 2010

  UChicagoPress

  Рейтинг: 5 из 5 звезд

  5/5 (1)
• UChicagoPress Fall 2011 New Books

  

  От Everand

  UChicagoPress Fall 2011 New Books

  UChicagoPress

  Оценок пока нет
• University of Chicago Press Spring 2011

  

  От Everand

  University of Chicago Press Spring 2011

  UChicagoPress

  Оценок пока нет