The Isomorphic Blog

Introducing the CubeGrid

What is a CubeGrid?

The CubeGrid is a high-end data analysis engine that wraps OLAP cube functionality into a single interactive grid component for fast access to multidimensional data and calculations. The CubeGrid enables you to view, analyze, and extract data using any standard data source from multiple perspectives.  They are typically used as front-ends for business intelligence, analytics and reporting applications to empower your teams to generate powerful reports, identify key patterns and trends, and plan ahead using real-time data.

The CubeGrid allow users to perform sophisticated analysis of very large data sets to rapidly answer multidimensional analytical (MDA) queries. Cubes allow the user to re-organize or re-orient the way information is viewed on the fly. Effortlessly slice, dice, drill in and out, roll-up, and pivot data according to your needs.

Components such as the CubeGrid are often called crosstabs for their cross-tabular display of data dimensions in nested rows and columns. They are also called pivot tables for their ability to ‘pivot’ dimensions between rows and columns to view a data cube from different perspectives. Please see below for an explanation of the terminology associated with our CubeGrid component, or read the documentation for more details.


The CubeGrid refers to the dimensions of a data cube as facets, the possible values in each facet as facet values, and the values within the data cube as data values or cell values. Equivalent terms that are commonly used in data warehousing or business intelligence systems include:

  • facet: dimension, attribute, feature
  • facet values: dimension member, attribute value, feature value
  • cell value: data value, metric value, measure

What is a facet / dimension?

By facet we mean an aspect of data that is independent of other aspects of data so that combining values from any two facets makes sense. For example:

  • Two facets that are independent are ‘quarter’ and ‘region’. It makes sense to combine any quarter and region. i.e. First quarter sales for the West region.
  • Two facets that are NOT independent are ‘city’ and ‘state’. It’s doesn’t make sense to combine any city and state. i.e. San Francisco and Florida. In this case, a tree facet [getIsTree] that combines ‘city’ and ‘state’ values would be appropriate.


  • Add and Remove facets on the fly.
  • Expand or Collapse within facets and across facets.
  • Drag-and-Drop re-arrangement and pivoting of facets.
  • Interactive Operations such as select, resize, reorder, minimize, maximize, or auto-fit of columns.
  • HTML5 Charts with mobile support for instant graphical analysis.
  • Frozen Headers constrain scrolling to one axis (row headers only scroll vertically, while column headers only scroll horizontally) so that values for the visible cells are always displayed.
  • Load-on-Demand system only loads visible data.
  • Works with Standard ISC data sources.

In today’s discussion we’ll cover adding facets, removing facets, moving facets, and HTML Charts. If you’d like to follow along, please see our Interactive Analytics example.

  • Add Facet: [underlying API is ‘addFacet’]. Facets can be added to the view, exposing more detail, by dragging the menu buttons directly onto the grid, or into the ‘Row Facets’ and ‘Column Facets’ listings.

How to Add a Facet: Before

How to Add a Facet: After

  • Remove Facet: [underlying API is ‘removeFacet’]. Facets can be removed from the view by using the menus to set a facet to a fixed value. For example, use the ‘Regions’ menu to show just data from the West: ‘Regions -> Fix Regions Value -> All Regions -> West’.

How to Remove a Facet: Before

How to Remove a Facet: After

  • Move Facet: [underlying API is ‘moveFacet’]. Facets can be moved or rearranged by:
    1. Drag-and-drop of a facet label directly on the grid,
    2. Toggling the contextual menus from [in columns] to [in rows] (or vice versa).
    3. Drag-and-drop of a ‘Row facet’ or ‘Column facet’ in the corresponding menus.  Please note that you can stack facets in any preferred alignment on either axis (i.e. in the example below I can move the ‘Region’ facet from rows to columns either above or below the ‘Time’ facet).

How to Move a Facet: Before

How to Move a Facet: After

  • HTML5 Charts can be instantly created with a right-click of any cell value, row header, or column header. This allows you to plot how each cell value may vary across any two facets (i.e. Sales of ‘Storage/Accessories’ by ‘Time’ and ‘Region’ in the example below).

How to Create an HTML5 Chart: Before

In addition, a right-click on the resulting chart enables further customization including pivoting, selection of chart type, fill, and stack.  For further details, please read our post on HTML5 Charts with mobile support.

How to Create an HTML5 Chart: After

Interactive Examples


Other topics such as data binding and load-on-demand will be covered in future posts. Stay tuned. Download the Smart GWT or SmartClient Evaluation to get started using our advanced analytics today.


