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:
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.

2 comments:

  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.

    Thanks,
    Ron

    ReplyDelete
  2. Earning a good education is a lifelong investment. This could mean wide range of career opportunities, and job options. However, not everyone has the privilege to continue studies at colleges and universities due to financial constraints. It is the foremost reason that impedes a person to pursue a good education. For this reason, grant for education has been established and has become available to provide assistance for underprivileged individuals in their pursuit of having equal opportunity in obtaining good education.http://www.how-todo.xyz/

    ReplyDelete