1. java
  2. android
  3. c#
  4. .net
  5. javascript
  6. php
  7. jquery
  8. html
  9. sql

Atualizando p:graphicImage logo apos p:fileUpload

Opa boa noite galera.

To com o um probleminha que vem me tirando o sono a alguns dias ja, fiz diversas pesquisas mas nenhuma resolveu meu problema.

Segue meu xhtml resumido:

<!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:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui">

<ui:composition template="/templates/template.xhtml">
    <ui:define name="centro">
        <h:form id="formPerfil">
            <h3 class="page_title">Perfil</h3>
            <dir class="page_content">
                <p:panelGrid id="painelPerfil" styleClass="semBorda painelPerfil">
                    <p:row>
                        <p:column id="blocoFotoPerfil" colspan="3">
                            <p:graphicImage id="fotoPerfil" value="#{beanPerfil.foto}" height="240px" width="320px"/>
                        </p:column>
                    </p:row>
                    <p:row>
                        <p:column colspan="3" style="background: none !important;">
                            <p:commandButton value="Editar perfil" process="painelPerfil"
                                oncomplete="PF('perfil').show()" immediate="true"
                                update=":dialogPerfil" styleClass="botaoEditarPefil" />
                        </p:column>
                    </p:row>
                </p:panelGrid>
            </dir>
        </h:form>
        <p:dialog id="dialogPerfil" header="Editar perfil" widgetVar="perfil"
            modal="true" appendTo="@(body)" showEffect="fade" hideEffect="fade"
            resizable="false">
            <h:form id="formCadastroPerfil">
                <p:panelGrid styleClass="semBorda">
                    <p:row>
                        <p:column colspan="3">
                            <p:panel styleClass="painelFoto">
                                <p:graphicImage id="fotoPerfilEditar" value="#{beanPerfil.foto}" height="240px" width="320px"/>
                                <p:messages id="mensagens" showSummary="true" autoUpdate="true"/>
                                    <p:fileUpload fileUploadListener="#{beanPerfil.uploadListener}"
                                        update="fotoPerfilEditar" auto="true" allowTypes="/(\.|\/)(gif|jpe?g|png)$/" />
                            </p:panel>
                        </p:column>
                    </p:row>
                    <p:row>
                        <p:column colspan="3">
                            <p:commandButton id="salvarPerfil" value="Salvar"
                                action="#{beanPerfil.cadastrarPerfil}" onclick="dialog.hide()" update=":formPerfil:blocoFotoPerfil">
                            </p:commandButton>
                        </p:column>
                    </p:row>
                </p:panelGrid>
            </h:form>
        </p:dialog>
    </ui:define>
</ui:composition>

</html>

A bronca é que quando eu faço o upload da foto 1° Ele não atualiza o p:graphicImage de dentro do p:dialog. 2° É que quando eu clico no botão salvar dentro do dialog ele não atualiza o p:graphicImage de fora ( do meu formulário ), só atualiza se eu der um F5 na pagina.

Segue meu bean:

package br.com.resenhadabola.view;

import java.io.ByteArrayInputStream;
import java.io.Serializable;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

import org.primefaces.event.FileUploadEvent;
import org.primefaces.model.DefaultStreamedContent;
import org.primefaces.model.StreamedContent;
import org.primefaces.model.UploadedFile;

import br.com.resenhadabola.model.Perfil;
import br.com.resenhadabola.model.Usuario;
import br.com.resenhadabola.util.Fachada;

@ManagedBean(name = "beanPerfil")
@SessionScoped
public class PerfilBean implements Serializable {

    private static final long serialVersionUID = 1L;

    public Perfil perfil = null;
    public Usuario usuario = Fachada.getInstancia().recuperarUsuarioDaSessao();
    public UploadedFile arquivo;
    public StreamedContent foto = null;

    public PerfilBean() {
        recuperarPerfil();
    }

    public Perfil getPerfil() {
        return perfil;
    }

    public void setPerfil(Perfil perfil) {
        this.perfil = perfil;
    }

    public UploadedFile getArquivo() {
        return arquivo;
    }

    public void setArquivo(UploadedFile arquivo) {
        this.arquivo = arquivo;
    }

    public StreamedContent getFoto() {
        return this.foto;
    }

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

    // Metodos
    public String cadastrarPerfil() {
        Fachada.getInstancia().inserirPerfil(this.perfil, this.usuario);
        this.foto = null;
        recuperarPerfil();
        return null;
    }

    private Perfil recuperarPerfil() {
        this.perfil = Fachada.getInstancia().buscarPerfil(this.usuario);
        this.foto = getRetornarFoto();
        if (this.perfil == null) {
            return new Perfil();
        } else {
            return this.perfil;
        }
    }

    public String uploadListener(FileUploadEvent evento) {
        this.arquivo = evento.getFile();
        this.perfil.setImagemPerfil(arquivo.getContents());
        this.foto = getRetornarFoto();
        return null;
    }

    public StreamedContent getRetornarFoto(){
        return new DefaultStreamedContent(new ByteArrayInputStream(this.perfil.getImagemPerfil()));
    }

    public String formPerfil() {
        return "cadastroPerfil?faces-redirect=true";
    }
}

Alguem teria alguma luz pra essa situação ?

Grato pela atenção!!

  • Seu p:commandButton está utilizando action, se você quer que as coisas ocorram via AJAX tente alterar para actionListener. Veja aqui a diferença entre eles.

    Douglas Junior   23 de fev de 2015
  • Opa Doublas... Agora to no trabalho, mas assim que chegar em casa eu vou fazer esse teste. Mas só me tira uma duvida, o actionListener seria no método salvar né isso ?

    Bruno Monteiro   23 de fev de 2015
  • Isso, desculpe minha falha, é no elemento: <p:commandButton id="salvarPerfil" value="Salvar"...

    Douglas Junior   23 de fev de 2015
  • Só hoje tive tempo de testar ! --'

    Mas nada vei :( Mudei o método e a chamada dele pra actionListener e nada.

    Bruno Monteiro   24 de fev de 2015
  • Você tentou colocar o p:graphicImage dentro de um h:panelGroup e o atualizar através do update? Veja meu exemplo

    Thiagosf   24 de fev de 2015
Mostrar todos os 6 comentários>
  1. Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
  2. Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
  3. Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
  4. Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
  5. Clique aqui para mais detalhes sobre o funcionamento do GUJ!

1 resposta

Não é a resposta que estava procurando? Procure outras perguntas com as tags primefaces jsf java-ee tomcat ou faça a sua própria pergunta.