Vaadin

We’re happy to announce the release of Vaadin Charts 5 with support for Polymer 2! Vaadin Charts offers a range of custom elements for data visualization, from simple column charts to complex combinations of more than one type of chart.

Powerful features and a powerful API

Although this is a new major version of the Charts element, the API didn’t change. We are offering the same powerful features as before, with the same API.

To use Vaadin Charts, all you need to do is to import it and add the web component to your page. Here’s a simple sample of how to use vaadin-charts. You can configure the chart declaratively, and then feed the data to the data property e.g. by using iron-ajax.

<vaadin-line-chart id="mychart">
  <chart-title>Average temperatures in Turku, Finland</chart-title>
  <subtitle>1961 - 2016</subtitle>
  <x-axis>
    <chart-title>Year</chart-title>
  </x-axis>
  <y-axis max="30" min="0">
    <chart-title>Temperature (℃)</chart-title>
  </y-axis>
  </vaadin-line-chart>

And as you can see from the screenshot below, it couldn’t be much simpler to add a chart to your Polymer 2 based web app.

The Charts element is using Polymer 2 and ES6. And if you need to support IE11 and Safari 9, your code needs to be transpiled to ES5.

P.S. In case you’re attending Polymer Summit in Copenhagen next week, join the Vaadin pre-summit to see charts and all other Vaadin Elements.

Vaadin Grid was announced over two years ago, and since then it has evolved with many new features and enhancements. If this wasn’t enough killer for the Table component, then the announcement of Vaadin Framework 8 earlier this year, with explicit deprecation of Table, places it in a critical state, and it’s now time to upgrade your source code and enjoy the latest features, bug fixes, and all latest updates.

Vaadin Table was one of the oldest components in Vaadin Framework, and it survived many years of continuous development and upgrades. But technology is fast moving forward and the decision of replacing it with a new rewritten implementation was a must, to be able to cope with the latest technology requirements and web standards. There are plenty of resources available online comparing Table and Grid, so I’m not going to make yet another comparison here, but instead, I’ll be going over a series of tutorials showing you how to migrate from Table to Grid.

I will start with this project (note the tag) that consists of many Table examples, and migrate them one by one to use Grid. Those examples are a little bit modified versions of the book examples, and I will publish the migration guide in a few chunks over the coming few weeks.

The upgrade will be performed by first migrating to Framework 7 style of Grid, then migrating to Framework 8. This will give double advantages for all legacy code out there!

So stay tuned, in the next post I will be migrating some of those examples!

Which of those examples you want to see migrated first? Let me know in a comment below.

A key element in any successful open-source project is its community. In the case of Vaadin, the community collaborates mostly by asking and answering questions in forums, reporting issues, suggesting improvements, contributing with patches to the core products or with add-ons published at vaadin.com/directory.

Making a comprehensive list of all contributions would be impossible. Instead, for this month’s Community Spotlight, I’d like to highlight some of the most interesting add-ons published during the last few months. All these add-ons are available for Vaadin Framework 8.

Material by Johannes Goebel

A theme based on the Material Design by Google, with a few small transitions.

ScrollablePanel Add-on by bonprix HgmbH

A SingleComponentContainer which lets you set the scroll position from server-side and get notified when the user scrolls its content.

AutocompleteTextField Add-on by Max Schuster

The name says it all.

TextFieldMultiline Add-on by bonprix HgmbH

A text field that turns into a text area to allow multiline strings. Each line is represented by an entry in a Java List.

PopupExtension by Team Parttio

A popup that you can align relative to any component you want.

HybridMenu by Finn Linsbauer

A Menu for navigating between views.

BeforeUnload by Sami Viitanen

Offers a simple one line API to define a verification dialog shown when the user is trying to exit or reload a page. Can be used to warn if the user has any unsaved changes.

MultiFileUpload by Webstar Csoport

Provides a nice feedback for monitoring the upload progress of multiple files.

Tuning DateField by Frederic Dreyfus

A highly customizable alternative to Vaadin native DateField. Includes a multi-select feature.

HistoryApiNavigationStateManager Add-on by Axel Meier

Do you want to use Vaadin 8's support of the HTML5 History API together with the Navigator? Then, this is the right add-on.

DiagnosticServlet by Johannes Tuikkala

A servlet that enables setting a component's communication id. This helps to write scalability tests for Vaadin apps with JMeter or Gatling.

GridStack Add-on by Sami Viitanen

Provides drag'n drop multi-column grid layouts for Vaadin applications. Check out the awesome demo application!

Circular Progressbar Add-on by Johannes Goebel

Just take a look at the screenshot:

OAuth2 Popup Add-on by Bryson Dunn

Add OAuth support to your Vaadin applications by embedding a button that does the work for you.

There are many other awesome add-ons I couldn’t include in this short list. Share your favourite add-on in the comments section below!

See all the available add-ons in Vaadin Directory