The Isomorphic Team

Welcome to the Isomorphic Public Wiki

We are happy to announce the launch of our first public wiki located at:

Our new wiki is part of an ongoing effort to bring our developer community the best, most relevant content possible for creating applications on the SmartClient and Smart GWT platforms.

Here you’ll find developers from around the world writing about what they’re working on. You’ve got developers and product experts highlighting the latest and greatest. They’re here to collaborate and share best practices so you can get the most out of our products. We’ve also added several articles pointing to popular forums threads along with entirely new content.

This service has been created as a resource for you, the developers, so please let us know if you have suggestions or feedback in the Forums.  We’re just getting started with our community resources, but we’re excited about what we have and what’s in store.


The Isomorphic Team

How to Join

Commenting does not require sign-up, but if if you would like to contribute or edit content please create an account:

You can also click the Sign Up link on the wiki. To learn more about the wiki and how it works, please click the “Welcome Screen” link located at the top right hand corner of the page.


The new wiki will allow you to:

  • Create new pages that will be useful resources for all. Addition of new examples, documentation, setup procedures, and other vital information will get you noticed while helping out the entire community. Every user has a voice and everyone’s contribution is seen, heard, and can be commented upon.
  • Spread the word by adding links on the wiki to resources you find helpful. Post links when you find a thoughtful forum thread, blog post, or other items of interest so you and others can refer to it later.

When adding new content, please:

  • Show your respect for other contributors by carefully placing pages and links to your content according to who might be interested.
  • Visit the Forums when reporting bugs, making feature requests, or asking questions.

Grails Plugin for SmartGWT – Part 2

In the first post on this topic we looked at a standard Grails application and how to add the SmartGWT plugin to it.  In this post we’re going to explore some more features of the plugin.

Customising the scaffolded UI

If you run the sample app at the end of the last post and filter on Film you’ll notice that the ‘Language’ and ‘Original Language’ fields are empty:

In the domain class for Film these fields are an association to Language and by default these are fetched lazily so the data is not sent to the browser.  We can alter this behaviour and instruct the SmartClient DataSource to fetch an association by default.  To do this change the ‘static smartclient’  to the following:

  1. static smartclient = {
  2.     DataSource() {
  3.         fields {
  4.             language(fetchMode: ‘JOIN’)
  5.         }
  6.     }
  7. }

This will override the default Data Source definition and change the Hibernate fetchMode to ‘JOIN’, causing the field to be returned and displayed:

By default the scaffolded code will display the name property of an association (if one exists) but you can alter this by specifying your own formatCellValue function – in the Groovy smartclient definition or programmatically in your GWT module.

In our sample database all originalLanguage fields are NULL and we may want to remove them from being shown in the ListGrid field.  To do this we can update our SmartClient definition as follows:

  1. static smartclient = {
  2.     DataSource() {
  3.         fields {
  4.             language(fetchMode: ‘JOIN’)
  5.         }
  6.     }
  7.     ListGrid() {
  8.         fields {
  9.             originalLanguage(hidden: true)
  10.         }
  11.     }
  12. }

We may want to use formatCellValue to provide some formatting for the ListGrid.  The following example demonstrates this using the JS tag for rentalRate and using a String Method for replacementCost – both are functionally equivalent:

  1. static smartclient = {
  2.     DataSource() {
  3.         fields {
  4.             language(fetchMode: ‘JOIN’)
  5.         }
  6.     }
  7.     ListGrid() {
  8.         fields {
  9.             originalLanguage(hidden: true)
  10.             rentalRate {
  11.                 formatCellValue {
  12.                     JS(‘function(value) {return “$ ” + value}’)
  13.                 }
  14.             }
  15.             replacementCost {
  16.                 formatCellValue(‘”$ ” + value’)
  17.             }
  18.         }
  19.     }
  20. }

In this way the generation of SmartClient DataSource, ListGrid, DynamicForm and DetailViewer widgets can be customised.  You can add any attributes to these widgets that are understood by SmartClient according to the documentation.

Creating your own DataSources and UI widgets

It is also possible to generate additional DataSources and UI widgets by specifying an ID attribute (which will become the ID of the generated DataSource or UI widget):

  1. static smartclient = {
  2.     DataSource(ID: ‘MyCustomDataSource’) {
  3.         …
  4.     }
  5.     ListGrid(ID: ‘MyCustomListGrid’) {
  6.         …
  7.     }
  8. }

