Instalação Eclipse, Tomcat, JSF e Primefaces

Atualmente, o java está em alta, assim como a programação web, a um tempo atrás descobri o Primefaces. Primefaces é uma biblioteca JSF (JavaServer Faces) que auxilia na criação dos componentes visuais da sua página WEB, com componentes intuitivos e de fácil programação, o primefaces vem ganhando mercado dia após dia por ser dinâmico para se trabalhar.
Com ele, podemos exibir componentes html como uma tabela, com poucas linhas de código. Exemplo:
46
Como eu senti certa dificuldade na instalação do eclipse, jsf e primefaces na primeira vez que fui instalar todas as funcionalidades, decidi fazer um tutorial passo a passo fácil e prático para quem, assim como eu, sentiu dificuldade ou não conseguiu instalar.
Para que que tudo funcione perfeitamente, siga o tutorial passo a passo sem pular etapas, pois cada etapa é fundamental.

BAIXANDO E INSTALANDO OS ARQUIVOS NECESSÁRIOS

JDK 7 ou Superior

Ao acessar esta página, existirá vários downloads, em Java Platform (JDK) clique em Download e em seguida Aceite os termos faça o download conforme o seu sistema operaciopal.
2
Instalação (Windows 7)
1: Execute como administrador.
2: Avance as etapas que a JDK será instalada automaticamente (irá instalar JRE e JDK).

Apache Tomcat

Download: http://tomcat.apache.org/ (Estarei utilizando a versão 7 neste tutorial)
Na parte de Download, clique em Tomcat 7.0, em seguida baixe o arquivo de instalação do seu sistema operacional, para windows ele tem o instalador, será este que irei baixar aqui.
3
Instalação (Windows 7)
1: Execute como administrador.
2: Clique em Next.
4
3: Concorde com os termos da Apache.
5
4: Se não estiver selecionada, selecione o tipo da instalação como Normal no campo (Select the type of install) e clique em Avançar.
6
5: Nesta etapa (Configuration Options) irei somente clicar em Next, porém você pode definir as portas da aplicação caso queira como também o usuário e senha da mesma.
7
6: Selecione a pasta em que a JRE esteja instalada.
8
7: Selecione a pasta em que você queira instalar o Apache Tomcat, no meu caso deixarei em “Arquivos de Programas”, em seguida clique em Install.
9
8Desmarque as opções marcadas ao final da instalação, caso selecionada, irá iniciar o serviço, vai atrapalhar se o serviço estiver ligado, pois para dar continuidade ao tutorial, o tomcat precisa ser iniciado somente após a instalação de todos os plugins, acarretando conflitos futuros.
– Caso o tomcat esteja iniciado, inicie o Monitor Tomcat e pare o serviço.
10

Eclipse IDE for Java EE Developers

Clicar no IDE for java EE Developers e em seguida fazer o download conforme o seu sistema operacional.
1
Instalação
Basta descompactar o Eclipse J2EE no diretório de sua preferência, irei extrair o meu Eclipse em “C:/EclipseJ2EE”.

BAIXANDO OS JARS NECESSÁRIOS PARA O AMBIENTE DE DESENVOLVIMENTO

JSF (JavaServer Faces) (SE FOR FAZER PELO MODO MANUAL NO ECLIPSE)

Para este tutorial estou utlizando a versão 2.1.
25

Biblioteca Primefaces 3.5

Para este tutorial estou utilizando a versão 3.5.
26

CONFIGURANDO O AMBIENTE DE DESENVOLVIMENTO PARA UM NOVO PROJETO

