Mobile Applications with TouchKit

22.4.2. Creating a Custom Servlet

Some tasks can only be done in the initial request to the server, before the UI is created. You need to make a custom servlet class if you want to use the following TouchKit features:

•Customize bookmark or home screen icon

•Customize splash screen image

•Customize status bar in iOS

•Use special web app mode in iOS

•Provide a fallback UI (Section 22.6.1, “Providing a Fallback UI”)

•Enable offline mode

A custom servlet should normally extend the TouchKitServlet. You should place your code in servletInitialized() and call the super method in the beginning.

public class MyServlet extends TouchKitServlet { @Override

protected void servletInitialized() throws ServletException { super.servletInitialized();

... customization ...

}

}

If you need to rather extend some other servlet, possibly in another add-on, it should be trivial to reimplement the functionality of TouchKitServlet, which is just to manage the TouchKit settings object.

22.4.3. TouchKit Settings

TouchKit has a number of settings that you can customize for your needs.The TouchKitSettings configuration object is managed by TouchKitServlet, so if you make any modifications to it, you need to implement a custom servlet, as described earlier.

public class MyServlet extends TouchKitServlet { @Override

protected void servletInitialized() throws ServletException { super.servletInitialized();

TouchKitSettings s = getTouchKitSettings();

...

}

}

The settings include special settings for iOS devices, which are contained in a separate IosWebAppSettings object, available from the TouchKit settings with getIosWebAppSettings().

Application Icons

The location bar, bookmarks, and other places can display an icon for the web application. You can set the icon, or more exactly icons, in an ApplicationIcons object, which manages icons for different resolutions. The most properly sized icon for the context is used. iOS devices prefer

482	Creating a Custom Servlet

Mobile Applications with TouchKit

icons with 57×57, 72×72, and 144×144 pixels, and Android devices 36×36, 48×48, 72×72, and 96×96 pixels.

You can add an icon to the application icons collection with addApplicationIcon().You can acquire the base URL for your application from the servlet context, as shown in the following example.

TouchKitSettings s = getTouchKitSettings(); String contextPath = getServletConfig()

.getServletContext().getContextPath(); s.getApplicationIcons().addApplicationIcon(

contextPath + "VAADIN/themes/mytheme/icon.png");

The basic method just takes the icon name, while the other one lets you define its size. It also has a preComposed parameter, which when true, instructs Safari from adding effects to the icon in iOS.

Viewport Settings

The ViewPortSettings object, which you can get from the TouchKit settings with getViewPortSettings(), manages settings related to the display, most importantly the scaling limitations.

TouchKitSettings s = getTouchKitSettings(); ViewPortSettings vp = s.getViewPortSettings(); vp.setViewPortUserScalable(true);

...

See the Safari Development Library [http://developer.apple.com/library/safari/] at the Apple developer's site for more details regarding the functionality in the iOS browser.

Startup Image for iOS

iOS browser supports a startup (splash) image that is shown while the application is loading.You can set it in the IosWebAppSettings object with setStartupImage(). You can acquire the base URL for your application from the servlet context, as shown in the following example.

TouchKitSettings s = getTouchKitSettings();

String contextPath = getServletConfig().getServletContext()

.getContextPath(); s.getIosWebAppSettings().setStartupImage(

contextPath + "VAADIN/themes/mytheme/startup.png");

Web App Capability for iOS

iOS supports a special web app mode for bookmarks added and started from the home screen. With the mode enabled, the client may, among other things, hide the browser's own UI to give more space for the web application. The mode is enabled by a header that tells the browser whether the application is designed to be used as a web application rather than a web page.

TouchKitSettings s = getTouchKitSettings(); s.getIosWebAppSettings().setWebAppCapable(true);

See the Safari Development Library [http://developer.apple.com/library/safari/] at the Apple developer's site for more details regarding the functionality in the iOS browser.

TouchKit Settings

483