O projeto que vamos fazer é simples, será o cadastro de um produto com os seguintes atributos:
id, nome, preço e foto do produto.
==> Crie a base de dados ou utilize uma já existente, no meu caso, irei criar uma nova base de dados com o nome fileUpload.
==> Crie um novo projeto web com suporte a JSF, Primefaces e Hibernate (utilizando o banco criado acima).
==> Crie a estrutura de pacotes
- managedBean (controller)
- dao (persistência)
- entidades (POJO)
==> Agora vamos fazer o POJO de produtos. Dentro do pacote entidades crie uma nova classe com o nome Produto
2 | ||
5 | package entidades; | |
6 | ||
7 | /** | |
8 | * | |
9 | * @author Mara | |
10 | */ | |
11 | import javax.persistence.*; | |
12 | @Entity | |
13 | @Table(name="tb_produto") | |
14 | public class Produto{ | |
15 | @Id | |
16 | @GeneratedValue(strategy=GenerationType.AUTO) | |
17 | @Column(name="prod_id") | |
18 | private int id; | |
19 | @Column(name="prod_nome") | |
20 | private String nome; | |
21 | @Column(name="prod_preco") | |
22 | private double preco; | |
23 | @Column(name="prod_foto") | |
24 | private String foto; | |
25 | ||
// Construtor getters e setters | ||
29 |
Obs.: faça o import das anotações do pacote javax.persistence.*
==> Crie a classe HibernateUtil dentro do pacote dao.
caso tenha dúvida de como implementar a HibernateUtil consulte http://meninajava.blogspot.com/2011/11/configurar-o-hibernate-utilizando.html
==> Adicione o mapeamento da classe Produto no arquivo hibernate.cfg.xml e habilite para hibernate criar automaticamente a tabela no banco.
10 | <property name="hibernate.hbm2ddl.auto">update</property> | |
11 | <mapping class="entidades.Produto"/> | |
12 |
Agora vamos fazer a classe ProdutoDao que terá os metódos para persistir e consultar os dados do banco.
==> Dentro do pacote dao, crie uma nova classe com o nome ProdutoDao e implemente pelo menos os metódos de salvar e consultar todos os produtos, para este tutorial iremos utilizar somente estes dois.
3 | package dao; | |
4 | ||
8 | import entidades.Produto; | |
9 | import java.util.List; | |
10 | import org.hibernate.Session; | |
11 | ||
12 | public class ProdutoDao { | |
13 | public void salvar(Produto produto){ | |
14 | Session session = HibernateUtil.getSession(); | |
15 | session.beginTransaction().begin(); | |
16 | session.saveOrUpdate(produto); | |
17 | session.getTransaction().commit(); | |
18 | session.close(); | |
19 | System.out.println("Salvo com sucesso"); | |
20 | } | |
21 | ||
22 | public List<Produto> listar(){ | |
23 | Session session= HibernateUtil.getSession(); | |
24 | String sql = "SELECT p FROM Produto p"; | |
25 | return (List<Produto>) session.createQuery(sql).list(); | |
26 | } | |
27 | } |
==> Faça o download de duas bibliotecas extras:
Após baixar os arquivos, adicione as depedências ao seu projeto.
==> Configure o arquivo web.xml adicionando o filter do fileUpload.
<filter>
<filter-name>PrimeFaces FileUpload Filter</filter-name>
<filter-class> org.primefaces.webapp.filter.FileUploadFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>PrimeFaces FileUpload Filter</filter-name>
<servlet-name>Faces Servlet</servlet-name>
</filter-mapping>
No post anterior fiz o método de upload do arquivo no mangedBean, para faciliar as futuras implementações desta funcionalidade, criei uma classe UploadArquivo que ficará responsável pelo upload. Assim quando o usuário pressionar o botão salvar do formulário, é armazenado o arquivo e os dados no banco.
==> No pacote managedBean crie uma nova classe com o nome UploadArquivo e implemente o código abaixo.
5 | package managedBean; | |
6 | ||
7 | import java.io.File; | |
8 | import java.io.FileOutputStream; | |
9 | import java.util.logging.Level; | |
10 | import java.util.logging.Logger; | |
11 | import javax.faces.context.ExternalContext; | |
12 | import javax.faces.context.FacesContext; | |
13 | import javax.servlet.ServletContext; | |
14 | import javax.servlet.http.HttpServletResponse; | |
15 | import org.primefaces.event.FileUploadEvent; | |
16 | ||
21 | public class UploadArquivo { | |
22 | private String diretorio; | |
23 | private String caminho; | |
24 | private byte[] arquivo; | |
25 | private String nome; | |
26 | ||
27 | public UploadArquivo() { | |
28 | } | |
46 | public String getNome() { | |
47 | return nome; | |
48 | } | |
54 | public String getRealPath() { | |
55 | ExternalContext externalContext = FacesContext.getCurrentInstance().getExternalContext(); | |
56 | HttpServletResponse response = (HttpServletResponse) externalContext.getResponse(); | |
57 | ||
58 | FacesContext aFacesContext = FacesContext.getCurrentInstance(); | |
59 | ServletContext context = (ServletContext) aFacesContext.getExternalContext().getContext(); | |
60 | ||
61 | return context.getRealPath("/"); | |
62 | } | |
63 | ||
64 | public void fileUpload(FileUploadEvent event, String type, String diretorio) { | |
65 | try { | |
66 | this.nome = new java.util.Date().getTime() + type; | |
67 | this.caminho = getRealPath() + diretorio + getNome(); | |
68 | this.arquivo = event.getFile().getContents(); | |
69 | ||
70 | File file = new File(getRealPath() + diretorio); | |
71 | file.mkdirs(); | |
72 | ||
73 | } catch (Exception ex) { | |
74 | System.out.println("Erro no upload do arquivo" + ex); | |
75 | } | |
76 | } | |
77 | ||
78 | public void gravar(){ | |
79 | ||
80 | try { | |
81 | ||
82 | FileOutputStream fos; | |
83 | fos = new FileOutputStream(this.caminho); | |
84 | fos.write(this.arquivo); | |
85 | fos.close(); | |
86 | ||
87 | } catch (Exception ex) { | |
88 | System.out.println(ex); | |
89 | } | |
90 | ||
91 | } | |
92 | } |
Linha 54 - O método getRealPath pega o diretório completo da sua aplicação no servidor.
Linha 64 - O método fileUpload irá fazer o carregamento do arquivo e prepara-lo para ser gravado.
Linha 78 - O método salvar, grava o arquivo no diretório informado.
Os arquivos serão armazenados na pasta build/web/nomediretorio do seu projeto.
==> No pacote managedBean crie uma nova classe com o nome ProdutoManagedBean e implemente o código abaixo.
5 | package managedBean; | |
6 | ||
7 | import javax.faces.bean.ManagedBean; | |
8 | import javax.faces.bean.SessionScoped; | |
9 | import entidades.Produto; | |
10 | import dao.ProdutoDao; | |
11 | import java.util.ArrayList; | |
12 | import java.util.List; | |
13 | import org.primefaces.event.FileUploadEvent; | |
14 | /** | |
15 | * | |
16 | * @author Mara | |
17 | */ | |
18 | @ManagedBean(name="produtoMB") | |
19 | @SessionScoped | |
20 | public class ProdutoManagedBean { | |
21 | private Produto produto; | |
22 | private List<Produto> listarProdutos; | |
23 | private UploadArquivo arquivo = new UploadArquivo(); | |
24 | ||
25 | public ProdutoManagedBean() { | |
26 | this.produto = new Produto(); | |
27 | this.listarProdutos = new ArrayList<Produto>(); | |
28 | } | |
29 | ||
30 | public List<Produto> getListarProdutos() { | |
31 | return new ProdutoDao().listar(); | |
32 | //return this.listarProdutos; | |
33 | } | |
34 | ||
35 | public void setListarProdutos(List<Produto> listarProdutos) { | |
36 | this.listarProdutos = listarProdutos; | |
37 | } | |
38 | ||
39 | public Produto getProduto() { | |
40 | return produto; | |
41 | } | |
42 | ||
43 | public void setProduto(Produto produto) { | |
44 | this.produto = produto; | |
45 | } | |
46 | ||
47 | public void uploadAction (FileUploadEvent event){ | |
48 | this.arquivo.fileUpload(event, ".jpg", "/image/"); | |
49 | this.produto.setFoto(this.arquivo.getNome()); | |
50 | } | |
51 | ||
52 | public void salvar(){ | |
53 | new ProdutoDao().salvar(produto); | |
54 | this.arquivo.gravar(); | |
55 | ||
56 | this.produto = new Produto(); | |
57 | this.arquivo = new UploadArquivo(); | |
58 | } | |
59 | } |
Linha 47 - Método que será chamado pela view para o upload do arquivo. O arquivo será carregado mas ainda não será salvo no diretório.
Linha 54 - Quando o usuário pressionar no botão salvar do formulário, os dados serão persistidos no banco e o arquivo será gravado no diretório.
==> Agora vamos fazer a view, no arquivo index implemente o código abaixo:
1 | <?xml version='1.0' encoding='UTF-8' ?> | |
2 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
3 | <html xmlns="http://www.w3.org/1999/xhtml" | |
4 | xmlns:p="http://primefaces.prime.com.tr/ui" | |
5 | xmlns:h="http://java.sun.com/jsf/html" | |
6 | xmlns:f="http://java.sun.com/jsf/core"> | |
7 | <h:head> | |
8 | <title>File Upload</title> | |
9 | </h:head> | |
10 | <h:body> | |
11 | <h1>Inserir Produto</h1> | |
12 | <h:form> | |
13 | <h:panelGrid columns="2"> | |
14 | Nome: <h:inputText value="#{produtoMB.produto.nome}"/> | |
15 | Preço: <h:inputText value="#{produtoMB.produto.preco}"/> | |
16 | ||
17 | Foto: <p:fileUpload id="upload" update="foto" | |
18 | fileUploadListener="#{produtoMB.uploadAction}" auto="true"/> | |
19 | ||
20 | <h:commandButton action="#{produtoMB.salvar}" value="Salvar" /> | |
21 | </h:panelGrid> | |
22 | </h:form> | |
23 | ||
24 | <h2>Produtos Cadastrados</h2> | |
25 | <h:form> | |
26 | <h:dataTable var="produto" value="#{produtoMB.listarProdutos}" > | |
27 | <h:column> | |
28 | <f:facet name="header">Foto</f:facet> | |
29 | <h:graphicImage value="./image/#{produto.foto}"/> | |
30 | </h:column> | |
31 | <h:column> | |
32 | <f:facet name="header">Nome</f:facet> | |
33 | <h:outputText value="#{produto.nome}"/> | |
34 | </h:column> | |
35 | <h:column> | |
36 | <f:facet name="header">Preço</f:facet> | |
37 | <h:outputText value="#{produto.preco}"/> | |
38 | </h:column> | |
40 | </h:dataTable> | |
41 | </h:form> | |
42 | </h:body> | |
43 | </html> | |
44 |
Acesse https://github.com/MaraRegina/FileUpload, visualize o projeto completo ou faça o download para testar.