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.
