Theme issues with TouchKit and Dependent Application

I have one web application which uses Vaadin 7. Now i want to expose certain functionality of this app on Mobile. For this i am using Vaadin Touchkit Addon. Now when i put both in one project and compile the widgetset, the default widgetset also finds the touchkit widgestset ( it should) but then the display and theme of parent app get totally disturbed. Forexample, i dont see the captions of the button on the login screen.(Trying with dashboard Demo) I really need to have both in one application as i will be reusing entire business logic in the mobile app.

Any suggestion on the following will help greatly

  1. Do i need to have separate project for vaadin 7 web application and mobile application ?
  2. If it is possible to add the two in one application , do i need to have two widgetsets or one ?
  3. If this is not working , will it make more sense to have the mobile application as primary application and the base application as fallback UI ? Will i be able to manage themse independently in this case ?
  4. An intervention if i am totally on a wrong path :slight_smile:


Hello Again,

Just in case if someone else also face the same issue, i created vaadin multimodule project, add another module only for touchkit app. The touchkit app is dependend on the backend and the default UI module, but the UI module is only dependent on the backend module. This way we can have separte theme and widgetset for touchkit as well as UI.

I am not sure if this is the right approach but it does work :slight_smile:



is this a test app? can you upload the project to githib?


this is actually vaadin dashboard source code , in which i imported vaadin touch kit. Post which i compiled the widgetset which screwed up the the entire UI and display

Unfortunately i deleted that project ( as none of the code was new )

If you are referring to my new project then share me your email, i will mail it across

I have met the same problem when adding touch kit. I noticed the reindeer tree theme is in conflict with touch kit tree theme or widgetset .
Could you please tell me how to solve this problem?

This is what worked for me:
I’m using Vaadin 7, touchkit 4.0.0, and the Spring addon ('cos I like it)
There are two UI classes, one has the desktop functionality, the other has the mobile functionality. My mobile class is annotated like this:

@Widgetset("") @Theme("touchkit") @SpringUI(path="mobile") public class MaduraMobileDemoTouchKitUI extends UI { while the desktop one looks like this:

public class MaduraMobileDemoFallbackUI extends UI {

The path clause in the SpringUI annotation means that I add /mobile to the url when I want the mobile UI.
I have a WebFilter class that manages login and detecting if we are using a mobile device and that manages the redirection to the mobile URL. There are other ways to do that but this was simplest for me
I only needed one widgetset, I think that is because the touchkit one is coming from its jar file. Anyway if you annotate both UIs it breaks.
Also, because I’m using Spring and Touchkit I used Matti Tahvonen’s SpringAwareTouchKitServlet (it’s in github) as my servlet class. You only need one of these, not one per UI.
I’ll be posting this code to github fairly soon, still fixing some cosmetic things.

I just noticed I said I would post my code to github. I did post it, but here’s an update of where it is. So here’s my project:
It has two UI classes, one for mobile devices and one for the browser. My login process puts a /mobile on the end of the path it redirects to so the right class gets invoked.

It works fine under Vaadin 7.5.6, touchkit 4.0.4, but I’ve just migrated my code to 7.7.3 and touchkit 4.1.0 and, while the mobile devices work the browser does not. I’ll post another query on that though.