1: Abra o Eclipse J2EE.
2: Selecione um Workspace (local/pasta de trabalho onde ficarão os seus projetos desenvolvidos) Colocarei em “C:\teste”.
11
3: Clique em File > New > Dynamic Web Project
OBS: caso não aparecer esta opção, provavelmente a versão do eclipse está desatualizada ou o eclipse não está com os plugins corretos, baixe a versão que foi citada neste tutorial para que funcione corretamente.
12
4: Em Project name dê um nome ao seu projeto. Chamei aqui de “TestandoJsfPrimefaces”.
5: Em Target runtime clique em New Runtime…
13
5.1: Selecione Apache e em seguinda Apache Tomcat v7.0 (foi a versão instalada acima) e clique em Next.
14
5.2: Em Name digite o nome que queira dar à sua instância do Apache Tomcat, Deixarei com o nome default “Apache Tomcat v7.0”.
5.3Selecione o diretório em que o Tomcat foi instalado anteriormente, no meu caso é: “C:\Program Files\Apache Software Foundation\Tomcat 7.0”.
15
5.4: Clique em Finish.
6: Em Configuration Clique em Modify…
6.1: Selecione a opção JavaServer Faces.
6.2: Selecione a versão desejada, no meu caso irei selecionar a 2.1.
6.3: Clique em OK.
19
7: Clique em Next.
8: Clique em Next.
17
9: Marque a opção Generate web.xml deplyment descriptor e clique em Next.
18
10: Atenção, na tela seguinte explicarei duas formas de fazer a configuração da biblioteca JSF para o projeto.
20
10.1: CONFIGURANDO O JSF COM O DOWNLOAD AUTOMÁTICO DA BIBLIOTECA
10.1.1: Clique em Download Libraries.
10.1.2: Em seguida selecione a versão jsf que deseja baixar. No meu caso selecionei a JSF 2.1 (Mojarra 2.1.6-FCS)
10.1.3: Clique em Next.
22
10.1.4Aceite os termos e licenças e clique em Finish.
23
10.1.5: Em seguida verifique se a biblioteca foi adicionada corretamente e passe para o passo 11.
24
10.2: CONFIGURANDO O JSF SEM O DOWNLOAD AUTOMÁTICO DA BIBLIOTECA
10.2.1: Se ainda não fez o download dos arquivos da biblioteca JSF, veja acima no item: JSF (JavaServer Faces) (SE FOR FAZER PELO MODO MANUAL NO ECLIPSE) e efetue o download.
10.2.2: Descompacte o arquivo .zip em uma pasta de sua preferência, no meu caso vou descompactar em uma pasta com o mesmo nome do zip: “mojarra-2.1.1-FCS”.
27
10.2.3: Clique em Manage Libraries….
10.2.4: Clique em New…
10.2.5: Defina o nome da nova biblioteca como JSF 2.1 e clique em OK.
28
10.2.6Selecione a biblioteca recém criada que seria JSF 2.1 e clique em Add External JARs…
10.2.7: Procure pela pasta descompactada (do arquivo baixado no passo 10.2.1) que no meu caso é “mojarra-2.1.1-FCS” e dentro dela abra a pasta “libs”.
10.2.8Selecione os arquivos “.jar” dessa pasta, no meu caso são “jsf-api.jar” e “jsf-impl.jar” e clique em Abrir.
29
10.2.9: Verifique se os jars foram adicionados corretamente e passe para o passo 11.
30
11: Após a configuração da biblioteca JSF manual ou automática, iremos instalar a biblioteca Primefaces 3.5, se ainda não fez o download do arquivo, veja acima no item Biblioteca Primefaces 3.5 acima e efetue o download.
12: Após a configuração da biblioteca JSF manual ou automática, iremos instalar a biblioteca Primefaces, na mesma tela do passo (10.1.5) ou (10.2.9), clique em New…
13: Defina o nome da nova biblioteca como Primefaces 3.5 e clique em OK.
31
14: Selecione a biblioteca recém criada (Primefaces 3.5) e clique em Add External JARs….
15: Procure pelo jar do Primefaces 3.5 (arquivo baixado no passo 11), no meu caso é “primefaces-3.5.jar”, após a seleção, clique em Abrir.
32
16: Selecione as duas bibliotecas (“JSF 2.1” ou “JSF 2.1 (Mojarra 2.1.6-FCS)”) e também a “Primefaces 3.5”.
17: Clique em OK.
33
18Se não estiverem marcadas, marque a biblioteca (“JSF 2.1” ou “JSF 2.1 (Mojarra 2.1.6-FCS)”) e também a “Primefaces 3.5” e clique em Finish.
34
19: Se concluir corretamente, a estrutura do projeto é criada com as configurações especificadas.
OBS: Se ocorrer algum tipo de erro, repita o processo novamente.
35

TESTANDO A APLICAÇÃO

1: Na pasta “WebContent”clique com o botão direito na pasta WebContent > New > File.
36
2: No campo File Name: digite “index.xhtml” e clique em Finish.
37
3: Abra o site “primefaces.org”. clique em “Development” e depois clique em “Getting Started”.
38
4: Copie o código xhtml da parte Test Run.
39
5: Cole o código copiado da página do primefaces no eclipse, dentro do arquivo recém criado que chamamos de “index.xhtml”.
40
6: Clique com o botão direito sobre o arquivo “index.xhtml”, clique em Run As, em seguida Run on Server.
41
7: Selecione “Tomcat v7.0 Server” e em seguida clique em Finish.
42
8: Se tudo ocorrer bem, uma página da web será aberta no eclipse, copie o link da mesma e cole no seu navegador.
43
44
9: Pronto, agora você pode usar todos os componentes do Primefaces, para ver todos os componentes disponíveis e o código de implementação, basta acessar o site http://www.primefaces.org/ e ir em “Demos” em seguida “Showcase”.
45
Espero ter ajudado,

Nenhum comentário:

Postar um comentário