The Isomorphic Blog

Grails Plugin for SmartGWT

We are pleased to announce a preview version of our plugin for Grails developers.

Grails includes an ORM layer (GORM) built on top of Hibernate and the principal feature of this plugin is to provide a seamless integration with it.  The plugin also assists with creating UI elements and providing SmartClient-enhanced scaffolding.

This articles serves as a starting point for developers looking to begin using this integration.  It assumes familiarity with Grails, SmartClient & the Grails GWT integration.  This release is a preview so it hasn’t undergone the normal QA process that our normal releases include, at this point we’re looking for developer feedback.

Plugin features

  • Automated SmartClient deployment
  • SmartClient DataSource generation from Grails Domain Classes
  • Groovy DSL to generate/manipulate custom Component Schema
  • Automatic mapping of Grails domain class validators to SmartClient validators
  • Full CRUD support including AdvancedCriteria queries, paging and sorting (through an included Custom Server DataSource)
  • Grails Tag Libraries to assist with the loading of DataSource and UI components
  • SmartGWT based scaffold generation.

Pre-requisites (for sample application)

  • A working Grails installation (1.3.6 or above)
  • Grails SmartGWT plugin (current beta version is 0.4 available here)
  • SmartGWT-Enterprise downloaded and extracted (evaluation builds available here)
  • MySQL (required for this sample only, any GORM-supported database will work with the SmartGWT plugin)

Getting Started

We’re going to use Grails on Sakila for the basis of a sample app.  The MySQL Sakila sample database (included) contains a lot of seed-data that will allow us to explore the features of this plugin.  I’ve updated the app to use Grails 1.3.6, removed the authentication filter and replaced the index.gsp to show a list of Controllers.

The sample app, database schema and sample data can be downloaded here.  The following steps are required to get the app running:

  1. Create the database schema (from sakila-schema.sql)
  2. Load the seed data (sakila-data.sql)
  3. Open grails-app/conf/DataSource.groovy and update the database url, username and password to suit your environment

