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.

gwt-maven-plugin updated to 1.2

The very handy Google Web Toolkit plugin for Maven has finally been updated in the respoitory to version 1.2.  At this point the docs on the website are still for v1.1 (actually 1.2-snapshot) from October.

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.

Messing with Google Web Toolkit

Just a note. I’ve been working like crazy–and let me emphasize crazy–but I’m surviving okay. I think I will have to get my thoughts together on the topic of project management (some is better than none) and the ill effects of failing to plan and how to respond to the reality of too much work to complete before the pending deadline (hint–the answer isn’t to tell your team to work harder).

Let’s talk instead of happier things–this year’s peaches were especially delicious for some reason.

And in geek news, Google Web Toolkit is mighty interesting. I have finally got a few cycles at work to try to reskin one of our (mighty unsightly) admin apps, and I thought GWT would make a good fit. It does, and it is lots of fun.

Still, GWT on its own isn’t enough. While it’s relieved the pain for a backend developer who is not cross-browser Javascript savvy, it still is UI building. The sample apps aren’t practical for big applications (I’m not going to try to stuff the UI initialization for a 100+ page admin app into the onModuleLoad method).

So I am exploring some alternatives to managing the UI menu and objects. My current plan is to generate the menu from a YAML file. Easy to manage, easy to maintain. That’s the theory anyway.

Also a lot of buzz about using an EventBus to manage the UI wiring. Gonna try some of that tomorrow. Hopefully in a few days I’ll have this Struts1.2 app dressed up in some new clothes. More updates as I figure this stuff out.

Update: the developerlife.com website has a bunch of good GWT tutorials.