Duplicating the <g:tab> element of GWT's TabLayoutPanel

Question

I've found the GWT tab panels clunky for the styling I need to do, so I'm trying to make my own, simple tab panel. Basically an HTML5 <nav> element for tabs and a DeckPanel to display the content. Let the use figure out the rest with CSS3.

The GWT TabLayoutPanel has these "special" tags it uses to define the contents of a tab:

<g:TabLayoutPanel>
    <g:tab>
        <g:header>Tab Title</g:header>
        <g:OtherWidget>Tab contents</g:OtherWidget>
    </g:tab>
</g:TabLayoutPanel>

I'm referring to <g:tab> and <g:header>. I see these type of tags used in various places but I have no idea how to create them. Looking at the TabLayoutPanel source, I see that it has an add method that expects two widgets, and from that it puts one widget (the contents) into a panel for display and another (the header) into an instance of TabLayoutPanel.Tab. But I have no idea how to duplicate this kind of functionality.

Answer 1

To use custome tags for you widget like <g:tab> and <g:header> you need to create a custom ElementParse and register it with the UiBinderWriter. Unfortanatly there is no simple way of doing this yet without editing the sourcecode for gwt.

Usefull links:

A link to the issue of not being able to create custom ElementParser

TabLayoutPanelParser

Answer 2

In GWT 2.1 there's the UiChild attribute. It's quite cool.

@UiChild public void addTabDef(Widget page, String title) {...}

The title parameter will be filled with an attribute of the same name in the tabdef tag, like so:

<v:tabdef title="Tab one"><g:Label>Page one.</g:Label></v:tabdef>

Edit: to be clear, tabdef isn't defined anywhere as a class; the desired behaviour during parsing is defined by UiChild attribute.