Adjust Loading Animations in Vaadin

By default, loading animations in Vaadin are already pretty awesome, though you might want to adjust them to make them fit better with your custom theme.

While tweaking around with the animations myself, I found that there wasn’t too much information to find about it around the web, so here’s me contributing.

It’s All CSS

To adjust the loading animations, there’s actually no need at all to fiddle in Java code. Everything can be easily set up in css. You only need to edit one file, which would be your custom theme’s scss file.

First of all, it is important to know that the styling for the animations is not located under the .v-app class. All the editing can be done top-level, right after the base theme include statement. For the Valo theme, this would be right after the following line: @include valo;.

Top Loading Indicator

In this example I will cover a minor tweak to the loading bar you see on the top of the page, which by default is blue. It is displayed upon page navigation.

To simply adjust the color you can use following code snippet, where all style attributes are just coppied from the default styling. The only property you’ll want to tweak will be the background-color one.

.v-loading-indicator {
    position: fixed !important;
    z-index: 99999;
    left: 0;
    right: auto;
    top: 0;
    width: 50%;
    opacity: 1;
    height: 4px;
    background-color: red;
    pointer-events: none;
    -webkit-transition: none;
    -moz-transition: none;
    transition: none;
    -webkit-animation: v-progress-start 1000ms 200ms both;
    -moz-animation: v-progress-start 1000ms 200ms both;
    animation: v-progress-start 1000ms 200ms both;

Connection Lost Spinner

Since we’re at it, we might as well adjust the color of the spinner that shows when the connection was lost. Once again, this snippet must be placed outside the .v-app class. Obviously, if you want to adjust all spinners application-wide, apply the styling to the .spinner class only.

The resulting box with spinner.
The resulting box with spinner.
.v-reconnect-dialog .spinner {
    border-top-color: red;
    border-right-color: red;

Centered Loading Spinner

Vaadin’s default spinner is shown upon page refresh, for instance. At least in the Valo theme, it is relatively small. Its’ styling is somewhat basic, so it might be good to give it a more customized touch, like the spinner below.

A custom loading spinner.
A custom loading spinner.

Right along the previously provided css snippet, another one can be placed. Following example shows how to replace the default spinner with our own.

.v-app-loading::before {
    opacity: .8; 
    filter: alpha(opacity=80); 
    width: 100px; height: 100px; 
    background: transparent url(../customtheme/img/spinner.gif); 

Update the Vaadin Theme

After these small tweaks in this one file you are all set and ready to check out the result of the applied changes.

Keep in mind that you will need to update the theme first. Vaadin has this Maven plugin com.vaadin:vaadin-maven-plugin:8.0.0, that you can add to your pom.xml. Once added, you can simply update and compile the theme and rebuild your project. Besides that, you will probably have to clear your browser’s cache before reloading your application. If you don’t do that, a previous version of your theme’s css file will be used.

Happy Holidays – 2016-2017

It’s that time of the year again! Holidays are coming up along with the usual festivities. Here’s about my past year and what’s to come in 2017.

Looking back

Overall 2016 was a great year. The major highlight was getting started on my first full time job in Antwerp, Belgium. This was the biggest change in my life so far. I’ve learnt a vast amount of things on the office floor, and that’s more than only technical stuff. I was lucky to work with some very interesting and intelligent people, that enriched me all along.

Whirlpool Rapids
Standing in front of the Whirlpool Rapids defining the border between North America and Canada.

Another big highlight would be the trip I made with my family to Canada during the summer. I’ve never been this far away from home, but I had a great time. Would definitely recommend.

Besides all that great stuff, life went as life goes. There were awesome moments, moments of joy, as well as less pleasant moments.

A new year, new challenges

2017 Will bring more changes. Early January you can expect a small update on my homepage and LinkedIn profile. What I can say is that Java programming will be the core of that change (at my great joy). This will also involve studying for some certificates (including OCA and OCP). Once again, I expect 2017 to be a very enriching year, in general.

You can expect more updates on this blog as well. Most updates are likely to be Java-related and somewhat technical. These updates will be published as I see fit. There’s no need to publish when there’s nothing noteworthy to share. Besides tweeting new articles, I will also share them on a few additional social media. Whenever you’d like to engage with me, I’ll always do my best to read and reply.

Happy holidays and an awesome 2017!

In Depth Test Reporting with Allure

Always wanted to do test reporting properly? Allure, an excellent framework to properly report your test runs does just what you’d expect from it.

Test run overview in Allure
Test run overview in Allure

The main purpose of Allure should be clear. It provides in reports, graphs and different types of overviews (including optional attachments and links) to present the status of your System Under Test (SUT).

Allure in a nutshell according to it’s developers:

A flexible, lightweight multi-language test report tool, with the possibility of adding to the report of additional information such as screenshots, logs and so on.

Lightweight and lightning fast, it is, the framework can generate a report site in less then 2 seconds (mvn site). The list of programming languages and test frameworks you can use with the framework is impressive as well. Don’t worry, all the big ones are definitely covered!

Core Functionality

In fact, the features Allure offer are limited, but that’s also it’s great power. Allure tends to make use of Annotations. An example of one of those is the @Step annotation. When a method is annotated with it and the method gets called in one of your tests, it will be included as a reproduction step in an issue overview. You will be able to see when the step started and how long the execution of it took.

Similarly, you could attach screenshots, los, JSon, XML, … To your failed tests for later reference.

@Attachment(value = "Page screenshot", type = "image/png")
public byte[] saveScreenshot(byte[] screenShot) {
    return screenShot;

Furthermore you could arrange different test cases under features and stories. This is purely to add some structure to your reports. Make use of @Features and @Stories annotations on your test case classes and/or methods.

Side Info

You could always dig into an example report to see what the end product looks like.

Another interesting thing to note, is that Allure is an open source project initially developed for Yandex, a Russian Google Chrome variant for internal testing. Find it on GitHub. They now claim thousands of software testers are giving the Allure experience a high note and that it’s being used all around the globe.

You would be silly not to take a look at it, as it is such an incredible easy setup, but a tool that can help you, your co-developers and even your product owner(s) (as they might want to get some insights at some point during development). Presenting a snapshot of the SUT status is done in no-time. A good approach would be to generate a new report after every CI build and iteration.

Basically all you need to do:

  1. mvn clean;
  2. mvn site;
  3. mvn jetty:run (as the front-end can be displayed locally using Jetty).

Those are all Maven commands. Make sure your dependencies are all in place in your pom.xml and you are good to go.

Why Blocking Root Users Is a Bridge Too Far

Rooting your Android phone, shady business for some, pure satisfaction for control freaks and customization lovers. Among these root access privileged users there are obviously a bunch of cheaters and hackers we should be aware of, but there are also a lot of legit users.

 Disputed Pokémon Go Update

Niantic‘s immensely popular game, Pokémon Go recently got an update that blocks devices that are granted root access. From now on, users with elevated rights are not allowed to play the game anymore.

pokemon goDefinite and potential cheaters are avoided from disrupting the intended gameplay, which obviously is a good thing. The downside though, is that all the legitimate players that happen to have rooted their device are now duped.

The result of those duped players not having access to their beloved game must be rather significant. The sales coming from in-app purchases will be directly impacted as less users can buy in-game goodies. The somewhat more indirect impact would concise of negative 1-star ratings on the Play Store. Fora get filled with negative user feedback, people will start discourage others playing the game.

On another note, it is a bit of a strange decision on Niantic’s part, considering they have already built in descent cheating protection. That would be an expertise learned from their previous game, Ingress, which shows a lot of similarities to Pokémon Go (as it is also a positioning based game). People trying to spoof their GPS location are likely to be banned, if they even managed to properly spoof the device’s location. That is a good way to remove the unwanted players from using the app.

Limiting the User Beyond 1 App

If one application blocks the rooted user, they are basically discouraged to continue using their root-required apps and features. A company should not decide for it’s users whether or not they can use rooted Android devices.

Imagine what elevated access can do. It allows one to completely customize their Android livery. Tiresome adds can be removed using ad-blockers, CPU usage and performance can be tweaked. Want to open your favorite music app as you plug headphones in? Guess what you need, root access. There are plenty more reasons why one would want to root his/her device.

Hacky Work-Arounds

What would you expect, root guru’s to stop finding tricky solutions to bypass this kind of issue? There are already quite a few apps that can hide your Su binary. Those however, don’t always do the trick.

Some people like to use something like the Xposed Framework to ‘cloack’ root from specific apps. Others like to go over using the game-changing Magisk.


The Importance About Globalization

When you are working on any kind of project, you should globalize it. Except if you have a very specific target audience of course. The importance of globalization in general is enormous.


More than Localization

When we are talking about globalization we are talking about much more than simply localization (which would mainly consist of translating your program). You could say that globalizing your application would mean to make it accessible to users all around the world.

Does your program come with any kind of currency handling? Guess what, you should add support for foreign currencies. Another marvelous example: date formatting! Worldwide there are quite a few different date representations. Make sure you display dates in a matter that your end user is used to.

Try to view the big picture. Apply country-specific standards (representation of VAT numbers, bank account numbers and specifications, address (and zip code) notations, …) as often as possible. But be aware of one downside: data conversion might be needed in some cases. Make sure you are prepared for that (foresee some good old converters).

Increased Target Audience

Imagine what impact a proper globalization implementation might mean for your target audience. Guess what, it will vastly increase and thus result in more sales. Now go improve your conversion rates!

Is it Worth the Effort?

I can already picture programmers and project leads thinking why they would even bother to put in the extra effort to globalize their project(s). Globalizing does indeed take up some time. In fact, you could say most of the time would have to do with the initial setup. Once you get it going, you only need to update your existing resources every once in a while.

The extra effort put in should not be a factor. The value of your application(s) improves so greatly that this minor efforts are really no argument for not having a globalized project. Don’t argue and do it already!