Updating Progressbar in JSF

Question

Updating Progressbar in JSF

Asked 6 years, 7 months ago

Viewed 764 times

1

Good Afternoon, I’m doing an asynchronous method that searches the database(oracle), and returns in an Excel file. Inside my Method has the for

@Async
public synchronized void carregarApresentacoesParaExportar() {
    try {
        ...............
        for(int i = 0 ; i < qtdePages; i++){
            if(isBaixado){
                percent = 0;
                qtdePages=0;
                break;
            } else {
                exportar.configurarValores(transacoes.getContent());
                if(transacoes.hasNext()){
                        transacoes = getService(enumType).buscarPaginado(getFiltro(), new PageRequest(transacoes.nextPageable().getPageNumber(), MAX_EXPORTAR));
                }
                percent = ((i * 100) / qtdePages);
            } 
        }
        ...............
    } catch (Exception e) { 
        LOG.error(e, e);
        geraMsgErro("txt.erro.download.excel");
        FileUtils.deleteQuietly(arquivo); 
    }
}

I use the variable percent to tell each increment how much is completed. In my view I do like this

<p:progressBar widgetVar="pbAjax" ajax="true" value="#{notificacaoMB.percent}" labelTemplate="{value}%"
                                                styleClass="animated" global="false">
                                                <p:ajax event="complete" listener="#{notificacaoMB.onComplete}" />
                                            </p:progressBar>

                                            Outra ProgressBar

                                            <div class="progress progress-striped active">
                                                <div style="width: #{notificacaoMB.percent}%" id="progress" aria-valuemax="100" aria-valuemin="0" aria-valuenow="#{notificacaoMB.percent}" role="progressbar" class="progress-bar progress-bar-success">
                                                    <span >#{notificacaoMB.percent}%</span>
                                                </div>
                                            </div>

Active with this command

<h:commandButton title="#{messages['label.iniciar']}"
                                                value="#{messages['label.iniciar']}"
                                                actionListener="#{notificacaoMB.carregarApresentacoesParaExportar()}"
                                                onclick="PF('pbAjax').start();PF('startButton').disable();"
                                                widgetVar="startButton"
                                                rendered="#{notificacaoMB.possoIniciar()}"
                                                styleClass="btn btn-primary" />

Is working with the Primefaces. But the solution I want is Bootstrap progress progress-striped.

is thus running:

that is to say using Bootstrap i haven’t given a Start on the Component , I can only see the progress if I give a Refresh on the page ......

How do I work using Bootstrap? I tried that solution How to create a dynamic progress bar considering all fields of a form? . But I could not implement, as I do with Jquery/Javascript ?

If you put the progressBar inside some prime component (p:outputPanel, for example), after that provide an id for that component and the back end do RequestContext.getCurrentInstance().update("id-do-componente"); not fundiona? (remember that id-do-componente should be the "full" id, considering all ids containing that component. Ex: id-form:id-tab:id-panel)

– igventurelli

2017/11/24 at 15:27
@Igorventurelli , probably works, because it is already working with prime.... but I need a solution that does not use prime, because in this project we are removing everything from first faces and leaving only bootstrap...

– Arthur Edson

2017/11/24 at 15:54
Ah ok.. can it be the default jsf component? It must have a <h:outputPanel /> or something like.. It would work the same way :P

– igventurelli

2017/11/24 at 15:56
Can it be yes? I’m trying, but you would have some example ?

– Arthur Edson

2017/11/24 at 16:11
I replied man... You said you are removing Primefaces from the project.. but at least the Java dependency might exist? The class RequestContext is of the package org.primefaces.context.RequestContext...

– igventurelli

2017/11/24 at 16:53
Succeeded? But if you remove the primefaces you will no longer have the ability to ajax requests by components.. Or you will only be using jsf native components..

– Marlysson

2017/11/24 at 16:53

Show 1 more comment

2 answers

-1

the way is to continue using primefaces since there are still many other dependencies to remove in the project. kkk

Browser other questions tagged java jquery jsf bootstrap-3

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

by igventurelli • **4,441** points · Answer 1 · 2017-11-24T16:52:32+00:00

You can place your bootstrap component inside a JSF component and update the JSF component by Managedbean:

<h:form id="meuForm">
    <h:panelGrid id="meuPanel">
        <div class="progress progress-striped active">
            <div style="width: #{notificacaoMB.percent}%" id="progress" 
                aria-valuemax="100" aria-valuemin="0" 
                aria-valuenow="#{notificacaoMB.percent}" 
                role="progressbar" class="progress-bar progress-bar-success">
                <span >#{notificacaoMB.percent}%</span>
            </div>
        </div>
    </h:panelGrid>
</h:form>

import org.primefaces.context.RequestContext;

@ManagedBean
public class MeuManagedBean {

    @Async
    public synchronized void carregarApresentacoesParaExportar() {
        /* ..códigos... */
        percent = ((i * 100) / qtdePages);
        RequestContext.getCurrentInstance().update("meuForm:meuPanel");
        /* ..códigos... */
    }
}