Vaadin Touchkit Browser问题

在MobileMail，运行mvn package 打包，然后运行mvn jetty:run

 

用firefox浏览器打开，报如下错误：

 

Ooops...
You accessed this demo with a browser that is currently not supported by TouchKit. TouchKit is ment to be used with modern webkit based mobile browsers, e.g. with iPhone. Curretly those cover huge majority of actively used mobile browsers. Support will be extended as other mobile browsers develop and gain popularity. Testing ought to work with desktop Safari or Chrome as well.

 

原因是touchkit不支持 非mobile device，最根本原因是需要实现webkit的浏览器。

看手册原文描述为：

The browser support in TouchKit concentrates on WebKit which appears to be emerging as the leading mobile browser core. In addition to Apple's products, also the default browser in Android uses WebKit as the layout engine.Yet there are differences, as the Android's JavaScript engine, which is highly relevant for Vaadin, is the Google Chrome's V8 engine.

大概意思是：TouchKit目前只支持webkit的浏览器，比如苹果或者安卓用webkit作为渲染引擎的产品，这两者是有区别的，安卓是js引起。Vaadin强烈推荐使用google chrome V8引擎。这样屏幕可以自动适应。

 

需要解决的问题是：

当浏览器是非webkit的时候，自动选择非Touchkit的窗口模式，否则就是mobile device的模式，mobile模式又包括smartphone 和 tablet。

 

 

浏览器内核引擎的介绍文章参考：

 

http://www.iteye.com/news/3498-why-mozilla-has-to-defend-core-gecko

 

面向不同browser device解决办法： 只需要在web.xml文件中进行配置：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	id="WebApp_ID" version="2.5">
	<display-name>Vaadin Web Application</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.addon.touchkit.server.TouchKitApplicationServlet</servlet-class>
		<init-param>
			<description>Vaadin application class to start</description>
			<param-name>application</param-name>
			<param-value>com.vaadin.demo.mobilemail.MobileMailApplication</param-value>
		</init-param>
		<init-param>
			<param-name>widgetset</param-name>
			<param-value>com.vaadin.demo.mobilemail.gwt.MobileMailWidgetSet</param-value>
		</init-param>
		<!-- Also configure fallback app + widgetset for non webkit browsers -->
		<init-param>
			<description>
			Vaadin fallback application class to start</description>
			<param-name>fallbackApplication</param-name>
			<param-value>com.vaadin.demo.mobilemail.FallbackApplication</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>

	<mime-mapping>
		<extension>manifest</extension>
		<mime-type>text/cache-manifest</mime-type>
	</mime-mapping>

</web-app>

 

注意，将非webkit内核浏览器的application 配置到fallbackApplication的配置中。

<!-- Also configure fallback app + widgetset for non webkit browsers -->
		<init-param>
			<description>
			Vaadin fallback application class to start</description>
			<param-name>fallbackApplication</param-name>
			<param-value>com.vaadin.demo.mobilemail.FallbackApplication</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>