Latest Ext JS 7.8 is now available. Learn more

Ext GWT 3.0 Developer Preview 5

October 19, 2011 276 Views

Ext GWT 3.0 Developer Preview 5 The Ext GWT team has been hard at work on Ext GWT 3.0 and we’re happy to announce the availability of Ext GWT 3.0 PR5. This will be the last developer preview release as we move toward our 3.0 beta releases. There are a tremendous number of improvements and features added since PR4. As a result, we are closing in on being feature complete.

Now is a great time to grab the SDK and to get familiar with the API. All major changes to the public API are complete so this release is a good representation of how the final API will work. As with any developer preview release, keep in mind there are still bugs, missing features, and rendering issues, some of which may pop up as you explore the API.

Download Ext GWT 3.0
View Documentation

### Module Separation

With previous versions of Ext GWT there is a single monolithic module. With 3.0, we have separated the library into a number of smaller, more logical modules. This provides more fine-grained control of what features of the library you want to use.

The core modules include:

* **Core:** com.sencha.gxt.core.Core
* **Cell Components:** com.sencha.gxt.cell.Core
* **Data and Binding:**
* **Drag and Drop:** com.sencha.gxt.dnd.DND
* **Effects and Animations:** com.sencha.gxt.fx.Fx
* **Localized Messages:** com.sencha.gxt.messages.Messages
* **State:** com.sencha.gxt.state.State
* **Base Theme:** com.sencha.gxt.theme.Base
* **Blue Theme:** com.sencha.gxt.theme.Blue
* **Complete Framework:** com.sencha.gxt.ui.GXT
* **Components:** com.sencha.gxt.widget.Core

As before, all core modules can be included by inheriting com.sencha.gxt.ui.GXT in your application’s module, as the GXT module will inherit each other modules, as well as combine permuatations and set certain default settings.

### GWT Widget Support

In previous releases of Ext GWT, Components are not rendered the same way as GWT Widgets. Components are rendered “lazily” meaning their DOM elements are not created until they are actually needed. With GWT Widgets, the DOM elements are created when the widgets are constructed. Because of this difference, you would use Components and GWT Widgets differently. With 3.0, Components are not rendered lazily and work the same was as GWT Widgets.

Furthermore, prior to 3.0, Ext GWT Containers worked only with Components. Any non-components would need to be wrapped in a component wrapper. With 3.0, containers work with Widgets directly and no wrapping is required.

Because of the two changes mentioned above, it is much easier and feasible to maintain consistent behavior when using GWT Widgets in Ext GWT Containers and using Ext GWT Components in GWT Panels.

### Appearance Pattern and Themes

We’ve removed the need for external CSS and images in Ext GWT 3.0. If you’ve used Ext GWT before, you’re familiar with the resources folder – a folder of static images and CSS files used by the library. In the past, setting up a new Ext GWT project would involve copying this folder into your project and linking the gxt-all.css style sheet.

