The application was actually a rewrite of an old application developed with jsp and extJS. To keep the same look and feel I chose to use the extGWT library having read some very good recommendations on it. I developed the application using the MVP pattern which I found pretty straight forward to implement once you get the hang of it.
The extGWT library itself is very nice with many widgets to choose from, however I did find the following drawbacks:
1) css styling is difficult. extGWT comes with several themes, which look very nice compared to bare bones gwt widgets. However their css styling is not well documented. I found myself using firebug to identify which class to change.
2) The extGWT library widgets have their own inheritance hierarchy, which means that an extGWT button for example, it totally different than a GWT button, it does not implement HasClickHandlers and does not inherit from ButtonBase or FocusWidget. So, you need to use different event handlers and if you want to expose your widgets through their interface to the Presenter, as in the MVP pattern, you find some problems. For example the addSelectionHandler() method of the extGWT Button is a method of Button and not its interface, so you need to expose Button to your presenter and not its interface.
3) Lack of a community site - the community version of extGWT is hosted in the Sencha web site. Kind of makes you wonder how much Sencha controls the community edition.
This was my first experience developing an application with extGWT and so I ran into several problems which I'd like to share with you. I guess some of these will not be new to experienced extGWT developers, but would still be useful at least to newbies.
So here we go:
1) Expanding a TreePanel - sometimes when you define a TreePanel you will want to have it expanded, rather than collapsed. However, calling the expandAll() method of TreePanel did not seem to work. It seems that you need to call this method only after attaching the LayoutContainer holding the TreePanel to the RootPanel.
2) FormLayout - extGWT has a Panel called FormPanel which uses a layout called FormLayout. This allows alignment of fields in a form. You also don't need to provide labels for the fields but rather set them as part of the field initialization by calling setFieldLabel() on the field. However that does not work unless your panel's layout is FormLayout.
3) Using FieldSets - if you want to groups form fields together you should use FieldSets. One important thing to remember about fieldsSets is that if you want to control the length of the field or its labels you should do it by invoking the appropriate methods on the FormLayout applied to the FieldSet:
setDefaultWidth - to set the width of the fields in the FieldSet.
setLabelWidth - to set the width of field labels in the FieldSet.
This, as opposed to calling the appropriate method on the FormPanel in case you are not using FieldSets
4) Complex Forms - a FormPanel layouts the fields in a vertical order by default. However, for the application I had to group the fields into several groups and lay them out in a tabular form. See the following screenshot:
To layout this form I used four FieldSets, each with a FormLayout and put them in a FormPanel with a TableLayout.
5) IE compatibility - Both GWT and extGWT are not compatible with IE9 officially. In order to get your application to work with IE9, use IE8 compatibility mode by adding the following line to you html file:
<meta http-equiv="X-UA-Compatible" content="IE=8" />
6) DatePicker in IE - There seems to be an annoying problem with the DatePicker disappearing in IE before you can make a selection. This problem does not occur consistently, but seems to appear when you use a DateField in something other than a FormLayout. The work around for this is revert to IE7 compatibility although it may present other problems. (see next item).
So again, add this line to your html file:
<meta http-equiv="X-UA-Compatible" content="IE=7" />
7) Disappearing RadioGroup in IE7 - When using IE7 compatibility the DatePicker problem is resolved, but another one soon surfaces: the RadioGroup is disappearing. The workaround here is to add the individual radio buttons to the container rather than adding the RadioGroup, the radio buttons will still need to be in a group to ensure that only one radio button is selected at a time.
Hope you find this useful.
