over 1 year ago

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):

$ git init .

Create a .gitignore with the following contents:

$ git add .
$ git commit -m "Initial import"

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 Ctrl+Alt+Shift+K - this will automatically convert the Java class to Kotlin class. Intellij will show "Kotlin not configured" popup - click "Kotlin" (not Kotlin-Javascript), then just press OK - the 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.

over 1 year ago

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 com.vaadin.v7.ui.* package.

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 DataProvider niceness.

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

almost 2 years ago

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:

  1. Obtain TestBench license at the TestBench AddOn Page - just search for "Trial license"
  2. git clone https://github.com/mvysny/testbench-simplest-demo
  3. mvn clean verify
  4. Find the proof that the test ran, in target/screenshot.png

Headless mode

The browser even works in headless mode. You can quick-proof this by running the test in the Docker. First, run:

docker run -it --rm -v "$PWD":/usr/src/mymaven -w /usr/src/mymaven -v "$HOME/vaadin.testbench.developer.license":/root/vaadin.testbench.developer.license maven:3.3.9-jdk-8 /bin/bash

in the testbench-simplest-demo directory. Then, in the docker:

  1. We'll need to install the JavaFX to the docker container. Run apt update and apt install openjfx, press y when prompted
  2. Still in Docker, run mvn clean verify
  3. Docker will run maven using your host OS's filesystem and will produce target/screenshot.png. Just open the target/screenshot.png file with your favourite image viewer.