Is it possible to reuse GWT UIBinder panels?

Question

I have a layout in Google Web Toolkit using UIBinder involving a TabLayoutPanel. This layout has the superset of all tabs that will be used by my app (think of it as an admin view).

I now need to create a new layout, using a subset of these tabs (eg, for regular users).

Is it possible to import panels from my admin layout in my user layout? Or perhaps define them all in a third file, and import from both layouts?

Gobbler

Answer 1

Define each tab content as a separate UiBinder template. Since UiBinder classes are Composites you can add them to any container just like any other widget.

You can assemble your TabLayoutPanel in code by adding each UiBinder templeted object into a tab in the TabPanel or define another UiBinder Template with the TabPanel and all the Tabs defined.

If you go the UiBinder route for templating the TabLayoutPanel, import the tab panel contents (Composites you defined earlier using UiBinder) into the UiBinder by defining a new 'namespace' pointing to the package where all your composites reside. You then refer to your composites as namespace:ClassName in the UiBinder template.

if com.project.package is where you keep all your composites which you want embeded in individual tabs then define a new namespace f as xmlns:f= 'com.project.package' soon after xmlns:g declaration.

You refer to individual composites in your UiBinder as

<f:Composite1 /> 
<f:Composite2 />

Conversion

Thanks, this looks promising. I will give it a shot. – Gobbler

Yes, I knew there must be an easy way to do this! I did, however, get surprised that onModuleLoad() doesn't get called automatically when using this approach. Is that to be expected? I was able to call it from the constructor myself, and everything seems to be working, but I just want to be sure I'm not missing something (again :). – Gobbler

Answer 2

You can definitely import views you've written, both UIBinder templates and regular Widgets, into another UIBinder template.

From the UIBinder docs:

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
    xmlns:g='urn:import:com.google.gwt.user.client.ui'
    xmlns:my='urn:import:com.my.app.widgets' >

  <g:HTMLPanel>
    <my:WeatherReport ui:field='weather'/>

    <my:Stocks ui:field='stocks'/>
    <my:CricketScores ui:field='scores' />
  </g:HTMLPanel>
</ui:UiBinder>

Notice how the Stocks and CricketScores widgets are imported from your own package.

You won't necessarily need to do this just to show/hide tabs based on user privileges, you can just show/hide your tabs in your GWT code based on access levels.

Midst

Where is Stocks defined? I want to continue to define my layouts in XML, since I feel that would be more manageable than defining them in Java code. – Gobbler

According to the code above, Stocks should be in com.my.app.widgets package. – Mohandas

Yeah, my question was more along the lines of, "Where is the UIBinder layout for Stocks defined?" I think @Ashwin Prabhu's response may answer that question, though. – Gobbler