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.

Just in case you haven't already done so, you will need to download and install Eclipse, the preferred IDE for developing Vaadin applications.

Guess what? We've just downloaded and installed Eclipse. Seriously, that was the very first step; now we need to install the Vaadin plugin for Eclipse.

In this section we will see how to install the Vaadin plugin for Eclipse.

We've just prepared Eclipse to start hacking! Using the Vaadin Plugin for Eclipse we'll be able to create new Vaadin projects, custom components, and themes. But before that, we will have to install a web server to deploy our Vaadin applications.

Although we can deploy to most Java servers, we will use Jetty throughout this book. Jetty is a fast open source web server that implements the Java Servlet and JavaServer Pages technologies. These technologies make it possible to develop web applications using Java.

We've successfully downloaded and installed our own Jetty server.

Now we are ready to create and deploy our first Vaadin-powered application.

The Vaadin plugin for Eclipse includes a wizard to easily create new Vaadin projects.

A new project has been created and we can deploy it to our server right away, so let's do it now!

Till now we have seen how to create a project, now we will see how to deploy and run the project. We are ready to see our application up and running.

We have created, deployed, and run a Vaadin application using Eclipse. Upcoming applications will be generated way faster because we won't need to install any more plugins.

NetBeans is an open source IDE similar to Eclipse, which allows developers to create web applications using Java.

As you can guess, we have installed NetBeans and we are ready to create our first Vaadin project.

The best and the easiest way to create Vaadin 7 projects in NetBeans is by using Maven. Fortunately, NetBeans have very good support for Maven projects. If you don't know Maven, don't worry, be happy (thanks Bobby). Follow these steps and you'll get a Vaadin application willing to be hacked right away.

A new project has been created and we can deploy it to our server right away, so let's do it now!

We are ready to see our application up and running.

We have successfully created, deployed, and run a Vaadin application using NetBeans.

You are still here. Chances are that you are not using Eclipse or NetBeans. Well, actually, the easier way to get Vaadin 7 is through Maven. We are not covering how to install Maven here. If you haven't already, install Maven following the instructions given in http://maven.apache.org.

If you can see the rewarding BUILD SUCCESS message, you have successfully created your first Vaadin project using Maven. You must have a new directory with all the generated files for your project.

Deploying to Jetty is so common that we just can't break the old tradition of using it to test our application.

We have successfully created, compiled, packaged, deployed, and run a Vaadin application using Maven.

Now we have a layout in which we can add the button and all the n labels. Let's do it for the button:

public class WelcomeUI extends UI {

  protected void init(VaadinRequest request) {
    VerticalLayout layout = new VerticalLayout();
    setContent(layout);
    
    Button button = new Button("Click Me");
    layout.addComponent(button);
  }

}

No rocket science. We create an instance of Button and add it to the layout. This means the button is a child of layout, it will be displayed inside the VerticalLayout.

At this point, if we run the application, a button will be shown but it won't produce any response when clicked. Let's change that boredom:

public class WelcomeUI extends UI {

  protected void init(VaadinRequest request) {
    VerticalLayout layout = new VerticalLayout();
    setContent(layout);
        
    Button button = new Button("Click Me");
    button.addClickListener(new Button.ClickListener() {
      public void buttonClick(ClickEvent event) {
        // this will be called when button is clicked
      }
    });
    layout.addComponent(button);
  }

}

Don't be afraid, we've added five lines of code, but most of them are brackets or comments. Button has a method that allows you to add click listeners. A click listener is a class that listens to click events, that's it. Here, we are using an anonymous class (you know Java, right?):

new Button.ClickListener() {
  public void buttonClick(ClickEvent event) {
    // this will be called if button is clicked
  }
}

This class is an anonymous implementation of the Button.ClickListener interface. We are passing the just created instance to the addClickListener method in order to connect our code with the click event on the button. This kind of usage of anonymous classes is very common when developing Vaadin applications, especially in places where you need this callback behavior.

We are ready to add the logic needed to dynamically add all those labels into the layout. We have a listener defining a method that will be called each time the button is clicked. So let's add the corresponding logic in that method:

public class WelcomeUI extends UI {

  protected void init(VaadinRequest request) {
    final VerticalLayout layout = new VerticalLayout();
    setContent(layout);
        
    Button button = new Button("Click Me");
    button.addClickListener(new Button.ClickListener() {
      public void buttonClick(ClickEvent event) {
        Label label = new Label("Thank you for clicking");
        layout.addComponent(label);
      }
    });
    layout.addComponent(button);
  }

}

This is similar to when we added a button to the layout. This time we're adding a label. A label allows you to show non-editable texts.

Label components can display text in several formats. You can display plain text (that's the default), preformatted text, and HTML text. What if you want to display the "Thank you" part of the message on the label using a bold font?

<b>Thank you</b> for clicking.

You are one line far of doing that. Try it! Use the setContentMode method of Label and the ContentMode enumeration to display HTML messages on your page.

If we run the application right now, we will see a screen as shown in the following screenshot (before clicking the button several times, of course):

It looks a little tight on the page. We can add some space around the layout using the setMargin method as shown in the following code snippet:

public class WelcomeUI extends UI {

  protected void init(VaadinRequest request) {
    final VerticalLayout layout = new VerticalLayout();
    layout.setMargin(true);
    setContent(layout);
    
    Button button = new Button("Click Me");
    button.addClickListener(new Button.ClickListener() {
      public void buttonClick(ClickEvent event) {
        Label label = new Label("Thank you for clicking");
        layout.addComponent(label);
      }
    });
    layout.addComponent(button);
  }

}

Now it will appear as follows:

That's it. If you make some little refactor, you will get the original application that your IDE (or Maven) created.

Text fields are the components we need to allow the user to enter the two names. Do you remember how we added the Click Me button? Adding text fields is the same story.

We added a couple of text fields to our layout and then implemented a method to get the message to be shown on the labels. As you may have already guessed, the TextField class defines a getValue() method which returns the value which the user has introduced in the field. In this case, it happens to be a String. All input components (that is, components that get input from a user) have a getValue() method, which we can use to know the values introduced on the user interface. The following is a screenshot of the application (it seems that Maria doesn't like Juan too much):

Notifications are a common feature in applications. You might need to notify that some event has occurred in your system when the user performs certain action. For example, in a CRUD (create, read, update, and delete) interface, your application should notify the user whether each action has been successfully executed or not.

Vaadin makes it easy for you to show fancy notifications in your web applications. The Notification class has several static methods you can call from any part of your code to show notifications. For simple notifications you can make a call such as:

Notification.show("User created");

This will display a message centered on the page shown as follows:

The message will disappear when the user moves the mouse or presses any key.

In the funny phrases application, it would be nice if the application alerts the user when no names are given instead of showing no-sense phrases. Would you be able to modify the application in order to make it show this alert using the Notification class? Try it!

There are a couple of concepts you must keep in mind to be proficient with Vaadin. Answer the following questions and test yourself about your current Vaadin level.

Q1. Which method will be automatically called when somebody browses to your application URL?

Q2. Suppose you are overriding the init method of your own UI class. How would you set the root of your components tree?