Your SlideShare is downloading. ×
  • Like
Migration from vaadin 6 to vaadin 7   devoxx france 2013
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Migration from vaadin 6 to vaadin 7 devoxx france 2013


Henri Sara's presentation on migration from Vaadin 6 to 7 at Vaadin & GWT meetup in Paris

Henri Sara's presentation on migration from Vaadin 6 to 7 at Vaadin & GWT meetup in Paris

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Moving to Vaadin 7 Henri Sara Sr. Vaadin Expert
  • 2. Migrating fromVaadin 6 toVaadin 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 formigration 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
  • 6. Migration Guide o+Vaadin+
  • 7. Packaging
  • 8. Maven or Ivy to the rescue
  • 9. UI Instead of Application andWindowimport 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@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
  • 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:
  • 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 Whats new Vaadin 7 tutorials Migration guide /wiki/Main/Migrating+from+Vaadin+6+to+Va adin+7
  • 21. Questions?