JavaServer Faces – Configuração e introdução

Veja neste artigo o que é o framework JSF, como configurar e iniciar um projeto

Objetivo do artigo

O objetivo desse artigo é apresentar o framework JavaServer Faces como uma ferramenta poderosa de desenvolvimento Java para a plataforma JEE (Java Enterprise Edition). Serão realizadas a sua instalação e configuração para iniciar o desenvolvimento e os passos necessários para a criação de um projeto dinâmico baseado em JSF utilizando uma página simples.

Framework

Entre as linguagens de programação utilizadas atualmente, principalmente as linguagens com o paradigma de orientação a objetos, são muito utilizados os frameworks. A palavra framework tem várias definições, embora nenhuma definição entre em contradição com as demais. A minha definição é a seguinte: é um conjunto de classes que atendem a diversas funcionalidades para um tipo de aplicação específica. O framework atende ao conceito de orientação a objetos, que é a reutilização de código. Portanto cada framework tem uma série de códigos já prontos que vão nos ajudar em nossos projetos.

Os frameworks trazem alguns benefícios importantes para o desenvolvimento de uma aplicação ou projeto: são modulares, reusáveis e extensíveis, assumindo o controle da execução invocando métodos da aplicação quando necessitados.

JavaServer Faces

O JavaServer Faces (JSF) é a especificação de um framework de componentes para desenvolvimento web em Java. Pelo fato do JSF ser uma especificação do JCP (Java Community Process), onde grandes empresas participaram de sua definição e desenvolvimento, tornou-se um padrão de mercado, e as melhores ferramentas de desenvolvimento comportam perfeitamente suas especificações.

Algumas características importantes do JSF:

– Modelo de programação orientado a eventos.

– É um framework de componentes, portanto visa abstrair o desenvolvimento de interfaces

– Implementa o padrão MVC (Model-View-Controller) de desenvolvimento.

– É apenas uma especificação, não possui um produto concreto. Para utilizá-lo, precisamos recorrer a uma implementação do JavaServer Faces.

Algumas novidades importantes do JavaServer Faces 2.0:

– Utilização de Ajax para integração.

– Facelets – utilização do xhtml no lugar do JSP (30% mais rápido).

– Suporte a anotações para configurações (não precisa escrever no documento XML algumas configurações do projeto).

– Novos escopos dos beans (a parte C do MVC).

– Navegação implícita e condicional.

– Criação de componentes customizados.

Baixando e instalando os arquivos

Vamos deixar de lado as definições e teorias e vamos partir para a prática. Para o nosso exemplo de aplicação com JSF vamos baixar alguns arquivos que utilizaremos no projeto. Muitas literaturas e cursos referentes a esse assunto ensinam a utilização do framework sem a utilização de ferramentas de desenvolvimento (as chamadas IDE’s, como Eclipse ou NetBeans). Esse estudo é importante para aprendermos como as coisas funcionam a um nível mais baixo, utilizando comandos no prompt. Mas como eu sou da opinião que as ferramentas estão aí para nos ajudar (como o próprio JSF), vamos utilizar uma ferramenta. Mesmo porque, é o que se está utiliza no mercado.

Para o nosso exemplo vamos fazer o download dos arquivos que serão utilizados. Sugiro que criemos uma pasta chamada softwares e coloquemos os arquivos ali.

JDK

O JDK (Java Development Kit) é o pacote de programas utilizado para desenvolver programas Java. Ele instala o JVM (Máquina Virtual Java), que é utilizado para desenvolver os programas. No Kit está incluso o JRE (Java Runtime Environment), que é utilizado para executar os programas Java.

Para fazer o download do JDK, vamos ao site da Oracle: http://www.oracle.com.

Clicamos em Downloads e escolhemos Java for Developers.

oracle1

Figura 1: Tela de download do JDK

 

A seguir clicamos no botão Java Download. No momento deste artigo estamos na versão Java 7 Atualização 45.

Oracle2

Figura 2: 2ª tela para o download do JDK

 

Em seguida devemos aceitar as condições da licença de uso e escolher o sistema operacional que vamos trabalhar. Como o sistema operacional do meu computador é o Windows 32 bits, vou escolher o JDK referente a esse sistema operacional (Windows x86).

Oracle3

Figura 3: 3ª tela de download do JDK

 

Eclipse

O Eclipse é uma IDE de desenvolvimento com as seguintes características: é leve, gratuito, largamente utilizado, expansível com o uso de plugins e com suporte à tecnologia Java.

Vamos entrar no site do Eclipse para fazer o download do programa mais recente. O endereço é www.eclipse.org/downloads. Escolhemos a opção Eclipse IDE for Java EE Developers, para Windows 32 bits como é mostrado na figura a seguir. Essa opção é escolhida por estar preparada para desenvolvimento de aplicações para web.

Eclipse Tela1

Figura 4: Tela de download do Eclipse

 

Em seguida, clicar no botão de download da aplicação.

Eclipse Tela2

 

Figura 5: 2ª tela de download do Eclipse

 

A versão mais recente no momento desse artigo é o Eclipse Kepler. Mais adiante será feita a instalação do Jboss Tools que será utilizado no projeto exemplo.

