TouchKit
Web browsing is becoming ever increasingly mobile and web applications need to satisfy users with both desktop computers and mobile devices, such as phones and tablets. While the mobile browsers can show the pages just like in regular browsers, the screen size, finger accuracy, and mobile browser features need to be considered to make the experience more pleasant. Vaadin TouchKit gives the power of Vaadin for creating mobile user interfaces that complement the regular web user interfaces of your applications. Just like the purpose of the Vaadin Framework is to make desktop-like web applications, the purpose of TouchKit is to allow creation of web applications that give the look and feel of native mobile applications.
Creating a mobile UI is much like creating a regular Vaadin UI. You can use all the regular Vaadin components and add-ons available from Vaadin Directory, but most importantly, you can use the special TouchKit components that are optimized for mobile devices.
@Theme("mobiletheme")
@Widgetset("com.example.myapp.MyAppWidgetSet")
@Title("My Mobile App")
public class SimplePhoneUI extends UI {
@Override
protected void init(VaadinRequest request) {
// Define a view
class MyView extends NavigationView {
public MyView() {
super("Planet Details");
CssLayout content = new CssLayout();
setContent(content);
VerticalComponentGroup group =
new VerticalComponentGroup();
content.addComponent(group);
group.addComponent(new TextField("Planet"));
group.addComponent(new NumberField("Found"));
group.addComponent(new Switch("Probed"));
setRightComponent(new Button("OK"));
}
}
// Use it as the content root
setContent(new MyView());
}
...
}The above example omits the definition of the servlet class, does not have any UI logic yet, and you would normally implement some views, etc. The resulting UI is shown in Simple TouchKit UI.
TouchKit supports many special mobile browser features, such as geolocation, context-specific input fields, and home screen launching. On iOS, special features such as splash screen and web app mode are supported.
In addition to developing regular server-side UIs, TouchKit allows a special offline mode, which is a client-side Vaadin UI that is stored in the browser cache and switched to automatically when the network connection is not available, either when starting the application or while using it. For more information, see "Offline Mode".
In this chapter, we first consider some special aspects of mobile browsing. Then, we look how to create a project that uses TouchKit. TouchKit offers a number of specialized mobile components, which are described in a dedicated section. We treat phone and tablet applications separately, and discuss testing briefly.
TouchKit Demos
The Parking Demo showcases the most important TouchKit features for a mobile location-based business application. The app itself is for helping parking enforcement officers write parking tickets on the streets. It uses geolocation, image acquisition from the camera of the mobile device, map navigation, data visualization with Vaadin Charts, and dynamic UIs with responsive layouts. You can try it out at http://demo.vaadin.com/parking. See "Importing the Parking Demo" for instructions for importing the project in Eclipse.
Mobile Mail is another demo application, which shows how to implement browsing of deep category trees and make forms. You can try it out at http://demo.vaadin.com/mobilemail.
You can browse the source code of the demo at Github.
Some of the examples given in this chapter can be seen in action at demo.vaadin.com/touchkit-sampler.
You can browse the source code at the source repository or clone it with Git.
Licensing
Vaadin TouchKit is a commercial product licensed under a dual-licensing scheme. The AGPL license allows open-source development, while the CVAL license needs to be purchased for closed-source use, including web deployments and internal use. Commercial licenses can be purchased from Vaadin Directory, where you can also find the license details and download Vaadin TouchKit.