Your first Vaadin Project


At this point you should have the New | Vaadin Project option available.

 

vaadin example

 

Choose a to start a new Project with a meaningful name and hit the Download button so that Vaadin libraries will be downloaded into Eclipse.

 

vaadin tutorial example

 

After the New Project wizard exists, 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.

Let’s see the application class created for us:

package com.example.sample;

import com.vaadin.Application;
import com.vaadin.ui.*;

public class SampleApplication extends Application {
 @Override
 public void init() {
   Window mainWindow = new Window("Sample Application");
   Label label = new Label("Hello Vaadin user");
   mainWindow.addComponent(label);
   setMainWindow(mainWindow);
  }

}

Now target this application to JBoss AS / Tomcat or any Java EE web server.

A Servlet registered at this address http://localhost:8080/Sample/ will render your application, producing a simple

 

Hello Vaadin User.

 

Adding some action to our example:

 

Vaadin has an excellent documentation, most of which is based on the free Vaadin book.

The following example follows a typical pattern where you have a Button component and a listener that handles user interaction (clicks) communicated to the application as events. Here we have defined an inner class that listens click events. (Pretty the same way we used to do it with AWT/Swing).


public void init() {
 final Window mainWindow = new Window("Clock window");
 final Label label = new Label();
 mainWindow.addComponent(label);
 
 Panel panel = new Panel("Panel Containing a Label");
 panel.setWidth("200px"); // Defined width.
 mainWindow.addComponent(panel);
 panel.addComponent(label);
 
 mainWindow.addComponent( new Button("Get time",new Button.ClickListener() {
 
  @Override
  public void buttonClick(com.vaadin.ui.Button.ClickEvent event) {
  label.setCaption("The time is " + new Date());
  }
 }));
  setMainWindow(mainWindow);

}

The outcome of this changes would be an empty Label which is filled with the current time when the Button is clicked.

 

vaadin tutorial example

Displaying tabular data

 

Well, any rich web application to be named such should provides a rich table component to display tabular data. Adding a table to your application is trivial with Vaadin.


public void init() {
 final Window mainWindow = new Window("Table window");

  Table table = new Table("Shoes price list");

  table.addContainerProperty("Brand", String.class, null);
  table.addContainerProperty("Colour", String.class, null);
  table.addContainerProperty("Price", Integer.class, null);
  /* Add a few items in the table. */
  table.addItem(new Object[] {"A10 Timberland","Grey",100}, new Integer(1));
  table.addItem(new Object[] {"Harmont & Blain","Black",85}, new Integer(2));
  table.addItem(new Object[] {"Roy Rogers","Blue",50}, new Integer(3));
  table.addItem(new Object[] {"IceBerg","Grey",150}, new Integer(4));

  mainWindow.addComponent(table);
  setMainWindow(mainWindow);

  Panel panel = new Panel("Panel");
  panel.setWidth("400px"); // Defined width.
  panel.addComponent(table);
  mainWindow.addComponent(panel);


   setMainWindow(mainWindow);
 }

This would produce the following output:

vaadin example tutorial

Lots of more examples are available at the home site.

 

In conclusion Vaadin is a framework designed to build web applications, not just web-sites. This positions it for application rather than website development. The programming model is much the same as in traditional desktop programming, with events and listeners rather than requests and responses. If you have written Swing or SWT-applications, you'll feel right at home with Vaadin.

References: http://vaadin.com

0
0
0
s2smodern