Kotlin provides some very interesting language features which are immensely helpful when writing Vaadin apps. Let us start from scratch, building necessary functionality as we progress. The result of this exercise will be a Kotlin-based simple web app, built with Gradle, using Hibernate+JPA to store entities into the database. I will not use Spring nor JavaEE here - the whole thing will run in a pure Servlet environment like Tomcat or Jetty. The complete exercise may take some 60 minutes. I will be using Intellij IDEA Community which you can download for free here: https://www.jetbrains.com/idea/download. When installing, just press the "Skip remaining" button to install Intellij with the default settings.
Originally I intended to write the tutorial using Gradle, but there were bugs in the Gradle Vaadin Plugin which would disallow the app to launch without using IntelliJ Ultimate. Therefore I have chosen Maven with more stable support for tooling.
Let's start by creating a Maven-based Java Vaadin project by following this tutorial: https://vaadin.com/maven (I am using the "org.test.myvaadin" groupId and "vaadin-app" as artifactId throughout this tutorial). Just install Maven 3, follow the steps in the Vaadin tutorial and you're good to go. After you have run the project from the command-line, just fire up IDEA, open the
pom.xml file with File / Open; then select Open as Project.
To run the project in IDEA, click on the bottom-left touchpad-like button in the lower-left corner, then click Maven Projects in the upper-right corner. Unwrap the tree: vaadin-app / Plugins / jetty, right-click jetty:run and select Run (or Debug). Then, point your browser to http://localhost:8080/.
Now it may be a good idea to start versioning, so that you can play with the project safely and just revert the changes, should things go banana. Just run this in your command-line, inside the project directory (vaadin-app):
.gitignore with the following contents:
Intellij will detect a git repo, just click "Add Root" in the popup dialog.
Finally, let's Kotlinify the project. Open the
MyUI class (by pressing
Ctrl+N) and press
pom.xml will be modified automatically.
Tip: to see the cheat-sheet with the keyboard shortcuts in IDEA, just open the Help / Keymap reference menu.
Now, head back to the
MyUI class and change the following line:
val button = Button("Click Me Kotlin"). Now, when you run the project using the
jetty:run as before (or just press
Shift+F10 since the Maven launcher for this task has been created, just see the upper-right corner in the IDEA window; this way you can also launch the project in debug mode), Kotlin should auto-compile the class and the page saying "Click Me Kotlin" should open. Good job!
Please feel free to experiment around. When you alter some code, press
Ctrl+F9 to recompile - the code should be deployed to Jetty immediately, just press
F5 in the browser. If not, just head down to the Debug Tool Window and then press the green arrow "Rerun 'vaadin-app'", to recompile the project and restart the Jetty web server. If something's not working right or I am not explaining myself properly, please see the example application here: https://github.com/mvysny/vaadin-app
In the next blog post, we will add database support.
When one tries to migrate her project to a newer version of a framework, it usually helps if the transition is smooth and the original code works without any modifications. This way, you can convert the code to the new API gradually, and never encounter this OMG-shit-doesn't-compile-everybody-blocked period for a long time.
Migration from Vaadin 7 to Vaadin 8 isn't as straightforward since some modifications to Java source files are required, but the guide of migrating to Vaadin 8 may assist you well in converting your imports from Vaadin 7's
com.vaadin.ui.* components to their Vaadin 8's compatibility counterparts in the
Unfortunately the actual problem lies with Add-ons since they depend on
com.vaadin.ui.* components and need to be modified as well. For example all
Container-based addons need to import
com.vaadin.v7.data.Container instead of
com.vaadin.data.Container - a small change indeed, but will cause the addon to malfunction in runtime.
Luckily, the change is straightforward. I have converted the JPAContainer 3.2.0 to be compatible with Vaadin 8 and thus to be compatible with the
com.vaadin.v7.ui.Grid. This will allow you to gradually convert your Grids to v8 Grids and the old Container-based code to the
EDIT: the changes have been merged to the official JPAContainer Add-on, so just use JPAContainer 4.0.0 with Vaadin 8: https://vaadin.com/directory#!addon/vaadin-jpacontainer
If you ever used Selenium (or TestBench, which is based on Selenium), you know the pain of configuring the testing browser driver:
- One simply cannot use the preinstalled Firefox since the Driver <-> Firefox protocol breaks basically on every Firefox release
- Selenium developers eventually gave up supporting newer Firefoxes directly and started to use Gecko Driver which is pain to build
- Setting up PhantomJS on every dev+test machine is a pain
- Using other browsers require appropriate drivers preinstalled
Basically, every machine has different browser preinstalled, on different path, and when you throw in different OSes the configuration starts to get nasty.
Fortunately, there is a browser, installed on every machine with Java 8 - the JavaFX Browser component. It's not a full-blown browser per se, but it can render html pages, is webkit-based and works regardless of OS. Luckily, there is a specialized Selenium driver based on this browser: the JBrowserDriver. We can take advantage of that.
You can find the demo project here: https://github.com/mvysny/testbench-simplest-demo . It's a simplest project possible, with just one UI class and one testing class. To get it up and running, just follow these steps:
- Obtain TestBench license at the TestBench AddOn Page - just search for "Trial license"
git clone https://github.com/mvysny/testbench-simplest-demo
mvn clean verify
- Find the proof that the test ran, in
The browser even works in headless mode. You can quick-proof this by running the test in the Docker. First, run:
testbench-simplest-demo directory. Then, in the docker:
- We'll need to install the JavaFX to the docker container. Run
apt install openjfx, press
- Still in Docker, run
mvn clean verify
- Docker will run maven using your host OS's filesystem and will produce
target/screenshot.png. Just open the
target/screenshot.pngfile with your favourite image viewer.