Vaadin Online Tutorials

Development was first started as an adapter on top of the Millstone 3 open-source web framework released in the year 2002. It introduced an Ajax-based client communication and rendering engine. During 2006 this concept was then developed separately as a commercial product. As a consequence of this, a large part of Vaadin's server-side API is still compatible with Millstone's Swing-like APIs.

In early 2007 the product name was changed to IT Mill Toolkit and version 4 was released. It used a proprietary JavaScript Ajax-implementation for the client-side rendering, which made it rather complicated to implement new widgets. By the end of the year 2007 the proprietary client-side implementation was abandoned and GWT was integrated on top of the server-side components. At the same time, the product license was changed to the open source Apache License 2.0. The first production-ready release of IT Mill Toolkit 5 was made on March 4, 2009, after an over one year beta period.

On September 11, 2008, it was publicly announced that Michael Widenius–the main author of the original version of MySQL–invested in IT Mill, the Finnish developer of Vaadin.^[6] The size of the investment is undisclosed.

On May 20, 2009, IT Mill Toolkit changed its name to Vaadin Framework. The name originates from the Finnish word for doe, more precisely put, a female reindeer. It can also be translated from Finnish as "I insist". In addition to the name change, a pre-release of version 6 along with a community website was launched. Later, IT Mill Ltd, the company behind the open source Vaadin Framework, changed its name to Vaadin Ltd.

On March 30, 2010, Vaadin Directory was opened. It added a channel for distributing add-on components to the core Vaadin Framework, both for free or commercially. On launch date, there were 95 add-ons already available for download.^[7]

Vaadin Flow (formerly Vaadin Framework) is a Java web framework for building web applications and websites. Vaadin Flow's programming model allows developers to use Java as the programming language for implementing User Interfaces (UIs) without having to directly use HTML or JavaScript. Vaadin Flow features a server-side architecture which means that most of the UI logic runs securely on the server reducing the exposure to attackers. On the client-side, Vaadin Flow is built on top of Web Component standards. The client/server communication is automatically handled through WebSocket or HTTP with light JSON messages that update both, the UI in the browser and the UI state in the server.

Vaadin Flow's Java API includes classes such as TextField, Button, ComboBox, Grid, and many others that can be configured, styled, and added into layout objects instances of classes such as VerticalLayout, HorizontalLayout, SplitLayout, and others. Behaviour is implemented by adding listeners to events such as clicks, input value changes, and others. Views are created by custom Java classes that implement another UI component (custom or provided by the framework). This view classes are annotated with @Route to expose them to the browser with a specific URL. The following example illustrates these concepts:

@Route("hello-world") // exposes the view through http://localhost:8080/hello-world
public class MainView extends VerticalLayout { // extends an existing UI component

    public MainView() {
        // creates a text field
        TextField textField = new TextField("Enter your name");

        // creates a button
        Button button = new Button("Send");
        
        // adds behaviour to the button using the click event
        button.addClickListener(event ->
                add(new Paragraph("Hello, " + textField.getValue()))
        );

        // adds the UI components to the view (VerticalLayout)
        add(textField, button);
    }
}

The following is a screenshot of the previous example:

Hilla (formerly Vaadin Fusion) is a web framework that integrates Spring Boot Java backends with reactive front ends implemented in TypeScript. This combination offers a fully type-safe development platform by combining server-side business logic in Java and type-safety in the client side with the TypeScript programming language. Views are implemented using Lit—a lightweight library for creating Web Components. The following is an example of a basic view implemented with Hilla:

@customElement('hello-world-view')
export class HelloWorldView extends LitElement {
  render() {
    return html`
      <div>
        <vaadin-text-field label="Your name"></vaadin-text-field>
        <vaadin-button @click="${this.sayHello}">Say hello</vaadin-button>
      </div>
    `;
  }

  sayHello() {
    showNotification('Hello!');
  }
}

Vaadin includes a set of User Interface (UI) components implemented as Web Components. These components include a server-side Java API (Vaadin Flow) but can also be used directly in HTML documents as well. Vaadin's UI components work with mouse and touch events, can be customized with CSS, are compatible with WAI-ARIA, include keyboard and screen readers support, and support right-to-left languages.

The following table shows a list of the UI components included in Vaadin:

Vaadin offers two certification tracks to prove that a developer is proficient with Vaadin Flow:^[13]

• Certified Vaadin 14 Developer
• Certified Vaadin 14 Professional

To pass the certification, a developer should go through the documentation, follow the training videos, and take an online test.

Previous (now unavailable) certifications included:

• Vaadin Online Exam for Vaadin 7 Certified Developer
• Vaadin Online Exam for Vaadin 8 Certified Developer

• List of rich web application frameworks