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.