Difficulty ("Bugs") with primeFaces - The image only appears

UI Components for JSF
Post Reply
Erickfm8
Posts: 56
Joined: 22 Jun 2010, 14:25

12 Apr 2011, 14:16

Good morning everyone, I'm a "big problem" for some time can not get the image of the bank and to the screen without having to write to a file, is the following I use the upload (p: FileUpload) and soon after I store image is a grid, the component contains primeFaces <p:graphicImage> to work with image (NOTE: disappeared from SHOWCASE THIS SITE COMPONENT) has this property value is connected with the object of StreamContent ManagendBean to create a StreamContent use "new DefaultStreamContent (InputStream)" up there after you press the second beauty that's made to work just fine.

1st Phase ------------------------------------------------ -------------------------------------------------- -----------------------

Problem:

The image does not appear.

Solution

Searching for a long period because there is not much about this document, I discovered a possible solution.
- Note the ManagendBean with SessionScoped,
- <p:graphicImage> Set cache = "false",
- Put the <p:graphicImage> in a separate form.

Summary

After doing this the image appears, but only the first time (I use a commandLink to the show in a dialog that contains the image, the first time he appears, but after this no longer appears)

2nd Phase ------------------------------------------------ -------------------------------------------------- ----------------------------------------
Problem:

The image appears only once

Solution

?????????????????????????????????????

Summary

??????????????????????????

-------------------------------------------------- -------------------------------------------------- -------------------------------------------------- -----------------------------------------------
.xhtml

Code: Select all