If you’d like to create types of widgets other than ListGrids, DynamicForms and DetailViewers or don’t want widgets to have the default scaffold properties then create them in the /smartclient/ui folder.  You can place regular Component Schema XML files (as long as the file extension is .xml) in this directory or Groovy files (files ending in .groovy).  Groovy files will be converted to XML and XML files will be copied to web-app/shared/ui during Grails packaging.  The simplest way to get started with the Groovy syntax is to use the generated widgets as a starting point.

Creating GWT modules and pages

The GWT plugin includes scripts to allow you to create modules and pages.  This plugin extends this functionality to allow you to create modules and pages that meet the SmartGWT requirements:

  • grails create-smartgwt-module <PACKAGE_NAME>.<MODULE_NAME>
  • grails create-smartgwt-page <GSP_FILE_NAME> <PACKAGE_NAME>.<MODULE_NAME>

Note on DataSource and UI generation

If you modify your Domain Classes while your application is running then the plugin will automatically detect and re-generate any DataSource and UI widgets defined in them.  If your application is not running when you make changes then you can re-generate them using the following scripts:

  • grails generate-data-source <Optional, whitespace separated list of Domain Class names>
  • grails generate-ui <Optional, whitespace separated list of Domain Class names>

The domain class names are case sensitive, if no parameters are provided then all will be generated.

If you expose a new Domain Class with a ‘static smartclient’ property after generating scaffolding you will need to run grails generate-scaffolding again.


The plugin allows you to create UI widgets declaratively in Groovy DSL and then re-use those widgets in your application.  The idea is to give developers the ability to rapidly create, customise and manage basic widgets.

This plugin is intended to be used with the GWT module but it is also possible to use SmartClient from regular (non-GWT) pages – this will be explored in the next post.

SmartGWT 2.5 / SmartClient 8.1 Released

Smart GWT 2.5 and SmartClient 8.1 have been released!  Download the new releases here.

  • New Chart Modes: Pie, Doughnut, Bar (with Power + Analytics)

The FacetChart has picked up several new modes that now make it a superset of our existing FusionChart support.  Like the existing charting modes, users can swap between the different chart types on the fly, and the Pie and Doughnut modes supports two different ways of displaing multi-series data.  Below is an “Unstacked” multi-series Doughnut chart:

And this is a “Stacked” multi-series Doughnut chart:

Check out the samples and be sure to right-click to see all the different ways that a single chart component can visualize a single dataset – present just one FacetChart to an end user and you’ve given them a dozen different ways to visualize their data with no additional effort.

  • Real-Time Messaging for SmartGWT (with Power + Messaging)

Our Messaging module enables real-time delivery of data for use cases such as trading desks,  monitoring systems, and defense applications.

The Messaging Module has been available for SmartClient for several years, and has also been used in several SmartGWT applications built for specific customers, but is now available as a GA feature for SmartGWT, with samples showing a grid and a chart receiving real-time streaming updates from the server.   Click through to the sample to see the chart below slide left as new updates come in – as with any chart you can right-click for a different real-time visualization (radar and pie modes are mesmerizing).

Messaging Chart sample

  • Chart Gradients & Shadows (Power + Analytics)

Note the details on the charts above – gradients, shadows, 3d edge effects – the FacetChart will now use linear and radial gradients for various chart types, automatically generating attractive gradients from the base colors you specify.  They even work on IE6-IE8.

  • JPA 2.0 support,  Auto-derivation of DataSources

In addition to the existing JPA 1.0 connector, we now have a JPA2DataSource supporting the JPA 2.0 API.    Both JPA connectors also support automatic derivation of DataSource fields from your JPA annotations or persistence declarations, for a completely declarative connection from any data-aware component to any JPA entity.  Check out this sample to see how easy it is to connect to JPA.

  • JPA & Hibernate: Automatic Relation Update Handling

JPA and Hibernate DataSources will now automatically persist changes to related entities, including cases where the field(s) that store IDs of related entities are not explicitly declared.  Handling such updates normally requires several different JPA calls which are different for each entity – the JPA & Hibernate connectors now handle this transparently and automatically for any JPA or Hibernate entity.

Check out this extraordinarily simple sample of a master-detail editing screen – all declarative code, just the JPA beans and DataSources which are auto-derived from them.

  • JPA AdvancedCriteria & Automatic Transactions (Power Edition and above only)

Both JPA connectors have also been upgraded with support for automatic, codeless execution of AdvancedCriteria submitted by UI components, as well as automatic transaction support (Power and above only).  This sample shows a FilterBuilder connected to a JPA entity, allowing complex search criteria to be defined for any field.

  • Expression Filtering

