Vaadin Framework

#1 Java Web UI Framework for Business Applications
 

QuickTickets Demo

A responsive demo application built using server-side Java with Vaadin. Showcasing big data, data visualization, drag 'n' drop and other Vaadin features.

 

Framework 8 is out now!

Version 8 is a huge step forward since it takes advantage of the greatest and latest Java features. Try the version out and give us feedback.

 

With Vaadin Framework, you'll use a familiar component based approach to build awesome single page web apps faster than with any other UI framework. Forget complex web technologies and just use Java or any other JVM language. Only a browser is needed to access your application - no plugins required.

#1 single-page web framework for Java developers The 2014 Decision Maker's Guide to Java Web Frameworks
 
FeaturesOpen Source Java Framework
  • One language for the whole application
    Java, the #1 programming language in the world, is probably already used by your persistency and business layer. With Vaadin, you'll leverage the same proven language, professional tooling and skills to build your web UI. No need to touch markup languages or JavaScript.
  • UI logic is right next to your data
    Vaadin UI code lives in a JVM, in your web server. That's where your data and business logic also exist. This makes accessing your data and business logic really simple and efficient. No need to expose REST services or think up other ways to move the data to the browser.
  • Extensible with Java and HTML5
    The component-based programming model and Java encourage writing reusable modules. It is also easy to wrap existing HTML widgets or get down to the low level browser technologies when you need something special. There are also hundreds of community contributed extensions available.
  • Strong abstraction of web technologies
    Familiar component-based programming model helps you to build modern single-page HTML5 apps, without getting your hands dirty with low level web technologies. You can apply the skills you have learned with UI frameworks, like Swing and SWT, and concentrate on your domain problems. Vaadin will take care of client-server communication, browser differences, markup languages, CSS and even upcoming new web technologies.

How does Vaadin work?

Vaadin takes care of communicating your changes to the browser.

Hi Rudolph
Click Play to see how it works
Vaadin automatically loads a "client side engine", built with
  • Initial HTML
  • CSS (theme)
  • Images
  • JavaScript
~300k compressed
(regardless of app size)
  • name="Rudolph"
  • button clicked
261 bytes
  • Add notification
267 bytes
The Code
(Running on the server)
public class MyUI extends UI {
  protected void init(VaadinRequest request) {
    final TextField name = new TextField("Name");
    final Button greetButton = new Button("Greet");

    greetButton.addClickListener(
      e -> Notification.show("Hi " + name.getValue())
    );
    setContent(new VerticalLayout(name, greetButton));
  }
}
Web UIs in server-side Java

// All of this code is running in your server's JVM
// Create a TextField input.
TextField name = new TextField("Your Name", "Vaadin");

// Access any server-side API directly.
String serverName = servletContext.getServerInfo();

// Create a Button and define a server-side click listener.
Button greetButton = new Button("Greet the Server");
greetButton.addClickListener(event ->
    Notification.show("Hello " + name.getValue() + "!\n" +
                      "I'm " + serverName));

// Display TextField and Button vertically.
VerticalLayout layout = new VerticalLayout(name, greetButton);
Show code
Powerful components

// List of entities from any Java backend (EJB/JPA/Spring/etc)
List<Person> personList = backendService.getAllPersons();

// Create a Grid and bind the Person objects to it
Grid<Person> grid = new Grid<>(Person.class);
grid.setItems(personList);

// Define the columns to be displayed
grid.setColumns("firstName", "lastName", "email");
Show code
Layouting in Java or markup

public class PersonForm extends FormLayout {
// Define the input fields for data.
TextField firstName = new TextField("First name");
TextField lastName = new TextField("Last name");
TextField email = new TextField("Email");
DateField birthday = new DateField("Birthday");

    public PersonForm() {
        addComponents(firstName, lastName, email, birthday);
    }
}

// Create a PersonForm and bind form fields to a person bean.
PersonForm form = new PersonForm();
new Binder<>(Person.class).bindInstanceFields(this);

<vaadin-form-layout>
  <vaadin-text-field _id="firstName" caption="First name" />
  <vaadin-text-field _id="lastName" caption="Last name" />
  <vaadin-text-field _id="email" caption="Email" />
  <vaadin-date-field _id="birthday" caption="Birthday" />
</vaadin-form-layout>
Show code
 
Build your first full app in minutes.
Latest release / Read release notes
 
Resources
 

Core, Pro and Prime.

Choose between Vaadin Core, the open source free stuff, Vaadin Pro, the tools and elements that make you super productive and Vaadin Prime, the Expert Chat, Development on Demand and Warranty tier to give your team 1st class support.