How to pass parameter for a dialogue with Primefaces?

Asked

Viewed 3,313 times

5

I’m calling a Dialog via a JSF button with Primefaces 5.1 enabling the Dialog through the onstart="PF('iconeDeProcessamento').show()" button.

Can anyone tell if it is possible to pass a parameter to the dialog ?

What I really intend to do: The dialogue iconeDeProcessamento is standard for three buttons that call processamentod different. In the dialogue I have the parameter header="#{TA_MB.tituloProcessamento}" with the EL in question. I’d like to change the value of EL TA_MB.tituloProcessamento to be presented in the dialogue.

Ex:

Button 1 calls the dialog and shows as title "Wait... Searching Data"
Button 2 calls the dialog and shows as title "Wait... Calculating"
Button 3 calls the dialog and shows as title "Wait... Recording"

Button Code that calls the dialog 

<p:commandButton id="consulta" disabled="#{TA_MB.ctrlEntrada}" 
   value="Busca    movimento" 
   actionListener="#{TA_MB.buscarLinhas}" icon="ui-icon-bookmark"
   styleClass="botao-parametro" 
   update="anoMes consulta novarequisicao linhasTA calculoTA gravaTA"
   onstart="PF('iconeDeProcessamento').show()"
   onsuccess="PF('iconeDeProcessamento').hide()" >
</p:commandButton>

Dialogue

<p:dialog widgetVar="iconeDeProcessamento" modal="true" draggable="false"
 closable="false" resizable="false" showHeader="true" appendTo="@(body)"
 header="#{TA_MB.tituloProcessamento}" style="width:20%;height:20%" >

  <p:graphicImage id="progressoGif" value="../resources/img/loader_blue.gif"
  style="width:40%;height:40%; display: block; margin-left: auto; margin-right: auto"/>
</p:dialog>

xhtml with the Tags in question

<!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" > 

     <h:outputStylesheet name="/resources/css/estilo.css" library="css" />              

      <ui:composition template="/WEB-INF/templates/t_estrutural.xhtml">

            <ui:param name="render_east" value="true" />        
            <ui:param name="render_west" value="false" />
            <ui:param name="headerTitulo" value="Parametros" />

            <ui:define name="titulo">Calcula TA</ui:define>

            <ui:define name="mensagem">

                    <h:panelGrid columns="1">
                        <p:button id="btHome" outcome="principal" value="Home" icon="ui-icon-home" styleClass="botao-parametro" />

                            <h:outputLabel value="Ano/Mes:" for="anoMes"/>
                            <p:inputMask disabled="#{TA_MB.ctrlEntrada}" id="anoMes" value="#{TA_MB.anoMes}" validatorMessage="Periodo invalido" mask="9999/99" >
                                <f:validateRegex pattern="20[0-9]{2}/[0-9]{2}" />
                            </p:inputMask>

                            <p:commandButton id="consulta" disabled="#{TA_MB.ctrlEntrada}" value="Busca movimento" 
                                     actionListener="#{TA_MB.buscarLinhas}" icon="ui-icon-bookmark"
                                     styleClass="botao-parametro" 
                                     update="anoMes consulta novarequisicao linhasTA calculoTA gravaTA iconeDeProcessamento"
                                     onstart="PF('iconeDeProcessamento').show()"
                                     onsuccess="PF('iconeDeProcessamento').hide()" >
                                     <f:setPropertyActionListener target="#{TA_MB.tituloProcessamento}" value="Aguarde... Buscando dados"/>     
                            </p:commandButton>

                            <p:commandButton id="calculoTA" disabled="#{TA_MB.ctrlProcessamento}" value="Calcular TA" 
                                     actionListener="#{TA_MB.calcularTA}" icon="ui-icon-bookmark"
                                     styleClass="botao-parametro" 
                                     update="linhasTA"
                                     onstart="PF('iconeDeProcessamento').show()"
                                     onsuccess="PF('iconeDeProcessamento').hide()" >
                                     <f:setPropertyActionListener target="#{TA_MB.tituloProcessamento}" value="Aguarde... Calculando"/>     
                            </p:commandButton>

                            <p:commandButton id="gravaTA" disabled="#{TA_MB.ctrlProcessamento}" value="Grava TA" 
                                     actionListener="#{TA_MB.gravarTA}" icon="ui-icon-disk"
                                     styleClass="botao-parametro" 
                                     update="linhasTA"
                                     onstart="PF('iconeDeProcessamento').show()"
                                     onsuccess="PF('iconeDeProcessamento').hide()">
                                     <f:setPropertyActionListener target="#{TA_MB.tituloProcessamento}" value="Aguarde... Gravando"/>   
                                     <p:confirm header="Confirma ?" message="Confirma gravação dos Dados?" icon="ui-icon-alert" />
                            </p:commandButton>                                           

                            <p:button id="novarequisicao" disabled="#{TA_MB.ctrlProcessamento}" value="Nova Consulta" styleClass="botao-parametro" icon="ui-icon-refresh" outcome="taCalculo"/>                                                                                         

                    </h:panelGrid>

            </ui:define>

            <ui:define name="corpo">
                    <p:growl id="messages" showDetail="true" showSummary="false" autoUpdate="true" closable="true" />
                    <!--  ***********************************  Dialogo do progresso   ************************************************* -->
                    <p:dialog id='iconeDeProcessamento' widgetVar="iconeDeProcessamento" modal="true" draggable="false" closable="false" resizable="false" showHeader="true" appendTo="@(form)"
                            style="width:20%;height:20%" >
                            <f:facet name="header">
                <h:outputText id="dialogHeader" value="#{TA_MB.tituloProcessamento}" />                            
                        </f:facet>
                        <p:graphicImage id="progressoGif"  value="../resources/img/loader_blue.gif" style="width:40%;height:40%; display: block; margin-left: auto; margin-right: auto"/>
                    </p:dialog>
            </ui:define>
      </ui:composition> 

