1

SUMÁRIO
1. Introdução ao Java Server Faces (Aula 02 Youtube) ......................................................................................... 1
1.1. Evolução das páginas Web em Java (Aula 02 Youtube) ............................................................................ 2
1.2. Como funciona o JSF? (Aula 02 Youtube) .................................................................................................. 2
1.3. Usar JSPs ou Facelets? (Aula 02 Youtube) ................................................................................................. 3
1.4. Páginas XHTML não toleram erros (Aula 03 Youtube) .............................................................................. 4
1.5. JSF usa padrão MVC (Aula 02 Youtube)..................................................................................................... 4
2. Configurando o ambiente de desenvolvimento Web (Aula 03 Youtube) ......................................................... 4
2.1. Baixando o Eclipse Neon (Aula 03 Youtube) ............................................................................................. 4
2.2. Baixando o JDK 8 (Aula 03 Youtube) ......................................................................................................... 5
2.3. Baixando o Tomcat 9 (Aula 03 Youtube) ................................................................................................... 6
2.4. Baixando o instalando o JDK 8 (Aula 03 Youtube)..................................................................................... 6
2.5. Abrindo o Eclipse pela primeira vez (Aula 03 Youtube) ............................................................................ 6
2.6. Adicionando o Tomcat ao Eclipse (Aula 03 Youtube) ................................................................................ 7
2.7. Criando o primeiro projeto com o Maven (Aula 03 Youtube) ................................................................... 9
2.8. Corrigindo o compilador do Java para o Java 8 (Aula 03 Youtube) ......................................................... 12
2.9. Criando o arquivo web.xml (Aula 03 Youtube)........................................................................................ 13
2.10. Atualizando o projeto (Update Project) (Aula 03 Youtube) ................................................................ 14
2.11. Criando a primeira página XHTML (Aula 03 Youtube) ......................................................................... 14
2.12 . Instalando o plugin JBoss Tools (Aula 05 Youtube) .............................................................................. 17

1. INTRODUÇÃO AO JAVA SERVER FACES (AULA 02 YOUTUBE)

Cada vez mais o mercado pede interfaces mais ricas usando JavaScript, HTML, CSS, Ajax,
validadores e etc. E é neste cenário que começamos a encontrar FrameWorks como o Java Server
Faces ou JSF.
O JSF é um FrameWork MVC baseado em componentes que respondem a eventos e servem
para a construção de páginas web dinâmicas, e devemos utiliza-lo exclusivamente para a camada de
apresentação com o usuário.
O JSF é um padrão/especificação do Java EE para desenvolvimento web mantida pela JCP
(Java Community Process), qualquer pessoa pode criar/implementar a sua própria versão do JSF desde
que obedeçam a documentação formal do Java EE, um exemplo é a versão Mojarra que é a
implementação criada pela Oracle e a implementação Myfaces criada pela Fundação Apache, podemos
usar qualquer uma delas, pois todas são JSF.
 2

O PrimeFaces é uma extensão do JSF, esta biblioteca de componentes oferece componentes

mais atraentes que as do JSF, e é hoje a biblioteca mais popular entre os desenvolvedores Java.
Com o Primefaces não precisamos nos preocupar com JavaScript, HTML e CSS, pois todos os
componentes já são baseados nestas tecnologias.

1.1. Evolução das páginas Web em Java (Aula 02 Youtube)

Antes do surgimento das páginas dinâmicas só existiam páginas estáticas feitas em HTML,
quando um usuário fazia uma requisição ao servidor a página era devolvida ou respondida sempre com
o mesmo conteúdo.
Com o passar do tempo começaram a surgir aplicações que exigiam maior flexibilidade das
páginas, foi aí que tudo começou a mudar, surgiram então os Servlets e posteriormente os JSPs que
foram as primeiras técnoloogias quando se trata de páginas dinâmicas em Java.
Embora os Servlets e JSPs trabalhassem com páginas dinâmicas era muito trabalhoso criar
aplicações complexas com eles, resumindo era muita programação para pouco resultado.
Para suprir esta necessidade surgiram alguns FrameWorks como o Apache Struts, Spring MVC
e o JSF.
Como já falamos o JSF trabalha com componentes que pode ser nativo ou de terceiros como
por exemplo os componentes do PrimeFaces.
Podemos comprar esta programação orientada a componentes com o Swing e ao JavaFX em
uma aplicação desktop, pois ambos são componentes que devolvem para o desenvolvedor uma
interface gráfica, neste caso programamos pouco e temos muito resultado.

