Bom, tive algumas dificuldades de usar PrimeFaces e JSF 2.0 e não achei muita coisa na net sobre o assunto por isso resolvi postar um simples exemplo de como usar esses caras.
Estou usando o eclipse Helios para o exemplo:
Bem, vamos lá.
Criando um novo projeto: para criar um novo projeto no eclipse vá em file/new/project e escolha a opção "Dynamic Web Project " como mostra a figura abaixo:
Clique em "Next".
Em "Project name", coloque o nome do seu projeto, no meu caso vou colocar "TutorialJSF"
Em "Target runtime", deve-se escolher o servidor de aplicação, no meu caso estou usando o JBoss 5.1, mas pode ser utilizado qualquer outro que vocês já usam como: tomcat, jetty, etc..
Em "Configuration" deve-se clicar em "Modify", e escolher a opção "Java Server Faces 2.0", como mostra a figura abaixo:
Clique em "OK".
A tela deve ficar da seguinte maneira (lembre que meu servidor de aplicação é o JBoss 5.1):
Clique em "Next".
A próxima tela deve ficar como mostra a imagem abaixo:
Clique em "Next".
A próxima tela deverá ficar como mostra a imagem abaixo:
Clique em "Next".
Nesta tela, para quem não criou nenhum projeto ainda, em "URL Mapping Patterns", deverá esta como "/faces/*", remova esta opção e adicione "*.jsf", essa extenção será mapeada no web.xml. A figura abaixo mostra como deverá ficar a tela.
Clique em "Finish".
Com isso nosso projeto estará criado.
Para continuar o tutorial é preciso ter as bibliotecas do PrimeFaces e do JSF 2 em mãos (OBS: para que está usando o JBoss, verifique se no diretório "seu_diretorio_do_JBoss\server\default\deploy\jbossweb.sar\jsf-libs", estão as bibliotecas do JSF, se não tiver, ao baixa-las coloque elas nesta pasta, os demais servidores, eu acho, que pode ser colocado no projeto, explicarei como fazer isso mais tarde).
Para baixar o PrimeFaces acesse:
http://www.primefaces.org/downloads.html
Estou usando a versão "primefaces-2.2.1.jar", mas pode ser a mais atual que tiver (OBS: não baixe as versões como "primefaces.3.0.M3.jar", estão sendo implementados ainda e podem conter erros).
Para baixar o JSF 2 acesse:
http://javaserverfaces.java.net/
Do lado direito superior da tela terá o botão para download, baixe a versão mais atual.
Será baixado um arquivo .rar, no me caso o arquivo é "mojarra-2.1.1-FCS-binary.zip". Descompacte este arquivo e acesse o diretório "mojarra-2.1.1-FCS-binary\mojarra-2.1.1-FCS\lib", neste diretório terá dois arquivos "jsf-api.jar" e "jsf-impl.jar", essas são as bibliotecas do JSF 2.
Agora, com as bibliotecas em mão, quem está usando JBoss, basta verificar a pasta que falei logo acima e seguir as instruções que falei.
Os três arquivos devem ser copiados para a pasta "WebContent\WEB-INF\lib" do projeto, exceto quem está usando o JBoss, deve copiar somente a biblioteca do PrimeFaces.
Agora precisaremos acrescentar mais uma biblioteca no projeto. Clique com o botão direito na raiz do projeto e clique em "Properties", depois disso, clique em "Java Build Path", na aba "Libraries", clique no botão "Add Library" e clique na opção "Java EE 5 libraries", ou mais atual, e clique em "Next", "Finish" e "Ok".
Agora, na pasta src, clique com o botão direito e escolha a opção "new\package", em "Name", digite "com.br.tutorialjsf.controller" e clique em "Finish".
No pacote que acabamos de criar, clique com o botão direito e escolha a opção "new\Class", em "Name", digite "HomeController" e clique em "Finish".
A classe HomeController irá ficar da seguinte forma:
package com.br.tutorialjsf.controller;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean(name="home")
@RequestScoped
public class HomeController {
private String nome;
public String getNome() {
return "Tutorial JSF e PrimeFaces.";
}
public void setNome(String nome) {
this.nome = nome;
}
}
As anotações @ManagedBean e @RequestScoped, substituem o arquivos faces-config.xml, que é utilizado na versão 1.2 do JSF. Logo, quando tiver um tempo disponível, tentarei montar um tutorial somente de JSF 2 explicando as anotações de escopo e as diferenças entre o 1.2 e o 2.0.
Mas agora vamos ao que interessa:
Clique com o botão direito na pasta WebContent e escolha a opção "new\other", vamos escolher um arquivos html como mostra a figura abaixo.
Clique em "Next".
A próxima tela deve ficar como mostra a figura abaixo (Não esqueça de digitar "home.xhtml" em "File name"):
Clique em "Next".
Na próxima tela escolha a opção "New XHTML File (1.0 transitional)", como mostra a figura abaixo:
Clique em "Finish".
Note que o arquivo que acabamos de criar tem algumas tags de html, precisaremos fazer algumas alterações para que o JSF e o PrimeFaces funcionem corretamente, o abaixo mostrarei o código como está e como deverá ficar:
Antes:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Insert title here</title>
</head>
<body>
</body>
</html>
Depois:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.prime.com.tr/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Insert title here</title>
</h:head>
<h:body>
</h:body>
</html>
Com isso, o PrimeFaces e o JSF já estarão configurados para usarmos, para testar basta colocar a tag "<p:colorPicker></p:colorPicker>" entre a tag "body" e rodar a aplicação, o código fica assim:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.prime.com.tr/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Insert title here</title>
</h:head>
<h:body>
<h:inputText value="#{home.nome}" />
<p:colorPicker></p:colorPicker>
</h:body>
</html>
O resultado disto será:
Bem Galera, espero ter ajudado, qualquer dúvida postem que, se eu souber responder, garanto que respondo.
Obrigado.
A tela deve ficar da seguinte maneira (lembre que meu servidor de aplicação é o JBoss 5.1):
Clique em "Next".
A próxima tela deve ficar como mostra a imagem abaixo:
Clique em "Next".
A próxima tela deverá ficar como mostra a imagem abaixo:
Clique em "Next".
Nesta tela, para quem não criou nenhum projeto ainda, em "URL Mapping Patterns", deverá esta como "/faces/*", remova esta opção e adicione "*.jsf", essa extenção será mapeada no web.xml. A figura abaixo mostra como deverá ficar a tela.
Clique em "Finish".
Com isso nosso projeto estará criado.
Para continuar o tutorial é preciso ter as bibliotecas do PrimeFaces e do JSF 2 em mãos (OBS: para que está usando o JBoss, verifique se no diretório "seu_diretorio_do_JBoss\server\default\deploy\jbossweb.sar\jsf-libs", estão as bibliotecas do JSF, se não tiver, ao baixa-las coloque elas nesta pasta, os demais servidores, eu acho, que pode ser colocado no projeto, explicarei como fazer isso mais tarde).
Para baixar o PrimeFaces acesse:
http://www.primefaces.org/downloads.html
Estou usando a versão "primefaces-2.2.1.jar", mas pode ser a mais atual que tiver (OBS: não baixe as versões como "primefaces.3.0.M3.jar", estão sendo implementados ainda e podem conter erros).
Para baixar o JSF 2 acesse:
http://javaserverfaces.java.net/
Do lado direito superior da tela terá o botão para download, baixe a versão mais atual.
Será baixado um arquivo .rar, no me caso o arquivo é "mojarra-2.1.1-FCS-binary.zip". Descompacte este arquivo e acesse o diretório "mojarra-2.1.1-FCS-binary\mojarra-2.1.1-FCS\lib", neste diretório terá dois arquivos "jsf-api.jar" e "jsf-impl.jar", essas são as bibliotecas do JSF 2.
Agora, com as bibliotecas em mão, quem está usando JBoss, basta verificar a pasta que falei logo acima e seguir as instruções que falei.
Os três arquivos devem ser copiados para a pasta "WebContent\WEB-INF\lib" do projeto, exceto quem está usando o JBoss, deve copiar somente a biblioteca do PrimeFaces.
Agora precisaremos acrescentar mais uma biblioteca no projeto. Clique com o botão direito na raiz do projeto e clique em "Properties", depois disso, clique em "Java Build Path", na aba "Libraries", clique no botão "Add Library" e clique na opção "Java EE 5 libraries", ou mais atual, e clique em "Next", "Finish" e "Ok".
Agora, na pasta src, clique com o botão direito e escolha a opção "new\package", em "Name", digite "com.br.tutorialjsf.controller" e clique em "Finish".
No pacote que acabamos de criar, clique com o botão direito e escolha a opção "new\Class", em "Name", digite "HomeController" e clique em "Finish".
A classe HomeController irá ficar da seguinte forma:
package com.br.tutorialjsf.controller;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean(name="home")
@RequestScoped
public class HomeController {
private String nome;
public String getNome() {
return "Tutorial JSF e PrimeFaces.";
}
public void setNome(String nome) {
this.nome = nome;
}
}
As anotações @ManagedBean e @RequestScoped, substituem o arquivos faces-config.xml, que é utilizado na versão 1.2 do JSF. Logo, quando tiver um tempo disponível, tentarei montar um tutorial somente de JSF 2 explicando as anotações de escopo e as diferenças entre o 1.2 e o 2.0.
Mas agora vamos ao que interessa:
Clique com o botão direito na pasta WebContent e escolha a opção "new\other", vamos escolher um arquivos html como mostra a figura abaixo.
Clique em "Next".
A próxima tela deve ficar como mostra a figura abaixo (Não esqueça de digitar "home.xhtml" em "File name"):
Clique em "Next".
Na próxima tela escolha a opção "New XHTML File (1.0 transitional)", como mostra a figura abaixo:
Clique em "Finish".
Note que o arquivo que acabamos de criar tem algumas tags de html, precisaremos fazer algumas alterações para que o JSF e o PrimeFaces funcionem corretamente, o abaixo mostrarei o código como está e como deverá ficar:
Antes:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Insert title here</title>
</head>
<body>
</body>
</html>
Depois:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.prime.com.tr/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Insert title here</title>
</h:head>
<h:body>
</h:body>
</html>
Com isso, o PrimeFaces e o JSF já estarão configurados para usarmos, para testar basta colocar a tag "<p:colorPicker></p:colorPicker>" entre a tag "body" e rodar a aplicação, o código fica assim:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.prime.com.tr/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Insert title here</title>
</h:head>
<h:body>
<h:inputText value="#{home.nome}" />
<p:colorPicker></p:colorPicker>
</h:body>
</html>
O resultado disto será:
Bem Galera, espero ter ajudado, qualquer dúvida postem que, se eu souber responder, garanto que respondo.
Obrigado.
Boa tarde Andre tudo bom?
ResponderExcluirAndré você podia fazer um tutoriais...e a cada final do tutorial disponibilizar os exemplo em .war ou o projeto.
Teria como vc fazer um crud com imagens? usando o primefaces? Exemplo upload de imagens ai listando imagens de cada produto por exemplo.
vlw,fico no aguardo de mais tutoriais.
Ótimo tutorial.
ResponderExcluirFoi de grande ajuda!
Cara muito bom o seu tutorial, entre as video aulas que assisti até agora sempre pularam essa parte de mudar as tags html, por isso a minha aplicação nunca rodava, valew mesmo pela força.
ResponderExcluir