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.