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.

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.

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().

.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.

It was something along the lines of:


public String getSender() { return this.getSender(); }


I had copy-and-pasted some class template code from elsewhere in the (huge, sprawling) code base. Which contained this error, but was not ever called in the that location, so it never showed up. (So it’s not my fault really, but I should have caught it. Oh wait, I did!)

Oh, the dangers of copy and paste.

These bits of code are not big enough to be called apps, and don’t have enough explanatory text to call them demos or tutorials (although I want to do that as well). I’ll call them…. code sketches!

The first one I worked on over the New Year break. It’s code for a simple system tray, done in Java. The code is available from scn, and the license is GPL.

Java allows access to native System Tray notifications.

You can check it out here, on the code sketch page: /code/sketches/system-tray

	/**
	 * Get accounts to process based on BatchRequest, filtering out corporate accounts.
	 * @param request
	 */
	public void getAccounts (BatchRequest request) {

		List<Account> accounts = AccountManager.getAccounts(request);

		for (Account oneAccount : accounts) {
			if (isCorporateAccount(oneAccounts)) {
				accounts.remove(oneAccount);
			}
		}

	}

The List which the AccountManager is passing back has a fail-fast iterator, which detects that it is being modified in line 11, and thus failing. The mystery is–this has been working in production for months. Today, on UAT we tested a second batch job with very similar data (for all intents and purposes it is completely the same request, just a different group of accounts) and on the second pass only, the ConcurrentModificationError gets thrown. The first pass through it is fine.

Color me confused. It should work both times, or fail both times. And yes, the data is basically the same–I triple checked that today. But it works the first time, and fails the second.

Rather than spend more time wondering why it works once and fails the second time, I figure I should just eliminate the possibility of the ConcurrentModificationException entirely.  I had to make changes to the AccountManager module, which I hadn’t had the chance to change before. But it is definitely a cleaner solution. By adding a signature to the AccountManager.getAccounts(BatchRequest request, boolean includeCorporateAccounts) I was able to simplify the code to something like this:

	private static final boolean EXCLUDE_CORPORATE_ACCTS_FLAG = false;

	/**
	 * Get accounts to process based on BatchRequest, filtering out corporate accounts.
	 * @param request
	 */
	public void getAccounts (BatchRequest request) {

		return AccountManager.getAccounts(request, EXCLUDE_CORPORATE_ACCTS_FLAG);

	}

I definitely want to code more little projects. I’ve decided I’d rather just create some things and put them out into the world without too much worry about who they will impress or their ultimate usefulness. It’s better to ship software rather than just have big plans. Just like exercise–no one will raise an eyebrow at my glacial running pace but really, it’s for my benefit not everyone else’s. The same thinking applies to this blog as well.

For those of you who choose to read (hi mom!…. mom?) thanks for hanging with me and I hope to have something more substantial for you to read in this new year.

Cheers!

There’s a handy driver that will mount ext2 disks on Windows available from http://www.fs-driver.org/. Install it, and when you have attached the drive, use the Control Panel “IFS Drives” item to select a drive letter for your volume.

Works great, and transparently in Windows.

But I can finally point at the official repo instead of using my own build in my projects.

It supports the new compiler options, and spits out those beautiful SOYC reports. The archetype doesn’t seem to have had any significant changes  that I can see (could be wrong), but it works just fine under gwt-2.0.0. I wish the default for gwtVersion was 2.0.0 though.

Thank you to the developers of the plugin–it makes working with the exciting new version 2.0 of GWT that much more easy.

Yesterday was the second time in as many months where I was really, really glad I had a decompiler handy. When you need a decompiler, it turns out, you really need one.

Despite the fact that it was written in 2001, Pavel Kouznetsov’s JAD decompiler is fast and works more than well enough. There’s an Eclipse plugin for it, JADclipse, which takes the JAD output and sticks it into the Class File Viewer.

Both of these projects are no longer maintained, as far as I can tell. The JAD website is gone, and the plugin update site for JADclipse doesn’t work anymore.

However, with a bit of searching, I came across this archive of JAD executables, and Mike Schrag has graciously hosted update sites for JADclipse. JADclipse itself was created for Eclipse 3.3, but the plugin works with Eclipse 3.4 and I can confirm it works with Eclipse 3.5. Use Mike’s 3.4 update site and you’ll be just fine.