How to Start Working with Vaadin

We are highly satisfied with Vaadin UI Framework. I recommend it to anyone who are asking advice about what UI framework to use in their web applications. This article, however, is not about why we love Vaadin. It might be a topic for another article. I will try to show, in this article, how to start working with Vaadin from ground zero super fast. I decided to write about this topic after a message from one of my friends complaining about difficulty in finding his way through Vaadin Book and expressing his confusion about whether using any Vaadin plugin or IDE support is a must to start working with Vaadin. Let’s start with step by step.

Step 1: Create a web project using maven webapp archetype

mvn archetype:generate -DgroupId=com.example.vaadin -DartifactId=helloworld -DarchetypeArtifactId=maven-archetype-webapp -DinteractiveMode=false

Step 2: Import the project into your favorite IDE

I prefer to use Eclipse, but it should not matter whether you use IntelliJ or Netbeans. Just import the maven project you created in the previous step. The project should be ready to use within your favourite IDE after the import.

Step 3: Add Vaadin Dependencies into pom.xml of your project

Add following dependencies into pom.xml file of the project.


	com.vaadin
	vaadin-server
	7.6.4



	com.vaadin
	vaadin-client-compiled
	7.6.4



	com.vaadin
	vaadin-themes
	7.6.4

Step 4: Write UI class in your project

Create a new package with name com.example.vaadin, and following class into it.

package com.example.vaadin;
import com.vaadin.server.VaadinRequest;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Button.ClickListener;
import com.vaadin.ui.Notification;
import com.vaadin.ui.UI;

public class HelloWorldUI extends UI {
	protected void init(VaadinRequest request) {
		Button btn = new Button("Click Me!");
		btn.addClickListener(new ClickListener() {
			public void buttonclick(ClickEvent event) {
				Notification.show("Hello World!");
			}
		});
		setContent(btn);
	}
}

Step 5: Configure web.xml file of your project


	VaadinServlet
	com.vaadin.server.VaadinServlet
	
		UI
		com.example.vaadin.HelloWorldUI
	



	VaadinServlet
	/*

Step 6: Deploy the project into web container and start it


Now you can deploy your project into web container configured in your IDE. I prefer tomcat, but It doesn’t differ if you choose jetty or something else. Just type the url your application deployed in the container, e.g. http://localhost:8080/helloworld, and you should have seen the “Click Me!” button on the page.

Keep in mind that above steps are not enough to leverage all the features of Vaadin, however, it is sufficient enough to start working with Vaadin, and develop your server side UI components. You can add necessary pieces into your project once you need them, and it should be easier to add those pieces as you get more comfortable within Vaadin ecosystem.