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:
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.
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.
Instalação (Windows 7)
1: Execute como administrador.
2: Clique em Next.
3: Concorde com os termos da Apache.
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.
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.
6: Selecione a pasta em que a JRE esteja instalada.
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.
8: Desmarque 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.
– Caso o tomcat esteja iniciado, inicie o Monitor Tomcat e pare o serviço.
Eclipse IDE for Java EE Developers
Download: http://www.eclipse.org/downloads/
Clicar no IDE for java EE Developers e em seguida fazer o download conforme o seu sistema operacional.
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.
Biblioteca Primefaces 3.5
Download: http://www.primefaces.org/downloads.html
Para este tutorial estou utilizando a versão 3.5.
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”.
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.
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.
4: Em Project name dê um nome ao seu projeto. Chamei aqui de “TestandoJsfPrimefaces”.
5: Em Target runtime clique em New Runtime…
5.1: Selecione Apache e em seguinda Apache Tomcat v7.0 (foi a versão instalada acima) e clique em Next.
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.3: Selecione o diretório em que o Tomcat foi instalado anteriormente, no meu caso é: “C:\Program Files\Apache Software Foundation\Tomcat 7.0”.
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.
7: Clique em Next.
8: Clique em Next.
9: Marque a opção Generate web.xml deplyment descriptor e clique em Next.
10: Atenção, na tela seguinte explicarei duas formas de fazer a configuração da biblioteca JSF para o projeto.
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.
10.1.4: Aceite os termos e licenças e clique em Finish.
10.1.5: Em seguida verifique se a biblioteca foi adicionada corretamente e passe para o passo 11.
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”.
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.
10.2.6: Selecione 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.8: Selecione os arquivos “.jar” dessa pasta, no meu caso são “jsf-api.jar” e “jsf-impl.jar” e clique em Abrir.
10.2.9: Verifique se os jars foram adicionados corretamente e passe para o passo 11.
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.
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.
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.
18: Se 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.
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.
OBS: Se ocorrer algum tipo de erro, repita o processo novamente.
TESTANDO A APLICAÇÃO
1: Na pasta “WebContent”, clique com o botão direito na pasta WebContent > New > File.
2: No campo File Name: digite “index.xhtml” e clique em Finish.
3: Abra o site “primefaces.org”. clique em “Development” e depois clique em “Getting Started”.
4: Copie o código xhtml da parte Test Run.
5: Cole o código copiado da página do primefaces no eclipse, dentro do arquivo recém criado que chamamos de “index.xhtml”.
6: Clique com o botão direito sobre o arquivo “index.xhtml”, clique em Run As, em seguida Run on Server.
7: Selecione “Tomcat v7.0 Server” e em seguida clique em Finish.
8: Se tudo ocorrer bem, uma página da web será aberta no eclipse, copie o link da mesma e cole no seu navegador.
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”.
Espero ter ajudado,
Nenhum comentário:
Postar um comentário