Saturday, June 16, 2012

using animation helper

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

If you do not want to use GWT Activities and Places you can not use the AnimatingActivityManager from mgwt. This is why we created AnimationHelper. A simple class that lets you use animations with a very simple API.


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 a button. Attach the TapHandler to it and animate to another UI on Tap:
LayoutPanel layoutPanel = new LayoutPanel();
Button button = new Button();
button.setText("Animate");

button.addTapHandler(new TapHandler() {

 @Override
 public void onTap(TapEvent event) {
  //build second ui
  LayoutPanel layoutPanel = new LayoutPanel();
  Button button = new Button();
  button.setText("second");
  layoutPanel.add(button);
  animationHelper.goTo(layoutPanel, Animation.FLIP);

 }
});

layoutPanel.add(button);

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

A complete example can be found here. If you want to see the mgwt animation in action take a look at the showcase.

3 comments:

  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. A simple class that lets you use animations with a very simple API.web design tutorials

    ReplyDelete
  3. Wow, happy to see this awesome post. I hope this think help any newbie for their awesome work. By the way thanks for share this awesomeness from
    Speciaali

    ReplyDelete