Inicial > Biblioteca de Componentes, Java EE, JavaServer Faces > Criando um Projeto com o PrimeFaces

Criando um Projeto com o PrimeFaces

Boa noite Pessoal.

Irei apresentar neste post a biblioteca de componentes JSF Prime Faces. Este biblioteca possui um vasto acervo de componentes, além de suporte a Ajax e Themas e suporte a JSF 2.0. Aqui há um ShowCase de todos os componentes da biblioteca.

Iremos utilizar neste post a IDE NetBeans 6.9 e o servidor de aplicação GlassFish 3.

NetBeans 6.9 e GlassFish 3

Para baixar o NetBeans 6.9 acesse o site http://netbeans.org/downloads/index.html e clique em Download, na opção Java. Após o download do mesmo intale-o no local desejado.

Obs.: O servidor de aplicação GlassFish 3 já estrá no pacote de dowload do NetBeans 6.9.

Bibliotecas Necessárias

Para trabalharmos com o PrimeFaces devemos baixar as bibliotecas necessárias, o download pode ser realizado neste link http://www.primefaces.org/downloads.html. No link indicado selecione a opção primefaces-2.1.jar (versão para ser utilizada juntamente com JSF 2.0). Depois de feito o download descompacte o mesmo no local desejado.

Criando o Projeto

Com o NetBeans aberto clique em Arquivo > Novo Projeto, na janela que aparecerá em Categorias selecione Java Web, em Projetos selecione Aplicação Web e clique em Próximo.

Na próxima tela em Nome do Projeto digite ProjetoPrimeFaces e clique em Próximo.

Imagem 1 - Criando o Projeto

O próximo passo é a configuração do nosso Servidor, selecione na opção Servidor GlassFish Server 3 e clique em Próximo.

Imagem 2 - Selecionando o Servidor

Na próxima tela iremos selecionar quais os frameworks que utilizaremos no nosso projeto, no nosso caso utilizaremos somente o JSF desta lista, então selecione a opção JavaServer Faces. Após selecionado o Framework JSF repare que logo abaixo irá aparecer uma área para configuração do mesmo, vamos deixar a opção default marcada, neste caso iremos utilizar o JSF 2.0. Clique em Finalizar.

Imagem 3 - Selecionando os Frameworks

O nosso projeto está criado, como vocês podem ver o NetBeans já criou uma página com o nome de index.xhtml, vamos agora configurar o PrimeFaces.

Configurando o Prime Faces

No NetBeans selecione a opção Ferramentas > Bibliotecas e na janela que se abrir clique no botão Nova biblioteca. Na janela que se abrir digite em Nome da biblioteca PrimeFaces e clique em OK.

Imagem 4 - Configurando a Biblioteca PrimeFaces

Vamos agora adicionar a biblioteca criada o jar do Prime Faces que baixamos, clique em Adicionar jar/pasta e selecione o jar do Prime Faces que baixamos, após seleciona-lo clique em OK.

Imagem 5 - Selecionando os Jar's necessários

Após criada a nossa biblioteca devemos adiciona-la ao nosso projeto, para isto clique com o botão direito na pasta Bibliotecas do nosso projeto e depois clique em Adicionar biblioteca. Na janela que aparecerá clique em Importar e selecione a nossa biblioteca recém criada “PrimeFaces”. Agora selecione a mesma e clique em Adicionar biblioteca.

Imagem 6 - Adicionando as Bibliotecas ao nosso Projeto

Agora o nosso projeto está pronto para utilizarmos as tags do Prime Faces, vamos alterar a nossa página index.xhtml conforme abaixo:

<?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”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml&#8221;
xmlns:p=”http://primefaces.prime.com.tr/ui&#8221;
xmlns:h=”http://java.sun.com/jsf/html&#8221;
xmlns:f=”http://java.sun.com/jsf/core”&gt;
<h:head>
<title>Trabalhando com Prime Faces</title>
</h:head>
<h:body>
<f:view>
<h:form>

<p:commandButton id=”btExibir” value=”Janela…” onclick=”janelaConfimacao.show()”/>

<p:dialog header=”Prime Faces Dialog”
showEffect=”bounce” hideEffect=”explode”
widgetVar=”janelaConfimacao”>

<p:commandButton id=”btFechar” value=”Fechar” oncomplete=”janelaConfimacao.hide()”/>
</p:dialog>
</h:form>
</f:view>
</h:body>
</html>

Nesta exemplo é apresentado os componentes p:commandButton e p:dialog.

O botão de ID “btExibir”, no seu evento onclick, indicamos que queremos exibir  o dialogo “janelaConfirmacao” através da função janelaConfimacao.show().

O botão de ID “btFechar”, no seu evento onclick, indicamos que queremos fechar o dialogo “janelaConfirmacao” através da função janelaConfimacao.hide().

Criamos também um Dialogo a ser exibido, o mesmo possui as seguintes propriedades:

header: Cabeçalho que será apresentado na janela.

showEffect: Efeito da janela quando a mesma for aberta.

hideEffect: Efeito da janela quando a mesma for fechada.

widgetVar: Identificador da janela.

Executando o Projeto

Para verificarmos o PrimeFaces em funcionamento vamos executar o nosso projeto, para isso clique com o botão direito no nosso projeto e clique na opção Executar. Será aberto o brower com a nosso projeto, como abaixo:

Imagem 7 - Projeto em funcionamento

Bom pessoal, quis apresentar neste post como configurar o Prime Faces em uma aplicação web, estarei posteriormente escrevendo novos post’s sobre PrimeFaces apresentando novos componentes do mesmo.

Ate.

  1. Alexandre Ferreira
    19/09/2010 às 01:05

    Aguardando mais post sobre esse componente. =)

    Abracao!

  2. Hallan Pagani
    11/02/2011 às 23:17

    Cara mato a pau!

    era oque eu estava procurando. Muito bom MESMO.

    Parabéns Otimo BLOG.

  1. No trackbacks yet.

Deixe um comentário