Howto use the HTML5 file API in GWT 2.7

To access HTML5 features in GWT 2.7 the elemental package must be used, but the HTML5 file API implementations are chrome dependend because at the time it was written the standards were far away. Nowadays the file API is implemented in all main browsers: IE11, Chrome, Firefox & Safari.

In this Blogpost I want to show how the elemental package can be used with theĀ  generic HTML5 file API.

Enable GWT elemental in the project:

Custom implementation of the input file element where the user selects the files that should be accessed:

The Html5FileList class just provides an additional method that returns our custom Html5File class:

The Html5File class is where the *magic* happens because the GWT implementation of JsBlob and JsFile use chrome dependend javascript code:

And finally after creating the MultipleFileUpload element you add an change event handler which is called after the user has selected file(s):

Migrating an GWT Application from Spring Security 3.x to 4.0

My GWT Application mainly uses Spring Security Annotations in the service methods, but also a general API filtering by role. The migration from Spring Security 3.1 to 4.0.1 took longer than expected, here are my main pitfalls:

hasRole(‘USER’) expression behavior changed:

In Spring Security 3 the code above checks if the current Authentication has authority “ADMIN” in Spring Security 4 this checks for authority “ROLE_ADMIN”. So rename your authorities or use the hasAuthority expression.

Cross Site Request Forgery (CSRF) is enabled by default: This protects against CSRF. My Web Application does not use CSRF Token, so I had to deactivate that nice feature (line 12).

X-Frame-Options is Deny by default: Prevents your site from allowing iFrames which can be used to do evil stuff. The GWT Activity and Places pattern is working with iframes so we need to active them for our applikation. (line 13-15).

Update all the XML schema locations: All XML files need to contain the correct spring schema locations.

The username and password field has changed: My GWT Application does not use the generated login page from Spring Security, instead I’m doing it all with Ajax requests. In Spring 3 the fields were named “j_username” and “j_password”. In Spring 4 they are renamed to “username” and “password”. (yay)

Make sure your servlet api is matching the one from your container: The provided web applications servlet API depends on the container type that is used: Tomcat, Jetty and so on.. So make sure the javax.servlet-api version in your classpath is correct! The Mavens GWT plugin target “gwt:run” uses Jetty which provides the servlet API version 3.0:

Filter resources in an Maven multi module project

The Maven project I’m working on has multiple modules and as I needed different configurations for different deployment platforms I created additional configuration modules. This approach really becomes bad when adding a new configuration parameter or changing some Spring Bean definitions because it has to be done in every single configuration module.

The Maven resource filter avoids this situation by replacing variable keywords in any text file you need with values from specified property files. This makes it possible to have only one module with all the configurations, all thats needed are different property files which are used based on the Maven Profile that is used. Here’s the POM from the configuration module:

  • 18 – 34: define profiles for different deployment platforms, one for localhost development and one for the production system. Starting maven with “-P tekhand.de” will use the “tekhand.de.properties” to filter the resources.

  • 38 – 41: in the filter elements the property files are specified which contain the values that gonna be used.

  • 42: you can specify as many resource elements as needed

  • 44: the directory for this resource element.

  • 45: boolean flag for activating the filtering or just copying the resources without filters.

  • 46 – 49: specify expressions which match the files that shall be filtered.

  • 51 – 59: all other resources than the excluded once should just be copied without any filtering

  • 61 – 69: here resources can be filtered that are only necessary for testing.

 

Using Google Analytics with GWT

There are many ways to use google analytics with your GWT application. The simplest is just pasting the GA code into your index.html which was not enough for me because the different places in my application won’t get recognized. So I build another approach, which listens to PlaceChangeEvent’s and tracks it with GA. Here’s the code:

This example is easily usable with theĀ  GWT MVP design, just register an GoogleAnalytics instance to the simple event bus initalized with the ActivityManager:

 

Generate GWT place URLs on server side with the PlaceHistoryMapper

I wanted to generate an Email with an direct link to an specific Place in my GWT application. On the server side you can’t just use GWT.create(MyPlaceHistoryMapper)…

So here is the solution i figured out. Keep in head that ALL Places and the MainPlaceHistoryMapper are in the “shared” package which is usable on client and server side.

  • line 57: get the base URL of your GWT application. (in my case “http://www.tekhand.de/”)