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.

2 comments:

  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
  2. Thumbs up only to that mobile phone deal which fits to your budget requirement. Never go beyond your price limitation. If you are buying contract phone deal, then be sure that the charged line rental must be within your access.free business calls

    ReplyDelete