Moving to Vaadin 7Henri Sara

Sr. Vaadin Expert

Migrating from Vaadin 6 toVaadin 7

First new major version since 2009, 1.5 years in development

Most APIs backwards compatible - some since 2002

In addition to new features, reworking (and breaking) some old APIs

Vaadin 7 in brief for migration

New windowing API

New packaging (including GWT)

New FieldGroups and Converters for easier and more flexible forms

Major features in Vaadin 7 for migration

SASS based themes

Much, much more - seehttps://vaadin.com/vaadin7

Simplified extending and widget development

... and some more

Migration Guidehttps://vaadin.com/wiki/-

/wiki/Main/Migrating+from+Vaadin+6+to+Vaadin+

Packaging

Maven or Ivy to the rescue

UI Instead of Application and Windowimport com.vaadin.Application;import com.vaadin.ui.*;

public class V6Application extends Application {

@Overridepublic void init() {

Window mainWindow = new Window("V6");Label label = new Label("Hello!");mainWindow.addComponent(label);setMainWindow(mainWindow);setTheme(“mytheme”);

}}

import com.vaadin.server.*;import com.vaadin.ui.*;

@Theme("mytheme")@PreserveOnRefreshpublic class V7UI extends UI {

@Override protected void init(VaadinRequest request) { VerticalLayout view = new VerticalLayout(); view.addComponent(new Label("Hello!")); setContent(view); }}

Update dependencies

Update theme

UI replacing Application and Window

First steps

styles.scss:import "../reindeer/legacy-styles.css"

@Theme("mytheme")

public class V6Application extends Applicationpublic class V7UI extends UI

Converting an Eclipse project

Converting a Maven project<dependencies>

<dependency><groupId>com.vaadin</groupId><artifactId>vaadin-server</artifactId><version>${vaadin.version}</version>

</dependency><dependency>

<groupId>com.vaadin</groupId><artifactId>vaadin-client-compiled</artifactId><version>${vaadin.version}</version>

</dependency><dependency>

<groupId>com.vaadin</groupId><artifactId>vaadin-client</artifactId><version>${vaadin.version}</version><scope>provided</scope>

</dependency><dependency>

<groupId>com.vaadin</groupId><artifactId>vaadin-themes</artifactId><version>${vaadin.version}</version>

</dependency></dependencies>

<build><plugins>

<plugin><groupId>com.vaadin</groupId><artifactId>vaadin-maven-plugin</artifactId><version>${vaadin.plugin.version}</version>

Dependencies

Plug-in

FieldGroup and Converters - separate presentation

Navigation and built-in multi-tab support@PreserveOnRefreshpublic class NavigationtestUI extends UI {

@Override public void init(VaadinRequest request) {

// Create Navigator, use the UI content layout to display the views Navigator navigator = new Navigator(this, this);

// Add some Views // Could also use a ViewProvider navigator.addView(MainView.NAME, new MainView()); // no fragment

// #count will be a new instance each time we navigate to it, counts: navigator.addView(CountView.NAME, CountView. class);

// The Navigator attached to the UI will automatically navigate to the // initial fragment once the UI has been initialized. }

}

http://server/test#!count/params

SCSS compiled to CSS

Composite themes, multiple themes on a page, theme by component etc.

Variables, nesting, mix-ins, ...

Theming with SASS

SASS example@import "../reindeer/reindeer.scss";

// Variables$margin: 16px;

// Mixins@mixin mytheme { // Including a mixin @include reindeer;

// Nesting .a { .b { c: $margin; } }}

.mytheme { @include mytheme;}

// reindeer theme contents within// .mytheme selector.mytheme .reindeerrules { ... }

// Nesting.mytheme .a .b { c: 16px;}

SASSCompiler

Easier to develop

GWT included in Vaadin

Layouting and client-server communication rewritten - RPC, shared state, ...

Client side widgets

Inherit com.vaadin.DefaultWidgetSet

Currently 135 Vaadin 7 compatible add-ons: http://vaadin.com/directory#:vaadin=7

Most/all add-ons need to be updated for Vaadin 7

Add-ons and Widgetsets

Both applications and add-ons can customize start-up page without servlet subclass

UIProvider, VaadinServletSession, VaadinSession, VaadinService etc. reduce the need to subclass servlets

@JavaScript on components to inject JavaScript

Extending servlets

What's newhttps://vaadin.com/vaadin7

Migration guidehttps://vaadin.com/wiki/-/wiki/Main/Migrating+from+Vaadin+6+to+Vaadin+7

Vaadin 7 tutorialshttps://vaadin.com/wiki/-/wiki/Main/Vaadin+7

For more information

Questions?