Najważniejsze cechy paska postępu w przetwarzaniu backendu

Question

Byłbym wdzięczny, gdyby ktoś mógł dać mi wskazówki dotyczące paska postępu i przetwarzania back-end ajax.

Aby wyjaśnić, co potrzebne są następujące dane:

Mam przycisk polecenia do wykonania pewne przetwarzanie w back-end. Chciałbym pokazać pasek postępu, który osiąga 100%, gdy back bean kończy przetwarzanie instrukcji back-end. Przeglądałem wiele wątków, ale bez powodzenia. Większość z nich nie pokazała konkretnej próbki, jak to zrobić. Poniżej znajduje się fragment mojego kodu:

</h:panelGrid> 
<p:commandButton id="btn" value="DoSomeAction" 
styleClass="ui-priority-primary" update="panel" 
onclick="PF('pbAjax').start();PF('startButton1').disable();" 
widgetVar="startButton1" 
actionListener="#{actionBean.DoSomeAction}" /> 

<p:progressBar widgetVar="pbAjax" ajax="true" 
value="#{progressBean.progress}" labelTemplate="{value}%" 
styleClass="animated"> 
<p:ajax event="complete" listener="#{progressBean.onComplete}" 
update="growl" oncomplete="startButton2.enable()" /> 
</p:progressBar> 
</p:panel> 

Jest to kod dla postępu Brean:

@ManagedBean(name="progressBean") 
public class ProgressBean implements Serializable { 

    private Integer progress; 

    public Integer getProgress() { 
    if(progress == null) 
     progress = 0; 
    else { 
     progress = progress + (int)(Math.random() * 35);  
     if(progress > 100) 
     progress = 100; 
    } 

    return progress; 
    } 

    public void setProgress(Integer progress) { 
    this.progress = progress; 
    } 

    public void onComplete() { 
    FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Progress Completed", "Progress Completed")); 
    } 

    public void cancel() { 
    progress = null; 
    } 
} 

Efektem tego kodu jest tylko pusty pasek postępu i nic nie stanie, gdy kliknę mój przycisk. Z góry dzięki.

Answer 1

Będzie łatwiej, jeśli po prostu przejdę przez mój przykładowy kod, ponieważ masz dwie fasolki i nie znam interakcji między nimi. Możesz go użyć, aby zastosować go do swojego.

<p:commandButton>

<p:commandButton value="Start" type="button" onclick="pbAjax.start();startButton1.disable();" widgetVar="startButton1" /> 

Nic tu imponująca. Masz commandButton z widgetVar="startButton1". Po kliknięciu na nią, pojawia się onclick i wyłącza commandButton. To również sygnalizuje <p:progressBar>, aby rozpocząć przez pbAjax.start() (<p:progressBar> ma).

<p:progressBar>

<p:progressBar widgetVar="pbAjax" value="#{progressBean.progress}" ajax="true" labelTemplate="{value}%"> 
    <p:ajax event="complete" listener="#{progressBean.onComplete}" 
      update="growl" oncomplete="startButton1.enable()"/> 
</p:progressBar> 

<p:progressBar> po prostu wzywasz #{progressBean.progress} zaktualizować postępy. Gdy postęp osiągnie 100%<p:ajax> kopie i wywołuje #{progressBean.onComplete}. <p:commandButton> ponownie włączono i zaktualizowano <p:growl>. Zwróć uwagę, że nie używam PF(...). Szczerze mówiąc, nie jestem pewien, czy to robi różnicę, nie testowałem.

Uwaga

w twojej <p:progressBar> masz oncomplete="startButton2.enable(). Powinno być startButton1.enable(), ponieważ Twoja wartość widgetVar dla twojego <p:commandButton> to startButton1.

Należy również zauważyć, że nie użyłem styleClass="animated". Dzięki temu uzyskasz nijakie niebieskie światło. Jeśli chcesz go użyć, musisz zrobić dodatkowe kroki. Patrząc na twój kod, wydaje się, że bierzesz go prosto z prezentacji PrimeFaces, więc wykorzystam też ich zasoby.

Korzystanie styleClass="animated"

Po pierwsze, masz zamiar utworzyć folder o nazwie resources w folderze webapp (Web Pages dla Netbeans). Następnie utwórz folder o nazwie css i dodaj arkusz stylów o nazwie style.css. Struktura katalogów będzie następująca: resources/css/style.css. W style.css będziesz musiał zdefiniować tę regułę. (Nie martw się, jeśli to jest mylące, będę miał cały kod poniżej).

.animated .ui-progressbar-value { 
    background-image: url("#{resource['images/pbar-ani.gif']}"); 
} 

Wtedy masz zamiar utworzyć folder images pod resources i umieścić obraz pbar-ani.gif w tym folderze (resources/images/pbar-ani.gif). Obraz poniżej.

Sprawdź, czy masz <h:outputStylesheet name='css/style.css' /> w <h:head> i dodać styleClass="animated" w <p:progressBar>.

Ważne!

Jeśli korzystasz z PrimeFaces 3.5, tak jak ja, obraz nie będzie wyświetlany (nawet jeśli nie używasz styleClass). Jeśli przyjrzeć się bliżej Firebug pojawi się następujący błąd

Uncaught TypeError: Object #<Object> has no method 'easeInOutCirc' 

One workaround I found bo to jest po prostu użyć obojętne <p:dialog>.

To wszystko.

Możesz uzyskać więcej informacji o progressBar poprzez developer's guide.

Jeśli zastanawiasz się, skąd wiedziałem, skąd wziąć zdjęcie, musisz pobrać wizytówkę. Możesz przeczytać to article to find out how to download the showcase. Moim zdaniem, jeśli naprawdę chcesz użyć kodu prezentacyjnego, lepiej, jeśli po prostu pobierz wersję demonstracyjną. Często zdarza się, że albo nie widzę pełnego obrazu, albo kod w prezentacji ma pewne błędy.

W każdym razie oto przykładowy kod zgodnie z obietnicą. Używam tego samego ProgressBean z gabloty (tak samo jak twoje). Pamiętaj, że będziesz musiał wymyślić logikę dotyczącą sposobu, w jaki twój obiekt wchodzi w interakcję z ProgressBean, aby zaktualizować pasek postępu.

Podsumowanie

<h:head> 
    <h:outputStylesheet name='css/style.css' /> 
</h:head> 
<h:body> 
    <h:form > 
     <p:growl id="growl" /> 
     <h3>Advanced Ajax ProgressBar</h3> 
     <p:commandButton value="Start" type="button" onclick="pbAjax.start(); 
       startButton1.disable();" widgetVar="startButton1" /> 
     <br /><br /> 
     <p:progressBar widgetVar="pbAjax" value="#{progressBean.progress}" ajax="true" labelTemplate="{value}%" styleClass="animated"> 
      <p:ajax event="complete" listener="#{progressBean.onComplete}" 
        update="growl" oncomplete="startButton1.enable()"/> 
     </p:progressBar> 
     <p:dialog></p:dialog><!-- For PrimeFaces 3.5 --> 
    </h:form> 
</h:body> 

i zapamiętać twoje katalogi

resources/css/style.css

resources/images/pbar-ani.gif