Creating a basic application

To create a Vaadin application you need two files. A class that extends UI which is your main view and entry point to the application as well as a web.xml referring to the UI.

With Eclipse and the Vaadin plugin you will get all of this automatically by opening the New wizard (File → New → Other) and choosing Vaadin → Vaadin Project. From there you can give the new project a name and the wizard takes care of the rest.

In other environments you can create the standard java web application project. Create one file which extends UI into the source folder. Let’s call it MyApplicationUI:

Java

  1. package com.example.myexampleproject;
  3. import com.vaadin.server.VaadinRequest;
  4. import com.vaadin.ui.UI;
  5. import com.vaadin.ui.VerticalLayout;
  6. import com.vaadin.ui.Label;
  8. public class MyApplicationUI extends UI {
  10.   @Override
  11.   protected void init(VaadinRequest request) {
  12.     VerticalLayout view = new VerticalLayout();
  13.     view.addComponent(new Label("Hello Vaadin!"));
  14.     setContent(view);
  15.   }
  16. }

This application creates a new main layout to the UI and adds the text “Hello Vaadin!” into it.

Your web deployment descriptor, web.xml, has to point at your UI as well. This is done with an defining a Vaadin servlet and giving the UI as a parameter to it:

XML

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"
  3. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  4. xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
  5.   <display-name>MyApplication</display-name>
  6.   <context-param>
  7.     <description>Vaadin production mode</description>
  8.     <param-name>productionMode</param-name>
  9.     <param-value>false</param-value>
  10.   </context-param>
  11.   <servlet>
  12.     <servlet-name>My Vaadin App</servlet-name>
  13.     <servlet-class>com.vaadin.server.VaadinServlet</servlet-class>
  14.     <init-param>
  15.       <description>Vaadin UI</description>
  16.       <param-name>UI</param-name>
  17.       <param-value>com.example.myexampleproject.MyApplicationUI</param-value>
  18.     </init-param>
  19.   </servlet>
  20.   <servlet-mapping>
  21.     <servlet-name>My Vaadin App</servlet-name>
  22.     <url-pattern>/*</url-pattern>
  23.   </servlet-mapping>
  24. </web-app>

Now you’re able to package your application into a war and deploy it on a servlet container.