Macca Blog

My life experiences with code and design

Gwt FastTree and a spinner icon

Posted on by Mark

During a project that makes use of the Google Gwt Incubator project, I was using the FastTree widget pretty actively, and found that no matter how ‘fast’ the FastTree could render the results, there were just some times when the async rpc calls would take a short while to complete, and it would look like nothing was happening.

So I quickly came across the need to implement a “spinner” on the tree. Basically, what I wanted was a nice little gif animation that would replace the expander icon on the node that he user was expanding, which would allow the user to see that there is actually something happening while they wait for their results.

I was hoping that the FastTree widget would provide this for free, but alas, this is not the case. So I started investigating different ways to implement this need, and my results were actually very simple!

I started by extending the ListeningFastTreeItem class, which basically allows the developer to handle/listen to different events of the tree, like expanding, collapsing, clicking on, losing focus, etc…

public class MyTreeItem extends ListeningFastTreeItem

This then allows you to override different methods, such as beforeOpen() (as seen below) which, as described by the java doc is “Called before the tree item is opened.” and is where I chose to implement the spinner icon.

The idea behind the implementation is that I simply want to add a CSS class to the expanding node while it waits for the results from the server, which I can then use in a custom CSS file to implement the icon. Then once my call to the server is complete, I simply remove that CSS class.

@Override
public void beforeOpen() {
this.addStyleName("loading");
loadChildren(id);
}

The code above simply calls a the built in “addStyleName()” method, to, surprisingly, add a style name to the current element that is expanding. Then I call a custom defined method, loadChildren() which will call the server using a standard Gwt rpc call and get the results.

My custom CSS class is implemented below and is really the key to this implementation:

.gwt-FastTreeItem .loading .open {
background-image: url('treeLoaderIcon.gif');
}

The 2 styles, gwt-FastTreeItem and open are Google Gwt class names, and the loading class name (as listed above) is my custom CSS class (also listed above).

The treeLoaderIcon.gif is also a custom loading icon, you can use any old icon here!

At this point in time, while the server is still loading is data, you should have a spinner working.

The next part, is to remove the spinner once the child nodes have been loading and are back on the client.

Luckily, this is simply, as stated below:

theTreeItem.removeStyleName("loading");

removeStyleName() is a built in Gwt method to remove a given style name. This line of code should be put inside your callback onSuccess() method of your Gwt rpc call.

that’s it!

If you have any questions, please don’t hesitate to ask me, leave a comment or email me!

Till next time!

This entry was posted in Ajax, CSS, FastTree, Gwt, Incubator, Java. Bookmark the permalink.

One Response to Gwt FastTree and a spinner icon

  1. Ashis Mohanty

    I want to implement the spinner in my gwt rpc call.so I understood ur point what ever u described but i need the clear visualization which will help me to implement the spinner.

    i.e

    where i have written these codes
    public class MyTreeItem extends ListeningFastTreeItem
    @Overridepublic void beforeOpen() {this.addStyleName(“loading”);loadChildren(id);}

    .gwt-FastTreeItem .loading .open {background-image: url(‘treeLoaderIcon.gif’);}

    Thanks
    in Advance

    Ashis Mohanty

Leave a Comment

Your email address will not be published. Required fields are marked *


*