llanta de avance de gwt simple

Empecé a aprender GWT hoy y ya he hecho muchas cosas desde que tengo antecedentes de java. El siguiente paso es cargar datos JSON desde el servidor backend, pero mientras se realiza la carga, quiero mostrar una rueda de progreso por razones obvias.llanta de avance de gwt simple

Esperaba un widget "listo para usar" pero parece que no hay ninguno (corríjanme si me equivoco). Como soy completamente nuevo en GWT, no quiero agregar complejidad con marcos adicionales, solo GWT simple.

Parece que tendré que codificar uno ya que no he encontrado un código de terceros para esto. ¿Alguien me puede apuntar en la dirección correcta? ¿Cuáles son los pasos? ¿Debo crear una imagen y luego rotarla en animación, o crear varias imágenes y luego reemplazarlas de forma circular? ¿O estoy completamente fuera de aquí?

Fuente

2012-01-18 Nemanja Kovacevic

¿por qué razones obvias? :) El código del lado del servidor por lo general responde en ms, por lo que agregar una barra de progreso y eliminarlo después de 100 ms se verá como un molesto parpadeo – milan

Bueno, mi servidor necesita hasta 3 segundos para responder debido a la complejidad de los datos. Intentaré optimizar SQL más tarde, pero no será inferior a 100 ms para algunas llamadas.Me has hecho pensar y trataré de no mostrar la rueda de progreso donde no hay necesidad, pero para algunas de las llamadas al servidor definitivamente la necesitaré. –

Bueno, en cuanto a una rueda de progreso simple que no muestra el progreso real (solo que su aplicación está haciendo algo), recomendaría una imagen animada simple (generar una en http://www.ajaxload.info/ por ejemplo).

Si una imagen animada/gif no es una opción:

Una solución sencilla sería la creación de varias imágenes y reemplazarlos en forma circular. He utilizado este recientemente, básicamente, hacer un temporizador que se llama:

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() simplemente establece la imagen actual visible, todos los demás a invisible. Experimenté que esto es más rápido que cambiar la URL de la imagen (usando solo una Imagen, llamando al img.setURL(String url);).

Ahora solo llama al updateAnim.schedule(UPDATE_TICK); y se ejecutará.

Supongo que el más rápido (porque el navegador puede optimizar eso) sería el uso de una animación CSS (creando una imagen y girándola), pero probablemente también la más compleja (no he usado tanto, así que podría bien sea que en realidad es más simple de lo que creo;). Eche un vistazo a la publicación this sobre animaciones de rotación CSS.

Si quiere hacer una barra de progreso real (que en realidad muestra el progreso), necesita una devolución de llamada que se invoca en el progreso. Simplemente actualice sus imágenes/CSS transiciones en esta devolución de llamada de progreso.

Fuente

2012-01-19 00:27:20 dom

En mi opinión, es mejor obtener una imagen animada (como gif) y mostrarla mientras se cargan los datos.

Hay varios sitios web para generar imágenes "preloader": http://www.preloaders.net/ http://www.ajaxload.info

Fuente

2012-01-19 08:07:55

Una solución muy sencilla es utilizar pace.js. Es una secuencia de comandos de JavaScript que muestra barras de progreso que recopilan eventos del DOM. Puede configurar para escuchar todos los eventos GWT-RCP y también cuando el cliente carga fragmentos. Simplemente agregue la etiqueta de script al archivo html donde tiene cargado su módulo GWT.

Esto debería funcionar "fuera de la caja" para la actividad de GWT y ajax regular.

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

Fuente

2014-07-11 18:10:26

Respuesta

Cuestiones relacionadas