Vaadin

From Wikipedia, the free encyclopedia
Jump to navigation Jump to search
Vaadin
Vaadin-logo
Web application implemented with Vaadin Flow
Web application implemented with Vaadin Flow
Developer(s)Vaadin Ltd.
Stable release
11.0.1 [1] / 17 September 2018; 2 months ago (2018-09-17)
Repositoryhttps://github.com/vaadin/platform
PlatformCross platform
LicenseApache License 2.0
Websitevaadin.com

Vaadin (Finnish pronunciation: [ˈʋɑːdin]) is an open-source platform for web application development. The Vaadin platform includes a set of web components, a Java web framework, and a set of tools and application starters. Its flagship product, Vaadin Flow (previously Vaadin Framework) allows the implementation of HTML5 web user interfaces using the Java Programming Language.

History[edit]

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[2][3] that Michael Widenius–the main author of the original version of MySQL–invested in IT Mill, the developer of Vaadin. 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.[citation needed]

On February 22, 2017, Vaadin Framework 8 was released.[4] Improvements include a re-written data binding API utilizing modern Java features such as type parameters and lambda expressions, and more efficient memory and CPU usage.

On June 25, 2018, Vaadin 10 was released.[5] Vaadin 10 made possible to use Vaadin's components from any technology compatible with Web Components and enhanced Vaadin Directory to include Web Components distribution. Vaadin Flow–the next generation of Vaadin Framework–was presented as a server-side Java web framework on top of the Vaadin components.

On September 5, 2018, Vaadin 11 was released with Gradle integration, a few new components and Vaadin Charts 6.1.

Vaadin's components[edit]

Vaadin's components are a comprehensive set of Web Components for application developers. The components can be used in web documents (without frameworks) and web frameworks compatible with Web Components. These components are the core of Vaadin Flow, a Java web framework that offers a Java API on top the each Vaadin component.

Basic usage[edit]

The Vaadin components are typically installed with npm or Bower. For example, the following command installs the vaadin-button component:

bower install vaadin/vaadin-button

Once installed, the component can be used in a web page as follows:

<html>
<head>
    <link rel="import" href="bower_components/vaadin-button/vaadin-button.html" />
</head>
<body>
    <vaadin-button onclick='alert("Hello, World")'>Click me</vaadin-button>
</body>
</html>

The following is a screenshot of the previous page:

Vaadin-components-hello-world-screenshot.png

Available components[edit]

The following table shows a list of the free open-source Web Components included in Vaadin:

Vaadin components
Component Element name Description
Button vaadin-button Element for customized buttons
Checkbox vaadin-checkbox Element for customized checkboxes
Combo box vaadin-combo-box Shows a list of items with filtering
Context menu vaadin-context-menu Shows context dependent items for any element on the page
Date picker vaadin-date-picker A date selection field with a scrollable month calendar
Dialogvaadin-dialog Shows modal dialogs
Dropdown menu vaadin-dropdown-menu Customizable web component for dropdown menus
Form layout vaadin-form-layout Configurable responsive layout for form elements
Grid vaadin-grid Data grid / data table element
UI icon set vaadin-icons A collection of 600+ icons
Itemvaadin-item A container for item elements
vaadin-list-boxReusable list boxes
Notificationvaadin-notificationCustomized notifications
Ordered layoutvaadin-ordered-layoutHorizontally or vertically align HTML elements
Themable input controls
Progress bar vaadin-progress-bar Customized progress bars
Radio button vaadin-radio-button Customized radio buttons
Split layoutvaadin-split-layoutPartition a layout into resizeable areas
Navigation tabsvaadin-tabsCustomized tabs
Uploadvaadin-uploadUpload multiple files with progress indication

Vaadin Flow[edit]

Vaadin Flow
Vaadin-logo
Vaadin-flow-bakery.png
Developer(s)Vaadin Ltd.
Stable release
1.0.0 [6] / 21 June 2018; 5 months ago (2018-06-21)
Repositoryhttps://github.com/vaadin/flow
PlatformJava
TypeWeb framework
LicenseApache License 2.0
Websitevaadin.com/flow

Vaadin Flow (previously Vaadin Framework) is a web framework for building web applications and websites. Vaadin Flow programming model is similar to Vaadin Framework's–It uses Java as the programming language for creating web content. Vaadin Flow features a server-side architecture which means that most of the logic runs on the server. On the client-side, Vaadin Flow is built on top of Web Component standards.

Vaadin Flow includes Web Component support for Java developers and allows the use of HTML templates (based on Polymer) with automated client-server communication. It also includes APIs for routing (connecting user interface components to URLs), data binding (synchronizing input fields with server-side data models), and server-side DOM manipulation.

