Mobile Applications with TouchKit

Styling with CSS

.v-touchkit-tabbar {}

.v-touchkit-tabbar-wrapper {}

.v-touchkit-tabbar-toolbar {}

The component has overall v-touchkit-tabbar style. Content area is wrapped inside a v-touchkit-tabbar-wrapper element. Tab bar control area itself has the v-touchkit-tabbar-toolbar style.

22.5.10. EmailField

The EmailField is just like the regular TextField, except that it has automatic capitalization and correction turned off. Mobile devices also recognize the field as an email field and can offer a virtual keyboard for the purpose, so that it includes the at (@) and period (.) characters, and possibly a shorthand for .com.

22.5.11. NumberField

The NumberField is just like the regular TextField, except that it is marked as a numeric input field for mobile devices, so that they will show a numeric virtual keyboard rather than the default alphanumeric.

22.5.12. UrlField

The UrlField is just like the regular TextField, except that it is marked as a URL input field for mobile devices, so that they will show a URL input virtual keyboard rather than the default alphanumeric. It has convenience methods getUrl() and setUrl(URL url) for converting input value from and to java.net.URL.

22.6. Advanced Mobile Features

22.6.1. Providing a Fallback UI

You may need to use the same URL and hence the same servlet for both the mobile TouchKit UI and for regular browsers. In this case, you need to recognize the mobile browsers compatible with Vaadin TouchKit and provide a fallback UI for any other browsers. The fallback UI can be a regular Vaadin UI, a "Sorry!" message, or a redirection to an alternate user interface.

You can handle the fallback logic in a custom UIProvider that creates the UIs in the servlet. As TouchKit supports only WebKit-based browsers, you can do the recognition by checking if the user-agent string contains the sub-string "webkit" as follows:

public class MyUIProvider extends UIProvider {

@Override

public Class<? extends UI> getUIClass( UIClassSelectionEvent event) {

String userAgent = event.getRequest()

.getHeader("user-agent").toLowerCase(); if(userAgent.contains("webkit")) {

return MyMobileUI.class; } else {

return MyFallbackUI.class;

}

}

}