Indicador de Progresso

Front-end
#1

Pessoal,

No meu formulário tenho um CommandButton, gostaria que ao clicar nesse botão ele seja desabilitado e apareça ao lado dele um indicador de progresso (um GIF load), existe alguma forma de fazer isso?

Eu uso primefaces.

Abs.
Marcelo

#2

Para desabilitar o botão, coloque um widgetVar nele. Por exemplo: botao1. Depois, no onclick coloque “botao1.disable()” e no oncomplete “botao1.enable()”.
Desta forma o botão será desabilitado quando clicado e habilitado novamente quando a ação for concluída!

:smiley:

#3

aqui tem um url para o demo do primefaces

http://www.primefaces.org/showcase/ui/blockUI.jsf

na pagina que ira se abrir tem uma grid com paginação na troca de pagina acontece exatamente o que voce quer, aparece o LOADING da uma olhada e diga o que acha

#4 

<h3>Advanced BlockUI</h3>  
    <p:dataTable id="dataTable" var="car" value="#{tableBean.cars}"  
                    paginator="true" rows="10">  
        <f:facet name="header">  
            Ajax Pagination  
        </f:facet>  
  
        <p:column>  
            <f:facet name="header">  
                <h:outputText value="Model" />  
            </f:facet>  
            <h:outputText value="#{car.model}" />  
        </p:column>  
  
        <p:column>  
            <f:facet name="header">  
                <h:outputText value="Year" />  
            </f:facet>  
            <h:outputText value="#{car.year}" />  
        </p:column>  
  
        <p:column>  
            <f:facet name="header">  
                <h:outputText value="Manufacturer" />  
            </f:facet>  
            <h:outputText value="#{car.manufacturer}" />  
        </p:column>  
  
        <p:column>  
            <f:facet name="header">  
                <h:outputText value="Color" />  
            </f:facet>  
            <h:outputText value="#{car.color}" />  
        </p:column>  
    </p:dataTable>  

<p:blockUI block="dataTable" trigger="dataTable">  
        LOADING<br />  
        &lt;p:graphicImage value="/images/ajax-loader.gif"/&gt;  
    &lt;/p:blockUI&gt;

bom aqui esta o codigo para voce so isso ja resolve esse seu problema

edit --> tinha faltado o codigo do block ui que é quem faz o que voce quer

#5

Olá Cristian,

Valeu cara! Acertou em cheio…

Fico devendo mais uma pra vocês…

Abs.
Marcelo

#6