• Home
  • Events
  • About
  • Mobile apps with GWT

    May 16th, 2012

    For the development of business web applications GWT is a tool of choice.
    Since most business applications are based on a Java Stack, GWT empowers Java-Developers to write business ready, robust cross-browser applications in their favorite language.
    Certainly there are powerful JavaScript frameworks around to achieve such, but you need a lot of experience to tackle all the quirks and oddities the ambient browser language comes with.

    Now these days more and more businesses are seeking for mobile channels of their applications.
    Flexibilizing their businesses, supporting new business cases and increasing efficiency are the main reasons driving that process.
    When it comes down to the technical realization of these channels most companies are facing significant difficulties.

    Developing and maintaining native applications is normally not a choice. Costs are simply too high to acquire and maintain expertise on all different mobile plattforms.
    Cross-plattform technologies are seeking to solve this problem for most business cases. But what framework to choose?
    Web technology based applications are a common sense, best supported among all devices and most future-proof. Sencha Touch, JQuery Mobile and others are leading this area and good results can be achieved deploying them.

    But how great would it be if you could – with moderate effort – turn your existing web GWT app into a mobile app?

    A mobile app written mostly in Java, simply testable, with all the power of the GWT framework and last but not least supreme performance on the mobile device.

    Well, look no further: m-gwt.com is coming to rescue!

    mgwt is a ligthweight extension to GWT basically providing mobile widgets and mobile plattform integration.
    mgwt has been developed over the last 3 years and went open source in 2011. According to creator Daniel Kurka many commercial products have been developed using the framework.

    Canoo was lucky to have Daniel Kurka himself in for a workshop recently.

    Whats mgwt all about?

    There have been a few attempts to mobilize GWT in the past. They were all focusing on different aspects, like HTML5 storage. Non of them really succeeded.

    Now, mgwt has a few very important design goals which makes it a promising candidate to become THE standard mobile GWT extension:

    • integrates well with GWT MVP
    • keeps the DOM lean
    • leverages the powerful optimizing JavaScript cross-compiler
    • does as much as it can in CSS3 (hardware supported)
    • native support for touchevent the GWT Way
    • animations built in with GWT MVP
    • integrates well with PhoneGap

    Compared with JS based cross-plattform frameworks mgwt advances in:

    • generation of isolated mobile plattform permutations makes client-side if/else statements obsolete
    • different plattform interaction patterns can be supported (i.e. Android back button)
    • integrates naturely with PhoneGap
    • integrates smartphone, tablet and web app development!

    Check out the kitchen sink app and give it a try.

    Btw. Daniel Kurka can be contacted for consulting, workshops and advice @dankurka

    HTML5 for iOS

    November 1st, 2011

    My grandfather used to say: “Makkelijker gezegd dan gedaan” (easier said then done). So when I talked about how HTML5 could be the new platform in-depended development paradigm, in this previous post, I better come with some real world examples instead of only saying it.

    So that is exactly what I’ve been doing. My wife is a bit of an apple fan woman. And she has a book that she would like to publish. She couldn’t find a publisher, so the next best thing would be to put her book on an iPad, but you still need an publisher to put something on the iBook store and publishers are still stuck in the dark ages. So we’ve decided to make an application out of her book. Now I’ve written some objective-c code before and I must say it wasn’t the best experience I’ve had. Xcode at that time was awful, it was like writing software 10 years ago. So I started to look for alternatives. It could be a simple html page, but how to create a native iPad application out of that?

    I’ve found something that I’m really exited about. Playn is a cross-platform game abstraction library for writing games that compile to multiple platforms one of these is html using gwt. Now if I use this in combination with phonegap then I can create a iPad app that can also run on android based pads. Not only that I could make it interactive add a game to the book and best of all do it in Java.

    If you think about it, for companies this makes a lot of sense. Unless your companies key platform is iOS, having developers in-house that have objective-c knowledge is expensive. Also hiring external company to build an iPhone app is expensive and they have to work together with you to integrate your existing architecture. So having something like this where one can use existing knowhow to create a android and iPhone solution that works on both platforms is a huge cost saver.

    GWT and HTML5 Canvas, the future of the web?

    August 25th, 2011

    The future of computing lies in mobile computing, more and more devices come on the market, tablets and phones that will connect through the Internet as technology is getting cheaper and wifi and 3g more common. That means our software will also need to run on these handheld devices, because our clients will want their services on all platforms. This is what Java set out to do 15 years ago, so that we have the ability to write software once and run it everywhere. The problem is these new platforms, that I believe will make up a large part of the future have, until now, no Java. It would be great if we can find something that will give us the ability to write our software only once.

    I believe that the technology that is going to deliver us this promise is called HTML5. More and more applications will run inside you browser. I’m typing this article in google docs, which is a perfect example of how applications will evolve. No need to install anything or maintain up to date versions, even an operating system could be very minimalistic (google chrome). So Google is obviously sharing this vision, but also Microsoft is building it’s next version of office on something that is based on their web-browser.

    Sadly the development language of HTML5 Javascript and not Java. Java has been around a long time and there are a lot of libraries that people have made. Would be cool if we can still use these, the answer is Googles Web Toolkit. GWT provides a way to code in Java and then translate that code into Javascript. This way we can still use all that great stuff that others made.

    A good example of this future is Angry Birds, you have probably heard of this game. To create this game they have taken the java implementation of box2d called jbox2d and created a javascript version of that with the help of GWT. Once that is done you can use HTML5 Canvas to draw the Birds and calculate their positions if they are falling. Now because they have build it this way with HTML5 this game could also work on an iPhone, but even better because android is based on java you could create from this source a android version with only one line of code.

    Have a look at some of the great things people are building with the HTML5, be sure that your browser supports it.

    1. Drawing program deviantART
    2. Old style game with new technology area5
    3. Quake GWT HTML5 port

    Code generation in GWT with Deferred Binding (CDI-like events)

    July 4th, 2011

    If you read my series on GWT dependency injection (parts: first, second and third), maybe you remember that, in part 3, I mentioned how convenient would be to reduce the boilerplate required to define events in GWT. I also mentioned how elegant I find the event definition in CDI. Wouldn’t it be nice to have a lightweight event model like that in GWT?

    Let’s see first how an event is defined and handled in CDI:

    As you can grasp from the code, to define a new type of event in CDI it is enough to define an injected field of the parametrized class Event and the CDI container will do all the wiring for us. The parametrized type of the event defines its payload type by mean of the type parameter. To listen to the event, we just need to define a method that receives a parameter of the event payload type and annotate it with “@Observes”.

    While exactly this is maybe not doable in GWT (at least not yet), what about something like this?:

    While I can agree with you that it is not as elegant as the events approach in CDI, it is (IMO) a big improvement compared with, for instance, the ping / pong event definition in the demo application of my GIN series (source code here):

    With the new approach, the resulting “PingEvent” would look like this:

    If you are wondering why not to avoid defining the “PingEvent” class itself, two are the reasons:

    • First, the events have the same payload type (Void in this case), and therefore we need explicit types to distinguish the ping event from the pong event. This also happens in CDI where we would define explicit payload types instead.
    • Second, in this implementation we will be using GWT’s deferred binding and, during the code generation phase, we need to know the parametrized type. Because of Java generics limitations, for this last it is necessary to define a new parametrized type which captures the payload type in its type parameter (wrapper).

    Did I convince you? If I did, let’s go on and see how to use deferred binding and dependency injection to achieve it.

    Letting GWT generate the boilerplate

    Deferred binding in GWT is a really powerful feature implemented in the GWT compiler to substitute class implementations depending in environment properties like the user agent. This way, while the developer has the illusion of using the same classes independently of the browser, the deferred binding mechanism allows to select the adequate implementation for each browser.

    Far from being static, deferred binding allows to generate code on the fly by mean of a generator class. This happens when the developer invokes the “GWT.create()” method on an interface. For the operation to succeed, a generator for the interface must exist. This will be invoked during GWT compilation time and its result (one or more Java classes) will be compiled and linked into the resulting JS application.

    To configure which generator should be used for which interface, it is necessary to add a new “generate-with” entry in the GWT module descriptor. In the case of the demo application, the following code has been added to the “PingPong.gwt.xml” file:

    The contents of the “Event” and “EventGenerator” classes are the following:

    While the “Event” class contains the interface definition for our events and lives in the “client” package of our GWT application, the “EventGenerator” is a GWT specific class that resides in the “server” package of our GWT application. In order to compile the code, we will need to add a new dependency to our project: “gwt-dev-<version>.jar”.

    This generator class, by mean of some templates included in the source code, generates the boilerplate classes and saves us the tedious work of writing these classes. If you want to see this in detail, please refer to the “eventsfwk” packages in the client and server part of the application (source code here).

    Using GIN to bring everything together

    Following what I mentioned until now, it seems that if we define an interface extending the “Event” interface (ex: “SampleEvent”) and we use the generator to generate and wire the code by mean of “GWT.create(SampleEvent.class)”, we should be able to use the result as shown in the “GWTSample” execute method. Not really.

    One piece that is missing in the puzzle is which event bus should the underlying GWT events use. We could create an own one without loosing functionality but a better thing that we can do is to provide an injection point and provide a mechanism to make our events participate in the application’s dependency injection context and use the application’s event bus instead of an own instance.

    To achieve this, we have created a GIN module in the “eventsfwk” package:

    This module should be installed in the application’s dependency context and it will inject an static field in the “GwtSimpleEvent” class which is the event bus used for our improved events. To install it in our application, the injection module has been modified like this (note the line “install(EventsModule.class);”):

    This means that, when the dependency injection module is initialized at the beginning of the application execution, the previously configured event bus will be statically injected in the “GwtSimpleEvent” class used by all the generated event classes.

    I can not read minds, but maybe you are also wondering why the event fields annotated with “@Inject” get generated and injected. All in all, we don’t call anywhere “GWT.create()” to use the generator class.

    Well, we are not doing it but GIN does. Whenever GIN finds a dependency (something annotated with “@Inject”) and that dependency has not explicitly been configured (bound in the GIN modules), GIN invokes “GWT.create()” as fallback strategy. This simple mechanism allows us to generate and inject our event in only one step.

    Wow! This post has been “hardcore” GWT, don’t you think? Maybe even too “hardcore”. Please, just let me know if you like it and what do you think about the approach.

    See you in a future post!

    The source code for the initial version of the application can be downloaded here. The final version here. To see any of the applications working, unzip the corresponding file, change to the folder where the Maven pom file is stored and type the command: “mvn clean gwt:run”. After the GWT “Development mode” application starts, click on the “Launch Default Browser” button.

    GWT Dependency Injection recipes using GIN (III)

    June 20th, 2011

    This is the third part of a series about Dependency Injection in Google Web Toolkit using GIN. If you have not yet read the first and second parts, you maybe should do it before reading this third and last article.

    In this article, we will introduce two GIN features: “constants binding” and “static injection”.
    To do this with an example, let’s refactor the “serve button” in the “Simulator” main class of the second part into an own class:

    Here the new extracted “ServeView” class:

    As you can see, the constructor of this new class is annotated with the “@Inject” annotation and receives two parameters. One of them is the racket and the other is the button’s label. In the case of the racket, it is already defined as an injectable dependency in the injector interface and in the case of the button’s label, it should be a configurable constant.
    GIN, by mean of “constants binding”, performs the binding of injectable dependencies to constants.
    Because the type of the “serveText” is String, we need to be more specific here and therefore we have annotated this dependency with the “@Named” annotation. To configure the constant value to bind to, we need to add the following line into our “InjectorModule” class:

    To let the other constants in the application be configured in the same way and to introduce the last GIN feature (“static injection”), let’s now modify the “Simulator” main class as follows:

    And our “InjectorModule” like this:

    The “static injection” allows us to inject the static fields of a class. This happens by mean of the method “requestStaticInjection” of the GIN module class and, in our application, we use it to inject the static dependencies of the “Simulator” class.

    This way, even when the “Simulator” class does not participate in the dependency injection context, its static members will be injected making the explicit references to the injector not required.

    This has the side-effect of making the “Injector” getters no more necessary leaving our injector interface “empty”:

    Please note that, in order to get the dependency injection context configured and initialized, it is required to instantiate the “Injector” interface by mean of the “GWT.create()” method as part of the application initialization. This is done in our case within the “initInjection” method in the “Simulator” main class.


    If you have read the 3 articles of this series, maybe you can remember how our demo application looked like at the beginning. While the functionality and appearance has not changed at all, the intern structure of the application is completely different.

    In my opinion, dependency injection allows a much cleaner structure, enables configuring the application in an elegant and easy way and, when used together with an event bus, produces low-coupled high-modular applications.

    Of course, “there is no free lunch” and using GIN means also that the development team has to learn new concepts and introduce a new framework in the application. Anyway, dependency injection is an already proven concept and GIN is being intensively used in most of the new GWT projects and GWT frameworks.

    While some minimal application structure optimizations could still be applied to the application, the thing that I still find improvable in it is the verbosity of the GWT events definitions. This requires writing some boilerplate classes to ensure the type safety (event handlers), and also the definition of the own event classes is too verbose, being possible to generate them automatically in most of the cases by using either GWT’s deferred binding or a JDK 6 annotation processor. If you know how the events in CDI are defined, very probably you will agree with me that such an approach would be much more elegant and concise.

    A solution for that, even when it requires dependency injection, is more related to other topics and therefore a subject for a different thread. If you got curious, stay tuned for a future post on code generation in GWT! 🙂

    The source code of the application can be downloaded here. To see the application working, unzip the file, change to the folder where the Maven pom file is stored and type the command: “mvn clean gwt:run”. After the GWT “Development mode” application starts, click on the “Launch Default Browser” button.

    As always, I hope that you enjoyed reading this series of articles as much as I did writing it and hope to see you soon in a future post!