Vaadin 7 UI Design By Example: Beginner's Guide: Do it all with Java! All you need is Vaadin and this book which shows you how to develop web applications in a totally hands-on approach. By the end of it you'll have acquired the knack and taken a fun journey on the way.

A couple of years ago I was working with some friends on a personal Java project. We used to meet every Saturday to review what we had done before building the entire system. Let me introduce you to my friends: Susan Obstinate and Mark Nowsitall (weird last names, aren't they?).

"I've spent the entire week writing this code, but it's ready now," said Susan with an embittered tone.

"Let me see how you handled that," replied Mark suspiciously. Though they didn't seem to be, they were a couple.

So Susan proudly showed us her piece of code:

// some nasty code was here (censored for respect of the reader)
public String getUglyUrl(long total) {
    String url = "http://localhost/app/someservice?code=";
    
    for(long i = 0; i < total; i++) {
        url += someTrickyMath(i);
    }
    
    return url;
}

public String someTrickyMath(long i) {
    // (censored)
}

"We can use an int object type instead of long for the loop in your getUglyUrl method," instantly affirmed Mark...

Vaadin is mostly about UI. Vaadin's motto thinking of U and I is not in vain. I said mostly because you can additionally find a bunch of useful add-ons to deal with server-side technologies. Even Vaadin itself ships with some data components.

Most, if not all, applications have some kind of business logic. That is, something to do with the application's data. If you are an experienced developer you will agree with me that separating business logic from UI logic makes a lot of sense. For the "Time It" application, we will use two Java packages to separate business logic from...

To add UI components as class members, edit your TimeItUI class by adding these variables to it:

private static final TestSet[] testSets = new TestSet[] {
  new LongVsInt(),
  new StringVsStringBuffer(),
  new ShortCircuitVsNoShortCircuit()
};

private VerticalLayout layout = new VerticalLayout();
private ComboBox combo = new ComboBox("Test");
private final TextField textField = new TextField("Number of
                                    iterations", "1000");
private CheckBox checkBox = new CheckBox("Keep previous results");
private Button button = new Button("Time it!");
private VerticalLayout resultsLayout = new VerticalLayout();

Edit the init method of your TimeItUI class to match the following:

@Override
protected void init(VaadinRequest request) {
  initCombo();
  initButton();
  initLayout();
}

Comboboxes

A combobox is an input component that allows users to select an option from a drop-down list. It looks like the following screenshot:

You must be thinking "yeah right, but how do you put those options in there?" This is easy:

ComboBox c = new ComboBox("Select an option");
c.addItem("Option one");
c.addItem("Option two");
c.addItem("Option three");

If you have the options in a Java Collection class, you can pass the Collection instance to the constructor like this:

ArrayList<String> options = new ArrayList<>();
options.add("Option...

Implement the initCombo method of your TimeItUI class as shown in the following code snippet:

private void initCombo() {
  for(TestSet testSet : testSets) {
    combo.addItem(testSet);
    combo.setItemCaption(testSet, testSet.getTitle());
  }
  
  combo.addValueChangeListener(new ValueChangeListener() {
    @Override
    public void valueChange(ValueChangeEvent event) {
      TestSet testSet = (TestSet) combo.getValue();
      textField.setValue("" + testSet.getDefaultTimes());
      button.setDescription(testSet.getDescription());
    }
  });
  
  combo.setImmediate(true);
}

for(TestSet testSet : testSets) {
  combo.addItem(testSet);
  combo.setItemCaption(testSet, testSet.getTitle());
}

We can run a TestSet instance only if the user selects one. Follow these steps to add a proper validation:

Implement your initLayout method using the following snippet of code:

private void initLayout() {
  layout.setMargin(true);
  layout.setSpacing(true);
  layout.addComponent(combo);
  layout.addComponent(textField);
  layout.addComponent(checkBox);
  layout.addComponent(button);
  layout.addComponent(resultsLayout);
  
  setContent(layout);
}

Checkboxes

Everyone knows checkboxes. Have you ever accepted license agreements during software installations? Just in case, this is a checkbox:

We have already created our checkbox:

private CheckBox checkBox...

Implement your runSelectedTest method. This method will be called when the user presses the Time it! button:

public void runSelectedTest() {
  Long times = Long.parseLong(textField.getValue());
  Collection<String> results = TestSetExecutor.execute(
      (TestSet) combo.getValue(), times);
  showResults(results);
}

The default behavior of the application is to show only the results of the last execution. We need to remove all the results that have been previously added to the resultsLayout component if the user has not checked Keep previous results. To do that, implement your showResults method:

private void showResults(Collection<String> results) {
  if(!checkBox.getValue()) {
    resultsLayout.removeAllComponents();
    
  } else if(resultsLayout.getComponentCount() > 0) {
    resultsLayout.addComponent(new Label("--"));
  }
  
  for(String result : results) {
    resultsLayout.addComponent(new Label(result));
  }
}

resultsLayout.removeAllComponents();

Your brain must have started to feel comfortable using UI components such as labels, text fields, comboboxes, buttons, vertical layouts, and notifications. You know how to respond to events on these components by implementing click listeners and value change listeners. You can get the introduced (or selected) values from input components, and you can wire all this up inside a custom class extending Vaadin's UI.

The rest of the trip in this book is about learning more components, how to respond to events on components, and how to make them look as we want them to look. To prepare your brain for this trip, we will right now cover some basic theory about Vaadin. So relax, close your IDE for a little while, and let your fingers have a rest while we learn some nuts and bolts of Vaadin.

There's no better way to learn than practice. Follow these steps to see how binding works in real life:

It's time to continue with our trip. Vaadin has several built-in input components (or fields as they implement directly or indirectly the Field interface). All these components extend from AbstractField or AbstractSelect. Let's take a look at some of them.

public class TextareaUI extends UI implements ValueChangeListener {

  @Override
  protected void init(VaadinRequest request) {
    // our TextArea component
    TextArea textArea = new TextArea(
        "Enter some multi-lined text and press TAB:");
    textArea.addValueChangeListener(this);
    textArea.setImmediate(true);

    VerticalLayout layout = new VerticalLayout();
    layout.addComponent(textArea);
    setContent(layout);
  }

  @Override
  public void valueChange(ValueChangeEvent event) {
    String userText = event.getProperty().getValue()
        .toString...

It's time for our good deed of the day. OptionGroup has a very simple method to turn on a multiple selection mode: setMultiSelect.

What just happened?

Take a look at the new interface:

As you can see, now the component is displayed as an assortment of checkboxes and the getValue method (of both OptionGroup and Property) returns a Java Collection (actually a Set). This happens when we activate multiselect mode.

Note

We are not talking about Java EE, but just in case, the correct answers are:

Session beans and Message-driven beans

Let's change the DateField example a little bit:

What just happened?

This is the result you get:

You cannot type the year now, you have to select it from the component.

public class UploadUI extends UI implements Receiver {
  @Override
  protected void init(VaadinRequest request) {
    Upload upload = new Upload(
        "Select a text file and look at the console",
        this);

    VerticalLayout layout = new VerticalLayout();
    layout.addComponent(upload);
    setContent(layout);
  }

  @Override
  public OutputStream receiveUpload(String filename,
      String mimeType) {
    return new OutputStream() {
      @Override
      public void write(int b) throws IOException {
        System...

This was a big chapter. Look at what we have covered:

So far, our applications have had a boring layout (VerticalLayout). In the next chapter we will start making more appealing applications by learning a lot about layouts in Vaadin. See you there.