Duplicate the <g: tab> element in the GWT TabLayoutPanel

Question

I found the GWT tab bars awkward for the style I needed to make, so I'm trying to create my own, simple tab bar. Mostly an HTML5 element <nav>for tabs and DeckPanelfor displaying content. Let everyone else use CSS3.

The GWT TabLayoutPanel has these special tags that it uses to determine 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 mean <g:tab>and <g:header>. I see these tags used in different places, but I have no idea how to create them. Looking at the source of the TabLayoutPanel, I see that it has a method addthat expects two widgets, and from it it puts one widget (content) in the panel to display, and the other (title) in the TabLayoutPanel.Tab instance, but I don’t know how duplicate such functionality.

Answer 1

To use custome tags for your type widgets <g:tab>and <g:header>, you need to create a custom ElementParse and register it using UiBinderWriter. Unfortunately, there is no easy way to do this, but without editing the source code for gwt.

:

ElementParser

TabLayoutPanelParser

Answer 2

GWT 2.1 UiChild. .

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

title tabdef, :

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

:, , tabdef ; UiChild.