GWT - How to get the client browser name

Do you need to implement specific code for a given browser, due to different causes, bugs or workarounds? Here are some helper static native functions to figure out what browser the client uses. Obviously these functions must be called only on the GWT client-side, due to the native JavaScript scriptlet.

* Gets the name of the used browser.
public static native String getBrowserName() /*-{
    return navigator.userAgent.toLowerCase();

* Returns true if the current browser is Chrome.
public static boolean isChromeBrowser() {
    return getBrowserName().toLowerCase().contains("chrome");

* Returns true if the current browser is Firefox.
public static boolean isFirefoxBrowser() {
    return getBrowserName().toLowerCase().contains("firefox");

* Returns true if the current browser is IE (Internet Explorer).
public static boolean isIEBrowser() {
    return getBrowserName().toLowerCase().contains("msie");

For the other browsers (opera, safari, seamonkey etc) you can have your own function made after the previous 3 models.


GXT (Ext GWT) - How to maintain selection in a grid even after refresh

I have a grid with a store and a loader. There is a paging tool bar too. Now when I click on the refresh button from the paging tool bar, the selection goes. I need to maintain this selection after refresh.


1. First superclass the PagingToolBar class like here:

public MyPagingToolBar extends PagingToolBar {
    public Button getRefreshButton() {
        return refresh;

2. Secondly, add a "Select" or "BeforeSelect" event listener on the refresh button, like in this code extract:

MyPagingToolBar  toolbar = new MyPagingToolBar ();
toolbar.getRefreshButton().addListener (Events.Select, new Listner<ButtonEvent>(){
     public void handleEvent (ButtonEvent be) {
        /* here you save your selection row */       

3. On the grid loader success notification you can re-select the row programatically.

