Desktop and Mobile features in the same war


I’m a bit lost with this. My goal is to be able to use the
when is a
mobile browser
and also, I’d like to use the
BusinessNameApplication extends Application implements HttpServletRequestListener
when is a
desktop browser

What is the proper approach to achieve this?

I saw the TouchKitApplication provides a fallbackApplication for non webkit browsers, but in the case the user is behind a desktop machine with a webkit browser, the TouchKitApplication will be used.

I understand that with this approach, I will have two separate peace of code: one with look and feel and components designed for mobile and other with components and look and feel designed for desktop.

This is a common situation when the final user has one application but needs a look and feel / usability specific for mobile and the “normal one” for desktop.

Please, let me know if I’m not being clear.

Thanks in advance!


I think the way you normally do this is to use a different URL for the mobile browser version of your app. You can put both servlets in the same war, sharing the same back end classes and all that, but serve them from two different URLs. Just check the user agent on the request and redirect the browser to the mobile version when needed.


Deploy both Applications as separate servlets within the same WAR (different URLS)

You could also deploy another (non-Vaadin) servlet that redirects to the appropriate application at the root, depending on browser detection

e.g. deploy the TouchKit application to context/mobile, the desktop to context/desktop, and deploy a redirecting servlet to context/ - so that any visitor to would get redirected to or depending on browser type.

HTH a little,