Willing to learn Vaadin 7 in a funny way? Here there is an excerpt of my book Vaadin 7 UI Design by Example: Beginner’s Guide.
Author: Let me introduce you to a friend. ProgressIndicator, reader. Reader, ProgressIndicator.
Author: Now that you know each other, let’s work together.
ProgressIndicator: Cool, what’s the task to do?
Author: Well, our awesome algorithm is taking too long and users are just leaving our state-of-the-art web application. So ProgressIndicator, we need your help to give the user some feedback about the progress of the process.
ProgressIndicator: Sure.
Author: Thank you sir. Take a look at our original application implementing this Java Thread performing our high-tech algorithm:
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: Wow! That’s an awesome algorithm.
Author: Thank you. It took us months to implement it. Anyways, we would like to add you, Mr. ProgressIndicator, to our layout, so you can tell the user how the progress of the algorithm is going. Is that OK for you?
ProgressIndicator: Sure. Let me place myself as a private member of your UI class.
Author: Of course, come in. And please add yourself into our main layout:
public class ProgressindicatorUI extends UI {
private ProgressIndicator mrProgressIndicator =
new ProgressIndicator();
// ...
protected void init(VaadinRequest request) {
// ...
layout.addComponent(mrProgressIndicator);
}
}
ProgressIndicator: What a nice place. Really high-tech.
Author: Yeah, we painted it Vaadin color.
ProgressIndicator: My favorite color!
Author: Nice. For each iteration of our algorithm I will update you, OK?
ProgressIndicator: Yes please.
Author: Cool. You accept values in which range?
ProgressIndicator: Give me a float between 0 and 1.
Author: OK. There you go:
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: Thank you. I think I’m ready.
Author: Great! Let’s run the app. Are you ready reader? You have been kind of quiet lately.
ProgressIndicator: Yeah. I think she/he might be overwhelmed by the high-tech algorithm.
Author: That’s reasonable. Let’s test our application:
ProgressIndicator: Cool. I’m working properly!
Author: Wonderful job ProgressIndicator. Thank you very much.
ProgressIndicator: My pleasure.