Continuing adventures with GWT

Well it is already the end of February. I’ve been silent all month–not because there is nothing to report but because I’ve been too busy to write it all down.

My adventures with Google Web Toolkit continue. I am still trying to get the hang of developing with the MVP-style development–particularly with UIBinder. I’m following the GWT group maillist pretty closely, and I am relieved to see that I am not the only one.  I think the biggest currently released source code for a GWT application might be the source for Speed Tracer–I downloaded it and took a look. It is not quite the MVP style that is in the MVP tutorial, but it is still an eyeopener. Unfortunately, I haven’t had time to go through it line by line yet.  I hope to put more work into building a more significant app with GWT in March.

That said, I am getting better at certain aspects of GWT. Cranking out UIBinder layouts is becoming second nature–mostly because I have probably created 15-20 GWT projects in the past 3 weeks. It wasn’t so easy at first, but I created a GWT maven archetype to create UIBinder-friendly default projects for myself. In the process I learned a lot about maven and the gwt-maven-plugin (from Codehaus), and creating maven archetypes. Unfortunately, right now the interaction between GWT and the gwt-maven-plugin is a little awkward. The good news is that the GWT Eclipse plugin team announced that they will be making some changes to make their plugin more flexible, so that it will work better with maven. When that happens, I plan on updating my archetypes and releasing them, as the one included with the current gwt-maven-plugin is dated and defaults to gwt 1.7.

One more thing about GWT. I wanted to create some charts and graphics in GWT. I’ve had this in the back of my mind since I read the article on the GWT blog about Hydro4ge using a JavaScriptObject wrapper around the Raphael graphics library. I was going to start on the wrapper for Raphael myself, but it turns out the Hydro4ge guys released their code which they wrote about as Raphaelgwt. I got a chance to check it out today. It is fantastic! Hopefully I’ll have a new gwt-raphael sketch up for you in March.

More on TabLayoutPanel

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.

GWT Notes: TabLayoutPanel

I’ve been putting in some time over the past week building UI’s with GoogleWebToolkit and the new UIBinder.

It is all very spiffy and so much easier to use than 1.7 was. Last summer I tried to put together some moderately complex UI’s and found that doing everything in Java to be slow and tedious.

I will cautiously say that I am getting the hang of UIBinder, and that is far and away my current favorite feature from the new 2.0.0 release.

That said, there are a few minor snags.

The new LayoutPanels are for fast, browser-rendered widgets, done in standards mode. I prefer them to the old Panels they replace because they don’t use tables, instead the layout is all clean css and <div>s.

But when I started working with the TabLayoutPanel, I ran into some problems which I’ve listed below.

The TabLayoutPanel doesn’t display at all, or you get a weird collapsed layout (if you’ve added css). Remember, you  must use standards mode <!DOCTYPE html> for LayoutPanels, and you have to use RootLayoutPanel.get() instead of the old RootPanel.get().

There aren’t any default css styles. If all you see are the tabs titles with no styling… check the apidoc to see the css styles you need to add. This isn’t actually a bug, but without default css the class is pretty much worthless. (There is an issue for this.)
The tabs display, but the tab widgets (content area) don’t. You need to set the  height of the .gwt-TabLayoutPanel.
It doesn’ work in IE (what does?).  There’s a bug with TabLayoutPanel and IE, and a simple css workaround:
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab { float: left; }

Update: See my next post, More on TabLayoutPanel for some sample css and demos.

Update 2: GWT version 2.0.1 address the problems with IE and provides a default CSS style. You still have to remember to use RootLayoutPanel, and standards mode doctype, when using a LayoutPanel.