<?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:p="http://primefaces.prime.com.tr/ui"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
        <title>Cadastro de Album</title>
    </h:head>
    <f:view>
        <h:body>
            <h:form>
                <p:toolbar>
                    <p:toolbarGroup align="left">
                        <p:menuButton value="Menu">
                            <p:menuitem value="Menu"
                                        action="#{menuMB.irMenu}"
                                        ajax="Menu"/>
                        </p:menuButton>
                    </p:toolbarGroup>
                    <p:toolbarGroup align="left">
                        <p:menuButton value="Cadastro">
                            <p:menuitem value="Usuários"
                                        action="#{menuMB.irUsuario}"
                                        ajax="false"
                                        rendered="#{menuMB.administrator}"/>
                            <p:menuitem value="Clientes"
                                        action="#{menuMB.irCliente}"
                                        ajax="false"
                                        rendered="#{menuMB.administrator or menuMB.simples}"/>
                        </p:menuButton>
                    </p:toolbarGroup>
                    <p:toolbarGroup align="left">
                        <p:menuButton value="Processo">
                            <p:menuitem value="Manter Fotos"
                                        action="#{menuMB.irAlbum}"
                                        ajax="false"
                                        rendered="#{menuMB.administrator or menuMB.simples}"/>
                            <p:menuitem value="Publicar Fotos"
                                        action="#{menuMB.irUsuario}"
                                        ajax="false"
                                        rendered="#{menuMB.administrator or menuMB.simples}"/>
                            <p:menuitem value="Selecionar Fotos"
                                        action="#{menuMB.irUsuario}"
                                        ajax="false"/>
                        </p:menuButton>
                    </p:toolbarGroup>
                    <p:toolbarGroup align="left">
                        <p:menuButton value="Sair">
                            <p:menuitem value="Sair"
                                        action="#{menuMB.sair}"
                                        ajax="false"/>

                        </p:menuButton>
                    </p:toolbarGroup>
                </p:toolbar>
            </h:form>
            <h:form id="frmGridAlbum">
                <p:growl id="menssagensAlbum"
                         life="3000"/>
                <p:dataTable id="dtAlbuns"
                             widgetVar="dtAlbuns"
                             var="album"
                             value="#{albumMB.albuns}"
                             paginator="true"
                             rows="5"
                             selection="#{albumMB.album}"
                             selectionMode="single"
                             onRowSelectComplete="dlgAlbum.show();"
                             emptyMessage="Nao existe Album cadastrado"
                             style="width:60%"
                             update="frmCadastroAlbum:somCliente, frmCadastroAlbum:itaDescricao, frmCadastroAlbum:dgdFotos, frmCadastroAlbum:clkGravar, frmCadastroAlbum:clkAlterar">
                    <p:column sortBy="#{album.id}"
                              filterBy="#{album.id}">
                        <f:facet name="header">
                            <h:outputText value="Id" />
                        </f:facet>
                        <h:outputText value="#{album.id}" />
                    </p:column>
                    <p:column sortBy="#{album.cliente.nome}"
                              filterBy="#{album.cliente.nome}">
                        <f:facet name="header">
                            <h:outputText value="Cliente" />
                        </f:facet>
                        <h:outputText value="#{album.cliente.nome}" />
                    </p:column>
                </p:dataTable>
                <p:panel style="width:59.2%">
                    <p:commandLink id="clkIncluir"
                                   title="Incluir"
                                   oncomplete="dlgAlbum.show()"
                                   action="#{albumMB.incluir}"
                                   update="frmCadastroAlbum:somCliente, frmCadastroAlbum:itaDescricao, frmCadastroAlbum:dgdFotos, frmCadastroAlbum:clkGravar, frmCadastroAlbum:clkAlterar">
                        <h:graphicImage url="/imagens/novo.jpg"
                                        style="border:0"/>
                    </p:commandLink>
                    <p:commandLink title="Apagar"
                                   actionListener="#{albumMB.apagar}"
                                   style="margin-left:20px"
                                   update="frmGridAlbum"
                                   oncomplete="dlgAlbum.hide();">
                        <h:graphicImage url="/imagens/apagar.jpg"
                                        style="border:0"/>
                    </p:commandLink>
                    <h:commandLink title="Voltar"
                                   action="#{albumMB.voltar}"
                                   style="margin-left:20px">
                        <h:graphicImage url="/imagens/voltar.jpg"
                                        style="border:0"/>

                    </h:commandLink>
                </p:panel>
            </h:form>
            <h:form id="frmCadastroAlbum">
                <p:dialog id="dlgAlbum"
                          widgetVar="dlgAlbum"
                          header="Album"
                          width="700">
                    <h:panelGrid columns="2">
                        <h:outputLabel value="Cliente:"
                                       for="somCliente" />
                        <h:selectOneMenu id="somCliente"
                                         value="#{albumMB.album.cliente.nome}"
                                         required="true"
                                         requiredMessage="Informe a descricao"
                                         style="width:104%">
                            <f:selectItems value="#{albumMB.clientes}"
                                           var="cliente"
                                           itemValue="#{cliente.id}"
                                           itemLabel="#{cliente.nome} - CPF: #{cliente.cpf}"/>
                        </h:selectOneMenu>
                        <h:outputLabel value="Descricao:"
                                       for="itaDescricao"/>
                        <p:inputTextarea id="itaDescricao"
                                         value="#{albumMB.album.descricao}"
                                         required="true"
                                         requiredMessage="Informe a descricao"
                                         style="width:102%"/>
                    </h:panelGrid>
                    <p:dataTable id="dgdFotos"
                                 var="foto"
                                 widgetVar="dgdFotos"
                                 value="#{albumMB.fotos}"
                                 rows="3"
                                 paginator="true"
                                 style="width:90%"
                                 emptyMessage="Nenhuma Foto"
                                 selection="#{albumMB.foto}"
                                 selectionMode="single"
                                 rowSelectListener="#{albumMB.prepararFoto}">
                        <p:column sortBy="#{foto.nome}"
                                  filterBy="#{foto.nome}">
                            <f:facet name="header">
                                <h:outputText value="Nome da Foto" />
                            </f:facet>
                            <h:outputText value="#{foto.nome}" />
                        </p:column>
                    </p:dataTable>
                    <p:fileUpload id="fudSelecionarFotos"
                                  fileUploadListener="#{albumMB.selecionarFotos}"
                                  multiple="false"
                                  allowTypes="*.jpg;*.png;*.gif;"
                                  description="Images"
                                  update="dgdFotos"
                                  auto="true"
                                  label="Selecionar Foto"
                                  style="margin-right:20px"/>
                    <br/><br/>

                    <h:panelGrid columns="3" >
                        <p:commandLink  id="clkGravar"
                                        title="Gravar"
                                        action="#{albumMB.gravar}"
                                        disabled="#{!empty albumMB.album.id}"
                                        style="margin-right:20px"
                                        update="frmCadastroAlbum:somCliente, frmCadastroAlbum:itaDescricao, frmCadastroAlbum:dgdFotos, frmGridAlbum:menssagensAlbum, frmGridAlbum:dtAlbuns">
                            <h:graphicImage url="/imagens/gravar.jpg"
                                            style="border:0"/>
                        </p:commandLink>
                        <p:commandLink id="clkAlterar"
                                       title="Alterar"
                                       action="#{albumMB.album}"
                                       disabled="#{empty albumMB.album.id}"
                                       update="frmCadastroAlbum:somCliente, frmCadastroAlbum:itaDescricao, frmCadastroAlbum:dgdFotos, frmGridAlbum:menssagensAlbum, frmGridAlbum:dtAlbuns"
                                       style="margin-left:20px">
                            <h:graphicImage url="/imagens/alterar.bmp"
                                            style="border:0"/>
                        </p:commandLink>
                    </h:panelGrid>
                </p:dialog>
            </h:form>
            // FORM  IMAGE
            <h:form>
                <p:commandLink oncomplete="dlgFoto.show();"
                               actionListener="#{albumMB.selecionarFoto}"
                               update="giFoto"
                               value="Foto"/>
                <p:dialog id="dlgFoto"
                          widgetVar="dlgFoto"
                          header="Foto"
                          width="700">
                    <p:graphicImage id ="giFoto"
                                    value="#{albumMB.imagem}"
                                    cache="false"/>
                </p:dialog>
            </h:form>
        </h:body>
    </f:view>
