plain gwt progress wheel

Question

Ho iniziato a imparare GWT oggi e ho già fatto molto dal momento che ho sfondo java. Il mio prossimo passo è caricare i dati JSON dal server back-end, ma mentre il caricamento è terminato, voglio mostrare una rotellina di avanzamento per ovvi motivi.

Mi aspettavo un widget "out of the box" per questo, ma sembra che non ce ne siano (correggimi se sbaglio). Dato che sono completamente nuovo a GWT, non voglio aggiungere complessità con framework aggiuntivi, solo GWT.

Sembra che dovrò codice uno poiché non ho trovato alcun codice di terze parti per questo. Qualcuno può indicarmi la giusta direzione? Quali sono i passaggi? Devo creare un'immagine e quindi ruotarla in animazione o creare più immagini e quindi sostituirle in modo circolare? O sono completamente fuori di qui?

Answer 1

Bene, come per una semplice rotellina di avanzamento che non mostra il progresso effettivo (solo che l'applicazione sta facendo qualcosa), raccomanderei una semplice immagine animata (generarne uno a http://www.ajaxload.info/ per esempio).

Se un animato image/GIF non è un'opzione:

Una soluzione semplice sarebbe la creazione di diverse immagini e sostituirle in modo circolare. Ho usato questo di recente, in pratica si effettua un timer che si definisce:

Timer updateAnim = new Timer() { 
    @Override 
    public void run() { 
     currentImage = (currentImage + 1) % NO_IMAGES; 
     setVisibilities(); 
     this.schedule(UPDATE_TICK); 
    } 
}; 

private void setVisibilities() { 
    img1.setVisible(false); 
    img2.setVisible(false); 
    switch (currentImage) { 
    case 0: 
     img1.setVisible(true); 
     break; 
    case 1: 
     img2.setVisible(true); 
     break; 
    } 

} 

setVisibilities() imposta solo l'immagine corrente visibile, tutti gli altri a invisibile. Ho sperimentato questo per essere più veloce di cambiare l'URL dell'immagine (usando solo un'immagine, chiamando img.setURL(String url);).

Ora basta chiamare updateAnim.schedule(UPDATE_TICK); e verrà eseguito.

Immagino che il più veloce (perché il browser può ottimizzarlo) sarebbe l'uso di un'animazione CSS (creando un'immagine e ruotandola), ma probabilmente anche la più complessa (non l'ho usata molto, quindi potrebbe beh, è ​​che in realtà è più semplice di quanto penso;). Dai un'occhiata al post this sulle animazioni di rotazione CSS.

Se si desidera effettuare una barra di avanzamento reale (che mostra effettivamente i progressi), è necessario un richiamo che venga richiamato in corso. Basta aggiornare le transizioni di immagini/CSS in questa richiamata di avanzamento.

Answer 2

Dal mio punto di vista è meglio ottenere un'immagine animata (come gif) e mostrarla mentre i dati si stanno caricando.

Ci sono diversi siti web per la generazione di immagini "preloader": http://www.preloaders.net/ http://www.ajaxload.info

Answer 3

Una soluzione molto semplice è quello di utilizzare pace.js. È uno script javascript che mostra le barre di progresso che raccolgono eventi dal DOM. È possibile configurare l'ascolto di tutti gli eventi GWT-RCP e anche quando il client carica i frammenti. Basta aggiungere il tag script al file html in cui è caricato il modulo GWT.

Questo dovrebbe funzionare "out of the box" per attività GWT e regolare ajax.

<script type="text/javascript" language="javascript" 
    src="js/pace.min.js" 
    data-pace-options='{"elements":{"selectors":["body","script"]},"ajax":{"trackMethods":["GET","POST"]}}'></script>