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.

Advertisements

About virgo47
Java Developer by profession in the first place. Gamer and amateur musician. And father too. Naive believer in brighter future. Step by step.

9 Responses to GWT Tree and SmartGWT troubles

  1. Francis J says:

    Why not use Ext GWT?

    • virgo47 says:

      I mentioned the reason. We’re creating custom commercial application, but we’re not ready to pay >$300 per developer or more if you need support too. I understand their licensing, it’s just too much for us and our project. Especially when all we need (now) is Tree.

  2. Pingback: Salix GWT Tree »Coolweather

  3. Mark Johnson says:

    Hi,

    Search for “Getting started with smartGWT” or something similar and it should return several good tutorial type blog postings (e.g. http://uptick.com.au/content/create-gwt-project and http://hilloldebnath.byethost3.com/2009/08/29/smartgwt-a-getting-started-guide/).

    Good luck
    Mark

    • virgo47 says:

      Thanks Mark, I don’t plan using SmartGWT anytime soon, but thanks for adding these links for other readers. If these tutorials were linked from SmartGWT project page they would help much more than incomplete actually-non-smartgwt tutorials. 🙂 I could start with SmartGWT after all, I just think their documentation was in very bad shape or confusing for people who wanted to start. Your links are much better. But why do bloggers need to write these things? 🙂

  4. Havre says:

    I also had the problem with label on an IButton, and I managed to fix it with a call to draw() for the component holding the buttons, in this case a grid, after I have loaded the data for it. But yea it often seems to require different kind of hacks to make it display things right.

  5. Rod Smith says:

    I’ve been trying to discover my way around the tree function in Google Docs (spreadsheet) application (javascript) scripts (GAS) that, I believe, is based around GWT. After a lot of probing, some introspection routines etc, I’ve got some of the functionality I need, but so far no way to identify which element of the tree has received the selection or focus. I suspect some of the GWT callback functionality may be missing from the GAS scripting language.

    Could you suggest any method to make that identification?

    Is there anything you have to set up in GWT that may also be done in GAS, before you can see what has the focus?

    (I don’t really want the additional learning curve of full GWT for this application, particularly if it has outstanding issues with the tree implementation).

    Thanks for any suggestions you think might help — I’m hoping to investigate outlines with additional features e.g. multi-dimensional trees, automatic re-basing, alternative back-tracking, outlines within networks etc. if I can get an easily-programmable tree structure attached to a spreadsheet somehow See http://www.rodericksmith.plus.com/ActiveWebTree.html , and
    http://www.rodericksmith.plus.com/ncdTo.html?BrainstormOutliner.ncd .

  6. Akshay says:

    Hi,

    After reading the post it seems like SmartGWT is the way to go….but I opine otherwise or at least do not completely agree with it.
    We have been using SmartGWT for a while now and Trees / TreeGrids are just as buggy as ever.
    I googled for sometime and found no solution to hide the TreeNodes…. small it may seem but its just one of the cases where I wanted to manage the Tree on the client side itself….

    Correct me if I’m wrong..

    • virgo47 says:

      Personally I can’t correct you on this matter. Lately I haven’t been doing GWT (Wicket at my new job now), but I’d go for SmartGWT (based on other’s recommendations as well). Can’t tell how good/bad the trees there are. One year back we came up with VERY simple Tree implementation that was semi-drop-in replacement for GWT original Tree but with very limited set of features. We needed simple thing – and we had to do it ourselves (shame). But for anything serious you’re probably stuck with big solutions like SmartGWT.

      Isn’t any support there for SmartGWT? I’d expect it from their look. 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s