Basic usage[edit]

The following is an elementary example of Vaadin Flow usage:

@Route("hello-world")
public class MainView extends VerticalLayout {

    public MainView() {
        TextField textField = new TextField("Enter your name");

        Button button = new Button("Click me", event ->
                add(new Span("Hello, " + textField.getValue())));

        add(textField, button);
    }
}

The following is a screenshot of the previous application:

Vaadin-flow-hello-world-screenshot.png

Features[edit]

User interface implementation with only Java[edit]

Vaadin Flow allows the usage of existing interface components and the implementation of new ones by using Java code running on the server side. It is possible to create and modify the DOM from the server side. The constructor in the following snippet of code shows how to create a new HTML div element, set its id attribute, and add a click listener:

@Route("")
public class MainView extends Div {
    public MainView() {
        Div div = new Div();
        div.setText("Click me");
        div.getElement().setAttribute("id", "main");
        div.getElement().addEventListener("click", (DomEventListener) event ->
                add(new Span("Hello, World")));
        add(div);
    }
}

Web Components integration[edit]

Web Components integration is provided through the @Tag and @Import annotations. The following snippet of code shows how to wrap an existing web component in a server-side Java component:

@Tag("juicy-ace-editor")
@HtmlImport("bower_components/juicy-ace-editor/juicy-ace-editor.html")
public class JuicyAceEditor extends Div {

    public void setMode(String mode) {
        getElement().setAttribute("mode", mode);
    }
}

Router[edit]

The Router is a core concept in Vaadin Flow and enables navigation via URLs. The Router allows the connection of URLs to user interface components. It is based on the HTML5 History API which allows end users to navigate through pages while preserving the page state. The following snippet of code shows how to use the @Route annotation to show the annotated component when the end user requests a URL like http://yourdomain.com/hello/world:

@Route("hello/world")
public class HelloWorldComponent extends Div {
  public HelloWorldComponent() {
    setText("Hello, World!");
  }
}

Data binding[edit]

Data binding is done through the Binder class. It allows synchronizing the values in input fields with server-side data models. The following snippet of code shows how to bind the name Java field (through the corresponding getter and setter) of a hypothetical Person class to the value in a TextField component:

TextField nameField = new TextField();

Binder<Person> binder = new Binder<>();
binder.bind(nameField, Person::getName, Person::setName);

HTML templates[edit]

Vaadin Flow allows the definition of HTML templates with automated client-server communication and data binding (when using Polymer-based templates). The following is an example of a Polymer-based template:

<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/vaadin-text-field/vaadin-text-field.html">

<dom-module id="hello-world">
    <template>
        <vaadin-text-field label="Your name" value="{{name}}"></vaadin-text-field>
        <button on-click="greet">Click me</button>
        <div id="greeting">[[greeting]]</div>
    </template>
    <script>
        class HelloWorld extends Polymer.Element {
            static get is() {
                return 'hello-world'
            }
        }
        customElements.define(HelloWorld.is, HelloWorld);
    </script>
</dom-module>

The following snippet of code shows how to connect the previous template to a server-side Java component:

@Tag("hello-world")
@HtmlImport("src/hello-world.html")
public class HelloWorld extends PolymerTemplate<HelloWorld.HelloWorldModel> {
    
    public interface HelloWorldModel extends TemplateModel {
        String getName();
        void setGreeting(String greeting);
    }

    @EventHandler
    private void greet() {
        getModel().setGreeting("Hello, " + getModel().getName());
    }
}

Look and feel customization[edit]

Customization of the look and feel can be done with CSS, HTML custom styles, or by ready-made themes configuration.

Spring Integration[edit]

Vaadin Flow includes Spring Framework 5 and Spring Boot 2 integration.

See also[edit]

References[edit]

  1. ^ "Vaadin releases". GitHub.
  2. ^ "Michael "Monty" Widenius investing in Finnish IT Mill". Invest in Finland. Archived from the original on 2011-07-20. Retrieved 2009-01-31.
  3. ^ Asay, Matt. "Monty Widenius invests in Act II: IT Mill". CNET News. Retrieved 2009-01-31.
  4. ^ Vaadin. "Vaadin releases Vaadin Framework 8". www.prnewswire.com.
  5. ^ Vaadin. "Vaadin modernizes Java development with its biggest release to date: Vaadin 10". www.businessinsider.com.
  6. ^ "Vaadin Flow releases". GitHub.

Further reading[edit]

External links[edit]