gridLoader = new BasePagingLoader<pagingloadresult<modeldata>>(proxy, reader) {
    protected void onLoadFailure(Object loadConfig, Throwable t) {
        super.onLoadFailure(loadConfig, t);

     protected void onLoadSuccess(Object loadConfig, PagingLoadResult result) {
         super.onLoadSuccess(loadConfig, result);
         /* here you do the re-selection */

GWT Optimization - Speed up the compilation in Eclipse

Do you have a computer with n-cores (in my case I have 4) and you are frustrated that the GWT compilation, on such powerful machines, works so slow?

Don't despair ...there is a solution here. Here's how we improve this in Eclipse:
- click on the "GWT Compile" button, like in the below image:

- in the next dialog set the compilation parameter:
-localWorkers 4

How to know the number of worker threads used by the GWT compiler? very simple check out the "Task Manager" of your computer (CTRL+ALT+DEL and choose option 'Show Task Manager'), and see how many "CPU Usage History graphs" do you have (as I said before, I have 4).

In my case, the improvement was about 3x times, from the ~180sec to about ~60sec. Not bad, ehh?

Happy compiling!

GXT (Ext GWT) - How to search remotely in grid with StoreFilterField ?

First of all we have to enrich the GXT control StoreFilterField, like in the below code extract, to be able to perform the remotely search in the grid:

public abstract class RemoteStoreFilterField<M extends ModelData> extends StoreFilterField<M> {
    public static final String PARM_FIELDS = “fields“;
    public static final String PARM_QUERY = “query”;
   /* disable the locally default behavior */

   public void bind (Store<M> store) {
       /* do nothing here – to avoid calling locally the grid filter */
    protected boolean doSelect (Store<M> store, M parent, M record, String property, String filter) {
        /* do nothing here – to avoid calling locally the grid filter */
        return true;

    /* prepare the notifications for the remote searching */

    protected void onTriggerClick (ComponentEvent ce) {
        String filter = getRawValue();
        setValue (null);
        if (filter != null && !filter.isEmpty()) {
    protected void onFilter () {
        String filter = getRawValue();
        if (filter != null && !filter.isEmpty()) {
            handleOnFilter (filter);

    /* handlers for the remote searching */

    /** need to perform cancellation of the remote filter */
    protected abstract void handleCancelFilter();

    /** need to perform the remote filtering */
    protected abstract void handleOnFilter(String filter);
So, we have to use this base code when we build the grid, which must be populated by a “store loader”.
public class GridHolderPanel extends ContenPanel {
    private String gridSearchText_;
    private Grid grid_;
    private void createGrid () {
        /* create a RPC data proxy */ 
        final RpcProxy<Data> proxy = new RpcProxy<Data>() {
           /* in this function we add the searching parameters: PARM_QUERY and PARM_FIELDS */
           public void load( Object loadCfg, AsyncCallback<Data> callback) {
               LoadConfig gridLoadCfg = (LoadConfig) loadCfg;
               if (gridSearchText_ != null && !gridSearchText.isEmpty()) {
                   gridLoadCfg.set(RemoteStoreFilterField.PARM_QUERY, gridSearchTExt_);
                   /* fileds string has the list of column names, separated by comma for example – 
                      it’s your format here – you decide how you do it */
                   String fileds = "";
                   for (ColumnConfig cc : grid_.getColumnModel().getColumns()) {
                       if (cc.isHidden()) continue;
                       if (fields.length() > 0) fields += “,”;
                       fields += cc.getDataIndex();
                   gridLoadCfg.set(RemoteStoreFilterField.PARM_FIELDS, fields);
        /* create a grid loader */ 
        final BaseListLoader<M> gridLoader = ...
        /* create a grid */ 
        grid_ = new Grid<M>(store, columnsModel);
        /* creates the toolbar where to put the search field */
        ToolBar tb = new ToolBar();
        /* create the search field */
        RemoteStoreFilterField<M> searcher = new RemoteStoreFilterField () {
           /* handle filtering – this is a call after each key pressed – it might be improved to be 
              deferred executed *** keep watching this blog I have a neat solution for this, 
              called LastCallEventBurstManager */
           protected void handleOnFilter (String filter) {
               gridSearchText_ = filter;
           /* handles the filtering cancellation */
           protected void handleCancelFilter () {
               gridSearchText_ = null;
        /* build the UI */ 
        tb.add (searcher);
        this.add (grid_);
So the main points here are: RemoteStoreFilterField, data proxy for the grid, grid loader, and the grid columns model. All mixed in the way I’ve described above.

GWT - Update the CSS images to be used with the ClientBundles

GWT 2.0 simplified the managing of the resources in bundles (images, CSS, strings). For this the main 'actor' is the interface ClientBundle, which can be extended and populated with function definitions.

For example if we have the module com.mycompany.module1 then we can add a new package to the client code com.mycompany.module1.client.resources where we'll put our image resources.

Here we need to add our "bundle descriptor" Java interface, and copy the images (*.gif, *.png) under it. The link between the image file and the function is done through an annotation Source. So far nothing new. The point that I want to emphasise is what we do we our code that uses in lots of places the image key strings or image CSS classes (i.e. button.setIconsStyle("ICON-add")) ?

One solution is to replace everywhere the CSS references of the images with the call of the "bundle descriptor" interface, and another solution will be to build some helpers that will do the this "resources translation" for us, and the old code remains unchanged. The later I will present here:

public interface MyImagesBundle extends ClientBundle {

   /* create an instance of images bundle - static public one */
   MyImagesBundle INSTANCE = GWT.create(MyImagesBundle.class);

   /* add the definition of the icons */

   @Source ("add.png")
   ImageResource addIcon();

   @Source ("del.png")
   ImageResource delIcon();


This is nice here, but the some controls may not use directly the ImageResource class, but the AbstractImagePrototype, so we need the helper class to translate the "strings" to the "AbstractImagePrototype". And for this we'll add a nested static class to out bundle descriptor interface "MyImagesBundle", so we have the next code sample:

public interface MyImagesBundle extends ClientBundle {
   MyImagesBundle INSTANCE = GWT.create (MyImagesBundle.class);

   public static class Util {

      /* mapping of the CSS icon classes and the image resources */
      private static HashMap<String, ImageResource> ICONS = 
           new HashMap<String, ImageResource> ();

      /* here we build the mapping */
      static  {
          add ("ICON-add", INSTANCE.addIcon ());
          add ("ICON-del", INSTANCE.delIcon ());

      /* conversion function */
      public static AbstractImagePrototype get (String imageCls) {
         ImageResource ir = ICONS.get (imageCls);
         if (ir != null)
            return AbstractImagePrototype.create (ir);
         return null;

      /* adding helper function */
      protected static void add (String imageCls, ImageResource ir) {
         ICONS.put (imageCls, ir);

   @Source ("add.png")
   ImageResource addIcon ();

   @Source ("del.png")
   ImageResource delIcon ();

The calls of the resources can be done like here:

Button b = ...
b.setImage (MyImagesBundle.Util.get ("ICON-add"));


Button b = ...

If we need to have more bundles, we can use the above Util class as a base for the subclassed ones, like in the below sample:

public interface MySecondBundle extends ClientBundle {
    MySecondBundle INSTANCE = GWT.create (MySecondBundle.class);

    public static class Util extends MyImagesBundle.Util {
        /* here we just add the new mappings */
        static {
           add ("ICON-import", INSTANCE.importIcon();

    @Source ("import.gif")
    ImageResource importIcon ();

so the second bundle is much simpler, and it can "override" the icons with the same "icon css class", which can be good or bad. But either way goes, we still have the possibility to chose the right icon through the INSTANCE variable:

MyScondBundle.Util.get ("ICON-import");
MyImagesBundle.Util.get ("ICON-add");


GXT (Ext GWT) - How can I disable the browser's default right click response?

1. Using the GXT (Ext GWT) library from the ExtJS is very simple.

You can write a static function like this:
* Disable the browser's default right click response.
public static void disableDefaultContextMenu() {
new Listener() {
public void handleEvent(ComponentEvent be) {

and you call it first thing in your "onModuleLoad()" function.

Now, all default right-click menus are gone, and only the ones defined by your application will appear.

2. For pure GWT implementation try this:
- first define the static function:
* Returns the document element.
public static native getDocElement() /*-{
return $doc;

- and then call this code first thing in the "onModuleLoad()":
Event.addNativePreviewHandler(new Event.NativePreviewHandler(){
public void onPreviewNativeEvent(NativePreviewEvent event) {
if (event.getTypeInt() == Event.ONCONTEXTMENU){
DOM.sinkEvents(getDocElement(), Event.ONCONTEXTMENU);

I hope you'll be happy after that...


Update your application to GWT 2.0

Hoourey GWT 2.0 was released, it's time for new project update.

 1. Point one
First thing we all know the GWT 2.0 comes with the new "development mode" instead of the "hosted mode" that allows us to run and test our applications faster and in the browser of our choice. GOOD point.

Another good point is the "Speed Tracer" plugin to help you understand here bottleneck is. Though, this tool is not very oriented on detail, but more on high level view, which is good, but could be improved in the next versions.

All those can be found here:

The starting of the "dev mode" is faster than the old "hosted mode", and you can use and test the application in the browser, so now we get rid of the problem "I don't know, it's working in the hosted mode, but not in the web mode".

2. Point two
For running in dev mode, though, we need to install the dev-mode plugin (download Google Web Toolkit Developer Plugin), from one of this direct URL links:
- Firefox
- Internet Explorer
- Chrome
- Safari

I've tried my application using the GWT2.0 in these 3 browsers (Chrome, IE8, and FF3.5), and as Chrome is the fastest in day to day operations ... I expected the GWT dev-mode plugin will be the same ... but false ... the order of speed in dev-mode is:

1. Firefox
2. Internet Explorer
3. Chrome (far away comes)

 Why? I hope we'll have soon an updated version !

3. Point three
Other difference is that the starting of the application requires a quite special URL, like this one, to be typed directly in your browser:
http : // localhost : 8080 / MyApp.html ? gwt.codesvr = localhost : 9997
The parameter "gwt.codesvr" is used by the dev-mode browser plugin to communicate with your "eclipse" project, so you can debug it nicely. If you miss this parameter then you just run your application in plain "web mode" with no debug possibility.

Note: 8080 is the default port for you app, 9997 is default the port for dev-mode plugin ... both of them can be changed (so pay attention to startup configuration)!  Here you can find how to change the GWT ports.

4. Point four
Question: what do we do with our older releases, which cannot be updated, and they are still on older GWT 1.7.1 versions?

Things to do when we update/change a library (GWT in our case):
- 0. Generate first a simple GWT 2.0 project using the Eclipse plugin, and then update your module MainApplication.gwt.xml and MainApplication.html according with the GWT recommendations.
- 1. put the new jar
- 2. update the classpath, build.xml files etc.
- 3. perform a clean up of the browser cache
- 4. clean up the "Temp" folder, here the GWT compiles the project (usualy is the OS temp file).
- 5. perform a clean build of the project
- 6. launch you application.

 This is valid for trying to run older projects on the same machine with the GWT2.0 projects ... clean-up the browser cache and temporary folder "temp" is the "action of the day".

Happy GWT 2.0 updating !!!

5. My other related articles
       - Optimize the GWT compilation
       -  Replace CSS images with ClientBundle
       - Ideas for optimizing the GWT applications
       - Code examples of "How To Do" things in GWT
       - Change the default GWT Dev-Mode ports and parameters


HTML - Center a DIV in the page

Do you want to center anything in the page, like here?

Here's the HTML extract that will center a DIV element to the center of the HTML page:


<div style="display:table; width:400px; height:300px; position:relative; text-align:center; border:1px solid red; ">
<div style="display:table-cell; vertical-align:middle; width: 250px; height:80px; position: absolute; top:50%; left:50%; ">
<div style="width: 250px; height:80px; position:relative; top:-50%; left:-50%; ">
                 <div style="border:1px solid green;"> here you add what to be center: text, images etc. </div>
</div> </div>


here you add what to be center: text, images etc.

Happy 'center' !

Note: you still can play with the width:250px and height:80px attibutes to adapt the position right in the center !