Moving to Vaadin 7 involves migrating from Vaadin 6 to take advantage of new features in Vaadin 7 including a new windowing API, improved field groups and converters, and SASS based themes. The migration involves updating dependencies to Vaadin 7, replacing the Application and Window classes with the UI class, and converting themes to use SASS. Many APIs are backwards compatible but some changes like separate presentation of field groups and converters may require updates to code. The Vaadin documentation provides guides on migration and information on new features in Vaadin 7.

1. Moving to Vaadin 7
Henri Sara
Sr. Vaadin Expert

2. Migrating from
Vaadin 6 to
Vaadin 7

3. Vaadin 7 in brief for migration
First new major version since 2009,
1.5 years in development
In addition to new features, reworking
(and breaking) some old APIs
Most APIs backwards compatible -
some since 2002

4. Major features in Vaadin 7 for
migration
New windowing API
New FieldGroups and Converters
for easier and more flexible forms
New packaging (including GWT)

5. ... and some more
SASS based themes
Simplified extending and widget
development
Much, much more - see
https://vaadin.com/vaadin7

6. Migration Guide
https://vaadin.com/wiki/-
/wiki/Main/Migrating+from+Vaadin+6+t
o+Vaadin+

7. Packaging

8. Maven or Ivy to the rescue

9. UI Instead of Application and
Window
import com.vaadin.Application;
import com.vaadin.ui.*;
public class V6Application extends Application
{
@Override
public 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")
@PreserveOnRefresh
public class V7UI extends UI {
@Override
protected void init(VaadinRequest request) {
VerticalLayout view = new VerticalLayout();
view.addComponent(new Label("Hello!"));
setContent(view);
}
}

10. First steps
Update dependencies
public class
V6Application
extends
UI replacing Application and Application
Window public class V7UI
extends UI
@Theme("mytheme")
Update theme
styles.scss:
import "../reindeer/legacy-styles.css"

11. Converting an Eclipse project

12. 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> Dependencies
<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>
Plug-in
<groupId>com.vaadin</groupId>
<artifactId>vaadin-maven-plugin</artifactId>
<version>${vaadin.plugin.version}</version>

13. FieldGroup and Converters -
separate presentation

14. Navigation and built-in multi-
tab support
@PreserveOnRefresh
public 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

15. Theming with SASS
SCSS compiled to CSS
Variables, nesting, mix-ins, ...
Composite themes, multiple themes on a
page, theme by component etc.

16. SASS example
@import ".. // reindeer theme contents within
/reindeer/reindeer.scss"; // .mytheme selector
.mytheme .reindeerrules { ... }
// Variables
$margin: 16px; // Nesting
.mytheme .a .b {
// Mixins c: 16px;
@mixin mytheme { }
// Including a mixin
@include reindeer;
// Nesting
.a {
.b {
}
c: $margin;
SASS
}
}
Compiler
.mytheme {
@include mytheme;
}

17. Client side widgets
Easier to develop
Layouting and client-server communication
rewritten - RPC, shared state, ...
GWT included in Vaadin

18. Add-ons and Widgetsets
Inherit com.vaadin.DefaultWidgetSet
Most/all add-ons need to be updated for
Vaadin 7
Currently 135 Vaadin 7 compatible add-ons:
http://vaadin.com/directory#:vaadin=7

19. Extending servlets
Both applications and add-ons can customize
start-up page without servlet subclass
@JavaScript on components to inject
JavaScript
UIProvider, VaadinServletSession,
VaadinSession, VaadinService etc. reduce
the need to subclass servlets

20. For more information
What's new
https://vaadin.com/vaadin7
Vaadin 7 tutorials
https://vaadin.com/wiki/-/wiki/Main/Vaadin+7
Migration guide
https://vaadin.com/wiki/-
/wiki/Main/Migrating+from+Vaadin+6+to+Va
adin+7

21. Questions?