You can now type simple filter expressions directly into the query-by-example interface of the ListGrid’s built-in FilterEditor.

This provides a convenient middle ground between the simple query-by-example interface and the uber-powerful FilterBuilder interface: novice users can just type what they want to see, but power users are free to specify advanced filter criteria in the same interface, without ever leaving the grid view.

All of the common AdvancedCriteria operators have shortcut strings, and simple expressions (this or that, this and that) are also supported.  The criteria shown above mean: Country name does not contain and “i”, Capital starting with a letter between A and F, and Population under a million or over 100 million.

Since this new interface is just causing “fetch” requests with ordinary AdvancedCriteria, it’s supported by our built-in SQL, JPA & Hibernate DataSources (in Power Edition or above) and by any existing custom implementation that supports AdvancedCriteria.

  • Multi-field ComboBox & SelectItem filtering

The new ComboBoxItem.filterFields property allows you to simply declare that text typed into a ComboBox should be used as search criteria for multiple fields of a DataSource – everything else is automatic.

A similar enhancement for SelectItem allows the ListGrid query-by-example interface to be used within the drop-down list.

Combine the interface on the right with the Expression Filter support and users can do advanced searches right inside a SelectItem.

Both enhancements avoid the awkwardness of a modal pop-up dialog for choosing related entities, enabling users to search without leaving the context of the form, with all of the other values in the form still visible during the search.

  • AdvancedCriteria helper classes (Pro+)

Server-side helper classes have been added for working with AdvancedCriteria, so you no longer have to deal directly with the Java Collections-based representation of criteria when  writing server-side code to create or manipulate AdvancedCriteria.  For details, see the server-side APIs dsRequest.getAdvancedCriteria() and dsRequest.getCriteriaValue().

  • New Summary Modes

New modes have been added to the extremely popular summary display mode of grids.  If you have more than one summary function you want to show, such as both average and total, or both first and last, just provide a list of summary functions for the field.  The second (or third, etc) summary value will be shown as additional summary lines, as shown below.

Or, perhaps you want to get more compact instead.  Summary information can now be shown in the expand/collapse row for the group.  This makes the summary information visible even when the group is collapsed.

  • Formatted SelectItems

New samples and documentation have been added to make it more obvious how to achieve effects like those shown below: on the left, a select item shows a formatted value based on multiple fields from the related record.  On the right, the drop-down list itself shows a formatted value derived from multiple fields of the related record.

Both effects can be combined if desired, both work with load on demand, and as usual, our SelectItem separately tracks the actual stored value so that the ID of the related record is what’s really saved.

  • Internet Explorer performance improvements

We’ve made some big strides in the ongoing quest to help IE6 through IE8 keep up with modern browsers.  You’ll notice speedier rendering in grids, especially those with lots of columns.  Across all browsers, you’ll notice less media is required as well.

  • Simplified CanvasItem value management & samples

The extremely powerful CanvasItem allows you to take any interface you can build in Smart GWT and use it to display and edit values in a form.  A new, simplified interface for interacting with the form now makes it much simpler to build a re-usable CanvasItem-based editor, and samples have been added to illustrate how to use a CanvasItem to create an interface for editing related records.

In one of the two in-depth samples, an editable ListGrid is wrapped as a custom subclass of CanvasItem, and allows sub-records to be edited right in the same DynamicForm.  The CanvasItem is reusable in any DynamicForm, for editing any kind of nested data that has a DataSource.

  • Accessibility / ARIA enhancements

SmartClient and Smart GWT have long had support for the ARIA standard, which allows screen reader software to correctly read advanced AJAX interfaces.  In this release, we’ve taken advantage of new features in the ARIA specification to make our components read even better.  We’ve also added support for the NVDA screen reader, which is very popular among developers because it is both free and has an option to turn off the voice synthesizer and display the text that would be read instead.

This release is the last 2.x release for Smart GWT (other than a 2.5.1 bugfix release).  The next major release, Smart GWT 3.0 / SmartClient 8.2, is already well underway, and a beta with several major new features will be announced shortly (including an HTML5 vector drawing library and more CSS3 skins).

If you just bought a Smart GWT 2.x license and are now worried about what you might be missing out on in 3.0, never fear, our upgrade pricing policy is based on how recently you bought – you’ll be able to upgrade and pick up the entire 3.x series of releases for a very reasonable price.

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.

Page 5 of 8« First...«34567»...Last »