GWT Steering Committee

As you may have already heard from the google IO talk, I am now part of the GWT Steering Committee.

The job of the GWT Steering Committee is to drive GWT`s future by doing several things like:

• Give a direction on the future of GWT
• approve applicants to become committers
• review code
• administer releases
• modify the process of how GWT is developed to meet new challenges
• work as master committers

Initially the committee will consist of:

• Ray Cromwell (Google)
• Darrel Meyer (Sencha)
• Mike Brock (Redhat)
• Christian Goudreau (Arcbees)
• Joonas Lehtinen (Vaadin)
• Thomas Broyer
• Stephan Haberman
• Daniel Kurka (mgwt)

There will be a lot of exciting abouts in the next week about GWT so stay tuned!

This is also very great news for mgwt. I have been meeting with many different people this week on google IO demoing mgwt. I got so much great feedback and by being part of the steering committee all of the mgwt greatness will find its way somehow into GWT.

I have been talking a lot with Ray Cromwell and Rajeev Dayal from the GWT team about mgwt and they were quite excited about it.

All the discussion in the last month about the future of GWT and Dart were totally unfounded since Google is using GWT in so many ways and there is a vibrant community of external people building great stuff with GWT as well. This new process for GWT will ensure that GWT will stay one of the great open source projects where it is very easy for people to contribute and share their work. I am very excited about it and I hope you are too.

All the discussions from the steering committee are visible online, so feel free to listen on to the discussion!

mgwt 1.1.1 released

I just released a new version of mgwt (1.1.1). This is mainly bugfixes and small changes.

Here are the fixed issues:

• Carousel fails to remove its children
• Carousel: provide a method to select page with code
• Carousel widget can throw ArrayIndexOutOfBoundsException
• AnimatableDisplay fails to call super.onDetach

As always you can download the new release from google code or use maven:

<dependency>
      <groupId>com.googlecode.mgwt</groupId>
      <artifactId>mgwt</artifactId>
      <version>1.1.1</version>
</dependency>

mgwt 1.1 released

Today mgwt 1.1 finally got released. A tremendous amount of work went into this release in the last 4 months and we were able to improve mgwt in a lot of ways.

It contains a lot of new features and many bug fixes such as:

• a swipe panel
• a grouping cell list with animated headers
• a tabpanel with animating child elements
• animations without using MVP
• label support for form elements
• gesture recognizers for swipe, pinch longtap and multitap
• improved scrolling performance
• improved Pull-To-Refresh widget

Here is a complete list of all the things in 1.1

Also I am starting a series of blog post on how to use certain things around mgwt and gwt-phonegap.  Currently we are asking for suggestions for the upcoming 1.2 release on the mailing list. Please leave your comments and suggestions there.

Writing mobile apps with GWT is getting much better and easier with this release. I am really happy to see a so many people contributing and making mgwt a success. Thank you all!

You can download the release from the google code page or use maven:

<dependency>
      <groupId>com.googlecode.mgwt</groupId>
      <artifactId>mgwt</artifactId>
      <version>1.1.0</version>
</dependency>

For those of you taking a look at mgwt for the first time. You might be interested in an introductory talk  I gave at the dutch GTUG, take a look at the showcase or ask question on the user group.

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.

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.

using mgwt header list

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

The mgwt HeaderList is is a widget that can display data grouped within a list. It can render data similar to the contacts in the phone app of an iPhone.

It uses cells for the content and for the headers to do so. Rendering html with cell is much more efficient than using widgets directly. This is how it looks on an iPhone:

With HeaderList you need to specify two cell. One for the content and one for the headers.
Lets say we have two simple Java POJOs that we consider the model:

public class Header {
 private final String name;

 public Header(String name) {
  this.name = name;
 }

 public String getName() {
  return name;
 }

}

public class Content {

 private final String name;

 public Content(String name) {
  this.name = name;
 }

 public String getName() {
  return name;
 }

}

Then we need to build two cells that can render this into html:

private class ContentCell implements Cell {

 @Override
 public void render(SafeHtmlBuilder safeHtmlBuilder, Content model) {
  safeHtmlBuilder.appendEscaped(model.getName());

 }

 @Override
 public boolean canBeSelected(Content model) {
  return true;
 }

}

private class HeaderCell implements Cell
 {

 @Override
 public void render(SafeHtmlBuilder safeHtmlBuilder, Header model) {
  safeHtmlBuilder.appendEscaped(model.getName());
 }

 @Override
 public boolean canBeSelected(Header model) {
  return false;
 }

}

Note: within the cell you can render any html with any css classes. So if you want to add images or other things, this is the way to go.


After we have set this up cell list is very easy to use:

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, GroupingCellList and HeaderList:

LayoutPanel layoutPanel = new LayoutPanel();
  
GroupingCellList<Header, Content> groupingCellList = new GroupingCellList<Header, Content>(new ContentCell(), new HeaderCell());

HeaderList<Header, Content> headerList = new HeaderList<Header, Content>(groupingCellList);

layoutPanel.add(headerList);

4. Animate to the created UI:

animationHelper.goTo(layoutPanel, Animation.SLIDE);

The complete source can be found here. If you want to see the widget in action you can visit the showcase.

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.

using mgwt and gwt-phonegap

Today I am starting a series of blogposts on how to use mgwt and gwt-phonegap.

This post will list all posts of the series and will be updated every time there is a new post.

• mgwt overview
• getting started with gwt phonegap
• simple animations with AnimationHelper
• using the carousel / swipe widget
• using HeaderList
• using a swipe recognizer
• mgwt & super dev mode
• mgwt and the viewport

gwt phonegap 1.8 released

gwt-phonegap 1.8 got released today.
It contains several bug fixes and makes working with GWT RPC much easier (it is no more necessary to manipulate the servlet).
This release is compatible with phonegap 1.8 which got released a few days ago.

As always you can get the new version from google code or from maven central:

<dependency>
      <groupId>com.googlecode.gwtphonegap</groupId>
      <artifactId>gwtphonegap</artifactId>
      <version>1.8.1.0</version>
</dependency>