Ext GWT 3.0 Developer Preview 5

### 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.

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

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

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.

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.

### 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](http://code.google.com/webtoolkit/doc/latest/DevGuideUiCellWidgets.html) 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.


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<String> cell = new SimpleSafeHtmlCell<String>(SimpleSafeHtmlRenderer.getInstance(), "click") {
    @Override
    public void onBrowserEvent(Context context, Element parent, String value, NativeEvent event,
            ValueUpdater<String> 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](https://staging.sencha.com/blog/ext-gwt-3-appearance-design/)
* [Drawing & Charting](https://staging.sencha.com/blog/ext-gwt-3-drawing-and-charting/)
* [Declarative Markup with UiBinder](https://staging.sencha.com/learn/ext-gwt-3-declarative-markup-with-uibinder/)
* [Template Redesign](https://staging.sencha.com/blog/ext-gwt-3-xtemplate-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](https://oss.sonatype.org/content/repositories/snapshots/com/sencha/gxt/), you will need to add the following repository section to your pom.xml:

<repository>
    <id>sonatype-snapshots</id>
    <name>Sonatype Snapshots</name>
    <url>https://oss.sonatype.org/content/repositories/snapshots/</url>
    <snapshots>
        <enabled>true</enabled>
    </snapshots>
</repository>

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.