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:

MGWT.applySettings(MGWTSettings.getAppSetting());

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

AnimationHelper animationHelper = new AnimationHelper();
RootPanel.get().add(animationHelper);

3. Instantiate a LayoutPanel, GroupingCellList and HeaderList:

LayoutPanel layoutPanel = new LayoutPanel();

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

4. Use TouchDelegate to register swipe Handlers:

TouchDelegate touchDelegate = new TouchDelegate(roundPanel);
touchDelegate.addSwipeStartHandler(new SwipeStartHandler() {

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

 }
});

touchDelegate.addSwipeMoveHandler(new SwipeMoveHandler() {

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

 }
});

touchDelegate.addSwipeEndHandler(new SwipeEndHandler() {

 @Override
 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.