Okay, in the interest of moving on with my life, I am going to call the last couple days of GWT experiments to be over. But first! I am publishing a couple of code sketches of what I’ve been working on.

I think I have gotten the hang of working with TabLayoutPanel. (see my last post for lessons learned). Below are two demos of a financial app that I sketched out.

1. The first demo has the TabLayoutPanel working.
2. The second demo I have added icons to the TabLayoutPanel tabs, as well as adding click handlers to the buttons on the InfoBar and the “About” link in the header.

(Note: above doesn’t work on IE8. Not sure why, and I haven’t been testing on IE at all… well, these are just experiments to learn GWT, so, sorry about that. Moving on…)

I’m really not a designer, so forgive the ugly colors and css. But it does work, and it is pretty brilliant that thanks to GWT this will work across browser (although if you look at the demos in IE you will see that my header image isn’t working right… that’s ok, I was focused on the Tab layout in this experiment.)

Below are the UiBinder template I used for the tabs, and also the css:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
	xmlns:g="urn:import:com.google.gwt.user.client.ui"
	xmlns:trade="urn:import:org.filsa.gwt.tradedash.client.ui"
	>

	<ui:image field="rateTabLogo" src="chart_24x24.png"></ui:image>
	<ui:image field="listTabLogo" src="coins_24x24.png"></ui:image>
	<ui:image field="marketTabLogo" src="yen_24x24.png"></ui:image>

	<ui:style>
		.rateboardPanel {
			background: #efefef;
			border-right: 1px solid #cdcdcd;
			border-bottom: 1px solid #cdcdcd;
		}
		.tabCard {
			border: solid 3px #8d8d8d;
			height: 100%;
		}

		.tab { height: 100%;
  		    cursor: pointer;
		    text-shadow: rgba(255, 255, 255, 1) 0 1px 1px;
		    font-size: 1.2em;
		    font-weight: bold;
		    color: #000;
		    border-top: 1px solid #666;
		    border-left: 1px solid #999;
		    border-right: 1px solid #666;

		    vertical-align: middle;

		}

		@sprite .rateTab {gwt-image: "rateTabLogo";}
		@sprite .listTab {gwt-image: "listTabLogo";}
		@sprite .marketTab {gwt-image: "marketTabLogo";}

		.left {float: left;}

	</ui:style>
	<g:HTMLPanel addStyleNames="{style.rateboardPanel}">
		<g:TabLayoutPanel barHeight="40" barUnit="PX" ui:field="tabPanel">
		<g:tab>
			<g:header>
				<div class="{style.tab}">
					<span class="{style.rateTab} {style.left}"></span>
					<span>Rateboard</span>
				</div>
			</g:header>
			<g:Label addStyleNames="{style.tabCard}">RateBoard here.</g:Label>
		</g:tab>
		<g:tab>
			<g:header>
				<div class="{style.tab}">
					<span class="{style.listTab} {style.left}"></span>
					<span>RateList</span>
				</div>
			</g:header>
			<trade:RateListCard  addStyleNames="{style.tabCard}"></trade:RateListCard>
		</g:tab>
		<g:tab>
			<g:header>
				<div class="{style.tab}">
					<span class="{style.marketTab} {style.left}"></span>
					<span>MarketBoard</span>
				</div>
			</g:header>
			<g:Label addStyleNames="{style.tabCard}">MarketBoard here here.</g:Label>
		</g:tab>

		</g:TabLayoutPanel>

	</g:HTMLPanel>
</ui:UiBinder>

Note the highlighted span tags above. I used one span for the image, and one for the title of the tab. If there is a better way to do this I’m open to suggestions. Please leave a comment!

And the css I used for the gwt-TabLayoutPanel:

.gwt-TabLayoutPanel
{
	height: 100%;
}
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTabs
{}
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab
{
		background: #a4a4a4;
		margin: 0px 5px;
}
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab-selected
{
		background: #8d8d8d;
}
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTabInner
{
}

The height:100% is what makes the tab contents appear, otherwise the tab content area doesn’t show at all. Something to do with absolute positioning in CSS, from what I understand.

Hope this helps, and let me know if you have better suggestions.