Saturday, June 16, 2012

using the mgwt swipe panel

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

This blog post will show the use of the Carousel widget in mgwt. The widget can be used to display different content in a horizontal row. Users can access the content by swiping to it.

The widget looks like this:

To build this you need to do the following steps:

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 and add in the Carousel widget:
LayoutPanel layoutPanel = new LayoutPanel();
  
Carousel carousel = new Carousel();
layoutPanel.add(carousel);

4. Add some content to the Carousel:
carousel.add(someWidget);

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


The complete code example can be found here. If you want to see the widget in action, take a look into the showcase.

1 comment:

  1. Hi Daniel.

    Thanks, the Carousel is almost what I need.
    The thing is that I need a circular carousel (i.e.
    where after the last page, the first page comes again).
    More preciselly, I need the effect of swiping from
    the last page to the first to be as if they were consecutive
    pages (and not a 'rewind' effect). There exist a way of using
    the carousel to achive that? Is there an easy way to provide
    this functionality?

    Thanks in advance,

    Mauro

    ReplyDelete