Creating a TabPanel in UIBinder Declarative Layout View

Some posts just need to be short and sweet.  Looking to create a TabPanel in UiBinder for GWT?  Check out this article and code below:

    <g:TabLayoutPanel addStyleNames="{style.tabPanelExample1}"
                        ui:field="tabPanel" barUnit="PX" barHeight="60" width="375px"
                        height="150px">
                        <g:tab>
                            <g:header>
                                UiBinder Tab 1
            </g:header>
                            <g:HTML>
                                Hello tab 1
                                <br />
                                Good bye!
                            </g:HTML>
                        </g:tab>
                        <g:tab>
                            <g:header>
                                UiBinder Tab 2
            </g:header>
                            <g:HTML>
                                <h2>Hello tab 2</h2>
                            </g:HTML>
                        </g:tab>
                        <g:tab>
                            <g:header>
                                UiBinder Tab 3
            </g:header>
                            <g:HTML>
                                <strong>
                                    <i>
                                        <u>Hello tab number 3</u>
                                    </i>
                                </strong>
                            </g:HTML>
                        </g:tab>
                    </g:TabLayoutPanel>

Laying Out Your GWT Application

With the release of version 2.0 of GWT they have incorporated a feature known as "Declarative Layout with UiBinder".  IN previous versions of GWT you constructed pages purely in code, xreate panel, add object to panel in this position etc.  Now you can declare a user interface xml file which allows you to see more clearly how an object is layed out.  Similarly to ASP.Net where you have special objects for text boxes, user controls, etc. here you have a GWT equivalent:

<!-- HelloWorld.ui.xml -->

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>
  <div>
    Hello, <span ui:field='nameSpan'/>.
  </div>
</ui:UiBinder>

Tutorial on declarative UI is here: http://code.google.com/webtoolkit/doc/latest/DevGuideUiBinder.html#Panels