Saturday, June 16, 2012

using swipe recognizer

This post is part of a series of blogposts that show the usage of  some mgwt / gwt-phonegap components.

This blog post show how to use a recognizer on a widget that does not have direct touch support by using TouchDelegate. Not that All widget that extends TouchWidget or TouchPanel have direct touch support. Most of the times you will be using TouchDelegate when you want touch / gestures on existing GWT widgets.

This demo uses the swipe recognizer and prints some data about the fired events into a panel.

1. Setup the viewport for the mobile browser:

2. Instantiate an AnimationHelper and attach it to the RootPanel:

AnimationHelper animationHelper = new AnimationHelper();

3. Instantiate a LayoutPanel, GroupingCellList and HeaderList:
LayoutPanel layoutPanel = new LayoutPanel();

final RoundPanel roundPanel = new RoundPanel();
roundPanel.getElement().getStyle().setProperty("minHeight", "200px");

4. Use TouchDelegate to register swipe Handlers:
TouchDelegate touchDelegate = new TouchDelegate(roundPanel);
touchDelegate.addSwipeStartHandler(new SwipeStartHandler() {

 public void onSwipeStart(SwipeStartEvent event) {
  roundPanel.add(new HTML("swipe start detected at: " + event.getTouch().getPageX() + " " + event.getTouch().getPageY()));


touchDelegate.addSwipeMoveHandler(new SwipeMoveHandler() {

 public void onSwipeMove(SwipeMoveEvent event) {
  roundPanel.add(new HTML("swipe move detected at: " + event.getTouch().getPageX() + " " + event.getTouch().getPageY()));


touchDelegate.addSwipeEndHandler(new SwipeEndHandler() {

 public void onSwipeEnd(SwipeEndEvent event) {
  roundPanel.add(new HTML("swipe end detected"));


5. Animate to the created UI:
animationHelper.goTo(layoutPanel, Animation.SLIDE);

The complete code for the example can be found here. If you want to see swipe recognizers in action take a look at the showcase.

1 comment:

  1. Hi Daniel,

    Many thanks for the explanation. Very helpful!

    Is it also possible to attach a swipe recognizer to the complete application, i.e. the swipe handler triggers independently on which screen the user is? I'd like to use this to bring up the menu when the user swipes from left to right anywhere in the application.