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.
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.
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:
ProgressIndicator: Genial. ¡Estoy funcionando correctamente!
Autor: Excelente trabajo, ProgressIndicator. Muchas gracias.
ProgressIndicator: Es un placer.
¿Te gustó este artículo? Puedo ayudar a tu equipo a implementar soluciones similares. Contáctame para saber más.