Announcing Sencha GXT 3.1 Beta

Introduction

We’re excited to announce the release of Sencha GXT 3.1 beta, available for download here and from Maven Central. This latest release of GXT introduces Theme Builder, a new tool for theming GXT applications, as well as the Neptune theme built entirely with this tool, adds support for GWT 2.6, and fixes a variety of bugs reported by our users. We’d like to gather feedback from our community while we prepare for the general availability of GXT 3.1.

GXT 3.1 Theme Builder

Theme Builder is a tool that takes a simple config file and generates a jar file with all of the appearances necessary to theme a GXT app. The config file format allows for CSS3 values such as border radius and gradients, and Theme Builder creates appearances that can be used in browsers that may not support those features. It does this by using modern CSS and HTML where possible, and otherwise generating images of the required features.

theme {
    name = "neptune"
    basePackage = "com.sencha.gxt.theme.neptune"
    details {
        buttonGroup {
            borderRadius = 3
            border = util.border('solid', '#dfeaf2', 3)
            headerGradient = util.solidGradientString('#dfeaf2')
            font = util.fontStyle("helvetica, arial, verdana", '13px', '#666666');
            ...
        }
        ...

While GXT 3.1 continues to support Java 6, the Theme Builder itself requires Java 7, though the code generated by Theme Builder will be compatible with Java 6. The command line tool is tested to run on both Windows and OS X, as well as several Linux distributions. The shell and batch scripts in the download zip run only on Windows or OS X to keep the zip file from being much larger. To run the script on Linux, a copy of PhantomJS will be required.

With over 350 configuration properties, almost all widgets and cells available in GXT can be themed. For all widgets displaying text, the family, size, color, weight can be specified via a single config. For widgets with borders, the color, width, style can also be specified. In many widgets, padding and spacing is configurable, as well as background colors, and sometimes even gradients.

Neptune Theme

GXT 3.1 beta includes a new theme, Neptune, generated entirely with the Theme Builder. Neptune is generated entirely from its config file, with no custom HTML, CSS, images or Java.

You can use Neptune as your default theme by first moving to GXT 3.1 and then adding the gxt-theme-neptune.jar to your project. The following inherits statement needs to be added to your module file:

<inherits name="com.sencha.gxt.theme.neptune.Theme"/>

GWT 2.6

When we added support for GWT 2.6, we had to break compatibility with GWT versions 2.4 and 2.5, so any project that adopts GXT 3.1 will need to also use GWT 2.6. Moving to GWT 2.6 comes with many fixes and improvements over GWT 2.5.1 that are documented in the release notes.

Documentation

With the GXT 3.1 beta release, we’ve updated our docs to include the new features like the Theme Builder, and we go into greater depth about many existing features.

Known Issues

There are a few known issues in the Theme Builder that are visible in Neptune or any other generated theme. These issues are all specific to browsers that are unable to handle modern CSS and HTML, such as IE8 and 9. TabPanel has the most obvious issues — for bottom tabpanels, the images are not aligned correctly. Dual list fields, grid row editing, and button groups do not show the same rounded corners in IE8 and 9 that you see in modern browsers. We are working on resolving some of these issues, and hope that these and other issues reported by the community will be resolved before the final release.

Feedback

Creating custom themes for GXT apps is hard work for developers. With the release of GXT 3.1 Theme Builder and Neptune theme, it becomes that much easier. We are very excited about this new feature and would like to hear about your experiences. Please give us your feedback in the Sencha GXT 3.1 Beta forum so we can improve it further before the general release.