Using LayoutPanel without RootLayoutPanel

This one is simple but could cause you some headaches when you try to test some components like DataGrid. Basically the DataGrid needs to be used inside some GWT Layout Panel like for example LayoutPanel or DockLayoutPanel and so on, which also requires the use of RootLayoutPanel. There are of course cases where you are not able to use the RootLayoutPanel but the RootPanel. You may wonder that nothing is shown on the screen, when you try this. To fix this you need to se the panel size explicitly, otherwise the panel is there but does not expand to show the content inside. For example in my case:

DataGrid<Contact> table = new DataGrid<Contact>();

LayoutPanel panel = new LayoutPanel();

panel.setSize("30em", "10em");

panel.add(table);

RootPanel.get("yourId").add(panel);

Very easy but don’t forget it!

Using GWT DockLayoutPanel in Model-View-Presenter custom activities

Most of the MVP GWT examples are made using SimplePanel. In case you want to create something more complicated using the GWT 2.x layout system the simple panel will not work and you will get problems developing an designing your layouts. In my case I wanted to use the DockLayoutPanel and as I mention I wasn’t able to work with it. The problem was very simple to solve, you have to take care of the following points:

• Use RootLayoutPanel instead of RootPanel
• To be able to use layouts like presented in GWT 2.1 use LayoutPanel which implements the AcceptsOneWidget

First issue is easy to solve, the second one needs a little bit more knowledge but if you did it once you can use it everywhere in your application. This is the code shows you how to implement the interface:

 1 public class SimpleWidgetPanel extends LayoutPanel implements AcceptsOneWidget {
 2 
 3     private Widget widget;
 4 
 5     @Override
 6     public void setWidget(IsWidget w) {
 7         setOneWidget(asWidgetOrNull(w));
 8     }
 9 
10     private void setOneWidget(Widget w) {
11         // validate
12         if (w == widget) {
13             return;
14         }
15 
16         // remove the old widget
17         if (widget != null) {
18             super.remove(widget);
19         }
20 
21         // logical attach
22         widget = w;
23 
24         if (w != null) {
25             super.add(w);
26         }
27     }
28 }

Using this panel you can attach it now to your activity mapper like this:

1         private SimpleWidgetPanel appWidget = new SimpleWidgetPanel();
2         
3         // Start ActivityManager for the main widget with our ActivityMapper
4         ActivityMapper activityMapper = new AppActivityMapper(clientFactory);
5         ActivityManager activityManager = new ActivityManager(activityMapper,
6                 eventBus);
7         activityManager.setDisplay(appWidget);
8 

cheers