/ Vaadin Flow Framework


Gradle Vaadin Flow plugin M3 released

This release mostly focuses on tweaking the existing functionality to be simpler and faster.

Generated resources are no longer stored in source tree

Previously some of the resources related to production mode was put in src/main/webapp. However, since these resources should not be committed into source control you would need to ignore them somehow with your VCS. This was a bit in-convenient so these resources was moved into a new directory, build/webapp-gen in the Gradle build directory that never should be committed into VCS.

This means that if you have been using either M1 or M2 then please remove the following generated directories from source control and let the plugin re-generate them the next time it runs:

src/main/webapp/frontend/bower_components/*
src/main/webapp/frontend-es5/*
src/main/webapp/frontend-es6/*

Support for Polymer custom-styles

In previous versions of the plugin the theme CSS file was directly generated into src/main/webapp/frontend/<projectname>-styles.css and included in the View class with a @StyleSheet annotation.

This has changed so that the style css file will now be generated into src/main/webapp/frontend/styles/<projectname>-styles.css and a @HTMLImport will be generated for it in the UI class.

The reason for this change is that to be able to style Polymer components, especially the inner parts (called the shadow-dom), we will need to embed our Css into html files and into a custom-style tag. Don't ask me why though, as we know this goes against most good design practices of separating concerns.

The plugin however will now allow you to keep your CSS styles in CSS files and will autogenarate a HTML wrapper for any CSS file that you place in the ../frontend/styles/ folder.

That way you can choose to either directly use you css file via @Stylesheet(frontend:<you-css-file>.css) or with @HTMLImport(frontend:<your-css-file>.html) that will use the html file wrapper that is generated build time.

By storing your CSS in CSS files rather than HTML files in source control you will have much better editor support and separate correctly the concerns.

All new projects generated with vaadinCreateProject task will use the CSS HTML wrapper and a @HTMLImport so you can start by styling any part of your application easily.

Of course, if you specifically wish to store your styles within HTML files in the styles directory then that will work as well, but I cannot really recommend that.

New component generation task

And finally, M3 adds a new component creation task vaadinCreateComponent task that will generate a new Vaadin component in the project. This is useful if you quickly need a Vaadin component template to start making a new component from.

--

That is it for this release, summer seems to be here, so go out, enjoy the sunshine and I'll see you later!