</html>
ManagendBean

Code: Select all

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package apresentacao;

import Utilitarios.EntradaSaidaUtil;
import Utilitarios.JSFUtil;
import entidades.Album;
import entidades.Foto;
import entidades.Pessoa;
import java.io.ByteArrayInputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.bean.ViewScoped;
import javax.faces.event.ActionEvent;
import negocios.AlbumBO;
import negocios.PessoaBO;
import org.primefaces.event.FileUploadEvent;
import org.primefaces.event.SelectEvent;
import org.primefaces.model.DefaultStreamedContent;
import org.primefaces.model.StreamedContent;
import org.primefaces.model.UploadedFile;

/**
 *
 * @author emacedo
 */
@ManagedBean(name = "albumMB")
@SessionScoped
public class AlbumMB implements Serializable {

    private AlbumBO albumBO;
    private Album album;
    private List<Album> albuns;
    private List<Pessoa> clientes;
    private PessoaBO clienteBO;
    private Foto foto;
    private List<Foto> fotos;
    private StreamedContent imagem = new DefaultStreamedContent();
    private List<StreamedContent> imagens;
    private String caminhoFoto;

    //Construtor
    public AlbumMB() {
        this.setFoto(new Foto());
        this.setClienteBO(new PessoaBO());
        this.setAlbumBO(new AlbumBO());
        this.setAlbum(new Album());
        this.setFotos(new ArrayList<Foto>());
        this.setImagens(new ArrayList<StreamedContent>());
        this.listarClientes();
        this.listar();

    }

    // Get e Set
    public Foto getFoto() {
        return foto;
    }

    public void setFoto(Foto foto) {
        this.foto = foto;
    }

    public List<StreamedContent> getImagens() {
        return imagens;
    }

