Upgrading to Vaadin Framework 8 (Part 2 of 2)

In the previous part of this blog, I talked about the most important steps to get your project to compile with the latest Framework version.

The migration has been done through the first three steps mentioned here, and in this post I will go over the least complicated steps of migration. Steps 4 and 5 cover the modernization of your project with the latest Framework 8 features. If you are in a hurry, you can do this later on as well, and use the new APIs only for new Vaadin code.

  1. Upgrade dependencies in the POM file
  2. Run Maven goal vaadin:upgrade8
  3. Upgrade Add-ons
  4. Upgrade non-data components
  5. Upgrade data components
  6. Back to the future

As previously, prepare another bowl of popcorn, gather all your Vaadin Experts, and let’s watch the second part of the migration:

The strategy has changed a bit in this video: I’m no longer in a hurry, and I slowly upgrade small pieces of the project, making sure that it always compiles and passes tests. You can start by upgrading small components, then move on to bigger views. You can also easily hunt the deprecated warnings, from which you will find most of the old Framework 7 components that need to be migrated.

4. Upgrade non-data components [01:17]

This is simple and straightforward. Most of the APIs did not change for components that don’t use data binding, such as Layouts and Label. However, you need to pay attention to certain new default values of those components. For example VerticalLayout and HorizontalLayout now have spacing on by default, and margin settings that are most often used. Some code might need to be removed, or added, depends on what you expect the layout to look like.

5. Upgrade data components [10:51]

Fun fact: after writing the following lines, I noticed that each component or class took me exactely 10 minutes to upgrade live in the video!

I covered many use cases to migrate data components, let’s divide them into three sections:

5.1 Upgrade Grid [11:10]

Grid and all data components are now parameterized, they don’t deal with Containers anymore, and there is no Property interface anymore either. In this project I had to convert the GeneratedPropertyContainer to use the new Grid APIs that let us easily generate columns. I also needed to specify an identifier manually for each column, to be able to reference to them later when merging Footer columns. And I found that some Grid related components have different package names, such as FooterRow, but their APIs remained exactly the same.

5.2 Upgrade LabelField (from Viritin add-on) [20:06]

Just like the core field components in Framework 8, all add-ons that deal with the new data binding APIs have changed radically. In this project, there was an old style Converter applied on the LabelField directly. When moving to Framework 8 native API, converters are configured via the new Binder class instead.

Throughout the process, I found the new data binding API to be a much simpler way to write converters and validators.

The video also shows a good example on how to automatically bind member fields of a class with a given Object, using the new Binder.

5.2 Upgrade OptionGroup [30:12]

There are now two distinct components, CheckBoxGroup and RadioButtonGroup, and in this project I used the former one. CheckBoxGroup is for multiselection and RadioButtonGroup for single selection. There is no more need nor API to set multiselect to true, but more importantly, no more unsafe casting when generating the caption or retrieving values from components.

6. Back to the future

Although not mentioned in the video, it’s now also safe to get rid of the compatibility libraries. This way your war size will be smaller and the amount of JS required by the browser is smaller. Your application will deploy faster and the initial load will be snappier for end users. To remove the compatibility dependencies, change vaadin-compatibility-server dependency to vaadin-server from your POM file. And same for possible other similar vaadin-compatibility-* dependencies.

Overall we can see many enhancements when using the new Framework 8 components, both code wise and performance wise. Favouring well typed java.util.collections instead of our own Container-Property-Item interfaces makes the code easier to read and write. At the same time you’ll get a much better performing server side, regarding both memory and CPU. Although not required, it’s a good practice to upgrade all the other components to match the latest APIs and advanced data binding techniques.

Got any concerns while upgrading?

Something not working well for you?

Share your experience in a comment below!

Time to get responsive, Vaadin Board for Java is out!

Vaadin Board

Today the Vaadin Pro team is happy to introduce Vaadin Board for Java. It is a Vaadin component  for creating flexible responsive layouts very easily. No need to hassle with CSS, you just write plain Java code.

Vaadin Board can be used to create dashboards, intro screens, image galleries, or just to build application layouts, so that they will look great on different devices. We were aiming for a very easy API and responsiveness working out of the box, where you divide your application into rows, and then fill rows with components. Rows may also include inner rows that allow you to create very customizable layouts easily.

Vaadin Board for Java example

Vaadin Board is compatible with Vaadin 8.1.0-beta2 and higher.

Vaadin Board is commercially licensed and is available in both Pro and Prime subscriptions. We will be happy to react to your feedback and plan our further development based on your comments and proposals. So, please try it out and get back to us in the comments below.

Learn more and give it a try!

Vaadin Elements end of June update

Last month, in time for the Polymer 2 release, we announced pre-releases of all our Core Elements with Polymer 2 support. We're happy to say that we've now finalized the upgrade work and all Elements ship with Polymer 2 support. The updated elements are now easier to use with any framework as they do not require special syntax for doing things like DOM manipulation.

Configurable Valo theme for the Vaadin Elements Polymer Component Set
Configurable Valo theme for the Vaadin Elements Polymer Component Set

Work on the theme support we previewed in the last update is also progressing nicely. The first pre release sets up theme basics like colors, spacing, and alignment. It includes Valo and Material design implementations for vaadin-button, vaadin-checkbox, and vaadin-input. You can browse the work in progress demos here. Note that we're still hard at work and many things may still change.

We are also continuously working on expanding the component set as outlined in the previous post, focusing on the following components in the short term:

  • Text area
  • List box
  • Dialog
  • Dropdown menu
  • Menu button
  • Details
  • Tabs
  • Progress
  • Checkbox
  • Radio button

As always, we'll keep you posted on updates as we publish new things. In the meantime, go and check out all our components at