Moving to Vaadin 7               Henri Sara        Sr. Vaadin Expert
Migrating fromVaadin 6 toVaadin 7
Vaadin 7 in brief for migration      First new major version since 2009,      1.5 years in development      In addition to...
Major features in Vaadin 7 formigration      New windowing API      New FieldGroups and Converters      for easier and mor...
... and some more     SASS based themes     Simplified extending and widget     development     Much, much more - see     ...
Migration Guide              https://vaadin.com/wiki/-/wiki/Main/Migrating+from+Vaadin+6+t                            o+Va...
Packaging
Maven or Ivy to the rescue
UI Instead of Application andWindowimport com.vaadin.Application;import com.vaadin.ui.*;public class V6Application extends...
First steps      Update dependencies                                          public class                                ...
Converting an Eclipse project
Converting a Maven project  <dependencies>       <dependency>            <groupId>com.vaadin</groupId>            <artifac...
FieldGroup and Converters -separate presentation
Navigation and built-in multi-tab support@PreserveOnRefreshpublic class NavigationtestUI extends UI {    @Override    publ...
Theming with SASS     SCSS compiled to CSS     Variables, nesting, mix-ins, ...     Composite themes, multiple themes on a...
SASS example@import "..                 // reindeer theme contents within/reindeer/reindeer.scss";   // .mytheme selector ...
Client side widgets      Easier to develop      Layouting and client-server communication      rewritten - RPC, shared sta...
Add-ons and Widgetsets     Inherit com.vaadin.DefaultWidgetSet     Most/all add-ons need to be updated for     Vaadin 7   ...
Extending servlets      Both applications and add-ons can customize      start-up page without servlet subclass      @Java...
For more information      Whats new      https://vaadin.com/vaadin7      Vaadin 7 tutorials      https://vaadin.com/wiki/-...
Questions?
Upcoming SlideShare
Loading in...5
×

Migration from vaadin 6 to vaadin 7 devoxx france 2013

3,243

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
3,243
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
48
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Migration from vaadin 6 to vaadin 7 devoxx france 2013

  1. 1. Moving to Vaadin 7 Henri Sara Sr. Vaadin Expert
  2. 2. Migrating fromVaadin 6 toVaadin 7
  3. 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. 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. 5. ... and some more SASS based themes Simplified extending and widget development Much, much more - see https://vaadin.com/vaadin7
  6. 6. Migration Guide https://vaadin.com/wiki/-/wiki/Main/Migrating+from+Vaadin+6+t o+Vaadin+
  7. 7. Packaging
  8. 8. Maven or Ivy to the rescue
  9. 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. 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. 11. Converting an Eclipse project
  12. 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. 13. FieldGroup and Converters -separate presentation
  14. 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. 15. Theming with SASS SCSS compiled to CSS Variables, nesting, mix-ins, ... Composite themes, multiple themes on a page, theme by component etc.
  16. 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. 17. Client side widgets Easier to develop Layouting and client-server communication rewritten - RPC, shared state, ... GWT included in Vaadin
  18. 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. 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. 20. For more information Whats 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. 21. Questions?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×