    public void setImagens(List<StreamedContent> imagens) {
        this.imagens = imagens;
    }

    public StreamedContent getImagem() {
        return imagem;
    }

    public void setImagem(StreamedContent imagem) {
        this.imagem = imagem;
    }

    public Album getAlbum() {
        return album;
    }

    public void setAlbum(Album album) {
        this.album = album;
    }

    public AlbumBO getAlbumBO() {
        return albumBO;
    }

    public void setAlbumBO(AlbumBO albumBO) {
        this.albumBO = albumBO;
    }

    public List<Album> getAlbuns() {
        return albuns;
    }

    public void setAlbuns(List<Album> albuns) {
        this.albuns = albuns;
    }

    public List<Pessoa> getClientes() {
        return clientes;
    }

    public void setClientes(List<Pessoa> clientes) {
        this.clientes = clientes;
    }

    public PessoaBO getClienteBO() {
        return clienteBO;
    }

    public void setClienteBO(PessoaBO clienteBO) {
        this.clienteBO = clienteBO;
    }

    public List<Foto> getFotos() {
        return fotos;
    }

    public void setFotos(List<Foto> fotos) {
        this.fotos = fotos;
    }

    public String getCaminhoFoto() {
        return caminhoFoto;
    }

    public void setCaminhoFoto(String caminhoFoto) {
        this.caminhoFoto = caminhoFoto;
    }

    //Metodos
    public void incluir() {
        this.setAlbum(new Album());
    }

    public String voltar() {
        return "menu";
    }

    public void gravar() {
        try {
            this.getAlbum().setFotos(this.getFotos());
            this.getAlbumBO().gravar(this.getAlbum());
            this.getAlbuns().add(this.getAlbum());
            this.setAlbum(new Album());
            JSFUtil.enviarMenssagemSucesso("Album gravado com sucesso");
        } catch (Exception e) {
            e.printStackTrace();
            JSFUtil.enviarMenssagemErro("Erro ao gravar" + " " + e.getMessage());
        }
    }

    public void alterar() {
        try {
            Integer indice = this.getAlbuns().indexOf(this.getAlbum());
            this.getAlbumBO().alterar(this.getAlbum());
            this.getAlbuns().remove(this.getAlbum());
            this.getAlbuns().add(indice, this.getAlbum());
            JSFUtil.enviarMenssagemSucesso("Album alterado com sucesso");
        } catch (Exception e) {
            JSFUtil.enviarMenssagemErro("Erro ao alterar" + " " + e.getMessage());
        }


    }

    public void apagar() {
        if (this.getAlbum() == null) {
            JSFUtil.enviarMenssagemAtencao("Selecione um Album na grid");
        } else {
            try {
                this.getAlbumBO().apagar(this.getAlbum());
                this.getAlbuns().remove(this.getAlbum());
                JSFUtil.enviarMenssagemSucesso("Album apagado com sucesso");
            } catch (Exception e) {
                JSFUtil.enviarMenssagemErro("Erro ao apagar" + " "
                        + e.getMessage());
            }
        }

    }

    private void listar() {
        try {
            this.setAlbuns(this.getAlbumBO().listar());
        } catch (Exception e) {
            e.printStackTrace();
            JSFUtil.enviarMenssagemErro("Erro ao listar");
        }
    }

    private void listarClientes() {
        try {
            this.setClientes(this.getClienteBO().listarClientes());
        } catch (Exception e) {
            e.printStackTrace();
            JSFUtil.enviarMenssagemErro("Erro ao listar Clientes");
        }

    }

    public void prepararFoto(SelectEvent evento) {
        this.getFoto().getImagem()
    }