1.2. Como funciona o JSF? (Aula 02 Youtube)

A primeira coisa que precisamos saber é que páginas JSF são executadas no Servidor, como
segue a ilustração abaixo.
Através de um navegador usando o protocolo HTTP ao fazermos uma requisição “request” ao
Servidor, a mesma é recebida por um servlet chamado Faces Servlet que tem a função de direcionar a
requisição do usuário para a camada de modelo e enviar uma resposta “response” ao usuário.

Browser: seu navegador de Internet.

Faces Servlet: em JSF, o controle é feito através de um servlet chamado Faces Servlet, por
arquivos XML de configuração e por vários manipuladores de ações e observadores de eventos. O
 3

Faces Servlet recebe as requisições dos usuários na web, redireciona para o modelo e envia uma
resposta. Os arquivos de configuração possuem informações sobre mapeamentos de ações e regras
de navegação. Os manipuladores de eventos são responsáveis por receber os dados da camada de
visualização, acessar o modelo e devolver o resultado para o usuário através do Faces Servlet.

faces-config.xml: O arquivo faces-config.xml é o arquivo principal de configuração de uma

aplicação JSF. Localizado no diretório WEB-INF da aplicação no formato XML, este arquivo é
responsável por descrever os elementos e sub-elementos que compõem o projeto, tais como: as regras
de navegação, os beans gerenciados, configurações de localização, entre outros.
O JSF a partir da versão 2.0 recomenda o uso de anotações em vez de configurações no XML,
por este motivo o arquivo faces-config.xml torna-se pouco usado. Ele era muito mais importante na
primeira versão do JSF.
XHTML: O XHTML, ou eXtensible Hypertext Markup Language, é uma reformulação do HTML,
baseada em XML. Combina as tags de marcação HTML com regras da XML.
A grande diferença entre os arquivos HTML e XHTML é que o XHTML não aceita erros de
digitação no código.
Bean: É um componente escrito em Java que serve para a troca de dados entre a tela do
usuário e o código Java e pode ser gerenciado por qualquer contêiner, seja Spring MVC, CDI, e no
nosso caso, o JSF. A partir do momento que o Bean passa a ser gerenciado no caso pelo JSF ele recebe
um nome especial “Managed Bean” ou Bean Gerenciado.
Um Managed Bean gerenciado pelo JSF pode exercer diferentes papéis em sua aplicação e
tudo vai depender da necessidade do desenvolvedor em como ele quer organizar a sua aplicação, vou
citar 3 exemplos abaixo:
 Managed-Bean de Controle: geralmente executa alguma lógica e retorna a navegação.
Apenas métodos "action" e não "actionListeners";
 Managed-bean de suporte: dá suporte para algum UI na tela do usuário, por exemplo,
com os dados de uma combobox;
 Managed-bean utilitário: algum bean usado por várias aplicações.

Converters: Conversão é o processo que garante que os dados digitados pelos usuários se
transformem em um tipo específico.
JSF fornece vários conversores prontos para serem usados. Todos os tipos primitivos, além de
BigInteger e BigDecimal, usam conversores padrão do JSF automaticamente. Por exemplo, se você
colocar um h:inputText referenciando um atributo do tipo double de um bean, o valor digitado pelo
usuário será automaticamente convertido para o tipo double para ser atribuído ao bean.

Validator: diversas validações de dados básicas podem ser feitas antes de suas regras de
negócio ser executadas, como, por exemplo, sobre obrigatoriedade de campos, aceitação de apenas
números ou validação de documentos, como CPF e CNPJ. O JSF nos ajuda nesta tarefa, e
aprenderemos como utilizar este recurso mais à frente.

1.3. Usar JSPs ou Facelets? (Aula 02 Youtube)

Até a versão do JSF 1.2 a tecnologia de visualização padrão era o JSP, ou seja, tínhamos que
criar páginas JSPs para trabalhar junto com o JSF.
A partir da versão 2.0 além de podermos criar páginas JSPs também passamos a ter a
possibilidade de criar outra tecnologia de visualização chamada de Facelets que nos possibilitou a
trabalhar com o XHTML e deixar de lado o JSP.
Uma observação é que o JSP ainda é suportado por questões de compatibilidade.
 4

1.4. Páginas XHTML não toleram erros (Aula 03 Youtube)

É um HTML baseado em xml, isso faz com que as páginas XHTML (eXtensible HyperText
Markup Language), não tolerem erros de escrita no código. Neste caso você não poderá mais esquecer
de fechar uma tag.

