2.3. Your First Project with Vaadin

Let us create the first application project with the tools installed in the previous section. First, launch Eclipse and follow the following steps:

After the New Project wizard exits, it has done all the work for us: Vaadin libraries are installed in the WebContent/WEB-INF/lib directory, an application class skeleton has been written to src directory, and WebContent/WEB-INF/web.xml already contains a deployment descriptor.

The application class created by the plugin contains the following code:

package com.example.myproject;

import com.vaadin.Application;
import com.vaadin.ui.*;
public class MyprojectApplication extends Application
{
   @Override 
   public void init() {
      Window mainWindow = 
         new Window("Myproject Application");
      Label label = new Label("Hello Vaadin user");
      mainWindow.addComponent(label);
      setMainWindow(mainWindow);
   }
}

Let us add a button to the application to make it a bit more interesting. The resulting init() method could look something like:

public void init() {
   final Window mainWindow = 
      new Window("Myproject Application");

   Label label = new Label("Hello Vaadin user");
   mainWindow.addComponent(label);

   mainWindow.addComponent(
      new Button("What is the time?",
         new Button.ClickListener() {
         public void buttonClick(ClickEvent event) {
            mainWindow.showNotification(
               "The time is " + new Date());
         }
      }));

   setMainWindow(mainWindow);
}

The deployment descriptor WebContent/WEB-INF/web.xml defines Vaadin framework servlet, the application class, and servlet mapping:

Eclipse IDE for Java EE Developers has the Web Standard Tools package installed, which supports control of various web servers and automatic deployment of web content to the server when changes are made to a project.

Make sure that Tomcat was installed with user permissions. Configuration of the web server in Eclipse will fail if the user does not have write permissions to the configuration and deployment directories under the Tomcat installation directory.

Follow the following steps.

Starting your application is as easy as selecting myproject from the Project Explorer and then Run → Debug As → Debug on Server. Eclipse then opens the application in built-in web browser.

You can insert break points in the Java code by double-clicking on the left margin bar of the source code window. For example, if you insert a breakpoint in the buttonClick() method and click the What is the time? button, Eclipse will ask to switch to the Debug perspective. Debug perspective will show where the execution stopped at the breakpoint. You can examine and change the state of the application. To continue execution, select Resume from Run menu.