Adding Touch Features to Sencha GXT Apps

Late last month, we rolled out the early access version of Sencha GXT 4. While we are gathering the great feedback from our GXT community and working towards the GA release, we thought it would be nice to deep dive into the most significant feature of GXT 4 – touch support for tablet devices. You can now take your GXT 3.1 applications to tablets and large touch-screen devices with minimal effort.

We offer three distinct ways to add touch support to your app:

• Touch-enabled Widgets
• Gesture Recognizers
• Listening to Gesture Events

Touch-Enabled Widgets

In GXT 4, most of the out-of-the-box widgets have been enhanced to respond to touch. In most cases, you will not need to update your code to take advantage of touch features. For example, the TextButton that fires the SelectEvent on a mouse click, now also handles the touch event. Similarly, the Tree component automatically responds to touch events for collapsing and expanding nodes.

Most GXT components handle touch events by delegating to the logical functionality similar to their mouse triggered counterparts (onTap vs onClick, etc). As long as you’re not using GXT components with raw browser events such as the ClickEvent, but instead using the GXT provided logical events such as SelectEvent or EnableEvent, you likely won’t have to change your code at all.

Gesture Recognizers

Gestures are different than simple touch events, so they are handled in special ways. We have implemented ‘Gesture Recognizers’ that convert touch events into logical gestures such as tap, double tap, and long press.

Again, we have already added ‘Gesture Recognizers’ to handle typical touch gestures in most out-of-the-box widgets and cells. Additionally, you can easily add a ‘Gesture Recognizer’ to any custom widgets or even core GWT widgets. For example, if you want to use a tap gesture for a custom cell in some specific way, you can extend the AbstractEventCell and add the following in the constructor:

addCellGestureAdapter(new TapGestureRecognizer.CellTapGestureRecognizer(){
    @Override
    protected void onTap(TouchData tap, Context context, Element parent, C value, ValueUpdater valueUpdater){
        doSomething(...);
    }
};

Refer to the GXT 4 Gestures guide for a full list of the available gesture recognizers along with more explanation and examples.

Listening to Gesture Events

Gesture Recognizers fire events to the Component, Cell, or Widget that registered them. Another method is to listen to the gesture events by adding a gesture event handler (Widget.addHandler()) for the widget that is using it. For example, a TabPanel registers a TapGestureRecognizer. If you want to get notified of any TapGestureEvent on the panel, you can add a handler using:

tabPanel.addHandler(new TapGestureRecognizer.TapGestureEvent.TapGestureHandler{
    @Override
    void onTapGesture(TapGestureEvent event) {
        doSomething(...);
    }
}, TapGestureRecognizer.TapGestureEvent.getType());

Mobilize Your GXT Apps

We are really excited about the touch capabilities in GXT 4, especially because developers can port existing GXT apps to tablets with minimal effort. Download the GXT 4 Early Access, upgrade one of your GXT 3.1 applications, and add touch features to it. Don’t forget to give us your feedback.