1.5. JSF usa padrão MVC (Aula 02 Youtube)

O JSF baseia-se no padrão de projeto MVC (Model-View-Controller), o que torna o desenvolvimento de
software mais fácil, pois a separação entre a visualização e regras de negócio é muito clara e bem definida.

O padrão MVC separa o sistema em três partes ou responsabilidades (modelo, visualização e

controle), onde o modelo é responsável por representar os objetos de negócio fornecendo ao controlador o
acesso aos dados. A visualização é responsável pela interface do usuário. Ela é quem define a forma como os
dados são apresentados e encaminha as ações do usuário para o controlador. O controlador é responsável por
gerenciar e fazer a conexão entre o modelo e a visualização, interpretando as solicitações do usuário, traduzindo
para uma operação no modelo (onde são realizadas efetivamente as mudanças no sistema) e retornando à
visualização adequada à solicitação.

2. CONFIGURANDO O AMBIENTE DE DESENVOLVIMENTO WEB (AULA 03 YOUTUBE)

É hora de colocar a mão na massa! Vamos configurar nosso primeiro Ambiente de Desenvolvimento Web
e para isso precisaremos baixar o Eclipse Neon, o JDK 8 (Java Development Kit) e o Web Container Tomcat na
versão 9.

2.1. Baixando o Eclipse Neon (Aula 03 Youtube)

Download Eclipse: http://www.eclipse.org/downloads/packages/eclipse-ide-java-ee-developers/neonr

Após o Download da IDE Eclipse no intuito de organizar seus arquivos baixados crie no diretório C:\ uma
pasta chamada “Instaladores”, copie e cole a IDE Eclipse para dentro desta pasta e logo em seguida descompacte-
a.
O Eclipse ainda precisa do JDK instalado no seu computador para funcionar corretamente, iremos fazer
isto a seguir.
 5

Vale lembrar que o Eclipse não precisa ser instalado, após abrir a pasta do Eclipse que você baixou você
já pode executa-lo clicando no arquivo “eclipse.exe”.

Crie também um atalho do eclipse na barra de tarefas ou na área de trabalho para facilitar nas próximas
vezes que você precisar executa-lo.

2.2. Baixando o JDK 8 (Aula 03 Youtube)

Download JDK8 :http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-

2133151.html?ssSourceSiteId=otnpt

O link acima vai te levar direto para o site oficial da Oracle onde você irá fazer o download do JDK 8 ou
(Java Development Kit).
A Oracle pede sempre que você aceite os termos de licença antes de fazer o download do JDK.

Após o download lembre-se sempre de copiar e colar o arquivo baixado em C:\Instaladores para que tudo
fique bem organizado.
 6

2.3. Baixando o Tomcat 9 (Aula 03 Youtube)

Download Tomcat 9: https://tomcat.apache.org/download-80.cgi

O link acima levará você para a área de download do Web Container Tomcat, baixe a última versão que é
a versão 9 de acordo com a versão do seu Sistema Operacional, como mostra a figura abaixo, não esqueça de
descompactar o arquivo e organiza-lo no diretório C:\Instaladores.

2.4. Baixando o instalando o JDK 8 (Aula 03 Youtube)

Abra a pasta Instaladores que você criou e instale o JDK 8, é bem simples!

2.5. Abrindo o Eclipse pela primeira vez (Aula 03 Youtube)

Depois do JDK devidamente instalado, já podemos abrir o Eclipse!
De um duplo clique em cima do ícone do Eclipse, lembre-se que no passo 01 criamos um atalho do Eclipse
na área de trabalho.
 7

Ao abrir o Eclipse, será apresentada a página de boas-vindas, desmarque a opção “Always show Welcome
at start up” e feche a tela de boas-vindas nos locais indicados abaixo.

2.6. Adicionando o Tomcat ao Eclipse (Aula 03 Youtube)

Na tela inicial do Eclipse, vamos adicionar o Web Container tomcat, clicando em “servers” e no link
indicado na figura abaixo.

Devemos lembrar que o JSF é executado dentro de um Servidor ou Web Container é por este motivo que
vamos adiciona-lo ao Eclipse.
 8

Na próxima tela você precisará abrir as opções do servidor Apache, clicar na versão “Tomcat v9.0 Server”
e em seguida “Next”.
 9

Na próxima tela clique em “Browser” para indicar para o Eclipse onde está o download do Tomcat, após
encontra-lo de um “ok” e em seguida clique em “Finish”.