</html>

Add-on. Attempt using ajax - Also not working. xhtml

<p:commandButton id="consulta" disabled="#{TA_MB.ctrlEntrada}" value="Busca movimento" 
         actionListener="#{TA_MB.buscarLinhas()}" icon="ui-icon-bookmark"
         styleClass="botao-parametro" 
         update="anoMes consulta novarequisicao linhasTA calculoTA gravaTA iconeDeProcessamento"
         onsuccess="PF('iconeDeProcessamento').hide()" >
         <p:ajax update="iconeDeProcessamento" onstart="#{TA_MB.mudaTitulo()}" oncomplete="PF('iconeDeProcessamento').show()">
            <f:param name="titulo" value="Aguarde... Buscando Dados"/>
         </p:ajax>
</p:commandButton>

Managed Bean

public void mudaTitulo(){
    Map<String,String> params = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap();
    String titulo = params.get("titulo");
    this.setTituloProcessamento(titulo);
    System.out.printf("------ verifica mudaTitulo() [ %s ] ",getTituloProcessamento());
}
jsf primefaces

  • How are you importing the facelets from this dialog? It’s set in your template? My suggestion is to create one ui:insert with the value to be set on each screen and use a ui:define to define this value, having a default in case there is no definition.

  • It would be nice to include the code snippet where you declare your dialog on the page. Just to have a view of where the dialog is and the button.

  • I’m using facelets only on the main page. for p:dialog I don’t use facelets. I can try with facelets as suggested, but how will I make the event call onstart button?

  • Marcelo, how are you calling the dialog right on the client, without making a request to the server/Bean, my suggestion is to change the title by Javascript, taking the h:outputText by id and changing its value. Not the best solution. The most correct would be to invoke the dialog without Javascript, only with action button, but it is a waste of resources.

  • I used very little Java not to say anything. You have some example?

  • Puts in your onstart: onstart="PF('iconeDeProcessamento').show(); document.getElementById('dialogHeader').innerHTML = 'TITULO_HEADER';" or onstart="PF('iconeDeProcessamento').show(); document.querySelector('#dialogHeader').innerHTML = 'TITULO_HEADER';"

  • It didn’t work either. From what I noticed the second command of the line ( after ; ) is not executed or the direct js command does not work.

  • You could, for each button set a title in the Managed Bean attribute, and on each button update (using the attribute update) dialog (by ajax). Then just display the window at the end of the execution (using the attribute oncomplete).

  • See if I did what Oce suggested (add-on) ? .

Show 4 more comments

1 answer

1


When the button is triggered you can change the value of the property #{TA_MB.tituloProcessamento} using <f:setPropertyActionListener /> and update a component that contains the title of the dialog as follows:

<p:commandButton actionListener="#{TA_MB.buscarLinhas}"
   <!-- atualiza componente do título -->
   update="dialogHeader" 
   onstart="PF('iconeDeProcessamento').show()"
   onsuccess="PF('iconeDeProcessamento').hide()" >

    <!-- altera propriedade do título -->
    <f:setPropertyActionListener target="#{TA_MB.tituloProcessamento}" value="seuTitulo" />   

</p:commandButton>

Dialog with upgradable title

<p:dialog widgetVar="iconeDeProcessamento" >
    <f:facet name="header">
        <!-- componente que será atualizado -->
        <h:outputText id="dialogHeader" value="#{TA_MB.tituloProcessamento}" />                           
    </f:facet>
</p:dialog>

Obs.: attribute header of <p:dialog> shall be superscripted with this <f:facet name="header>

  • It didn’t work. I even put a 'System.out.printf' in the 'search' method to see if the MB was being updated, but it comes empty.

  • OK. I did a test here I will improve the answer.

  • Even with f:Facet it did not work. f:setPropertyActionListener' is not updating the property 'TA_MB.tituloProcessing'

  • Marcelo, this approach will not work because it is showing the dialog by javascript. And in this case no request is made to the server nor the screen is updated by AJAX.

  • Doing the sequence of the button I noticed that is always showing the message of the previous button. That is, the component is updated, but only after the p:dialog is called.

Browser other questions tagged jsf primefaces

You are not signed in. Login or sign up in order to post.