Touchkit Fallback Application

Flow
1

Hi there,
I’d like to have two different UIs for mobile browsers and desktop browsers. I read that this is possible specifying in web.xml a fallback application for non webkit browsers. I was not able to make the fallback application run when the browser is not webkit based. Please help me.

Here is my web.xml file:


<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
	<display-name>TestMobile</display-name>
	<context-param>
		<description>Vaadin production mode</description>
		<param-name>productionMode</param-name>
		<param-value>false</param-value>
	</context-param>
	<servlet>
		<servlet-name>Vaadin Application Servlet</servlet-name>
		<servlet-class>com.vaadin.terminal.gwt.server.ApplicationServlet</servlet-class>
		
		<!-- mobile app -->
		<init-param>
			<description>Mobile app</description>
			<param-name>application</param-name>
			<param-value>com.example.testmobile.TestApplicationMobile</param-value>
		</init-param>
		<init-param>
			<description>Application widgetset</description>
			<param-name>widgetset</param-name>
			<param-value>com.example.testmobile.widgetset.TestmobileWidgetset</param-value>
		</init-param>
		
		<!-- fallback app + widgetset for non webkit browsers -->
		<init-param>
			<description>Fallback app</description>
			<param-name>fallbackApplication</param-name>
			<param-value>com.example.testmobile.TestApplicationFallback</param-value>
		</init-param>
		<init-param>
			<description>Application widgetset</description>
    		<param-name>fallbackWidgetset</param-name>
			<param-value>com.vaadin.terminal.gwt.DefaultWidgetSet</param-value>
		</init-param>
	</servlet>
	<servlet-mapping>
		<servlet-name>Vaadin Application Servlet</servlet-name>
		<url-pattern>/*</url-pattern>
	</servlet-mapping>
	<welcome-file-list>
		<welcome-file>index.html</welcome-file>
		<welcome-file>index.htm</welcome-file>
		<welcome-file>index.jsp</welcome-file>
		<welcome-file>default.html</welcome-file>
		<welcome-file>default.htm</welcome-file>
		<welcome-file>default.jsp</welcome-file>
	</welcome-file-list>
</web-app>
2

Hi,

The fallback application is only served for non-webkit users. So in you touch kit apps onBrowserDetailsReady method you should still check whether your device really is a touch device or not. If not, you can serve the desktop app or redirect your users to an address that always serves the desktop version. I’d probably do the latter. It paves way for possibility to use the desktop version with mobile version too if necessary (e.g. if you have touch optimized mobile version with only main feature and full featured desktop version, you might in some cases want to use the desktop version with your smartphone or tablet).

cheers,
matti

3

Hi,
thank you for your answer Matti.

On my prototype I created two classes, as you can see on the web.xml file. Here is the code:


[b]
//TestApplicationFallback.java
[/b]

import com.vaadin.Application;
import com.vaadin.ui.*;

public class TestApplicationFallback extends Application {
	@Override
	public void init() {
		Window window = new Window("Fallback app");
		window.addComponent(new Label("Fallback Webapp"));
		setMainWindow(window);
	}

}

[b]
//TestApplicationMobile.java
[/b]

import com.vaadin.addon.touchkit.ui.TouchKitApplication;
import com.vaadin.addon.touchkit.ui.TouchKitWindow;

public class TestApplicationMobile extends TouchKitApplication {
	
	private TouchKitWindow mainWindow;

	@Override
	public void onBrowserDetailsReady() {
		mainWindow = new TouchKitWindow();
        mainWindow.setCaption("Mobile Webapp");
        setMainWindow(mainWindow);
	}

}

I thought that users will be redirected to the correct webapp automatically… Should I implement anything else?

Thanks

4

Is it not possible to auto redirect to the correct web application based on browser or screen type? If the browser (or screen) is considered desktop-type then display desktop version, else display mobile version…

5

Anybody knows how to auto redirect to the correct web application based on browser or screen type? Please help

6

Hi,

You can do this in two places:

In onBrowserDetailsReady() function you have full details about browser like if it supports touch events. At that point you have the most details to do your decisions. See e.g. our
demo app code here
. Instead of showing notification you can e.g. redirect to a different address like this:


 window.open(new ExternalResource("http://url.to/another/version/"));

The decision whether the fallback application is chosen directly is done by the TouchKit servlet. If you know what version to show based solely on the request details you can also extend a special version of the servlet and override this method:

    /**
     * Method detects whether the main application is supported by the TouchKit
     * application. It controls whether an optional fallback application should
     * be served for the end user. By default the method just ensures that the
     * browser is webkit based.
     * 
     * @param request
     * @return true if the normal application should be served
     */
    protected boolean isSupportedBrowser(HttpServletRequest request) {

BTW. If you want priority help for your team in cases like these, I’d suggest to use our Pro Support service. You’ll often get answers much quicker via that service.

cheers,
matti