Código Logístico
I000018
Fundação Biblioteca Nacional ISBN 978-65-5821-025-2
9 7 8 6 5 5 8 2 1 0 2 5 2
Labor at ório de Pr ogr amaç ão I W agner Mendes V ol tz
Laboratório de Programação II
Wagner Mendes Voltz
IESDE BRASIL
2021
Todos os direitos reservados.
IESDE BRASIL S/A.
Al. Dr. Carlos de Carvalho, 1.482. CEP: 80730-200 Batel – Curitiba – PR
0800 708 88 88 – www.iesde.com.br
© 2021 – IESDE BRASIL S/A.
É proibida a reprodução, mesmo parcial, por qualquer processo, sem autorização por escrito do autor e do detentor dos direitos autorais.
Projeto de capa: IESDE BRASIL S/A. Imagem da capa: Shemul/envato elements
CIP-BRASIL. CATALOGAÇÃO NA PUBLICAÇÃO SINDICATO NACIONAL DOS EDITORES DE LIVROS, RJ V899L
Voltz, Wagner Mendes
Laboratório de programação II / Wagner Mendes Voltz. - 1. ed. - Curi- tiba [PR] : Iesde, 2021.
106 p. : il.
Inclui bibliografia ISBN 978-65-5821-025-2
1. Java (Linguagem de programação de computador). 2. Programação de sistemas (Computação). 3. Linguagem de programação (Computadores).
I. Título.
21-70716 CDD: 005.4
CDU: 004.45
Wagner Mendes Voltz Especialista em Administração com ênfase em Gestão da Tecnologia da Informação pela Faculdade de Administração e Economia (FAE). Graduado em Tecnologia em Informática pela Universidade Federal do Paraná (UFPR). Atua como professor desde 2012 e como analista de sistemas desde 2005. Tem experiência na área de ciência da computação com ênfase em metodologia e técnicas de computação.
Ministra as disciplinas de Programação Orientada
a Objetos, Desenvolvimento em Java com Testes
Unitários, Desenvolvimento em Java Web, Padrões de
Projeto, Desenvolvimento em Android, Qualidade de
Código-Fonte, Metodologias Ágeis, Gestão da Qualidade
em Projetos e Sistemas Operacionais.
Agora é possível acessar os vídeos do livro por meio de QR codes (códigos de barras) presentes no início de cada seção de capítulo.
Acesse os vídeos automaticamente, direcionando a câmera fotográfica de seu smartphone ou tablet para o QR code.
Em alguns dispositivos é necessário ter instalado um leitor de QR code, que pode ser adquirido gratuitamente em lojas de aplicativos.
Vídeos
em QR code!
SUMÁRIO
1 Introdução a Java Web 9 1.1 Java Web 9 1.2 Maven 14
1.3 Servidores Web 20 2 Criando páginas web com Java 30
2.1 JSF e configuração 30 2.2 Primeira tela com JSF 37 2.3 Outros componentes em JSF 44 3 Criando páginas avançadas com Java 47
3.1 Listando dados com JSF 47
3.2 Inserindo, atualizando e removendo dados com JSF 58 3.3 Utilizando Scope 68
4 Arquitetura e persistência de dados com Java 71 4.1 Modelo MVC 71
4.2 Mapeamento objeto-relacional (ORM) 74 4.3 Hibernate e JPA 76
4.4 Configurando Hibernate e JPA 78 5 Anotações do JPA e injeção de dependência 83
5.1 Anotações do Hibernate e JPA 83 5.2 Gerenciando conexões 90
5.3 Utilizando injeção de dependência com Spring 93
Gabarito 103 Referências 106 Agora é possível acessar os vídeos do livro por
meio de QR codes (códigos de barras) presentes no início de cada seção de capítulo.
Acesse os vídeos automaticamente, direcionando a câmera fotográfica de seu smartphone ou tablet para o QR code.
Em alguns dispositivos é necessário ter instalado um leitor de QR code, que pode ser adquirido gratuitamente em lojas de aplicativos.
Vídeos
em QR code!
Prezado aluno,
Este livro foi elaborado visando gerar uma experiência prática por meio da construção de um software na linguagem de programação Java que possa ser acessível de qualquer navegador web e dispositivo móvel.
Para que essa jornada seja a mais completa possível, apresentaremos os conceitos de Java Enterprise Edition (Java EE ou JEE) e usaremos as principais bibliotecas para termos um software Java Web. Todas as conceituações terão um bloco de código-fonte, o qual será nosso aliado durante toda a leitura da obra. Para facilitar o entendimento do código-fonte, ele estará à disposição no livro, podendo ser validado na plataforma GitHub.
No primeiro capítulo, aprenderemos os conceitos das aplicações Java Web e como elas são diferentes das aplicações Java Desktop. Além disso, conheceremos mais a respeito do gerenciador de dependências Maven e do contêiner Apache Tomcat. Ambas as ferramentas são essenciais para termos um sistema web utilizando Java.
Na sequência, no segundo capítulo, mergulharemos na criação de sistemas web e de páginas web que funcionarão em qualquer navegador, independentemente de o usuário estar usando um tablet, um celular ou um notebook. Para isso, usaremos o JSF e o Bootstrap. Esses conceitos ficarão mais avançados no terceiro capítulo, quando criaremos telas que realizarão a inclusão, remoção, listagem e edição de dados cadastrados pelo usuário.
No quarto e quinto capítulos, vincularemos o software web a um banco de dados, permitindo que o usuário não perca os dados cadastrados durante o uso. Para isso, usaremos a biblioteca JPA e o Hibernate.
Durante toda a leitura, você encontrará diversos códigos-fonte e suas respectivas explicações. Não tenha receio de copiá-los, mas tente entender o que cada bloco ou palavra reservada
APRESENTAÇÃO
Vídeo
faz. Se você somente reproduzir o código sem entendê-lo, prejudicará a sua capacidade de interpretá-lo com qualidade.
Após a leitura, esperamos que você consiga criar programas Java que serão acessados na web e que usarão banco de dados. E aí, animado para essa aventura?
Bons estudos!
Introdução a Java Web
9
1
Introdução a Java Web
No mundo globalizado em que vivemos, interligado por redes de dados, em especial pela internet, é até difícil imaginar algum software que não as utilize. Diariamente, fazemos o uso de diver- sos sites para realizar as atividades rotineiras, em vez de instalar- mos um programa específico em nossos computadores. O maior uso de softwares na internet é o foco do nosso estudo.
Neste capítulo, conheceremos as diferenças entre a criação de softwares utilizando Java e a criação de software utilizando Java Web. Além disso, criaremos nosso primeiro software, que será acessado via navegador web. Prepare-se para desenvolver solu- ções ricas e interativas na internet com Java Web.
1.1 Java Web
Vídeo A linguagem de programação Java é muito completa e por isso é complexo o entendimento de suas diversas características e siglas.
Dentre as diversas siglas, encontramos JSE, JEE e JME, que represen- tam as plataformas de desenvolvimento suportadas pela linguagem.
A seguir, detalharemos cada uma delas.
• JSE – Java Standard Edition:
• Contém os recursos básicos da linguagem Java, que incluem os pacotes java.lang, java.io, java.util, entre outros.
• Normalmente, começamos a aprender Java utilizando JSE.
• Costuma ser utilizado para a criação de softwares que serão
instalados ou executados em computadores pessoais e não
acessarão a internet nem utilizarão base de dados.
• JEE – Java Enterprise Edition:
• Utilizado para o desenvolvimento de aplicações corporativas com recursos mais complexos, como persistência em banco de dados, transação de dados, web services, gerenciamento de threads, gerenciamento de conexões HTTP e gerenciamento da sessão web.
• Composto de JSE e um conjunto de protocolos, também chamados de APIs. Estes permitem o desenvolvimento de aplicativos Java utilizando web, banco de dados, segurança nas transações e outras funcionalidades. Com JEE, o desenvolvimento de um aplicativo fica simplificado, pois será possível reaproveitar módulos e componentes já definidos na plataforma de desenvolvimento.
• JME – Java Micro Edition:
• Versão enxuta do JSE para ser utilizada em dispositivos com baixo poder de processamento ou sistemas embarcados.
• Não possui interface gráfica de interação.
• Encontrado em smart TVs, aparelhos de DVD, SIM cards (utilizados em smartphones e celulares), entre outros.
Antigamente, o número 2 era utilizado nessas siglas, mas esse pa- drão entrou em desuso. Caso você encontre, em suas pesquisas, algo como J2SE, J2EE ou J2ME, saiba que se trata do mesmo conteúdo que estamos estudando. Em 2020, o projeto JEE, que começará a se chamar JakartaEE, foi cedido pela Oracle para a Fundação Eclipse. No momento, seguiremos com a convenção mais utilizada: JEE.
Um detalhe importante é não confundir essas siglas com JRE, JDK e JVM, que se referem ao conjunto básico para executar um programa Java (JRE e JVM) ou, então, para criar programas em Java (JDK).
Como focaremos no desenvolvimento de soluções para a web, va-
mos nos aprofundar no JEE, uma plataforma de desenvolvimento que
visa permitir aplicativos seguros, escaláveis e altamente disponíveis
(BOND, 2003). Ela define quais serviços deverão ser fornecidos pelos
softwares chamados servidores de aplicação, os quais são instalados
em computadores do tipo servidor e permitem que qualquer pessoa
acesse o programa desenvolvido em Java, por meio de um endereço na
web. A seguir, listaremos os nomes de alguns servidores de aplicação.
Introdução a Java Web
11
• Apache TomEE
• Oracle WebLogic
• IBM WebSphere
• WildFly (antigo RedHat JBoss)
• Apache Geronimo
• Oracle GlassFish
É erro comum achar que um servidor de aplicação é o mesmo que um contêiner. Este contém algumas especificações de JEE, já o servidor de aplicação contém todas as especificações, mas separadas por contêine- res. O contêiner mais conhecido (e que usaremos em nossos estudos) é o Apache Tomcat, considerado um servlet container, pois ele lida somente com as especificações necessárias para o desenvolvimento na web.
Agora, listaremos os serviços definidos no JEE. São eles:
• Para trabalhar na web:
• Costumam ser chamados servlets.
• Java Server Faces (JSF).
• Java Server Pages (JSP).
• Java Servlets.
• Para acessar e persistir dados em banco de dados:
• Java Database Connectivity (JDBC).
• Java Persistence API (JPA).
• Para o desenvolvimento de componentes de software:
• Enterprise Java Beans (EJB).
• Para trabalhar com arquivos XML e webservices:
• Java API for XML Web Services (JAX-WS).
• Java API for XML Binding (JAX-B).
• Para trabalhar com autenticação e segurança de dados:
• Java Authentication and Authorization Service (JAAS).
• Para controle de transação no contêiner:
• Java Transaction API (JTA).
• Para comunicação entre aplicações de maneira assíncrona, com o uso de mensagens ou e-mail:
• Java Message Service (JMS).
• Para acessar diretórios:
• Java Naming and Directory Interface (JNDI).
• Para administração da aplicação e estatística:
• Java Management Extensions (JMX).
• Para integração entre servidores e sistemas legados
• Java Connector Architecture (JCA).
A fim de fixarmos esses diversos conceitos, apresentamos a Figura 1. Perceba que há o servidor de aplicação JEE e dentro dele temos dois contêineres: um para a parte web e outro para os componentes de programação (EJB).
Figura 1
Organização proposta pelo JEE para fluxo de dados Servidor de aplicação
JEE Navegador
web
Página JSF
Bean corporativo
Bean corporativo
Banco de dados Página JSP
App Java
Contêiner web – Apache Tomcat
Contêiner EJB
Fonte: Elaborada pelo autor.
Perceba que o navegador web (que pode ser o Google Chrome ou o Mozilla Firefox, por exemplo) acessou o contêiner web (no nosso caso, o Apache Tomcat). Já um outro programa Java, que não foi desenvolvi- do usando JSP ou JSF, acessou diretamente o contêiner EJB via protoco- lo de rede local.
Outro detalhe importante nessa figura: o servidor de aplicação é
responsável por acessar a base de dados, não o navegador nem o
programa Java. Por fim, é importante notarmos que o contêiner web
se comunica com o contêiner EJB para acessar a lógica do negócio.
Introdução a Java Web
13 Essa organização é chamada de camada. O padrão JEE propõe quatro
camadas. São elas:
• Client Tier.
• Web Tier.
• Business Tier.
• Enterprise Information System Tier (EIS Tier).
A camada do cliente (client tier) não é controlada pelo JEE, sendo ela basicamente o computador do usuário que acessará algum re- curso do servidor de aplicação JEE. O usuário fará isso por meio de um navegador web ou de algum outro aplicativo Java. A camada web (web-tier) fornece uma página web implementada por um JSF ou JSP, fazendo a ligação do navegador web com a camada de negócios.
A camada de negócios (business-tier) encapsula a lógica do negó- cio. É aqui que são definidas todas as regras, determinada a aloca- ção de recursos e feita a validação de dados. Por fim, a camada EIS abrange os bancos de dados, a conectividade e a integração entre aplicação e base de dados. Na Figura 2, detalharemos o lugar de cada camada.
Figura 2
Camadas propostas no JEE
Servidor de aplicação JEE Navegador
web
Página JSF
Bean corporativo
Bean corporativo
Banco de dados Página JSP
App Java Client tier
EIS tier Contêiner web – web tier
Contêiner EJB – business tier
Fonte: Elaborada pelo autor.
Para conhecer melhor o projeto JakartaEE, mantido pela fundação Eclipse, assista ao vídeo 25 anos de Java: Jakarta EE: O que todo dev precisar saber para utilizá-lo com Rhuan Rocha, publicado pelo canal SouJava. O conteúdo dará sequência na evolução do JavaEE.
Disponível em: https://
www.youtube.com/
watch?v=Mrth_6rbKXg. Acesso em: 8 fev. 2021.
Vídeo
Conhecer e dominar essas informações são passos importantes para a sequência de nossos estudos. Podem parecer complicadas as diversas siglas e os conceitos, mas visite esse tópico sempre que ficar em dúvida. Com a repetição e a prática, logo você dominará o JEE.
1.2 Maven
Vídeo Para criarmos programas utilizando JEE, precisamos ter os softwa- res Java Developer Kit (JDK), na versão 8 ou superior, e interface de desenvolvimento (IDE), com suporte a JEE, configurados em nossos computadores.
Utilizaremos a OpenJDK, na versão 11.0.9.1; para a escrita do có- digo-fonte, usaremos o Eclipse IDE for Enterprise Java Developers, na versão 2020-09. Não há problema fazermos uso de JDK da Oracle ou outra IDE, como o IntelliJ, pois os exemplos deste material são inde- pendentes de IDE e serão suportados em diversas versões do Java (a partir da versão 8 da JDK). Para que isso seja possível, utilizaremos o programa Apache Maven, chamado, também, simplesmente Maven.
Sendo uma ferramenta de automação de compilação de diversas linguagens de programação, como Java, C#, Ruby e Scala, o Maven precisa ser instalado em seu computador, o que permitirá que o pro- jeto Java fique independente de IDE. Ele consegue fazer isso porque trabalha com um arquivo XML de configuração (pom.xml), o qual é composto das diversas configurações do software que está sendo de- senvolvido. Nele, definimos as bibliotecas de dependência e os plu- gins necessários para que o projeto funcione.
Desse modo, para termos acesso à base de dados, precisaremos
colocar informações do JDBC no arquivo pom.xml; faremos o mes-
mo ao utilizar o JSF para criar páginas na web. Adicionaremos as
informações dessa biblioteca no arquivo pom.xml e, quando isso for
realizado, o Maven, automaticamente, procurará na internet onde
estão essas configurações do JDBC ou do JSF e fará o download para
a sua máquina; assim, você poderá seguir com o desenvolvimento
do software. Sem o Maven, será necessário encontrar o site correto
para baixar o JDBC ou JSF. Esse trabalho pode ser custoso e difícil
de fazer manutenção, já que muitas bibliotecas de software mudam
Introdução a Java Web
15 o endereço no qual estão hospedadas ou, então, têm suas versões
alteradas.
Para utilizar o Maven, precisamos executar os seguintes passos:
• Fazer o download no site https://maven.apache.org/
• Clicar na opção download (ou acessar o link direto https://ma- ven.apache.org/download.cgi) e
• Selecionar, em Files, a opção Binary zip archive.
As figuras a seguir mostram as telas de download do Maven para Microsoft Windows e para Linux.
Figura 3
Download do Maven para Microsoft Windows
Figura 4
Download do Maven para Linux
Para Linux, selecione a opção Binary tar.gz archive.
1. Após o download, clique duas vezes no arquivo para descompactar o Maven no local que você desejar. Na sequência, configure uma variável de ambiente em seu sistema operacional, para que ele reconheça a palavra mvn como um programa a ser utilizado por linha de comando.
2. Para validar se a instalação foi bem-sucedida, abra uma tela de comando (prompt de comando ou terminal) e digite mvn-version.
A figura a seguir mostra como configurar o Apache Maven no Linux.
Para configurar o Maven no Linux, utilize o tutorial do link a seguir.
Disponível em: https://medium.
com/@andgomes/instalando- -o-apache-maven-no-ubuntu- -de4a95a5975a. Acesso em: 5 maio 2021.
O vídeo Java: Instalando e Configurando o Apache Maven no Windows, do canal Loiane Graner, apresenta um tutorial para configurar o Maven no Windows.
Disponível em: https://www.
youtube.com/watch?v=- ucX5w8Zm8s. Acesso em: 8 fev.
2021.
Vídeo
Figura 5
Configuração do Apache Maven no Linux
Fonte: software Prompt de comando
3. Caso sejam apresentados dados da versão do Apache Maven, a instalação e configuração foram bem-sucedidas.
Agora que o Maven está configurado, vamos criar o nosso primeiro pro- jeto usando Java EE. Como estamos usando o Maven, criaremos o projeto por ele, não pelo Eclipse IDE. Para criar o projeto web, siga os passos a seguir:
1. Abra uma tela de comando (terminal ou prompt de comando) e escolha a pasta na qual você armazenará o código-fonte do projeto. No exemplo aqui, usaremos a pasta c:\java\.
2. Digite o comando a seguir para criar o projeto Java Web:
mvn archetype:generate -DgroupId=br.com.aula -DartifactId=primeiroprojeto -DarchetypeArtifactId=maven- archetype-webapp -DinteractiveMode=false
3. Ao pressionar a tecla Enter, alguns downloads serão realizados, já que o Maven buscará na web tudo o que for necessário para você seguir com a programação de um projeto Java Web básico.
Em alguns computadores, o download não será realizado, pois o Maven já foi utilizado em algum outro momento, e os arquivos já se encontram em seu computador.
4. Caso tenha dado certo, a mensagem BUILD SUCCESS será apresentada (Figura 6).
Figura 6
Resultado de sucesso na criação do projeto
Introdução a Java Web
17 5. Caso ocorra algum erro, a mensagem de BUILD FAIL, com a
descrição do erro, aparecerá. Leia com calma o relatório do erro para saber o que precisa ser configurado.
Agora importaremos o projeto para o Eclipse IDE, a fim de analisar- mos o arquivo pom.xml. Para isso, execute os seguintes passos:
1. Abra o Eclipse IDE.
2. Escolha o local em que o seu workspace ficará.
3. Selecione o menu File Import, então uma caixa de seleção será aberta.
4. Selecione a opção Maven Existing Maven Projects.
A figura a seguir apresenta a tela de importação do projeto Maven no Eclipse IDE.
Figura 7
Importando o projeto Maven no Eclipse IDE
Fonte: software Eclipse IDE
5. Selecione o diretório em que o projeto Maven foi criado; no nosso exemplo: C:/Java/primeiroprojeto.
Veja a seguir, na Figura 8, a tela do Eclipse IDE para seleção do pro- jeto a ser importado.
Figura 8
Selecionando o projeto para ser importado
Fonte: software Eclipse IDE
6. Clique no botão Finish, para finalizar a importação do projeto.
Caso alguma mensagem de erro seja apresentada no Eclipse, na aba Makers, ignore-a, pois vamos resolvê-la na sequência.
Para finalizarmos o tópico, vejamos o arquivo pom.xml (Figura 9).
Clique nele duas vezes para visualizar o conteúdo.
Introdução a Java Web
19 Arquivo pom.xml
Fonte: software Eclipse IDE
Perceba que existe uma configuração referente ao JUnit, que é a bi- blioteca para testes unitários. A configuração sugerida pelo Maven está desatualizada, por isso precisaremos mudar as informações das tags groupId, artifactId e version. Mude esse trecho de código para:
<dependency>
<groupId>org.junit.jupiter</groupId>
<artifactId>junit-jupiter-api</artifactId>
<version>5.7.0</version>
<scope>test</scope>
</dependency>
Ao salvar o arquivo pom.xml, o Maven automaticamente fará o do- wnload na internet da versão 5.7.0 do JUnit. Perceba que você não pre- cisa informar em qual site está essa biblioteca, pois o programa faz pesquisas em repositórios de arquivos pré-definidos, sendo o MVN Reposiory (https://mvnrepository.com/) um dos mais utilizados.
Com esses aprendizados do Maven, o projeto criado poderá ser im- portado em qualquer outra IDE. Essa ferramenta traz muitos benefícios e facilidades para o desenvolvimento de software e, por isso, tornou-se um padrão de mercado. Aprofundar-se no tema ajudará na maximiza- ção do uso dessa ferramenta.
No blog Caelum, leia o texto Processo de build com o Maven, de Lucas Cavalcanti. O autor apresenta os detalhes da ferramenta Maven, que ajudará você no desenvolvimento de software JEE.
Disponível em: https://blog.caelum.
com.br/processo-de-build-com-o- maven/. Acesso em: 8 fev. 2021.
Leitura
Para saber mais sobre a criação de projetos web com Maven, acesse o link a seguir.
Disponível em: https://mkyong.
com/maven/how-to-create-a-we- b-application-project-with-maven/.
Acesso em: 3 maio 2021.
Na prática
1.3 Servidores Web
Vídeo Até o momento, aprendemos como construir um projeto Java Web por meio de um gerenciador de dependências, o Apache Maven. Já vi- mos, também, como alterar as configurações do projeto com mudanças realizadas no pom.xml. Agora, dois passos precisam ser realizados:
• gerar a versão do projeto ou fazer o build do projeto, como cos- tumeiramente é falado;
• executar, com essa versão gerada, a versão em um Servlet Container; com isso, poderemos acessar o nosso software via na- vegador web.
Para gerar uma versão, você pode escolher duas opções: ou por linha de comando ou dentro da própria IDE. Vamos começar com a opção de linha de comando. Para isso:
1. abra uma janela de comando (prompt de comando ou terminal);
2. acesse a pasta do projeto (C:\java\primeiroprojeto, caso seja Windows);
3. digite o comando mvn clean install.
Caso tudo dê certo, a mensagem BUILD SUCCESS será apresentada.
O comando clean faz a remoção de versões anteriores, geradas em outro momento. Já o comando install lerá o arquivo pom.xml e gerará um arquivo para ser executado em um servlet container. Esse arquivo gerado terá a extensão .war e estará disponível na pasta target. Re- torne ao Eclipse e verifique se essa pasta foi criada, juntamente com o arquivo primeiroprojeto.war.
A figura a seguir mostra a tela com o arquivo primeiroprojeto.war gerado na pasta target.
Figura 10
Arquivo primeiroprojeto.
war gerado com sucesso
na pasta target
Introdução a Java Web
21 A segunda opção de geração de versão pode ser acionada dentro do
próprio Eclipse. Para isso, realize os seguintes passos:
1. Clique com o botão direito no nome do projeto (primeiroprojeto).
2. Selecione a opção Run As Maven Install.
A seguir você pode conferir a versão sendo gerada dentro do Eclipse.
Figura 11
Gerando versão usando o Maven dentro do Eclipse
Fonte: software Eclipse IDE.
Espere a construção do projeto e acompanhe pela aba Console se esse processo de construção deu certo, ou seja, se apareceu a mensa- gem BUILD SUCCESS.
A Figura 12 apresenta, dentro do Eclipse, tela que deve aparecer
com a mensagem de status de sucesso.
Figura 12
Status de sucesso na construção do projeto dentro do Eclipse
Fonte: software Eclipse IDE.
Agora, precisamos utilizar um Servlet Container, que também pode ser chamado servidor web. Utilizaremos o servidor web Apache Tomcat – um projeto de código aberto (open source) muito utilizado em projetos Java Web.
Para usarmos o Tomcat, precisamos:
1. acessar o site http://tomcat.apache.org/;
2. selecionar, no menu download, a opção Tomcat 9 ou acessar o seguinte link: https://tomcat.apache.org/download-90.cgi;
3. ir até a opção Core, na versão corrente, e selecionar a opção desejada.
• Caso seja Windows, selecionar a opção 64bits. Se seu sistema operacional for 32bits, escolha essa opção.
• Caso seja Linux, selecionar a opção .zip.
Na figura a seguir, você pode conferir as opções de download do Apache Tomcat.
Figura 13
Opções de download do Apache Tomcat
Fonte: site Tomcat.apache.org
Introdução a Java Web
23 No caso de nosso exemplo, utilizamos a versão 9.0.41.
Após o download, você irá descompactar o arquivo. Aqui, descom- pactaremos o Tomcat para a pasta c:\java\. Agora vamos reconhecer as pastas do Apache Tomcat, apresentadas na figura a seguir.
Figura 14
Pastas do Apache Tomcat
Fonte: Elaborada pelo autor.
A pasta bin é onde você encontrará os arquivos para iniciar e parar o Tomcat. Para iniciar, use os arquivos startup.bat, no caso do Windows, e startup.sh, no caso de Linux. Para parar o Tomcat, use os arquivos shutdown.bat, no caso do Windows, e shutdown.sh, no caso de Linux.
Nessa pasta, você não irá alterar nenhuma configuração ou arquivo.
Na pasta conf, teremos os arquivos para alterar as configurações
padrões do Tomcat. Caso queira personalizar algo, altere algum dos
arquivos. Na pasta lib, encontramos as diversas bibliotecas utilizadas
pelo Tomcat. Nessa pasta, você não irá alterar nada. A pasta logs é uma
pasta que o Tomcat utiliza para gravar informações sobre acesso e ro-
tinas de processamento. É nela que você poderá conferir informações
de uso do Tomcat. As pastas temp e work armazenam arquivos que
o Tomcat cria à medida que é utilizado e acessado pelos usuários da
internet. Você não deve se preocupar com elas.
Por fim, chegamos à pasta webapps. É nela que os arquivos .war ficam. Após criar uma versão pelo Maven, você pode copiar o arqui- vo .war da pasta target do projeto para a pasta webapps do Tomcat.
Quando iniciamos o Tomcat, são verificados quais arquivos com ex- tensão .war estão na pasta webapps e, caso esteja algum, o contêiner web faz o processo de descompilação do .war e torna-o disponível para acesso do usuário.
Para validar o conhecimento do parágrafo anterior, vamos copiar o arquivo primeiroprojeto.war da pasta target e colá-lo na pasta webapps do Tomcat (Figura 15).
Figura 15
Adicionando o arquivo .war na pasta webapps
Fonte: Elaborada pelo autor.
Agora, precisamos iniciar o Tomcat. Para isso, retorne à pasta ante- rior e abra a pasta bin. Nela, execute o arquivo startup.bat (caso seja Windows) ou startup.sh (caso seja Linux). Caso tudo dê certo, será apre- sentada a mensagem Tomcat started (Figura 16).
Figura 16 Iniciando o Tomcat
Fonte: software Prompt de comando.
Por fim, abra um navegador e digite http://localhost:8080/
primeiroprojeto. Se tudo ocorrer corretamente, você encontrará a
seguinte tela:
Introdução a Java Web
25 Execução do projeto primeiroprojeto.war
Fonte: Elaborada pelo autor.
A partir de agora, aprenderemos como parar o Tomcat. Para realizar essa ação, retorne à pasta bin e, nela, execute o arquivo shutdown.bat (caso seja Windows) ou shutdown.sh (caso seja Linux). Se o processo tiver dado certo, retorne ao navegador web e tente digitar o endereço http://localhost:8080/primeiroprojeto. Caso tenha funcionado, o na- vegador informará que a página não está disponível, pois o servidor Tomcat está parado.
Além dessa opção para executar um projeto Java Web adicionando um arquivo na pasta webapps, temos a opção de executar o projeto web pelo Eclipse IDE. Para fazer isso, retorne ao Eclipse e clique no menu Window Show View Servers, como apresentado na figura a seguir.
Figura 18
Acessando as opções de servidores no Eclipse para configurar o Tomcat
Fonte: Eclipse IDE.
Será aberta uma aba chamada Servers, no canto inferior da IDE, como você pode ver na Figura 19 a seguir.
Em qualquer parte dessa aba, clique com o botão direito e selecione a opção New Server.
A seguir, veja a tela que mostra como adicionar um servidor no Eclipse IDE.
Figura 20
Adicionando um servidor
Fonte: Eclipse IDE.
Na pasta Apache, selecione a opção Tomcat v9.0 Server e clique em Next, como mostrado na figura a seguir.
Figura 19 Aba Servers
Fonte: Eclipse IDE.
Introdução a Java Web
27 Adicionando o Tomcat versão 9.0
Fonte: Eclipse IDE.
Na próxima tela, selecione a pasta na qual está o Tomcat, o que pode ser visto na figura a seguir.
Figura 22
Selecionando o Tomcat que foi descompactado anteriormente
Fonte: Eclipse IDE.
Ao pressionar o botão Finish, você perceberá que um servidor Tomcat foi adicionado na aba Servers. Para vincular o projeto, chamado primeiroprojeto, ao novo servidor Tomcat, clique duas vezes na opção Tomcat v9.0 Server at localhost. Uma nova aba será aberta e você deverá acessar a opção modules, que fica logo acima da aba Servers e ao lado da aba Overview.
Figura 23
Opção modules do Tomcat
Fonte: Eclipse IDE.
Clique no botão Add Web Module, localizado à direita da tela. Ao cli- car nessa opção, uma janela será aberta para você selecionar um pro- jeto Java Web. Selecione a opção primeiroprojeto e salve as alterações.
Figura 24
Adicionando o projeto ao Tomcat
Fonte: Eclipse IDE.
Para executar o Tomcat e acessar o projeto primeiroprojeto, retorne à aba Servers e clique com o botão direito no servidor Tomcat v9.0 Server at localhost. Selecione a opção Start. Aguarde a inicialização do contêiner web e abra um navegador. Digite http://localhost:8080/primeiroprojeto e verifique se será apresentada a mensagem Hello World.
O vídeo Como Configu- rar o SERVIDOR APACHE TOMCAT em sua máquina para PROJETOS JAVAWEB, do canal Tecnologia Radioativa, ensina como instalar e configurar o Apache Tomcat não embarcado.
Disponível em: https://www.
youtube.com/watch?v=9Z4OKoh- Omw. Acesso em: 8 fev. 2021.
Vídeo
Introdução a Java Web
29 Iniciar um servidor Tomcat no Eclipse
Fonte: Eclipse IDE.
Para parar o Tomcat, retorne à aba Servers e clique com o botão direito no servidor Tomcat v9.0 Server at localhost. Selecione a opção Stop.
Com essas configurações você estará apto a utilizar o servidor web Tomcat. Mesmo que existam novas versões desse servidor, o conteúdo aqui postado é um padrão desde a versão 6 e não há expectativas de mudança no formato de organização de pastas e de como o servidor é iniciado e parado.
CONSIDERAÇÕES FINAIS
Neste capítulo, estudamos as diferenças do JSE e JEE, além de termos aprendido a criar um projeto Java Web. Esses primeiros passos são im- portantes para a sequência dos estudos, pois são os pilares do desen- volvimento Java Web. Continue a estudar as ferramentas de mercado apresentadas (Apache Maven e Apache Tomcat) e pratique diversas vezes a construção de projetos.
ATIVIDADES
1. Diferencie as especificações JMS e JPA que estão presentes no JEE.
2. É correto afirmar que o Apache Maven é uma funcionalidade de uma IDE? Justifique a sua resposta.
3. Quais são os softwares necessários para desenvolver um projeto Java Web e conseguir executá-lo, tornando-o disponível para ser acessado em qualquer navegador?
Vídeo
2
Criando páginas web com Java
Desde a sua criação, o Java foi projetado para diversos apa- relhos, independentemente do sistema operacional utilizado. Foi desenvolvido também para uso na web; inicialmente com a tecno- logia applets, na sequência com JSP (Java Server Pages) e, finalmen- te, com JSF (Java Server Faces).
Neste capítulo, iremos aprender como fazer uma página web básica, utilizando JSF e os diversos componentes desse padrão.
Nesse momento, não focaremos na parte de design e beleza do site. Para tornar suas páginas mais atraentes, aconselhamos es- tudar CSS e Bootstrap (https://getbootstrap.com/), ou, então, pes- quisar componentes previamente configurados e padronizados, como o Primefaces (https://www.primefaces.org/).
E aí, preparado para fazer um projeto Java acessível por uma página web? Bons estudos!
2.1 JSF e configuração
Vídeo O Java Server Faces (JSF) é uma especificação Java presente no pa-
cote Java EE, servindo para a construção de páginas web que irão se
comunicar com código-fonte Java. A versão do JSF é a 2.3 e é baseada
em facelets, que é um sistema de templates de código aberto para a
internet. Por meio do facelets, podemos criar componentes baseados
em HTML, permitindo assim a personalização que atenderá às necessi-
dades dos usuários. Por exemplo, em HTML, um botão do tipo <input
type= “button”> não faz nenhuma ação. Com facelets esse botão
poderá realizar uma ou mais ações. Pensando em otimizar o trabalho
dos desenvolvedores, o JSF traz diversas personalizações que auxiliam
na construção de páginas para a web.
Criando páginas web com Java
31 O JSF não substitui outras tecnologias utilizadas nas páginas da web,
como o Javascript ou folhas de estilo (CSS), que podem ser utilizadas com o JSF sem nenhum problema.
Para termos um projeto utilizando JSF, precisaremos de:
• JDK 11 ou superior;
• IDE para programação (sugerimos Eclipse IDE for Enterprise Java Developers);
• Apache Maven, versão 3.x ou superior;
• Apache Tomcat, versão 9.x ou superior.
Para termos um projeto Java Web, precisaremos fazer os seguintes passos:
1. criar um projeto Java Web por meio de comandos do Apache Maven;
2. importar o projeto criado para o Eclipse;
3. inserir as dependências do JSF dentro do arquivo pom.xml;
4. alterar o arquivo web.xml;
5. construir uma versão após as alterações dos itens 3 e 4;
6. executar a versão gerada dentro do Apache Tomcat;
7. abrir um navegador e verificar se o projeto criado está acessível.
Agora, vamos detalhar cada um dos passos citados anteriormente.
Para isso, teremos diversos códigos que precisarão ser utilizados.
1) Criar um projeto Java Web por meio de comandos do Apache Maven
Para criar um projeto Java Web, você precisará abrir um terminal de comando (caso seja Linux) ou um prompt de comando (caso seja Microsoft Windows). Pelo terminal de comando, acesse a pasta onde ficará o novo projeto. Aconselhamos criar uma pasta chamada java na raiz do sistema operacional e usá-la para armazenar todos os projetos.
Caso seja Windows, a pasta ficará em C:\java; caso seja Linux, ficará em /java. Após isso, insira o comando a seguir:
mvn archetype:generate -DgroupId=br.com.aula -DartifactI- d=projetoWeb -DarchetypeArtifactId=maven-archetype-webapp -DinteractiveMode=false
A tela com o comando inserido pode ser vista na figura a seguir.
Figura 1
Comando para criação de um projeto Java web
Fonte: software Prompt de comando.
Esse comando irá gerar um projeto Java Web chamado projetoWeb e, se nenhum erro tiver acontecido, será apresentada a mensagem BUILD SUCCESS em verde. Com isso, poderemos partir para o segundo passo, que é importar o projeto no Eclipse.
2) Importar o projeto criado para o Eclipse
Para importar o projeto recém-criado, faça os seguintes passos:
1. abra o Eclipse IDE;
2. escolha o local onde ficará o seu workspace;
3. selecione o menu File Import e será aberta uma caixa de seleção;
4. selecione a opção Maven Existing Maven Projects;
5. selecione o diretório em que o projeto Maven foi criado, no caso, no C:/Java/projetoWeb;
6. clique no botão Finish para finalizar a importação do projeto.
A figura a seguir apresenta a tela de importação do projeto para o Eclipse.
Figura 2
Importação do projeto para o Eclipse
Criando páginas web com Java
33 Agora vamos adicionar as configurações para utilizarmos JSF. Para
isso, vamos precisar alterar algumas configurações do arquivo pom.xml.
3) Inserir as dependências do JSF dentro do arquivo pom.xml Procure o arquivo pom.xml, que estará na raiz do projeto. Abra esse arquivo e procure a tag <dependencies>. Logo a seguir dessa tag, in- sira os seguintes códigos:
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-api</artifactId>
<version>2.2.20</version>
</dependency>
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-impl</artifactId>
<version>2.2.20</version>
</dependency>
Salve esse arquivo e espere um momento, pois o Maven automati- camente irá fazer o download dessas novas dependências para a sua máquina. O seu arquivo pom.xml ficará da seguinte forma:
<project xmlns=”http://maven.apache.org/POM/4.0.0”
x m l n s : x s i = ” h t t p : / / w w w . w 3 . o r g / 2 0 0 1 / XMLSchema-instance”
xsi:schemaLocation=”http://maven.apache.org/
POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd”>
<modelVersion>4.0.0</modelVersion>
<groupId>br.com.aula</groupId>
<artifactId>projetoWeb</artifactId>
<packaging>war</packaging>
<version>1.0-SNAPSHOT</version>
<name>projetoWeb Maven Webapp</name>
<url>http://maven.apache.org</url>
(Continua)
<dependencies>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>3.8.1</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-api</artifactId>
<version>2.2.20</version>
</dependency>
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-impl</artifactId>
<version>2.2.20</version>
</dependency>
</dependencies>
<build>
<finalName>projetoWeb</finalName>
</build>
</project>
Agora precisamos configurar o arquivo web.xml, que é responsável pelas configurações dos facelets e do JSF.
4) Altere o arquivo web.xml
Todo projeto Java Web tem um arquivo de configuração web.xml,
que fica localizado na pasta webapp WEB-INF, como mostra a figura
a seguir.
Criando páginas web com Java
35 Localização do arquivo web.xml
projetoWeb
src/main/resources
JRE System Library [J2SE-1.5]
Maven Dependencies src
main webapp WEB-INF web.xml index.jsp target
pom.xml
1 <!DOCTYPE we-app PUBLIC
2 “-//Sun Microsystems, Inc. //DTD Web Application 2.3//EN”
3 “http://java.sun.com/dtd/web-app_2_3.dtd” >
4
5 <web-app>
6 <display-name>Archetype Created Web Application</display-name>
7 </web-app>
8
Package Explorer projetoWeb/pom.xml web.xml
Fonte: Elaborada pelo autor.
Abra esse arquivo e você perceberá que ele está com o código da Figura 3. Você precisará substituir todo o código atual pelo código a seguir.
<?xml version = “1.0” encoding = “UTF-8”?>
<web-app xmlns:xsi=”http://www.w3.org/2001/
XMLSchema-instance”
xmlns=”http://java.sun.com/xml/ns/javaee”
xmlns:web=”http://java.sun.com/xml/ns/javaee/web- -app_2_5.xsd”
xsi:schemaLocation=”http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd”
id=”WebApp_ID” version=”2.5”>
<welcome-file-list>
<welcome-file>index.xhtml</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.
FacesServlet</servlet-class>
(Continua)
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
</web-app>
Após a alteração, não se esqueça de salvar o arquivo web.xml.
A tag <welcome-file> serve para determinarmos qual arquivo será a página inicial do projeto. No nosso caso, será um arquivo index.xhtml, que ainda não foi criado. Para que não tenhamos problemas na exe- cução do projeto, renomeamos o arquivo index.jsp para index.xhtml.
Para renomear, clique com o botão direito no arquivo desejado e sele- cione a opção refactor rename.
5) Construir uma versão após as alterações dos itens 3 e 4 Após essas alterações, precisamos gerar uma versão do projeto para que ele seja executado no Apache Tomcat. Lembrando que toda vez que um projeto é gerado, a pasta target é atualizada com um novo arquivo .war. Esse arquivo é a versão do seu projeto. Para gerar a ver- são, siga os passos a seguir:
1. clique com o botão direito no nome do projeto (projetoWeb);
2. selecione a opção run as maven install;
3. espere a construção do projeto e acompanhe pela aba Console se esse processo de construção deu certo, ou seja, se apareceu a mensagem BUILD SUCCESS.
Agora vamos executar o projeto no Apache Tomcat.
6) Executar a versão gerada dentro do Apache Tomcat
Para executar o projeto no Tomcat, você deve acessar a aba servers. Caso essa aba não esteja disponível, clique no menu window show view servers.
Para vincular o projeto projetoWeb ao servidor Tomcat, clique duas
vezes na opção Tomcat v9.0 server at localhost. Será aberta uma nova
aba e você deverá acessar a opção modules, que fica logo acima da aba
servers e ao lado da aba overview.
Criando páginas web com Java
37 Clique no botão add web module, localizado à direita da tela. Ao
clicar nessa opção, será aberta uma janela para você selecionar um projeto Java Web. Selecione a opção projetoWeb e salve as alterações.
Para executar o Tomcat, retorne à aba servers e clique com o botão direito no servidor Tomcat v9.0 server at localhost. Selecione a opção start. Aguarde a inicialização do contêiner web e abra um navegador.
7) Abrir um navegador e verificar se o projeto criado está acessível
Digite http://localhost:8080/projetoWeb e verifique se será apre- sentada a mensagem “Hello world” (Figura 4).
Figura 4
Execução com sucesso do projeto
Fonte: Elaborada pelo autor.
Com o sucesso das configurações citadas, você está pronto para aprender os comandos e os conceitos do JSF, integrando a programa- ção Java com os conceitos de programação para web.
No vídeo Java Server Faces - O que é JSF e Configurações com TomCat e Maven, do canal Digital Innovation One, encon- traremos um resumo do que aprendemos nesta seção.
Disponível em: https://youtu.be/
ZPAHvSRqqNY. Acesso em: 12 fev. 2021.
Vídeo
2.2 Primeira tela com JSF
Vídeo O JSF implanta o padrão arquitetural chamado Model-View-Controller (MVC), o qual é utilizado para organizar e separar as responsabilidades de cada camada de programação. Na seção view estarão os arquivos que serão visualizados pelos clientes (no nosso caso são os arquivos com extensão .xhtml, que utilizarão a programação JSF). Já os arquivos do tipo controller são requisitados pelos usuários a partir de um clique.
Por fim, os arquivos do tipo model terão o código-fonte Java com as
regras de negócio digitadas.
Para facilitar o entendimento do padrão MVC, vamos para o exem- plo que é representado na Figura 5. Um usuário acessa um site pelo seu computador ou por um smartphone. Quando esse site foi desen- volvido usando JSF, a requisição de acesso (podendo ser uma URL ou um clique de botão) chega até um controller, que interpreta o que foi solicitado pelo cliente e decide se retorna uma página web (view) ou se vai até um arquivo do tipo model para executar alguma tarefa.
Figura 5
Padrão arquitetural MVC
Computador pessoal Dispositivo móvel
Application server J2EE EAR JSF web application
Model Controller
View
Faces servlet Faces-config.xml
JSP/JSF Beans
Banco de dados
Bibliotecas de apoio ao JSF
Fonte: Elaborado pelo autor com base em Tutorialspoint.
Os arquivos do tipo controller costumam ter uma anotação
@ManagedBean. Com ela, qualquer arquivo do tipo view poderá aces- sar uma funcionalidade mapeada no controller.
Agora vamos criar o nosso primeiro controller, que será utilizado no arquivo index.xhtml, que é um view. Siga os passos a seguir para criar o controller:
1. Crie a classe PrimeiroManagedBean.java na pasta src/main/java A figura a seguir apresenta a tela após o primeiro controller ser criado.
Para conhecer mais sobre o JSF e o padrão arquitetura MVC, assista à aula introdutória de JSF, O que é JSF? - Curso JSF, do canal AlgaWorks.
Disponível em: https://youtu.
be/3Cj2mDx0-Ws. Acesso em: 12 fev. 2021.
Vídeo
Criando páginas web com Java
39 Primeiro controller criado
projetoWeb
src/main/resources src/main/java (default package)
PrimeiroManagedBean.java JRE System Library [J2SE-1.5]
Maven Dependencies src
main target pom.xml Fonte: Elaborada pelo autor.
a) Caso não esteja aparecendo o Source Folder Java, clique com o botão direito no projetoWeb e selecione a opção New Source Folder.
b) Digite src/main/java1.
A figura a seguir apresenta a tela de criação do Source Folder Java.
Figura 7
Criação do Source Folder Java
New Source Folder Source Folder
Creat a new source folder.
Browse...
Browse...
Project name: projetoWeb
Folder name: src/main/java1
Update exclusion filters in other source folders to solve nesting Ignore optional compile problems
Cancel Finish
Fonte: Elaborada pelo autor.
c) Renomeie o source folder que acabou de ser criado. Para isso, clique com o botão direito no source folder e selecione a opção refactor
→ rename.
d) Mude o nome para Java.
2. Abra o novo arquivo e insira o código a seguir:
import javax.faces.bean.ManagedBean;
@ManagedBean(name = “primeiro”) public class PrimeiroManagedBean {
public String getMessage() {
return “Esta é uma mensagem que surgiu no controller”;
} }
3. Agora abra o arquivo index.xhtml e insira o código #{primeiro.
message} dentro da tag <body>.
<html>
<body>
<h2>Hello World!</h2>
#{primeiro.message}
</body>
</html>
4. Pare o Tomcat, caso ele esteja em execução, e salve todos os arquivos. Após isso, inicie o Tomcat e acesse o endereço http://localhost:8080/projetoWeb/.
5. O resultado esperado é que sejam apresentadas duas mensagens.
A primeira é “Hello World” e a outra é “Esta é uma mensagem que
surgiu no controller”, como você pode ver na figura a seguir.
Criando páginas web com Java
41 Página trazendo dados do ManagedBean
Hello World!
Esta é uma mensagem que surgiu no controller localhost:8080/projetoWeb/
localhost:8080/projetoWeb/
Fonte: Elaborada pelo autor.
Agora vamos explicar o que aconteceu. Dentro do arquivo PrimeiroManagedBean.java, adicionamos a anotação @ManagedBean (name = “primeiro”). Ela é usada para informar que esse arquivo poderá ser acessado por uma tela. É uma boa prática dar um nome para o seu ManagedBean. No nosso caso, demos o nome primeiro.
Dentro desse arquivo foi criado um método chamado getMenssage(), que retorna um texto. Esse método poderá ser acionado pela view, pois ele está dentro de um ManagedBean.
E como acessamos um método do controller por uma tela (view)?
A resposta é utilizar um padrão dentro da view para acessar o método desejado. O padrão consiste em utilizar uma # para abrir a chamada de controller. Na sequência, abrimos as chaves ( { ) e digitamos o nome do ManagedBean desejado e, após isso, o nome do método, sem usar os parênteses. Perceba que a palavra get não precisa ser usada. Veja o código que inserimos:
#{primeiro.message}
Lembrando que estarão erradas as seguintes opções:
• #{primeiroManagedBean.message}
• #{primeiro.getMessage}
• #{primeiro.getMessage()}
Agora vamos aprender como usar um campo para inserção de tex- to, um botão e um campo para exibir mensagem. A ideia desse exem- plo é um usuário digitar algo e, ao clicar no botão, o conteúdo digitado ser exibido com letras maiúsculas.
Para que tudo isso aconteça, vamos retornar ao arquivo index.xhtml e adicionar novas propriedades na tag <html> para que possamos utilizar facelets.
<?xml version=”1.0” encoding=”UTF-8”?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”
xmlns:f=”http://java.sun.com/jsf/core”
xmlns:h=”http://java.sun.com/jsf/html”>
Como vamos utilizar facelets, as tags html precisarão começar com h.
• <head> passará a ser <h:head>
• <body> passará a ser <h:body>
• <form> passará a ser <h:form>
• <input type= “text”> passará a ser <h:inputText>
• <input type= “button”> passará a ser <h:commandButton>
O código completo da tela ficará assim:
<?xml version=”1.0” encoding=”UTF-8”?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”
xmlns:f=”http://java.sun.com/jsf/core”
xmlns:h=”http://java.sun.com/jsf/html”>
<h:head>
<title>Titulo da página</title>
</h:head>
<h:body>
<h2>#{primeiro.message}</h2>
(Continua)
Criando páginas web com Java
43 <h:form>
<h:inputText value=”#{primeiro.nome}” />
<h:commandButton value=”Exibir Maiusculo” actionListener=”#{pri- meiro.exibirMaiusculo}” />
<br />
<h:outputText value=”#{primeiro.nomeMaiusculo}” />
</h:form>
</h:body>
</html>
No arquivo PrimeiroManagedBean.java, precisaremos mapear dois novos campos (nome e nomeMaiusculo). Para o correto funcionamen- to do JSF, todo atributo utilizado em tela precisa ter um método get e outro do tipo set mapeado no controller, em que iremos criar o méto- do exibirMaiusculo, que será chamado pelo botão mediante um clique.
Confira a seguir como vai ficar o ManagedBean:
import javax.faces.bean.ManagedBean;
@ManagedBean(name = “primeiro”) public class PrimeiroManagedBean {
private String nome;
private String nomeMaiusculo;
public String getNome() { return nome;
}
public void setNome(String nome) { this.nome = nome;
}
public String getNomeMaiusculo() { return nomeMaiusculo;
}
Confira a aplicação de diversos componentes na prática no vídeo Com- ponentes backing bean jsf (Java Server Faces), do canal Alex – Jdev Treina- mento on-line.
Disponível em: https://
www.youtube.com/
watch?v=bToKNlRgnt8. Acesso em:
12 fev. 2021.
Vídeo
(Continua)
public void setNomeMaiusculo(String nomeMaiusculo) { this.nomeMaiusculo = nomeMaiusculo;
}
public String getMessage() {
return “Esta é uma mensagem que surgiu no controller”;
}
public void exibirMaiusculo() {
nomeMaiusculo = nome.toUpperCase();
} }
O resultado dessas alterações é apresentado na Figura 9. Ao digitar algo no campo de texto e pressionar o botão, o conteúdo digitado é apresentado em maiúsculo.
Figura 9
Tela JSF funcionando
Título da página
localhost:8080/projetoWeb/index.xhtml
Esta é uma mensagem que surgiu no controller
aula jsf
AULA JSF Exibir Maiusculo
Fonte: Elaborada pelo autor.
Com base nesse conhecimento, você conseguirá criar páginas incrí- veis com JSF e interação com controllers. Tente criar campos na tela e botões para treinar o aprendizado visto nesta seção.
2.3 Outros componentes em JSF
Vídeo Nesta seção, vamos detalhar mais componentes que podem ser uti-
lizados em suas páginas JSF. Todos eles podem ser usados numa mes-
ma página e quantas vezes forem necessárias.
Criando páginas web com Java
45 Lista de componentes JSF
Tag Função Como é no html
h:inputSecret O usuário pode digitar algo e o campo esconderá
o que foi digitado. <input type=”password”>
h:inputTextarea Utilizado para a digitação de grandes textos, com
mais de um parágrafo. <textarea>
h:inputHidden Um campo que não ficará visível para o usuário. <input type=”hidden”>
h:inputFile Um campo para realizar upload de arquivos. <input type=”file”>
h:graphicImage Utilizado para apresentar uma imagem. <img>
h:dataTable Utilizado para ser uma tabela de dados. <table>
h:column Representa uma linha e uma coluna dentro de uma tabela.
<tr>
<td> </td>
</tr>
h:message Apresenta uma mensagem para o usuário. <span>
h:messages Apresenta várias mensagens para o usuário. <span>
h:outputFormat Apresenta uma informação formatada para o
usuário. Texto puro, não tem tag em
html
h:outputLabel
Utilizado para ser um nome ou descrição de um campo. Ele fica vinculado a um campo de entrada
de dados (h:inputText). <label>
h:commandLink Um link para uma nova página. <a href>
h:outputLink Utilizado para ser um link de uma página ou de uma ação, sendo mais simples que o commandLink. <a>
h:panelGrid Usado para separação de informações na tela, se- melhante ao table do html.
<table>
<tr>
<td></td>
</tr>
</table>
h:panelGroup Utilizado para separação de conteúdo na tela, se-
melhante ao <div> ou <span> do html. <div> ou <span>
h:selectOneRadio Utilizado para apresentar diversas opções, em que
o usuário deverá selecionar uma delas. <input type=”radio”>
h:selectBooleanCheckbox Utilizado como uma caixa de checagem, com a op-
ção verdadeira ou falsa. <input type=”checkbox”>
h:selectManyCheckbox Utilizado para apresentar várias caixas de checa-
gem, com a opção verdadeira ou falsa. <input type=”checkbox”>
h:selectOneListbox Apresenta uma lista de dados, e o usuário poderá
selecionar uma opção. <select>
h:selectManyListbox Apresenta uma lista de dados, e o usuário poderá
selecionar várias opções. <select>
(Continua)
Tag Função Como é no html
h:selectOneMenu Apresenta um menu com várias opções e o usuá-
rio poderá selecionar uma delas. <select>
h:selectManyMenu Apresenta um menu com várias opções, e o usuá-
rio poderá selecionar várias opções. <select>
Fonte: Elaborado pelo autor.
Os componentes apresentados no Quadro 1 contemplam mais de 90% das opções disponíveis em JSF. A melhor forma de entender o que cada um faz é fazer experimentos e ir incluindo cada compo- nente no arquivo index.xhtml. Faça isso de maneira gradativa, ou seja, insira um componente, salve as alterações e recarregue a pá- gina no navegador para entender o que aconteceu. Na sequência, insira outro componente.
CONSIDERAÇÕES FINAIS
Neste capítulo, conhecemos o JSF e os componentes que ele traz configurados, devido ao padrão facelets, o qual permite que a criação de páginas html fique muito mais dinâmica e personalizada. Graças a essa personalização, conseguimos fazer a interação da nossa página web com os arquivos do tipo controller por meio da anotação @ManagedBean, as- sim temos o uso avançado das páginas na internet com uso da tecnologia Java.
ATIVIDADES
1. O que é facelets e qual é a sua função?
2. Quais componentes podem ser utilizados em JSF para a geração de links entre páginas? Explique um pouco sobre eles.
3. O que é um padrão Model-View-Controller (MVC)?
Vídeo
Não deixe de consultar alguns sites que trazem didaticamente o uso desses componentes. Os mais indicados são:
Tutorials Point. Disponível em: https://
www.tutorialspoint.com/jsf/index.
htm. Acesso em: 12 fev. 2021.
Java T Point. Disponível em:
https://www.javatpoint.com/
jsf-ui-components. Acesso em: 12 fev. 2021.
Site
Criando páginas avançadas com Java
