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.

10 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
    Replies
    1. 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.

      فرشید امین

      شهرام شب پره

      کامران و هومن

      Delete
  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
  3. The article is about the advantages of using swipe recognizer. These kinds of awareness helps us. However, help me write my essay will also give you information about the developing and mobile apps.

    ReplyDelete
  4. it is an attractive piece of software designed to enhance the privacy and security of your computer by removing junk files, trackers, and cookies.
    By eliminating these unwanted files and programs, you can see that the indirect benefit is an increase in system performance.
    Download it free From Here:
    https://softserialskey.com/zookaware-pro-crack/

    ReplyDelete

  5. Thanks for sharing this post. Your work is amazing. You can also check out vstfine Crack for Free. You can also visit the

    Bandicam Crack
    Traktor Pro Crack
    ZookaWare Pro Crack
    Adobe Photoshop CC Crack
    Renee iPhone Recovery Crack

    Knowledge Has No End Limits Keep Sharing Your Knowledge//

    ReplyDelete
  6. commercial Garage Door Opener installation systems that keep your home doors Spring and maintain Door security perfect all year long. Maintenance plays a key role in ensuring that your heating system stays running smoothly and save your investment.

    ReplyDelete