You can install TouchKit as a Vaadin add-on or use it with Maven with the
vaadin-touchkit
dependency.
You need to use the special
TouchKitApplicationServlet
class instead of the
regular ApplicationServlet
in the
web.xml
deployment descriptor.
As TouchKit comes with a custom widget set, you need to define a combining widget set for your project. 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.
<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> </servlet>
Mobile applications must extend the
TouchKitApplication
instead of the regular
Application
class. Because much of the browser
information is not yet available when the init()
method is called, you should only set basic things like the main window
and theme there. The main window must be set and must be a
TouchKitWindow
, not a Window
as in regular Vaadin applications.
public class MobileMailApplication extends TouchKitApplication { @Override public void init() { setMainWindow(new TouchKitWindow()); // Using mobile mail theme setTheme("mobilemail"); }
Most initialization has to be be done in
onBrowserDetailsReady()
, including the decision
to use a regular or a mobile browser interface. The decision is usually
made using the user-agent information available in the
WebBrowser
class and the width and height of the
main window.
public void onBrowserDetailsReady() { WebBrowser browser = getBrowser(); float viewPortWidth = getMainWindow().getWidth(); if (viewPortWidth < 600) { getMainWindow().setContent(new SmartphoneMainView()); } else { getMainWindow().setContent(new TabletMainView()); } }
The demo application does not actually support regular browsers, just notifies about the situation. The special mobile components in TouchKit are not guaranteed to work at all in regular browsers. It does give separate user interfaces for phones and tablets, as described in detail later.