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.
O próximo passo é a configuração do nosso Servidor, selecione na opção Servidor GlassFish Server 3 e clique em Próximo.
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.
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.
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.
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.
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”>
<html xmlns=”http://www.w3.org/1999/xhtml”
xmlns:p=”http://primefaces.prime.com.tr/ui”
xmlns:h=”http://java.sun.com/jsf/html”
xmlns:f=”http://java.sun.com/jsf/core”>
<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:
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.