    public void selecionarFoto(ActionEvent e) {
        if (this.getFoto().getImagem() == null) {
            JSFUtil.enviarMenssagemAtencao("Selecione uma Foto na grid");
        } else {
            //String caminhoFoto = "C:" + File.separator + "Desenvolvimento" + File.separator + "Projetos" + File.separator + "Studio" + File.separator + "Projeto" + File.separator + "web" + File.separator + "fotos" + File.separator + this.getFoto().getNome();
            //this.setCaminhoFoto("/fotos/" + this.getFoto().getNome());
            //System.out.println("crio arquivo " + this.caminhoFoto);
            try {
                // EntradaSaidaUtil.gravarArquivo(caminhoFoto, this.getFoto().getImagem());
                // File file = new File(caminhoFoto);
                //FileInputStream fis = new FileInputStream(file);
                //System.out.println("img foto" + this.getFoto().getImagem());
                //System.out.println("img foto prime" + this.imagem);

               this.imagem = new DefaultStreamedContent(this.getFoto().getImagem());

            } catch (Exception ex) {
                ex.printStackTrace();
            }
        }

    }

    //Metodos em geral
    public void selecionarFotos(FileUploadEvent event) throws IOException {
        UploadedFile uf = event.getFile();
        String nomeArquivo = uf.getFileName();
        InputStream is = null;
        Foto foto = new Foto();
        //String caminho = "C:"+File.separator+"img"+File.separator+nomeArquivo;
        try {
            is = uf.getInputstream();
            byte[] b = new byte[is.available()];
           
            //Populo o objeto Foto

            foto.setNome(nomeArquivo);
            foto.setFoto(b);
            foto.setImagem(uf.getInputstream());
	    fotos.add(foto);            
	
            //System.out.println("fot " + foto.getFoto());
            //BufferedImage img = ImageIO.read(event.getFile().getInputstream());
            //File file = new File(caminho);
            //boolean write = ImageIO.write(img, "jpg", file);
            //FileInputStream fi = new FileInputStream(file);
            //System.out.println("escreveu?? " +write);

            //this.imagem = new DefaultStreamedContent(fi);
            //this.getImagens().add(new DefaultStreamedContent(stream));


            //foto.setImagem(new DefaultStreamedContent(stream));
            //foto.setImagem(new DefaultStreamedContent(event.getFile().getInputstream()));

            //this.imagem = new DefaultStreamedContent(stream);
            //System.out.println("okkk nome"+ foto.getImagem());
            JSFUtil.enviarMenssagemSucesso("Upload realizado com sucesso.");
        } catch (Exception e) {
            e.printStackTrace();
            JSFUtil.enviarMenssagemErro("Erro ao realizar o Upload.");
        } finally {
            try {
                is.close();
            } catch (IOException ex) {
                ex.printStackTrace();
                JSFUtil.enviarMenssagemErro("Erro ao realizar o Upload.");
            }
        }
    }
}



This is the second post about this problem but still no one could help me.

I count on community support for this.

Therefore I thank you

Erickfm8
Posts: 56
Joined: 22 Jun 2010, 14:25

12 Apr 2011, 19:05

Helpp???

Erickfm8
Posts: 56
Joined: 22 Jun 2010, 14:25

13 Apr 2011, 20:11

...

Erickfm8
Posts: 56
Joined: 22 Jun 2010, 14:25

15 Apr 2011, 20:09

???

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

16 Apr 2011, 00:14

Please do not double or triple post to bump your topic. Clearly noone has free time to help you unfortunately.

Erickfm8
Posts: 56
Joined: 22 Jun 2010, 14:25

16 Apr 2011, 00:36

ok

Erickfm8
Posts: 56
Joined: 22 Jun 2010, 14:25

16 Apr 2011, 01:13

Did not you help me? they already tried this about a month and still no one could help me.

It would be a huge help, because I no longer have to turn

Thanks

iuriBrazil
Posts: 2
Joined: 02 Jul 2011, 04:08

02 Jul 2011, 04:13

Hi, has anyone helped you?
I faced the same problem, but I would not use sessionScope, so, I solved this problem creating an utility class to copy files from my upload directory to images directory, on the web container.
The only way I found to make graphic images work without sessionScope was putting the images internal at the application.

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 20 guests