In 3.0, we’ve implemented the GWT [Appearance]( pattern and now take full advantage of ClientBundle and CssResource. There is no longer a need to reference the gxt-all.css and the associated images. All CSS and images are contained within the library source code and module public folder. Also for Maven users, the Ext GWT jar now includes both the Java source code and style resources (CSS and images). There is no longer a resources jar, just the single Ext GWT jar.

The only requirement for theming is to add a reference to reset.css in your application’s host page. reset.css is a small CSS file that clears the default (and browser-specific) padding and margins from most HTML elements. Here’s the host page for the Explorer demo:

Ext GWT Explorer Demo – ${build.description}

Also note the first line – the HTML document type declaration. Ext GWT 3.0 works only in strict mode, which is activated in browsers when an appropriate declaration is placed at the beginning of the document. The [HTML5 doctype]( can also be used to trigger strict mode:

For more information about the Appearance pattern, see this [blog article](

### UiBinder Support

GWT 2.0 release introduced the ability to construct user interfaces declaratively using XML templates. To allow for composing widgets in UiBinder, there are several conventions to which to adhere. These include using the HasWidgets interface to allow a Widget to behave as a container, implementing HasHTML to allow raw HTML directly in panels, and adding @UiConstructor and @UiChild annotations in Widgets to facilitate custom behavior.

Ext GWT 2 was released prior to GWT 2.0 and did not have any support for UiBinder. Compatibility between Ext GWT 3.0 and UiBinder has been one of the major driving factors for many of the API changes in Ext GWT 3.0.

Here’s a very simple example of a UiBinder template containing Ext GWT 3.0 components:

For more information on using UiBinder with Ext GWT, see this


### Charts

This release includes many new features in the chart framework. There is now a greater level of customization available to developers who use Ext GWT charts. Some of the main points of customization include the use of series renderers and label providers.

[![Column Renderer](]( “Column Renderer”) [![Scatter Renderer](]( “Scatter Renderer”)

All series provide labeling of their data points. Labels provide a more precise interpretation of the data on the chart.

[![Bar Renderer](]( “Bar Renderer”)

There is also now event support in charts. Try clicking the pie slices in this chart.

[![Pie Renderer](]( “Pie Renderer”)

Using the time axis, it is easy to visualize data values by date. This example shows data being updated continuously, much like what you’d see in a live monitoring application.

[![Live Chart](]( “Live Chart”)

The new draw examples show the underlying sprite framework on which the Ext GWT 3.0 charts are built. Be sure to try resizing the logos to see the dynamic nature of vector graphics.

[![Basic Draw](]( “Basic Draw”) [![Sencha Logo](]( “Sencha Logo”)

### Cells and Cell Widgets

Cells are a fairly new design pattern and implementation by GWT. “Cell widgets (data presentation widgets) are high-performance, lightweight widgets composed of Cells for displaying data.” See this [guide]( for background information on cells.

With this release we have added support for cells in all our data widgets, including: Grid, ListView, Tree and TreeGrid.

![Cell Grid](

In previous versions of Ext GWT, it was possible to add widgets to data components. Although this functioned properly, performance was quite slow. This is because there is a large overhead in creating and adding widgets to data components. For each row, a new widget instance is created.

In the cell pattern, a single Cell instance renders each row’s value (be it a number, a button, or a date picker) in the column. In addition, cells do not listen for events directly. Instead, they are passed to the cell from its container.

Here’s an example of a custom Cell that listens for click events:SimpleSafeHtmlCell cell = new SimpleSafeHtmlCell(SimpleSafeHtmlRenderer.getInstance(), “click”) {
public void onBrowserEvent(Context context, Element parent, String value, NativeEvent event,
ValueUpdater valueUpdater) {
super.onBrowserEvent(context, parent, value, event, valueUpdater);
if (“click”.equals(event.getType())) {
Info.display(“Click”, “You clicked “” + value + “”!”);

### Field Cells

Most field components in 3.0 are cell based. This means that you can easily use a field cell such as a TextInputCell in a data widget like a grid. You can also use these cells individually by using the corresponding component. For example, to use a TextInputCell as a component, use the included TextField. The component works together with the cell to provide a cohesive component that works like any other GWT component including working with the GWT event system.

We’ve also applied the appearance pattern to our cells. With these changes, it’s now possible to have interactive behavior in our data widgets by using cells. More importantly, this behavior is possible without the overhead and performance problems of working with widgets.

Our cells require some changes in order for them to work properly in our editors and cell based data widgets. At this time the cells are not fully functioning. These changes will be in place before the beta release.

### Data Loading and Writer

The Store classes continue to be the basis for client-side data management in Ext GWT, and Loaders, DataProxys, and Readers are still an ideal way to provide the data for Stores. As in 2.0, there is no requirement to use them – data can be added directly to the stores. However, we’ve greatly improved the generics on them and made it easier to send data to and from the server in a variety of ways. For those who choose to take advantage of the convenience of using these classes, the Ext GWT 3.0 data classes are a huge improvement in developer convenience and productivity.

Previously, Ext GWT used the introspection-like features of ModelData to allow access to the data within an object. With 3.0, ValueProvider instances can be used to generically refer to individual nested properties, and GWT’s AutoBean functionality can be used to turn bean interfaces into and from data loaded from the server. The HttpProxy and ScriptTagProxy classes can both be asked to generated XML or JSON for the objects sent to the server. Alternatively, they can also generate simple url-encoded data. Furthermore, readers are available to easily map JSON properties or simple XML x-paths to bean properties.

Loaders and Proxies now use specific generics to avoid confusion about the type of model or data that is expected or that will be produced by any particular object. This avoids many common problems, such as class cast exceptions, that occur when less stringent typing is used. These additional type parameters can make object declarations more verbose, but also more precise. These changes result in better static code checking from your IDE or compiler and will point out the error instead of waiting for someone to use every single service. The Explorer demo shows how to turn both XML and JSON into trees or lists to be consumed by their appropriate Stores.

### New Examples

We have added several new examples to the Explorer Demo since PR4. These include:

* **Charts:** ToolTip Chart
* **Combos:** Advanced ComboBox
* **Drag & Drop:** Grid to Grid, List to List, Tree to Tree, TreeGrid to TreeGrid
* **Draw:** Basic Draw, Logos
* **Forms:** DualListField, FileUpload
* **Grid:** Aggregation, Cell, Basic, Grouping, Json, Live Grid, Paging, Xml
* **Layouts:** AccordionLayout, Center Layout,, HtmlLayout, PortalLayout
* **Template & Lists:** DateCell ListView
* **ToolBar & Menu:** Advanced ToolBar, MenuBar, Overflow ToolBar, Status ToolBar
* **Tree:** Cell Action Tree, Fast Tree, Filter Tree
* **TreeGrid:** Async TreeGrid, Basic TreeGrid, Editable TreeGrid
* **Window:** Accordion Window

These examples can be viewed at here.
### External Links

Here is a list of previously released content about 3.0. Some of the code samples may be using API’s that have changed since the content was published. Make sure to take a look at the examples in the current release for current and proper API usage.

* [Appearance Design](
* [Drawing & Charting](
* [Declarative Markup with UiBinder](
* [Template Redesign](

### What’s Missing

There are a handful of features / components that are not in this preview release. These include:

* Grid row expander, Grid row numberer, Grid filtering, Grouping summary view
* Grid column reordering
* RowEditor
* CheckBox selection model
* TimeField
* Tri-state Tree and TreeGrid
* Desktop and Mail demo
* Gray theme

### What’s Next

The team is working on adding the missing features. In addition, we have handed over the code to our QA team and started more robust testing. We will release the first beta release once we are feature complete which should be fairly soon.

We are also working on documentation for 3.0. This includes cleaning up and adding new content to JavaDocs. In addition, we are working on an manual for 3.0.

We are looking forward to presenting Ext GWT 3.0 at our upcoming conference. We will cover the various features and changes in 3.0 in more detail.

### Nightly Build

We have setup a nightly build and deployment of the Explorer demo. This is a good place to see the latest code running in the demo. See:


### Maven

The final release of 3.0 will be put into Maven central and no extra repository is required. However, the releases before GA are released as snapshot releases.

To get the [snapshot releases](, you will need to add the following repository section to your pom.xml:
Sonatype Snapshots


We have several artifacts available:

* **gxt-release** – A zip of the release, similar to how Ext GWT was released before 3.0
* **gxt** – The core component and data classes
* **gxt-charts** – The new drawing and charting API
* **gxt-legacy** – Classes to ease porting projects from earlier Ext GWT versions
* **uibinder-bridge** – Optional support to allow complete configuring non Widget types using <ui:with> in UiBinder XML. Will not be required when Google releases 2.5

### Summary

Thanks for reading this article and for trying Ext GWT 3.0 PR5. We’re very excited about Ext GWT 3.0, and we hope this release will show you the potential of this next major update to Ext GWT.

Download Ext GWT 3.0
View Documentation

Also please visit the Explorer Demo. Release notes for PR5 are here.