Vaadin Elements in Vaadin 10

Juha Seppänen
Juha Seppänen
On Oct 2, 2017 5:35:00 AM

Vaadin 10 is a modern web application development platform. It’s core is the comprehensive set of business oriented UI components called Vaadin Elements.

How we got here 

Vaadin Elements was originally targeting to add a few important, yet missing, UI components to Google’s Paper Elements set of Web Components. Elements such as Vaadin Grid, Vaadin Combo Box and Vaadin Date Picker were quickly recognized as high quality and quickly became popular additions for people writing web apps with the help of the Google Polymer library.

Where are we now?

In the beginning of 2017 we decided to focus our Elements efforts towards providing a full set of UI components for application developers. In May 2017 we released versions of Vaadin Elements that were fully compatible with Polymer 2.0. Existing Vaadin Elements were released as hybrid elements, meaning they were usable with both Polymer 1.x and Polymer 2.0. We also released our first batch of new Polymer 2.0 elements, namely Vaadin Form Layout, Vaadin Button and Vaadin Text Field. These new elements took full advantage of advances both in web platform and the Polymer library.

Last week we released a set of new and updated Vaadin Elements:

  • Vaadin Icons 4.1.2

  • Vaadin Date Picker 2.0.5

  • Vaadin Form Layout 1.0.3

  • Vaadin Text Field & Password Field 1.1.0 beta1

  • Vaadin Button 1.0.4

  • Vaadin Combo Box 3.0.0 beta1

  • Vaadin Dialog 1.0.0 beta1

  • Vaadin Checkbox 1.0.0 beta1

In addition we published the first pre-releases of the new Vaadin Grid 4.0 and two new layout elements: Vaadin Horizontal Layout and Vaadin Vertical Layout.

What’s in store for end of the 2017?

In addition to the Vaadin Elements released so far we plan to release these new Vaadin Elements:

  • Vaadin Tab & Tabs

  • Vaadin Dropdown Menu

  • Vaadin Notification

  • Vaadin Text Area

  • Vaadin Radio Button & Button Group

  • Vaadin Progress Bar

Additionally we will update Vaadin Upload so that it takes advantage of Polymer 2.0 features and will include styling support. 

So by end of the year you have a full set of Vaadin Elements to start your Vaadin 10 application development with.

  • Vaadin Button

  • Vaadin Checkbox

  • Vaadin Combo Box

  • Vaadin Context Menu

  • Vaadin Date Picker

  • Vaadin Dialog

  • Vaadin Dropdown Menu

  • Vaadin Form Layout

  • Vaadin Grid

  • Vaadin Icons

  • Vaadin Notification

  • Vaadin Progress Bar

  • Vaadin Radio Button & Button Group

  • Vaadin Split Layout

  • Vaadin Tab & Tabs

  • Vaadin Text Field & Password Field

  • Vaadin Text Area

  • Vaadin Upload

Styling Web Components

For a long time Vaadin Framework users have enjoyed the beautiful Valo theme. It is a thoughtfully designed, customizable theming engine for the Vaadin Framework. We are happy to announce that the same benefits will be available for Vaadin Elements users. 

Vaadin Valo 2.0 is a standards based way to theme individual UI components. Web application developers can also use Valo 2.0 to theme their entire application. The team released Valo 2.0 alpha 2 last week. We are working to have two themes available for all Vaadin Elements by the end of the year: Valo and Google Material. You can learn more by visiting Valo 2.0 pages.

Final words 

Vaadin Elements is the most comprehensive set of high quality Web Components that also work great together with other Web Components. During 2018 it will grow to include even more UI components. Valo will also evolve to include more styleable parts of Vaadin Elements.

Juha Seppänen
Juha Seppänen
Product dude with special interest in product safaris, work informatics and design thinking.
Other posts by Juha Seppänen