GWT Tree and SmartGWT troubles

We have adopted Google Web Toolkit about a half-year ago, went from 1.6.x to 1.7 and recently switched to 2.0. The first and the most important point is: Most of us feel it’s fun to create user interfaces again! After years with servlets, JSP, Struts, JSTL, JSF, Facelets, RichFaces … well, no surprise actually. GWT has – of course – its drawbacks. Now you have to communicate with your server from client side explicitly. Good thing that we can still code it all in Java and GWT does the dirty work for us.

Of course we had some problems using GWT too. We still have to mess with CSS, sometimes styles get to code, we still need to sort it all out and learn new patterns, … but even so we’re far more productive and we just love to do user interfaces in GWT.

And then there is that Tree component. Ugly, buggy, close to no features. Ok, here is what I really dislike about default GWT Tree:

• No connectors, actually no real visual customization.
• Focused item is not highlighted on Firefox – this bug goes all the way from (at least) 1.6, it’s reported – and probably ignored. Then you have to add ugly lines like this to your code:
  treeItem.getElement().getFirstChildElement().setAttribute("style", "display: block;");
  No, you can’t just put it into your CSS for treeItem class, because there is internally set “inline” display in GWT somewhere.
• When the tree is put into a fixed-size div with scroll-bars and this tree is a bit wider, it tends to display right side of the tree after some clicks. Very annoying.
• To add one more visual problem – you can’t highlight (selected, or mouse hover) the whole line, nor you can click anywhere on the line with the item. It seems to be a minor thing, but such trees are much easier to work with for users.

Now there is one big advantage of GWT default Tree: You can use GWT Widgets, you can use Image resources (from bundles), you can do virtually anything GWT related within the Tree. It’s GWT tree after all. It’s really a shame (and our pity) Google guys doesn’t want to extend this Tree anytime soon – so it seems. This way we’re reliant on some custom component. As I couldn’t find nice tree as a single component project (preferably with really good GWT integration) I tried to use big players in space of GWT component libraries. GWT-Ext (not the same like Ext GWT) and SmartGWT. Both are wrappers around existing JavaScript libraries. GWT-Ext uses extjs – and because of changes in licensing of this library GWT-Ext was based on the last LGPL version and slowly fell behind. Extjs now offers only commercial licence if you want to use it in commercial projects – the same applies for their own Ext GWT. As GWT-Ext is now dead and using it with GWT 2.0 results in more and more compilation warnings, I’m stuck with SmartGWT. So let’s check this one out.

First things first – I went for SmartGWT solely because of the Tree. Yes, I can use more things from the library later, but now I’m interested only in the Tree. SmartGWT is based on SmartClient JavaScript library and both are LGPLed. This is obviously nice for tight-budget – yet commercial (for instance custom) – small GWT applications. With any library – first thing you need is to integrate it into your project. GWT-Ext needed more steps, you had to download extjs separately, copy some files here and there, change GWT module file – but in the end everything was nicely documented here – and you could get there from Google project page via the Wiki in maybe 3-4 clicks.

SmartGWT has simpler setup – but I simply miss any real Getting Started for plain project *without any IDE involved*. On their Google project Wiki there is Getting Started page, but it’s more a joke for me. No steps, no setup, nothing, just the hint to check examples. That means you have to crawl through HTML file, GWT module file and god-knows-what-else to find out what you actually have to do. I expressed my concerns in the comment on the page, but there was no real answer about actual project setup.

So I tried Tutorials. Count with me – one example for Google App Engine, another for Grails, then the rest for Eclipse and NetBeans and one of them I tried doesn’t have anything related to SmartGWT except the name – it was part 1 and maybe in part 2 there would be something about SmartGWT, but part 2 is nowhere to find. I’m surprised to see positive comments there, because there are better articles how to setup GWT project and there was no help with the SmartGWT itself (and some other comments even asked for steps how to setup SmartGWT – no wonder). Now – if I were the manager of SmartGWT project page, I’d remove this tutorial right away (I added comment on the Tutorials page too). I would check it out before I would add it in the first place – and added it after both parts were really written.

After all you’ll probably end up on their forums. Well – I don’t think forums are the best place to find out steps for integrating some GWT library into GWT, what do you think? Of course, good developer can find out all steps in the end – but after GWT-Ext you may easily think you’re missing something. SmartGWT is easy to setup and I simply can’t understand why they don’t add a few lines into their Getting Started page. Yesterday I found obsolete SmartGWT setup tutorial – but it still works with only one thing missing. As someone mentioned in comments there, you need to add following code into your HTML (before script with your GWT module):

<script>var isomorphicDir = "module-name-change-it/sc/";</script>

Besides this you only need one inherit in your GWT Module XML:

<inherits name="com.smartgwt.SmartGwt"/>

And of course – add smartgwt.jar on your classpath for GWT compiler. That’s it – now you know how to setup SmartGWT project. (Of course I omitted the coding part, but there is a Showcase with examples.) That’s the missing Getting Started. A few lines instead of many links mostly for Eclipse users – with some links not even related to SmartGWT at all.

I’ll tackle the Tree very quickly – because right now I’m not using it. Why? For one thing I wanted custom icons for every tree level (or maybe for every node). SmartGWT allows you to do it – if you provide the node with image URL. If you work with GWT for some time, you will probably expect Image widget instead. No way – as far as I know (please, let me know in comments if I’m mistaken!) – you have to do it the old way and have your icons as separate files. If you use them in bundle already… well, that’s not the way you wanna go I’m sure. The other thing with tree is that in some other project we were not able to put it into our layout. We used CSS positioning, mixing absolute/relative to get what we want. Everything works just fine – but not with SmartGWT components. For instance label on IButton is printed completely off the button the first time. Then – when you resize the browser – it jumps to proper position. But when you move split on the split panel – button moves, but the label stays. Well – not funny really. The same happens with the Tree. We were unable to position it properly, unable to properly use scroll-bars on the parent div, unable to use Tree’s own scroll-bars, etc. Maybe we have to rewrite layout of our application first – probably using new GWT 2.0 Layout mechanism. But I’m not sure if everything will be alright after that…

I know that there are many happy SmartGWT users out there. I actually envy them a bit. 😉 I don’t want problems, but it just happened in this case that I hit those problems. I’ll see if I return to you with more about SmartGWT, but it will not be anytime soon – as I expect a lot of work to become a happy user too. 🙂 But at least there is a page with all three steps for SmartGWT startup – without a single Eclipse screenshot.

PS: Nothing against Eclipse, but it’s just annoying when you want to know how to do something and the only thing you find is how to do something in Eclipse, I guess you understand.