Vaadin TouchKit

Build touch-enabled applications for iOS and Android mobile devices using Vaadin

Vaadin TouchKit development has been DISCONTINUED. Read more details from the blog post.

TouchKit is a collection of UI components bundled with a theme that helps developers build great looking mobile applications for iPad and mobile phones. You can build applications that resemble native apps. TouchKit will enable touchscreen interactions and NavigationManager adds animations to your screen transitions.

No knowledge of mobile devices needed, the programming model is the same as for other Vaadin applications.

TouchKit works with iPhone/iPad (iOS 5+) and Android (v2.3+) devices. TouchKit 4 also adds Windows Phone 8 support.

This add-on is available under two licenses: AGPL and CVAL. If your project is compatible with AGPL, you can use the add-on for free; otherwise you must acquire a sufficient number of CVAL licenses before the 30-day trial period ends. For more info, click the license links in the summary above.

The 3.x and 4.x series versions are compatible with Vaadin 7, 2.X series with Vaadin 6.

Sample code

   @Override
    public void onBrowserDetailsReady() {
        WebBrowser browser = getBrowser();
        if (!browser.isTouchDevice()) {
            getMainWindow()
                    .showNotification(
                            "You appear to be running on a desktop software or other non touch device. We'll show you the tablet (or smartphone view if small screen size) for debug purposess.");
        }

        if (isSmallScreenDevice()) {
            getMainWindow().setContent(new SmartphoneMainView());
        } else {
            getMainWindow().setContent(new TabletMainView());
        }
    }

  public boolean isSmallScreenDevice() {
        float viewPortWidth = getMainWindow().getWidth();
        return viewPortWidth < 600;
    }

VerticalComponentGroup group = new VerticalComponentGroup(
                "Please enter your information");
group.addComponent(new TextField("Name"));
group.addComponent(new NumberField("Age"));
group.addComponent(new EmailField("Email"));
layout.addComponent(group);

Links

• Features and Benefits
• Issue Tracker
• Online Demo
• Parking demo sources
• Documentation
• License Installation Instructions
• Author Homepage
• Source Code
• Discussion Forum

Compatibility