Migration from vaadin 6 to vaadin 7 devoxx france 2013
-
Upload
joonas-lehtinen -
Category
Technology
-
view
3.132 -
download
5
description
Transcript of Migration from vaadin 6 to vaadin 7 devoxx france 2013
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?