Ir al contenido

Indicadores de progreso parlantes

·434 palabras·3 mins
Vaadin
Alejandro Duarte
Autor
Alejandro Duarte
Alejandro Duarte es un Ingeniero de Software, escritor publicado y galardonado. Actualmente, trabaja para MariaDB plc como Ingeniero de Relaciones con Desarrolladores (Developer Relations Engineer). Comenzó su trayectoria en programación a los 13 años con BASIC en una rudimentaria pantalla negra, para lugo rápidamente transitar a C, C++ y Java durante sus años académicos en la Universidad Nacional de Colombia. Trasladándose primero al Reino Unido y luego a Finlandia, Alejandro profundizó su participación en la comunidad de código abierto. Es reconocido en los círculos de Java, acreditado con artículos y videos que acumulan millones de vistas, y presentaciones en eventos internacionales.

Nota: Traducido de la versión original en Inglés.

¿Quieres aprender Vaadin 7 de una manera divertida? Aquí tienes un extracto de mi libro Vaadin 7 UI Design by Example: Beginner’s Guide.

Autor: Permíteme presentarte a un amigo. ProgressIndicator, lector. Lector, ProgressIndicator.

Un indicador de progreso, parlante

Autor: Ahora que se conocen, comencemos a trabajar.

ProgressIndicator: Genial, ¿cuál es la tarea a realizar?

Autor: Bueno, nuestro impresionante algoritmo está tardando demasiado y los usuarios simplemente están abandonando nuestra aplicación web de última generación. Entonces, ProgressIndicator, necesitamos tu ayuda para darle al usuario retroalimentación sobre el progreso del proceso.

ProgressIndicator: Por supuesto.

Autor: Gracias, señor. Echa un vistazo a nuestra aplicación original que implementa un hilo Java que realiza nuestro algoritmo de alta tecnología:

 public class ProgressindicatorUI extends UI {

  private class HighTechAlgorithm extends Thread {
    public void run() {
      try {

        for (int i = 0; i < 10; i++) {
          sleep(1000);
        }

      } catch (InterruptedException e) {
        e.printStackTrace();
      }
    }
  }

  protected void init(VaadinRequest request) {
    final VerticalLayout layout = new VerticalLayout();
    layout.setMargin(true);
    setContent(layout);

    Button button = new Button("Start awesome algorithm");

    button.addClickListener(new Button.ClickListener() {
      public void buttonClick(ClickEvent event) {
        new HighTechAlgorithm().start();
      }
    });

    layout.addComponent(button);
  }

}

ProgressIndicator: ¡Vaya! Ese sí que es un algoritmo impresionante.

Autor: Gracias. Nos llevó meses implementarlo. En todo caso, nos gustaría añadirte, Sr. ProgressIndicator, a nuestro diseño, para que puedas informar al usuario cómo va el progreso del algoritmo. ¿Te parece bien?

ProgressIndicator: Por supuesto. Permíteme ubicarme como un miembro privado de tu clase UI.

Autor: Por supuesto, adelante. Y por favor, añádete a nuestro layout principal:

 public class ProgressindicatorUI extends UI {

  private ProgressIndicator mrProgressIndicator =
      new ProgressIndicator();

  // ...

  protected void init(VaadinRequest request) {

    // ...

    layout.addComponent(mrProgressIndicator);
  }
}

ProgressIndicator: Qué buen lugar. Realmente de alta tecnología.

Un indicador de progreso en una aplicación Vaadin

Autor: Sí, lo pintamos color Vaadin.

ProgressIndicator: ¡Mi color favorito!

Autor: Me alegra. Por cada iteración de nuestro algoritmo, te actualizaré, ¿de acuerdo?

ProgressIndicator: Sí, por favor.

Autor: Genial. ¿Qué rango de valores aceptas?

ProgressIndicator: Dáme un float entre 0 y 1.

Autor: De acuerdo. Ahí va:

 public class ProgressindicatorUI extends UI {

  // ...

  private class HighTechAlgorithm extends Thread {

    public void run() {
      try {

        for (int i = 1; i <= 10; i++) {
          sleep(1000);
          mrProgressIndicator.setValue(i \* 0.1f);
        }

      } catch (InterruptedException e) {
        e.printStackTrace();
      }
    }

  }
}

ProgressIndicator: Gracias. Creo que estoy listo.

Autor: ¡Genial! Ejecutemos la aplicación. ¿Estás listo lector? Has estado algo callado/a últimamente.

ProgressIndicator: Cierto. Creo que podría estar abrumado/a por el algoritmo de alta tecnología.

Autor: Suena razonable. Probemos nuestra aplicación:

Un indicador de progreso en funcionamiento

ProgressIndicator: Genial. ¡Estoy funcionando correctamente!

Autor: Excelente trabajo, ProgressIndicator. Muchas gracias.

ProgressIndicator: Es un placer.

Relacionados

Sorteo de libros: Gana una copia gratuita del libro "Vaadin 7 UI Design By Example" - ¡Solo comentando!
·258 palabras·2 mins
Vaadin Noticias
Nota: Traducido de la versión original en Inglés. Y los ganadores son:
Enterprise App ahora disponible con Maven
·55 palabras·1 min
Vaadin UI Noticias
Nota: Traducido de la versión original en Inglés. ¡Finalmente! He logrado escribir un POM de Maven para Enterprise App.