Run the application (‘grails run-app’ from the ‘grails-on-sakila’ directory) and browse to the URL (by default http://localhost:8080/grails-on-sakila/), you should see:

You can click on some of the implemented controller views (e.g. Actor) and you should get:

At this point we have a standard Grails application with some sample data.

Installing the SmartGWT plugin

We’re now going to add the Grails GWT plugin and the SmartGWT plugin:

  1. grails install-plugin gwt
  2. grails install-plugin <PATH_TO_SMARTGWT_PLUGIN>/
    1. You will be prompted to provide the path to SmartGWT-Enterprise directory (download and extract an evaluation build from here)

Beginning with SmartGWT and SmartGWT Scaffolding

Open the Actor, Category, Film and Language domain class files and add ‘static smartclient’ inside the class definition.  The plugin will now automatically implement the IToJSON interface to allow the SmartClient server to serialize domain class instances.

Now we’re ready to generate the SmartClient DataSource definitions and scaffolding:

  1. grails generate-data-source
    1. This script will generate SmartClient DataSources for all the domain classes that we’ve exposed so far to SmartClient
    2. The generated DataSource files can be found in grails-on-sakila/smartclient/ds.
  2. grails generate-scaffolding scaffold.gsp com.example.smartgwt.Scaffolding
    1. This script will generate a GWT Host Page (named scaffold.gsp), a GWT Module (com.example.smartgwt.Scaffolding) and SmartClient Component Schema for List Grids, Dynamic Forms and Detail Viewers.
    2. The generated UI files can be found in grails-on-sakila/smartclient/ui

Finally we need to compile the GWT module and run the app:

  1. grails compile-gwt-module
  2. grails run-app
  3. Browse to the scaffold gsp file (e.g. http://localhost:8080/grails-on-sakila/scaffold.gsp)

You should be presented with a list of Domain classes that can be clicked and will appear in a ListGrid in the middle view:

The scaffolding feature supports testing queries using the Filter Builder, paging, sorting, and editing records.

Next steps

In a future post we’ll look at how to customise the scaffolding to better handle associations, provide formatting, as well as how to create stand-alone (non-scaffolded) SmartGWT pages and modules.

Offline Capability in SmartClient & Smart GWT

Like any web application, SmartClient and Smart GWT applications can be made offline  capable using an HTML5 manifest file to describe all the static resources required by the application.  If you’re not familiar with creating an HTML manifest file, you can learn more about it by reading through this tutorial:

Once you’ve got a manifest for static resources, the next problem is how to store dynamic data (like search results). This is what the new offline functionality does, providing both automatic support at the DataSource level and a lower-level API for you to add other offline features.

Using a single property (DataSource.useOfflineStorage), you can enable automatic offline caching of recently fetched data. When the user switches the application (or browser) into offline mode or if the browser detects that it is offline, then the framework automatically starts returning the cached responses whenever it can.  This means that when a user goes offline, they still have access to recently accessed data.  This functionality works with any data provider – SQL, REST services, WSDL, etc. Users are automatically notified if they request data that’s not available offline, with a customizable error message.  You can also add code into your application to notify the user that the responses have come from an offline cache, if necessary.

To see the offline functionality in action, take a look at this SmartClient example:

In the example, use the tree to navigate categories and load related data into the grid while you are on-line. If you then go offline, and click one of the categories you selected before, the data that is returned is from the Offline cache.  This functionality ensures users have access to recently accessed data wherever they are.

Offline Work

This raises an important point: not every application has a hard requirement for a full-featured offline mode, however, any application that can provide offline access to data is a higher quality application.  Being able to get to recently accessed contacts, orders or other records can be a lifesaver when you travel out of wireless coverage or have other connectivity issues.

The new offline persistence functionality has another compelling feature that will benefit even those developers that don’t need to create an application that can go offline.   The offline browser storage APIs can be used by your programs for any client-side persistence task.  This means that user preferences can be stored so that the user can make changes, such as re-ordering or re-sizing columns in a grid, and these changes will still be there, the next time they open the application.  All of this can be done without the need to set up a server-side system.   You can see an example of this functionality here:

The new offline persistence functionality is supported in all browsers with a uniform API, with a minimum of 0.5MB of storage available in the worst case (IE6).

Smart GWT 2.4 & SmartClient 8.0 final release

To kick off the New Year, Smart GWT 2.4 and SmartClient 8.0 final have been released!  Download the new releases here.

This list of new features is relative to Smart GWT 2.3 and the SmartClient 8.0 beta – note that for SmartClient in particular, this is a massive release with around 4x the new features covered here, so be sure to check out the 8.0 beta announcement to discover all the other new features.

  • Offline support

The new Offline subsystem provides a simple put/get capability for persistently storing data on an end user’s system.  Under the covers, it uses HTML5 standard “localStorage” where available, falling back to older APIs where necessary.  Roughly 0.5 MB of local storage is reliably available across all browsers, including IE6.  As the new “Offline Preferences” sample demonstrates, it’s trivial to use this API to take the extensive preference information exposed by a ListGrid (column order & size, frozen columns, custom formula columns, user-defined hilites, etc) and store it persistently.

The DataSource subsystem now has built-in offline capability as well.  With a single property – DataSource.useOfflineStorage – you can enable automatic offline caching of recently fetched data, so that if a user goes offline, they still have access to the last ~0.5MB of data that they viewed.  This works with any data provider (Java server framework, WSDL, REST, whatever).

  • HTML5 Charting (requires Power+Analytics)

Separately covered in more depth here, the new HTML5-based FacetChart is now the default charting engine.  This charting engine supports all browsers (including IE6 and Mobile Safari in iOS and Android) without the need for plugins.  New features since the last announcement include logarithmic scaling support and the ability to show interactive data points with click and hover events.

  • CubeGrid for Smart GWT (requires Power+Analytics)

At long last, the uber-powerful CubeGrid component is now available for Smart GWT.  In a nutshell, the CubeGrid is a high-end data analysis engine wrapped up as a single component that requires only a standard DataSource to function.  Check out the sample here.

  • new QuickStart Guide

Separately covered in more depth here, the QuickStart Guide provides a tutorial-style overview of the major subsystems of the product, including sample code, best practices, and approaches for extending and customizing components.  This is a must-read, particularly the extensive chapter on the Server Framework, which provides an eye-opening glimpse of the simplicity and power that are possible when both client and server-side concerns are addressed in a single architecture.

  • Enhanced support for widgets-in-grids

Support for components in grids has been enhanced in several ways – there’s more control over sizing and placement of components, performance is much better, and the feature now works in tandem with several other features that it was previously incompatible with (frozen columns, certain auto-sizing modes, etc).

  • Simplified server-side dynamic DataSources (Pro+)

Applications that offer advanced features like user-defined fields or user-defined validation rules need the ability to construct DataSources dynamically.  This has always been supported, but a new API DataSource.addDynamicDSGenerator() greatly simplifies the process: just register a generator and your dynamic DataSources behave just like statically defined DataSources, including automatic pooling.

  • User-defined Data Highlighting

Allows end users to define their own data highlighting rules, which are easily persisted or shared between users.  Covered in more depth here.

  • Hover Components

A new subsystem that makes it easy to create sophisticated hovers that use any UI components you want – grids, charts, etc.  Covered in more depth here.

  • 24 hour Calendar support

The Calendar component now supports 24 hour time formatting.

For further coverage of new features, including the Simplicity skin, see Sanjiv’s blog post on Smart GWT 2.4.

Download the new releases here.


New hover features: show related records or load detail fields

Now available in nightly builds for both SmartClient and Smart GWT: Advanced Hover components

Rather than just showing a string of HTML in a hover, new APIs make it easy to use any UI component as a hover, such as a grid, chart or even a layout combining several components.

To enable the feature, set showHoverComponents:true on a ListGrid. ListGrid.hoverMode can be set to one of the built-in modes, which include showing related records in a grid, or showing the full details of a record in a DetailViewer. To provide your own components, just override ListGrid.getCellHoverComponent() and return whatever you’d like.

The power of the new hover feature is shown below. In this example,  the extended detail of an item record is displayed when the  hover event is triggered. In SmartClient terms a DetailViewer has been opened in the hover component, showing the complete detail of the record.  This is particularly useful as a way of displaying additional data records in a DataSource without having to add new pages to your application, or introduce horizontal scrolling on your main Listgrid , which can be awkward when trying to get a full picture of  the data.

What is particularly flexible here is a hover component can auto-size to show the full values for fields that are clipped in the grid.

Further, as an example of retrieving multiple records below, you can see that the hover component has been amended to show customer order internal messaging. This is particularly useful for getting the immediate status of a customer,  without having to manage multiple pages or grids of information.

You can use detailDS to provide a DataSource to the automatically generated hover component, a ListGrid in this case.. The standard hover sizing properties can then be used to manage the size of the hover component.

The flexibility of this hover feature can be utilised in whatever manner best suits your needs, for example:

  • Displaying notes or discussion related to a record in a list (as in the above example)
  • Show CPU and Memory Usage as you hover over individual servers in a list
  • Show full employee or user details when hovering over a first/last name list
  • Show recent medical history in an appointment booking system as you hover over patient appointments

To learn more please look at the Feature Explorer examples and code or refer to the Reference documents in the latest SmartClient and SmartGWT nightly builds.

Just landed: User-defined data highlighting

Just landed in nightly builds for both SmartClient and Smart GWT: user-defined data highlighting.

A very common requirement in enterprise applications is highlighting important or unusual data values, that is, coloring them an eye-catching color, or coloring different ranges of values different colors.

However, in all but the most trivial applications, the rules for what should be highlighted are highly dynamic and context specific – you can’t just hardcode what is considered a high or low value when your application is portfolio management or threat analysis.

The ideal solution is to:

  • enable users to define their own highlighting rules on the fly
  • enable users to save and share highlighting rules

This is what the new data highlighting system does.   We’ve made it extremely simple – calling editHilites() provides a complete, pre-configured editing interface for hilites, starting with this screen:

This dataset involves countries of the world.  On the left, you have all the available fields that you can use to define highlighting rules – clicking on a field name adds a line to the right where you can pick an operator, a value, and a color to show.  With a few clicks, you could set up ranged highlighting to emphasize high GDP countries:

After hitting save to return to the grid, it looks like this:

Let’s say we wanted to do something more advanced – the “Add Advanced Rule” button leads to an interface where you can define truly arbitrary criteria on multiple fields.  In the screenshot below, we’re picking out countries with either a population over 1 Billion, or less than 5 Million square kilometers with a population over 100 million.

When we press “Save” in this dialog, we see all of our rules together.  A prose description is automatically generated for our complex filter criteria.

Finally, here’s what the grid looks like once we’ve saved these rules.  China and India qualify with their over 1 Billion populations; nations over 100 million with relatively smaller area include Indonesia, Japan and Mexico.

We got all of this behavior just by calling editHilites().  This works with any grid and any DataSource.  The criteria are applied client-side, so there’s no server-side code necessary to support this.  And this entire system also works with loading data on demand with no additional configuration – the highlights are simply applied to the data as it’s retrieved.

You can even highlight user-created formula fields – for example, you can create a GDP per capita field for the above dataset by dividing GDP by population, then highlight high and low values.

Highlights are also easy to persist and restore.  ListGrid.getHiliteState() gives you a String that contains the highlight rules in serialized form; just save this to a database column or similar, and you can re-apply it via ListGrid.setHiliteState() later.

To take a deeper look at the new highlighting system, see the samples under Grids -> Hiliting in the Showcase.

Smart GWT QuickStart Guide

Now available: the Smart GWT QuickStart Guide.

This is the first piece of documentation to read when learning about Smart GWT.  It is structured as a set of brief introductions to the major features of Smart GWT, with hands-on code samples you can run and experiment with, and links to deeper documentation to learn more.

This guide also introduces a huge amount of new material on the Smart GWT Server Framework and how it is intended to be used.  Even if you’ve already been working with Smart GWT Pro/EE for a while, you should read these sections – even some internal Isomorphic developers learned new things while reviewing the guide.

To give an idea of the scope of this document, here is a partial list of chapters and major sub-headings:

1.    Overview

2.    Installation

Starting a New Project

Adding Smart GWT to an Existing Project

4.   Visual Components

5.    Data Binding

Databound Components



Customized Data Binding

DataSource Operations

DataBound Component Operations

6.   Layout

Component Layout

Container Components

Form Layout

7.    Data Integration

DataSource Requests

Request and Response Transformation

Criteria, Paging, Sorting and Caching

Authentication and Authorization


8.   Smart GWT Server Framework

DataSource Generation

Server Request Flow

Direct Method Invocation

DMI Parameters

Adding DMI Business Logic

Returning Data

Queuing & Transactions

Queuing, RESTHandler, and SOAs

Operation Bindings

Declarative Security

Dynamic Expressions (Velocity)

SQL Templating

SQL Templating — Adding Fields

Custom DataSources

9.   Extending Smart GWT

New Components

New Form Controls

Switching Theme

Customizing Themes

10. Tips

Architecture Tips

11.  Evaluating Smart GWT

Evaluating Performance

Evaluating Interactive Performance

And here is a brief sample of some of the content:

Note: please use the QuickStart Guide with the latest nightly builds – some small enhancements were made that are utilized in some of the samples.

HTML5 Charts with mobile support

A new HTML5-based charting engine is now available as part of the Analytics module – download the Smart GWT or SmartClient Evaluation to try it out.

This charting engine is based on the Drawing module (which will also be available soon for direct use), which provides a cross-platform vector graphics engine that uses VML in IE6-8, and can use either SVG or <canvas> in other browsers.  It works in mobile WebKit as well (iPhone, iPad, Android).

Here’s a sample Radar chart:

The new charting engine is delivered as a single component FacetChart which supports multiple different chart types. Like the CubeGrid component, a FacetChart actually understands the data model it’s displaying, and can provide different visualizations of it on the fly.  In fact, there is a built-in context menu that allows end users to switch.

Picking ChartType -> Area leads to this:

Picking Unstack would have led to this:

Finally, picking Swap Facets would have led to:

This last option is obviously a poor visualization of the dataset – which is exactly the point.  If the user had started with this visualization, the context menu would have allowed them to navigate to any of the other visualizations shown above.

This is extremely key for dynamic, exploratory data analysis, a common use case among our customers. In several deployments, users can request a grid view of any dataset, customize it (show/hide/resize columns, set criteria), generate charts from the grid view, customize those as well, save all the settings and share it with other users.  It’s essentially ad-hoc reporting in a browser.

SmartClient makes it simple to build such an interface, customized to the type of reporting your users need to do, without all the baggage of a general-purpose reporting engine.  And because it’s based on SmartClient, adding entirely novel components is also simple (for example, molecular visualization).

But even if your application could not be called “exploratory data analysis”, why not let your users chart whatever they’d like to?  SmartClient makes it trivial to generate a chart from any subset of the data shown in a ListGrid (ListGrid.chartData()), so,  just add the feature to every grid via a context menu, and stop fielding enhancement requests for specific charts on specific screens.

Check out the online samples for Smart GWT and for SmartClient – note for the Advanced Cube samples, right click to chart the current cell by any two dimensions.  Also check out a further sample of standalone FacetChart usage in Smart GWT, posted to the forums here.

Finally, download the Smart GWT 2.4 or SmartClient 8.0 Evaluation to try it out and get started building beautiful charts!

Licensed nightly builds available

If you’ve purchased a license, you can now download licensed nightly builds.  Just log in to, then go here to download:

If you also have support, you can get support for nightly builds, but the process is slightly different – see the overview at the above URL.

Smart GWT EE 2.3 released

Go get it:

If you already have a 2.x license, you’ll get an email with download links by the end of the day.  The LGPL version will be available within a few days.

Note, we skipped version 2.2 since this release differs substantially from 2.2 LGPL.  If you were waiting to upgrade to 2.2, use 2.3.

In addition to new features described here, the following features have been added:

  • Google App Engine support & GAE/JPA DataSource

    A runnable sample project deployable to Google App Engine, demonstrating persistence to Google App Engine datastores via the JPA API, with no server code required.

  • New Validation samples

    Demonstrates using the new isUnique and hasRelatedRecords validators, as well as using validateOnExit to dynamically contact the server during data entry so that server-based validation logic can be run.

All of the following features are new relative to Smart GWT EE 2.1, but were already announced for SmartClient 8.0 beta a few days ago.  Included here for completeness.

  • Automatic transactions for SQL & Hibernate (Requires Power Edition or Enterprise Edition)

    Batches of updates, such as a multi-row drag or mass editing of grid rows, are now automatically grouped into a transaction when using either the SQL or Hibernate connectors. APIs have been added to be notified of transaction success or failure, manually initiate transactions and include or exclude specific requests.

  • True Excel (.xls) export

    Goes beyond CSV (comma-separated-values) export by including hilites, and delivering dates and numbers with type information so Excel can sort and filter properly. See com.smartgwt.client.types.ExportFormat for more details.

  • Client-driven export

    An alternative mode for exporting, this export preserves all client-side formatting. LGPL users note: upgrading to Pro gets you this export mode without having to rework any of your databinding code. See DataBoundComponent.exportClientData() for more details.

  • New ultralight ‘Simplicity’ skin

    The new “Simplicity” skin takes advantage of early CSS3 support in modern browsers like Firefox, Safari and Chrome to deliver look and feel similar to our classic skins (rounded elements, gradients, and other touches) while remaining almost image free. Appearance degrades gracefully in Internet Explorer to a more square / solid color appearance.

  • (Preliminary) Touch & Mobile support

    Support for iPhone, iPad and iPod touch devices and partial support for Android devices. No code changes required, and the full range of interactions is supported, including drag and drop and flick scrolling with momentum. SmartClient on mobile is a strong choice for long-session mobile & touch applications (like iWork for the iPad) and especially for offline mobile applications.

  • JPA DataSource

    Similar to the built-in SQL and Hibernate connectors, a connector has been added for JPA-based persistence. Runnable sample project included. Does not yet have a DataSource Wizard but support is planned. Supports simple Criteria for now. Support for Advanced Criteria will be available for Power edition in the future.

  • Annotation-based configuration in Hibernate

    Support for Hibernate configuration via annotations rather than explicit mapping files, and support for looking up Hibernate configuration via Spring. Supported both the DataSource Wizard and via declarations in .ds.xml files. See for more details.

  • RESTConnector

    A new built-in servlet exposes all of the operations defined in your .ds.xml files for access via REST – the same protocol as defined for the RestDataSource. This allows other client technologies and automated systems to re-use the same services you provide for your SmartClient front-end.

Advanced charting and cubes in a phone

Of course, you’d probably want to use the mobile-specific version.  But it’s nice to know the full version is there too.

The stacked area chart is dynamically generated inside mobile Safari using HTML5, based on a cube dataset being loaded on demand from the server.

The same charting component works for desktop browsers.  In IE, it uses VML for rendering and looks identical.

Page 6 of 8« First...«45678»