Can I mix declarative and programmatic layout in GWT 2.0?

Question

I'm trying to redo an existing panel that I made before GWT 2.0 was released. The panel has a few text fields and a scrollable panel below in a VerticalPanel.

What I'd like to do is to make the scrollable panel with UIBinder and then add that to a VerticalPanel Below is an example I created to illustrate this:

 public class ScrollTablePanel extends ResizeComposite{

     interface Binder extends UiBinder<Widget, ScrollTablePanel > { }
     private static Binder uiBinder = GWT.create(Binder.class);

     @UiField FlexTable table1;
     @UiField FlexTable table2;

     public Test2() {

      initWidget(uiBinder.createAndBindUi(this));



      table1.setText(0, 0, "testing 1");
      table1.setText(0, 1, "testing 2");
      table1.setText(0, 2, "testing 3");

      table2.setText(0, 0, "testing 1");
      table2.setText(0, 1, "testing 2");
      table2.setText(0, 2, "testing 3");
      table2.setText(1, 0, "testing 4");
      table2.setText(1, 1, "testing 5");
      table2.setText(1, 2, "testing 6");
     }
    }

then the xml:

<ui:UiBinder 
   xmlns:ui='urn:ui:com.google.gwt.uibinder' 
   xmlns:g='urn:import:com.google.gwt.user.client.ui'       
   xmlns:mail='urn:import:com.test.scrollpaneltest'>
       <g:DockLayoutPanel unit='EM'>
      <g:north size="2">
       <g:FlexTable ui:field="table1"></g:FlexTable>
      </g:north>
      <g:center>
       <g:ScrollPanel>
         <g:FlexTable ui:field="table2"></g:FlexTable>
       </g:ScrollPanel>
      </g:center>
    </g:DockLayoutPanel>
</ui:UiBinder>

Then do something like this in the EntryPoint:

 public void onModuleLoad() {

     VerticalPanel vp = new VerticalPanel();
     vp.add(new ScrollTablePanel());
     vp.add(new Label("dummy label text"));
     vp.setWidth("100%");

     RootLayoutPanel.get().add(vp);
    }

But when I add the ScrollTablePanel to the VerticalPanel, only the first FlexTable (test1) is visible on the page, not the whole ScrollTablePanel.

Is there a way to make this work where it is possible to mix declarative and programmatic layout in GWT 2.0?

Answer 1

You definetely can, although it kind of beats the purpose of using uiBinder in the first place. Of course when you have to use dymamic gui elements, such as FlexTable, you can't avoid init code but still you can use @UiFactory and @UiField(provided=true) to avoid some of it. I believe your problem has to do with the size of the container VerticalPanel, try setting it to 100%.