JavaServer Faces 2

O framework JavaServer Faces que será utilizado é o 2.2.4 do Projeto Mojarra. Para o seu download vamos ao site HTTP://javaserverfaces.java.net. É só clicar em Download 2.2.4 Now!

JSF2

Figura 6: Página de download do JavaServer Faces

 

Apache Tomcat 7.0

É um servidor web Java, que funciona como container de servlets. Tem suporte a JSF 2.2 e servlets 3.0.

A versão a ser utilizada é a 7.0. Vamos entrar no site HTTP://tomcat.apache.org e vamos efetuar o download do arquivo compactado. (zip). Vamos escolher a versão 7.0, conforme figura a seguir.

Tela Apache

Figura 7: Primeira tela do download do Tomcat

 

Apache Tela 2

Figura 8: Escolhendo o arquivo zip

 

Os downloads acima mostram os caminhos e sites disponíveis no momento em que este artigo está sendo escrito. Esses caminhos podem ser alterados com o decorrer do tempo, mas, basicamente, a ordem de busca desses arquivos não se alteram, o que pode alterar é o layout dos sites e o local onde encontraremos o link correspondente ao arquivo procurado.

Instalação dos arquivos

Feitos os downloads, vamos para as instalações dos programas.

JDK – dar um duplo-clique no arquivo de instalação. É claro que essa instalação é só para quem ainda não tem a JDK instalado. Se tiver, mas for uma versão anterior que a versão 7 aconselho a substituir por essa versão. A instalação é simples, do tipo next-next.

Eclipse – O Eclipse não é instalável. É um arquivo “zipado”. É só descompactar, que estará pronto para ser utilizado, com seus arquivos distribuídos em pastas, como mostra a imagem seguinte. É só clicar no ícone do eclipse, que abrirá o programa.

Eclipse instalado

Figura 9: Pastas do Eclipse

 

Tomcat Apache – O arquivo que temos também não é instalável, basta descompactar e estará pronto. Após descompactar o arquivo, podemos testar o servidor, dando duplo-clique no programa startup que se encontra na pasta bin.

pasta bin do apache

Figura 10: arquivo que inicializa o tomcat (startup)

 

apache startado

Figura 11: tomcat inicializado

 

JSF – O JSF é um arquivo jar que será incluído dentro do projeto, portanto não é instalável. Apenas devemos deixá-lo em um local fácil de ser encontrado. Eu sugiro que seja copiado em uma pasta chamada Bibliotecas.

Entrando no Eclipse e instalando o plug-in do Jboss Tools

Vamos entrar no Eclipse e instalar o Jboss Tools que utilizaremos para criar as páginas xhtml e utilizar paletes de componentes do JSF. Não é obrigatória a utilização do Jboss Tools, mas vamos fazer essa instalação para mostrar como buscar e instalar um plug-in através da opção Marketplace do Eclipse.

Com o Eclipse aberto e a Internet conectada, vamos escolher no menu a opção Help e em seguida Eclipse Marketplace. Em find, escrever: Jboss Tools e dar ‘enter’. Procurar entre os programas que encontrar o Jboss Tools para sua versão do Eclipse (no nosso caso, o Kepler) e clicar em Install. Ele encontrará o plug-in procurado e pedirá confirmação. Ao confirmar, pedirá para aceitar os termos de uso. É só aceitar, que será instalado. A instalação demora um pouco, mas enquanto instala pode-se fazer outras coisas. Após a instalação, será pedido para reiniciar o Eclipse.

Jboss

Figura 12: Instalação do Jboss Tools

 

Exemplo de aplicação

Criando um projeto dinâmico

Vamos criar um projeto dinâmico e configurá-lo para utilizar JavaServer Faces. Em File escolher New / Dynamic Web Project. Se não tiver na lista apresentada, ir a Other / Web que encontrará lá. Na próxima tela, configurar conforme a figura abaixo e clicar em Next / Next.

Projeto Dinâmico tela 1

Figura 13: Tela de criação de Projeto Dinâmico

 

Na tela Web Module marcar a opção Generate web.xml deployment descriptor e clicar em Next.

Na tela JSF Capabilities será configurada a biblioteca do JSF e será incluído o arquivo jar que obtivemos do JSF 2. Em Type selecionar User Library. Clicar no ícone Manage librarys…, na tela User Libraries clicar em New e criar a biblioteca JSF2. Em seguida clicar em Add External Jars e buscar o arquivo jar do JSF. Clicar em OK, que voltará para a tela anterior. Em seguida, marcar a biblioteca que foi criada. Em URL Mapping Patterns, remover o que está e adicionar *.xhtml, como mostra a figura abaixo. Em seguida clicar em Finish. O projeto está criado.

Projeto Dinâmico Tela 2

Figura 14: Tela JSF Capabilities

 

Na pasta Webcontent/WEB-INF do projeto encontra-se o arquivo web.xml, que contém as configurações do projeto. Artigos posteriores entrarão em maiores detalhes. Para esse exemplo, vamos abrir esse arquivo e na tag <welcome-file-list> deixaremos apenas a welcom-file índex.xhtml, como mostra a seguir.

