Adding multiple grids to UiBinder

[chuckie474]

Is it possible to add multiple grids to a single uiBinder ui.xml file? For example, I need to do something like this:

<container:VerticalLayoutContainer>
<container:child>
<gxt:ContentPanel ui:field="panel" headingText="Table 1"> <grid:Grid ui:field="grid1" cm="{cm1}" store="{store1}" view="{view1}" /> </gxt:ContentPanel>
</container:child>
<container:child>
<gxt:ContentPanel ui:field="panel" headingText="Table 2"> <grid:Grid ui:field="grid2" cm="{cm2}" store="{store2}" view="{view2}"/> </gxt:ContentPanel>
<container:child>
</container:VerticalLayoutContainer>

And when I try to compile and run, it requires me to add an @UiFactory to initialize the column model, store and view. However I can only initialize one of each. If I initialize them for table 1, then table 2 displays the column model, store and view from table 1. Has anyone done this before and if so, what am I doing wrong?

[jhickman]

It is possible to add multiple Grids to a single UiBinder xml file. There are multiple ways this can be done. I've listed 3 below, but I'm sure there are even more ways this can work.

One approach would be to create the Grid instances in the owner class and use a @UiField(provided = true). This tells UiBinder to use the instances the owner class creates rather than instantiating a new Grid instances. That would look something like this:

  @UiField(provided = true)   Grid<Stock> grid1;
  @UiField(provided = true)   Grid<Stock> grid2;

  public Widget asWidget() {
    grid1 = new Grid(....);
    grid2 = new Grid(....);
    return uiBinder.createAndBindUi(this);
  }

The XML would then reference those fields with the ui:field attribute:

  <grid:Grid ui:field="grid1" />
  ...
  <grid:Grid ui:field="grid2" />

If you're wanting more of the Widget creation in the XML, then you can always provide the required Grid constructor parameters in a similar manner.

  @UiField(provided = true)   ColumnModel<Stock> columnModel1;
  @UiField(provided = true)   ListStore<Stock> store1;
  @UiField(provided = true)   GridView<Stock> gridView1;

Then, in the XML, you'll have to use <ui:with> elements.

  <ui:with type="com.sencha.gxt.widget.core.client.grid.ColumnModel" field="columnModel1" />
  ....
  <grid:Grid cm="{columnModel1}" store="{store1}" view="{gridView1}" />

If you want to continue to use the @UiFactory as you described, you'll have to pass some kind of indicator as a method parameter. This can be an enum, boolean, String, or whatever you choose. Here's an example of a @UiFactory for multiple ColumnModel instances using an integer to decide which one to create. (note that using <ui:attributes> inside <ui:with> requires GWT 2.5.0, or if you're using GWT 2.4.0 you would use the uibinder-bridge jar to get this feature)

    <ui:with type="com.sencha.gxt.widget.core.client.grid.ColumnModel" field="columnModel1">
        <ui:attributes which="1" />
    </ui:with>
    <ui:with type="com.sencha.gxt.widget.core.client.grid.ColumnModel" field="columnModel2">
         <ui:attributes which="2" />
    </ui:with>

In the owner class, you'd have the following factory method:

  @UiFactory
  public ColumnModel<Stock> createColumnModel(int which) {
  switch(which) {
    case 1:
      ColumnModel cm = ...
      return cm;
    case 2: 
      // alternatively delegate to private methods
      return createColumnModelForGrid2();
  }
  }

[chuckie474]

Thanks! I will try that!

One way I had worked around it too was to put each grid into its own ui.xml file, so I had TableWidget1.java with its TableWidget1.ui.xml and TableWidget2.java with its TableWidget2.ui.xml and embedded those into my MainWidget.ui.xml. It isn't ideal, but it works.

[jorel2]

I tried this approach (using the ui:attributes method) to try to solve the problem of 2 uibinder initialized comboboxes in a view. It just does not work, I get the following error:

[ERROR] [project] - Line 177: The method getLabelProvider(String) in the type CompanyTrainingEditorViewWidget is not applicable for the arguments ()

I did it exactly as prescribed.

I will probably just use @UiField(provided=true).

[Colin Alworth]

'getLabelProvider' doesn't seem to be part of either the original example or the suggested approach, suggesting that something else is causing an issue here. Can you share the full contents of CompanyTrainingEditorViewWidget and its associated .ui.xml file?

[jorel2]

perhaps a working example showing 2 comboboxes being placed in a single uibinder defined page would clear up all the confusion?

with and without provided instances.

:-)

[Colin Alworth]

I can provide a few ways, but its going to look nearly identical to Justin's post, since its the same problem to solve. I still can't help with your getLabelProvider problem, since I haven't seen any code from either you, Justin, or the original poster that includes such a method. Your error seems totally unrelated to the problem discussed in this thread, at least without some context.

As with Justin's earlier post demonstrating how to add two different grids to the same uibinder, we either have to use @UiField(provided=true), or rely on the @UiConstructor-annotated ctor of the widget we are creating. This is a limitation of uibinder on any widget with a non-default constructor, but it presents a third option he didn't touch on - use a subclass of the widget that has a default constructor. Since Grid rarely makes sense like that but ComboBox *may* make sense like that, it is worth considering - see StringComboBox for an example of such a subclass.

Another way ComboBox is unlike Grid - you may have two ComboBoxes visible at the same time which share a store. I can only think of one case where two grids might both be visible at the same time with a shared store: implementing a locked grid such as at http://stackoverflow.com/a/15048539/860630. For ComboBoxes you might have two forms visible at once, one for billing address and one for shipping address, both of which require a state, country, etc.

Do you still need me to post these ways, given that they are effectively the same? Can you share the code which gives you the getLabelProvider error?

[jorel2]

i gave up and just did the 'provided=true' technique.