Pronto, agora o Web Container Tomcat já está adicionado ao Eclipse, e você pode inicia-lo para fazer um
teste como mostra a figura abaixo.

2.7. Criando o primeiro projeto com o Maven (Aula 03 Youtube)

Neste momento já podemos criar nosso primeiro projeto, o Maven já vem incorporado nas versões mais
novas da IDE Eclipse então não precisaremos baixa-lo.
 10

Clique nas opções “File/New/Maven” Project para iniciar a criação do projeto como mostrado na figura
abaixo.

Na próxima tela habilite a opção “Create a simple project(skip archetype selection)” e em seguida clique
em “Next”.

Nesta tela será preciso preencher alguns campos de informações do nosso projeto, devemos preencher
as seguintes opções:

 Group id (um identificador da empresa/grupo ao qual o projeto pertence. Geralmente o nome do site
da empresa/grupo ao contrário) no nosso caso digite: “br.com.cursojsf”.
 Artifact id (nome do projeto): digite o nome “CursoJSF”.
 Packaging (como o projeto será empacotado, ex: jar, war, ear) para o nosso caso escolha a opção “war”.

Em seguida clique em “Finish” como mostra a imagem abaixo.

 11

Pronto, agora o nosso primeiro projeto está criado, veja abaixo como é a estrutura de pastas de um
projeto criado usando o Maven.

Repare que o Eclipse está acusando um erro no projeto, isso acontece por dois motivos o primeiro é que
quando criamos o projeto usando o Maven, ele é criado com o compilador do Java 1.5, precisamos fazer a
mudança para o compilador do Java 1.8. A segunda coisa que será preciso fazer é criar um arquivo de configuração
chamado “web.xml” dentro do nosso projeto.
 12

2.8. Corrigindo o compilador do Java para o Java 8 (Aula 03 Youtube)

Primeiro iremos mudar o compilador do Java para a versão 1.8, clique com o botão direito do mouse em
cima do projeto e em seguida vá até a opção “properties”.

Na próxima tela escolha a opção “Java Compiler” desmarque a opção “Use compliance from execution
environment...” e em “Compiler compliance level” mude o compilador para a versão 1.8, por fim clique em “ok”
para salvar a alteração.
 13

2.9. Criando o arquivo web.xml (Aula 03 Youtube)

Agora precisamos criar um arquivo de configuração chamado “web.xml”, clique com o botão direito em
cima do projeto e em seguida vá até a opção “Java EE Tools” e por último clique na opção “Generate Deployment
descriptor Stub”.

Pronto, o arquivo “web.xml” já foi criado no seu projeto. Vamos falar sobre este arquivo ao longo do curso.
 14

2.10. Atualizando o projeto (Update Project) (Aula 03 Youtube)

Vamos agora atualizar o projeto para que as modificações que fizemos entrem em vigor, clique com o
botão direito do mouse no projeto, vá até a opção “Maven” e escolha a opção “Update Project” ou use o atalho
Alt + F5.

2.11. Criando a primeira página XHTML (Aula 03 Youtube)

Agora sim, tudo pronto para você criar a sua primeira página XHTML. Vamos lá? As páginas XHTML
precisam ser criadas dentro da pasta “webapp”, então clique com o botão direito em cima da pasta, vá até a
opção “New” e em seguida “HTML File”.
 15

Dê o nome para a sua página de “hello.xhtml” e em seguida clique em “Next”.

Na próxima tela escolha a opção “New XHTML File (1.0 transitional)”, em seguida clique em “Finish” para
finalizar.
 16

Crie uma tag “h1” e digite <h1>Hello World!</h1> em seguida é só executar a aplicação para ver o resultado.

Resultado.
 17

Você também tem a opção de escolher o seu navegador de preferência para exibir as páginas criadas,
para isso vá até a opção “Window”, “Web Browser” e por fim escolha o navegador de sua preferência.

2.12 . Instalando o plugin JBoss Tools no Eclipse (Aula 05 Youtube)

O JBoss Tools é um conjunto de plugins para o Eclipse ele serve para trabalhar como servidor de aplicação
e várias outras funcionalidades como por exemplo, a criação de páginas XHTML para a nossa camada de Visão.

Usaremos o plugin JBoss Tools em nosso projeto simplesmente para criação de páginas XHTML.

Caso você prefira você também pode usá-lo futuramente como um servidor de aplicação substituindo o
Web Container Tomcat.