webxml

Figura 15: Arquivo web.xml do projeto dinâmico

 

Criando um Managed-bean

Um managed-bean é uma classe em Java que contém propriedades (atributos) que trabalhará na camada C do padrão MVC. Vamos criar uma classe que contém um atributo mensagem para podermos chamá-la numa página xhtml.

ControlePrincipal

Figura 16: Managed-bean do projeto

 

Na figura acima temos um bean (com um atributo, o construtor e o o getter e setter).

As anotações das linhas 6 e 7 servem para evitar sejam feitas no arquivo de configurações faces-config.xml.

@ManagedBean(name=”controlePrincipal”) tem como função declarar que a classe é um ManagedBean. O atributo name não é obrigatório, ele indica o nome com que esse bean será chamado nas páginas do projeto. Se não tiver esse atributo, será chamado pelo nome da classe.

@RequestScoped tem como função indicar que o tempo de vida desse bean é apenas durante a requisição que a chama.

Criando a página index.xhtml

Para criar a página índex.xhtml, clicar com o botão direito em cima de WebContent do projeto, como mostra a figura abaixo.

criandoXhtml

Figura 17: Tela New XHTML Page

 

Se não tiver o Jboss Tools instalado, não terá essa opção. Deverá então escolher HTML File e alterar sua extensão para XHTML. Em seguida, colocar o nome índex.xhtml e clicar em Next. Na próxima tela, devemos escolher o XHTML template (Blank JSF Page).

XHTML Template

Figura 18: Escolha do template

indexxhtml

 

Figura 19: índex.xhtml

Nas linhas 3 a 5 estão as taglibs que serão utilizadas no código. O template JSF já traz essas indicações. Portanto em todas as páginas JSF estarão essas linhas. O atributo xmlns indica a biblioteca que estará disponível no arquivo (namespace).

Na linha 9 estamos utilizando uma tag de HTML (h:outputText) que está na biblioteca indicada na linha 3.

O atributo value está buscando a mensagem que está no managed-bean ControlePrincipal. É importante dizer que a propriedade mensagem está encapsulada, portanto está sendo chamado aí o seu getter (getMensagem).

Executando o projeto

Para executar essa página, podemos clicar com o botão direito do mouse em cima do nome do projeto, e escolher a opção Run As / Run on Server.

Execução 1

Figura 20: Executando o projeto

 

Na próxima tela será pedido para configurar o servidor que será utilizado. Na pasta Apache, vamos escolher a versão 7.0.

Execução 2

Figura 21: Configurando o servidor Tomcat v7.0

 

A seguir podemos clicar em Finish. Será executada a página índex.xhtml, que foi configurada para ser a primeira página do projeto. Se copiarmos o endereço http://localhost:8080/PrimeiroProjetoJSF/ e colarmos no browser, ele deverá executar também.

Execução 3

Figura 22: Tela de execução

 

Conclusão

Vimos nesse artigo, passo a passo, como instalar os programas, configurar e iniciar a execução de um projeto simples utilizando o JavaServer Faces 2 e o Jboss Tools através do Eclipse, com o Apache Tomcat 7.0. Artigos posteriores mostrarão com detalhes os componentes das taglibs html e core que constam no framework JSF.

 

Referências Bibliográficas

Décio Heinzelmann Luckow e Alexandre Altair de Melo. Programação Java para a Web, Novatec Editora, 2010.

Jorge Luis Boeira Bavaresco. Curso Online de JSF (JavaServer Faces)  Devmedia Cursos, 2013/2014. http://www.devmedia.com.br/curso/curso-online-de-jsf-java-server-faces/393

 

Sobre perini

José Carlos Perini publicou 49 posts no seu blog.

Professor universitário Faculdade Metrocamp e People Computação Oracle Certified Professional, Java SE 6 Programmer

You can leave a response, or trackback from your own site.

6 Responses to “JavaServer Faces – Configuração e introdução”

  1. Atila disse:

    Otimo artigo!

  2. Caroline disse:

    Boa Tarde Professor, o programa Eclipse está dando erro “! C:\Users\Jovana\Desktop\Faculdade\Programas\eclipse-jee-kepler-SR1-win32.zip: O arquivo está em formato desconhecido ou danificado
    “, como posso resolver ?

    Att

    • perini disse:

      Olá.
      É difícil saber o que está acontecendo. Não é para dar erro.
      Vamos a algumas possibilidades:
      1 – O download pode não ter sido executado por completo. Se for isso, tente fazer do download novamente.
      2 – Seu computador pode não ter um programa de descompactar arquivos, como o winzip. Caso isso aconteça aparecerá a mensagem de arquivo desconhecido.
      Tente verificar isso, e me envie uma mensagem me contando.

      Obrigado pela leitura!

  3. Flavio Fontes disse:

    Funcionou perfeito.

    Obrigado

    Onde encontro uma apostila com exemplos?

    Flávio

  4. bruno M disse:

    Finalmente entendi e configurei.. ufaa.. Obrigadoo

Leave a Reply