Monthly Archives: November 2011

DateFormat

You can not use java.text.DateFormat within GWT/GXT applications. The class is not supported by the Google runtime environment. But there is a similar class com.google.gwt.i18n.client.DateTimeFormat which is useable:

DateTimeFormat dFormat = DateTimeFormat.getFormat("dd.MM.yyyy");
String date = dFormat.format(new Date());

DateTimeFormat tFormat = DateTimeFormat.getFormat("HH:mm:ss");
String time = tFormat.format(new Date());

This can be used within GridCellRenderer or ColumnConfig within a ColumnModel.

ColumnConfig config = new ColumnConfig("column", "Column", 100);
config.setDateTimeFormat(dFormat);

Icons

To create an icon you can use

AbstractImagePrototype icon = IconHelper.create("path/to/png");

Within a TreeGrid it is possible to use a ModelIconProvider

TreeGrid<ModelData> grid = new TreeGrid<ModelData>(store, columnModel);
grid.setIconProvider(new MyIconProvider());

The provider can return an icon for different situations (like expanded or collapsed nodes, some special node types).

public class MyIconProvider implements ModelIconProvider<ModelData> {

   private final TreeGrid<ModelData> grid;

   public MyIconProvider(TreeGrid<ModelData> grid) {
      this.grid = grid;
   }

   public AbstractImagePrototype getIcon(ModelData model) {
      if (model instanceof Something) {
         return IconHelper.create("img/something.png");
      }
      
      if (grid.isExpanded(model)) {
         return IconHelper.create("img/folder-open.png");
      } else {
         return IconHelper.create("img/folder-close.png");
      }
   }
}

Resize your application within the browser

You can resize your application automatically within your browser window. Use a Viewport:

Viewport vp = new Viewport();
vp.setLayout(new FitLayout());
FitData layoutData = new FitData(5,5,5,5);
vp.add(new ContentPanel(), layoutData);
RootPanel.get().add(vp);

You should also set FitLayout to fit the ContentPanel of your application within the browser window.

Tooltips within Grid

If you need tooltips within a grid you should create your own GridCellRenderer.

public class MyData extends BaseModelData {
   public MyData(String name, Date date) {
      set("name", name);
      set("date", date);
   }
}

public class MyPanel extends ContentPanel {
   public MyPanel() {
      // ...
      ListStore store = new ListStore();
      Grid grid = new Grid(store, new MyColumnModel());
      // ...
      add(grid);
      new QuickTip(grid);  // don't forget it!
   }
}

public class MyColumnModel extends ColumnModel {
   public MyColumnModel() {
      super(new ArrayList());

      // our ModelData has two properties: name and date
      ColumnConfig aCol = new ColumnConfig("name", "Name", 300);
      aCol.setRenderer(new NameRenderer());
      configs.add(aCol);

      ColumnConfig bCol = new ColumnConfig("date", "Date", 100);
      bCol.setRenderer(new DateRenderer());
      configs.add(bCol);
   }

   private class NameRenderer implements GridCellRenderer {
      public Object render(MyData model, String property, ColumnData config, int rowIndex, int colIndex, ListStore store, Grid grid) {
         return "<div>" + model.get(property) + "</div>";
      }
   }

   private class DateRenderer implements GridCellRenderer {
      public Object render(MyData model, String property, ColumnData config, int rowIndex, int colIndex, ListStore store, Grid grid) {
         String date = DateTimeFormat.getFormat("dd.MM.yyyy").format(model.get("date"));
         return "<div qtitle=\"Date\" qtip=\"a date with format dd.MM.yyyy\">" + date + "</div>";
      }
   }
}

We can return HTML code from the renderer, which has “qtitle” and “qtip” attributes, which are used by the QuickTip instance.