JSF - Bar loading while executing a Java method

Question

Good morning, I have a login screen, and when the user clicks the Sign in button, I want it to be an incone showing "loading" while the java method is running.

Follow my xhtml code:

<?xml version="1.0" encoding="UTF-8"?>

<title >Awake - Login Administrador</title>

            <h:panelGrid columns="2"  >
                <h:outputText value="Login: "  />
                <h:inputText value="#{loginAdmController.usuarioAdm.login}"></h:inputText>
                <h:outputText value="Senha: " />
                <h:inputSecret value="#{loginAdmController.usuarioAdm.senha}" />
            </h:panelGrid>

            <center>
                <p:commandButton action="#{loginAdmController.login}" update="pagLogin"   oncomplete="excluirManualDialog.hide()"   
                    value="Entrar" style=" margin-top: 10px;" />
            </center>

        </p:panel>
    </div>
</h:form>    

Someone can help me?

Answer 1

Add this here on your page is a component of the primefaces.

<p:ajaxStatus onstart="PF('statusDialog').show()" onsuccess="PF('statusDialog').hide()" />

<p:dialog widgetVar="statusDialog" modal="true" draggable="false" closable="false" resizable="false" showHeader="false">
            <h2>Aguarde...</h2>
            <img src="/img/ajaxloadingbar.gif" alt=""/>
</p:dialog>

you can acquire gif images here http://loadergenerator.com/

do not forget to change the image src here

  <img src="/img/ajaxloadingbar.gif" alt=""/>

then when you click the button will open a dialog written wait...and an image of a bar loading, circle etc...

Answer 2

In addition to what Washington commented, you can opt tbm for the "p:blockUI" component. It will lock your screen and display something of your preference as a gif loading for example.

See an example of its use below:

<p:blockUI block="form" trigger="btnSendData form:btnChanges formTable:dTable" >
    <p:graphicImage value="images/loading.gif"/> 
</p:blockUI>

If you notice I pass the block attribute the id of my form, which is what I want to block during my event. In Trigger I am passing the components that he will have to monitor to perform this action, such as my send form button "btnSendData " or some event in my table that is in another form (formTable:dTable), as load to change page for example.

for more details of a look at the component documentation http://www.primefaces.org/showcase/ui/misc/blockUI.xhtml