Vaadin Touchkit/Normal App Architecture

In GWT 2.4, its possible to change the View based on the browser, I mean, they support by default this concept.

I would like to know if its possible to do something similar with Vaadin / Touchkit.

Lets say I have a regular vaadin application, but, I want to implement specific views based on the Vaadin Touchkit. If there is no specific view implemented, I can always fallback to my regular View. The strategy to detect the specific View per browser would be all implemented by me, but mobile Views would use Vaadin Touchkit components.

Is it possible? I did not research a lot about Vaadin Touchkit, I am just taking a look at the Vornitologist App.

I do not want a strategy to redirect to another application if a certain mobile browser is detected for instance, that pattern does not seem optimal for a big system.

For me, it seems that it would be difficult to implement that strategy because Vaadin Mobile App would have to extend “TouchKitApplication”. Can the Touchkit components be used in “normal” Vaadin ?



Main TouchKit developers are currently on vacation, so taking a stab at this.

In Vaadin 7, it will be easy to choose the correct kind of Root for each browser. There is a method to override to create the Root and more information about the browser and its capabilities have been transmitted from the HTML page on the browser to the server by the time when the Root is created.

This is somewhat more tricky in Vaadin 6 because the information about the browser that is available is somewhat more limited, but you can still access what is in the request so you have effectively the same information you would have had in your non-Vaadin application, no more. You should override AbstractApplicationServlet.getNewApplication(HttpServletRequest) which allows you to check the user agent etc. from the request to decide what kind of an application to create. The Mobile Mail example of TouchKit shows how to adapt to mobile devices with different screen sizes etc.

Your TouchKit application can probably use the same views as the desktop version when there is no mobile optimized view available but that will of course impact the user experience. You should think carefully about how to structure your Application classes to exploit commonality as much as reasonable.

Thanks for the reply … right now I am actually not working on it, but soon I will take a look …

For sure I wont have a problem detecting the browser, my only thing would be if I could use mobile views into a normal Vaadin Application or I would have to decide which Application to get based on the browser information.

For usability and user experience in general, I would recommend designing separate top-level views for each but perhaps reusing the building blocks inside them. Consider this especially if you have many users interacting frequently with the application using mobile devices - usability and consistency with the platform matter a lot there.

Using a separate Application class would make it easier to structure the UI differently based on the platform and would enable other platform specific handling, so I think in many cases that is a good idea as well as long as sharing the code that makes sense to share.

Ok, thanks for the reply. I will take a look into it soon.

Hi Lucas. I know that this is a old post, but maybe it can help some other user!

I’m testing the coexistance of normal Vaadin Apps, and Touchkit. Besides I dont found on any Docs, that its is possible, or even recommended, with a help of Touchkit docs, I found:

“As TouchKit comes with a custom widget set, you need to use a combining widget set for your project, defined with the @Widgetset annotation for the UI. The combining widget set descriptor is automatically generated by the Vaadin Plugin for Eclipse and in Maven when you install or define the TouchKit add-on.”

So… To enable a normal behavior of the application, you will need a widgetset per UI.

You can create a custom UI Provider to choose between view implementations (as this doc explains:

Latter, you can create two widgetset’s GWT module descriptors, one for desktop, exteding the normal vaadin widgetset, and another for the touchkit, that inherits vaadin default widgetset module, and touchkit:

Latter, you will choose between your widgetsets per vaadin UI, with the @widgetset annotation.

Hope that helps!

Hello Eduardo,
I was also looking for such an implementation. I have almost done as you suggested, but got few issues, 1) I have defined two widgetset files, but compiling both file is adding touchkit add-on in that and so not compiling for the desktop browsers ! Another issue is that we are defining only one servlet in the web.xml so if we have two then how to set that? Can you please help me?

Hi All I need touchkit for my current project which is based on Vaadin6 kindly provide link to download Vaadin TouchKit 2.x version


I need to know, how do I integrate TouchKit along with Vaadin 7.3?

I saw that I can put the widgetsets up, but as I do that? Do you have any example?

Thank U.